feat: file hash calc and components list

src/crypto/composables.ts

@@ -1,2 +1,2 @@
-export * from "./useCrypto";
-export * from "./useCert";
+export * from "./useCrypto"
+export * from "./useCert"

src/file/FileHash.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { reactive } from 'vue'
+import { hashText } from '../crypto/useCrypto';
+
+const files = reactive({})
+
+function calculateHash(ev) {
+  const uploads = ev?.target?.files
+  for (const file of uploads) {
+    console.log(file)
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = async () => {
+      // Use a regex to remove data url part
+      const base64String = reader.result
+      const hash = await hashText(base64String)
+      files[hash] = { name: file.name }
+    };
+  }
+}
+</script>
+
+<template lang='pug'>
+.flex.flex-col.gap-2.p-2
+  label.p-2.flex.flex-wrap.gap-2.bg-light-100.dark-bg-dark-400.rounded.cursor-pointer.max-w-90.overflow-scroll
+    .font-bold Check file hash
+    .flex-1
+    input(
+      type="file"
+      @change="calculateHash($event)"
+      )
+  .p-2.flex.flex-col.break-all.bg-light-100.dark-bg-dark-400.shadow(v-for="(file,hash) in files" :key="hash")
+    .p-0.text-xs.bg-light-400.dark-bg-dark-800.select-none.opacity-80 {{ file.name }} 
+    .font-mono.p-0.text-lg {{ hash }}
+
+</template>

src/file/TorrentUpload.vue

@@ -27,13 +27,12 @@ const clip = useClipboard({ source: downloadUrl })
 
 const { share, isSupported: shareSupported } = useShare()
 
-
 </script>
 
 <template lang='pug'>
 .flex.flex-col.gap-4.p-4
   label.p-2.flex.flex-wrap.gap-2.bg-light-100.dark-bg-dark-400.rounded.cursor-pointer
-    .font-bold Upload a file
+    .font-bold Share a file via torrent
     .flex-1
     input(
       type="file"

src/file/components.ts

@@ -3,4 +3,5 @@ import { defineAsyncComponent } from 'vue'
 export const TorrentUpload = defineAsyncComponent(() => import("./TorrentUpload.vue"));
 export const TorrentDownload = defineAsyncComponent(() => import("./TorrentDownload.vue"));
 
-export const FileCard = defineAsyncComponent(() => import("./FileCard.vue"));
+export const FileCard = defineAsyncComponent(() => import("./FileCard.vue"));
+export const FileHash = defineAsyncComponent(() => import("./FileHash.vue"));

src/file/file.vue

@@ -1,9 +1,12 @@
 <script setup>
-import { TorrentUpload } from '../components'
+
+import FileHash from './FileHash.vue';
+import TorrentUpload from './TorrentUpload.vue';
 </script>
 
 <template lang="pug">
 .flex.flex-col
+  file-hash
   torrent-upload
   router-view(v-slot="{ Component }")
     transition(

src/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { currentRoom, rootRoom } from './composables';
 
-import { RoomPage } from './components'
+import { RoomPage, UiComponents } from './components'
 </script>
 
 <template lang="pug">
@@ -10,7 +10,7 @@ import { RoomPage } from './components'
     :key="currentRoom.pub" 
     @browse="$router.push(`/${$event}/`)"
     )
-
+  UiComponents.text-xs.p-2.opacity-60.bg-light-900.dark-bg-dark-100
 </template>
 
 //TODO - ECOCOIN

src/ui/UiComponents.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { components } from '#components'
+
+const emit = defineEmits(['component'])
+</script>
+
+<template lang='pug'>
+.flex.flex-wrap
+  .cursor-pointer.p-1.opacity-60.hover-opacity-100(
+    v-for="(component, name ) in components"
+    @click="$emit('component', name)"
+    ) {{ name }}
+</template>

src/ui/components.ts

@@ -6,3 +6,4 @@ export const UiLink = defineAsyncComponent(() => import('./UiLink.vue'))
 export const UiModal = defineAsyncComponent(() => import('./UiModal.vue'))
 export const UiPanel = defineAsyncComponent(() => import('./UiPanel.vue'))
 export const UiDark = defineAsyncComponent(() => import('./UiDark.vue'))
+export const UiComponents = defineAsyncComponent(() => import('./UiComponents.vue'))