cleanup misc view

src/App.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <div
-  class="flex w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden bg-white text-gray-900 dark:bg-gray-900 dark:text-white"
+  class="flex w-full flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white text-gray-900 dark:bg-gray-900 dark:text-white"
 >
   {#if $activeUser}
     <TopNav />

src/components/FileCard.svelte

@@ -5,6 +5,7 @@
   import { servers } from "../services/servers";
   import { DotsHorizontalSolid } from "flowbite-svelte-icons";
   import { createEventDispatcher } from "svelte";
+  import { getBlobURL } from "../helpers/blob";
 
   export let file: TreeFile;
   export let selected = false;
@@ -15,12 +16,10 @@
     ? "border border-primary-200 dark:border-primary-700"
     : "border border-gray-200 dark:border-gray-700";
 
-  $: link = $servers[0]
-    ? new URL(file.hash + (file.mimeType ? "." + mime.getExtension(file.mimeType) : ""), $servers[0]).toString()
-    : undefined;
+  $: link = getBlobURL(file, $servers[0]);
 
-  $: extension = file.mimeType ? mime.getExtension(file.mimeType) : "bin";
-  $: preview = file.mimeType?.startsWith("image/") && file.size < 1024 * 100;
+  $: extension = file.type ? mime.getExtension(file.type) : "bin";
+  $: preview = file.type?.startsWith("image/") && file.size < 1024 * 100;
 
   function toggleSelect() {
     if (selected) dispatch("unselect", file.name);

src/components/SpeedDialMenu.svelte

@@ -14,7 +14,7 @@
   let newDriveModal = false;
 
   const createdDrive = (event: CustomEvent<NDKEvent>) => {
-    location.hash = "#/drive/" + event.detail.encode;
+    location.hash = "#/drive/" + event.detail.encode();
   };
 </script>
 

src/components/UploadFileModal.svelte

@@ -56,7 +56,7 @@
     const draft = cloneEvent(selectedDrive);
     const tree = getFileTree(draft);
 
-    setFile(tree, [...parsePath(path), name], { hash: blob.sha256, size: blob.size, mimeType: blob.type });
+    setFile(tree, [...parsePath(path), name], { sha256: blob.sha256, size: blob.size, type: blob.type });
 
     setDriveFileTree(draft, tree);
 

src/helpers/blob.ts

@@ -0,0 +1,10 @@
+import type { Blob } from "blossom-client";
+import { servers } from "../services/servers";
+import { get } from "svelte/store";
+import mime from "mime";
+
+export function getBlobURL(blob: { sha256: string; type?: string }, server = get(servers)[0]) {
+  return server
+    ? new URL(blob.sha256 + (blob.type ? "." + mime.getExtension(blob.type) : ""), server).toString()
+    : undefined;
+}

src/helpers/number.ts

@@ -0,0 +1,22 @@
+// Copied from https://git.v0l.io/Kieran/dtan/src/branch/main/src/const.ts#L220
+export const kiB = Math.pow(1024, 1);
+export const MiB = Math.pow(1024, 2);
+export const GiB = Math.pow(1024, 3);
+export const TiB = Math.pow(1024, 4);
+export const PiB = Math.pow(1024, 5);
+export const EiB = Math.pow(1024, 6);
+export const ZiB = Math.pow(1024, 7);
+export const YiB = Math.pow(1024, 8);
+
+export function formatBytes(b: number, f?: number) {
+  f ??= 2;
+  if (b >= YiB) return (b / YiB).toFixed(f) + " YiB";
+  if (b >= ZiB) return (b / ZiB).toFixed(f) + " ZiB";
+  if (b >= EiB) return (b / EiB).toFixed(f) + " EiB";
+  if (b >= PiB) return (b / PiB).toFixed(f) + " PiB";
+  if (b >= TiB) return (b / TiB).toFixed(f) + " TiB";
+  if (b >= GiB) return (b / GiB).toFixed(f) + " GiB";
+  if (b >= MiB) return (b / MiB).toFixed(f) + " MiB";
+  if (b >= kiB) return (b / kiB).toFixed(f) + " KiB";
+  return b.toFixed(f) + " B";
+}

src/helpers/tree.ts

@@ -3,9 +3,9 @@ import type { NDKEvent, NDKTag } from "@nostr-dev-kit/ndk";
 export type TreeFile = {
   t: "file";
   name: string;
-  hash: string;
+  sha256: string;
   size: number;
-  mimeType?: string;
+  type?: string;
 };
 export interface TreeFolder {
   [x: string]: TreeFile | TreeFolder;
@@ -71,7 +71,7 @@ export function getFileTree(drive: NDKEvent) {
 
       if (hash && pathname && size) {
         const path = parsePath(pathname);
-        setFile(tree, path, { size, hash, mimeType });
+        setFile(tree, path, { size, sha256: hash, type: mimeType });
       }
     }
     if (tag[0] === "folder") getFolder(tree, parsePath(tag[1]), true);
@@ -82,8 +82,8 @@ export function getFileTree(drive: NDKEvent) {
 export function getTreeTags(entry: TreeFolder | TreeFile, path: string[] = []): NDKTag[] {
   if (entry.t === "file") {
     const file = entry as TreeFile;
-    const base: NDKTag = ["x", file.hash, "/" + path.join("/"), String(entry.size)];
-    if (file.mimeType) base.push(file.mimeType);
+    const base: NDKTag = ["x", file.sha256, "/" + path.join("/"), String(entry.size)];
+    if (file.type) base.push(file.type);
     return [base];
   } else if (Object.keys(entry).length === 0) {
     if (path.length > 0) return [["folder", "/" + path.join("/")]];
@@ -107,7 +107,7 @@ export function getFilePaths(dir: TreeFolder, hash: string, path: string[] = [])
   const paths: string[][] = [];
   for (const [name, entry] of Object.entries(dir)) {
     if ((entry.t = "file")) {
-      if (entry.hash === hash) paths.push([...path, name]);
+      if (entry.sha256 === hash) paths.push([...path, name]);
     } else {
       paths.push(...getFilePaths(dir[name] as TreeFolder, hash, [...path, name]));
     }

src/pages/Drive.svelte

@@ -155,9 +155,9 @@
             let descriptor = await uploadFile(file);
             if (descriptor) {
               setFile(newTree, getPath(entry), {
-                hash: descriptor.sha256,
+                sha256: descriptor.sha256,
                 size: descriptor.size,
-                mimeType: descriptor.type,
+                type: descriptor.type,
               });
             }
           } catch (e) {
@@ -179,9 +179,9 @@
           let descriptor = await uploadFile(file);
           if (descriptor) {
             setFile(newTree, folder ? [...path, folder, file.name] : [...path, file.name], {
-              hash: descriptor.sha256,
+              sha256: descriptor.sha256,
               size: descriptor.size,
-              mimeType: descriptor.type,
+              type: descriptor.type,
             });
           }
         } catch (e) {

src/pages/Misc.svelte

@@ -1,24 +1,60 @@
 <script lang="ts">
-  import { Card } from "flowbite-svelte";
-  import { blobs, type Blob } from "../services/blobs";
+  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from "flowbite-svelte";
+  import { blobs } from "../services/blobs";
+  import { drives } from "../services/drives";
+  import { getDriveName } from "../helpers/drives";
+  import type { NDKEvent } from "@nostr-dev-kit/ndk";
+  import { formatBytes } from "../helpers/number";
+  import dayjs from "dayjs";
+  import { getBlobURL } from "../helpers/blob";
+  import type { Blob } from "blossom-client";
 
   let miscBlobs: Blob[] = [];
   $: {
-    miscBlobs = $blobs.map((s) => s.blobs).flat();
+    miscBlobs = $blobs
+      .map((s) => s.blobs)
+      .flat()
+      .sort((a, b) => b.created - a.created);
+  }
+
+  function getBlobDrives(blob: Blob): NDKEvent[] {
+    return Object.values($drives).filter((d) => d.tags.some((t) => t[0] === "x" && t[1] === blob.sha256));
   }
 </script>
 
-<main class="flex flex-wrap gap-4 p-4">
-  {#each miscBlobs as blob}
-    <Card>
-      <h5 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">
-        {blob.mimeType}
-        <!-- {getFileName(file)} -->
-      </h5>
-      <p class="truncate text-xs">{blob.created}</p>
-      <p class="font-normal leading-tight text-gray-700 dark:text-gray-400">
-        {blob.sha256}
-      </p>
-    </Card>
-  {/each}
-</main>
+<Table hoverable={true}>
+  <TableHead>
+    <TableHeadCell>ID</TableHeadCell>
+    <TableHeadCell>Type</TableHeadCell>
+    <TableHeadCell>Size</TableHeadCell>
+    <TableHeadCell>Created</TableHeadCell>
+    <TableHeadCell>Drives</TableHeadCell>
+    <TableHeadCell>
+      <span class="sr-only">Edit</span>
+    </TableHeadCell>
+  </TableHead>
+  <TableBody>
+    {#each miscBlobs as blob}
+      <TableBodyRow>
+        <TableBodyCell>
+          <a href={getBlobURL(blob)} target="_blank" class="hover:underline">{blob.sha256}</a>
+        </TableBodyCell>
+        <TableBodyCell>{blob.type}</TableBodyCell>
+        <TableBodyCell>{formatBytes(blob.size)}</TableBodyCell>
+        <TableBodyCell>{dayjs.unix(blob.created).format("ll")}</TableBodyCell>
+        <TableBodyCell>
+          {#each getBlobDrives(blob) as drive, i (drive.id)}
+            {#if i !== 0}<span>, </span>{/if}
+            <a href="#/drive/{drive.encode()}" class="text-primary-200 hover:underline">{getDriveName(drive)}</a>
+          {/each}
+        </TableBodyCell>
+        <TableBodyCell>
+          <div class="flex gap-4">
+            <a href={getBlobURL(blob)} target="_blank" class="font-medium text-blue-500 hover:underline">Open</a>
+            <a href="/tables" class="font-medium text-red-600 hover:underline dark:text-red-500">Delete</a>
+          </div>
+        </TableBodyCell>
+      </TableBodyRow>
+    {/each}
+  </TableBody>
+</Table>

src/services/blobs.ts

@@ -1,13 +1,8 @@
 import { get, writable } from "svelte/store";
 import { activeUser } from "./ndk";
 import { servers } from "./servers";
+import type { Blob } from "blossom-client";
 
-export type Blob = {
-  sha256: string;
-  type?: string;
-  created: number;
-  size: number;
-};
 type ServerList = {
   server: string;
   blobs: Blob[];

vite.config.ts

@@ -5,7 +5,10 @@ import { VitePWA } from "vite-plugin-pwa";
 // https://vitejs.dev/config/
 export default defineConfig({
   base: process.env.VITE_BASE ?? "/",
-  build: { sourcemap: true },
+  build: {
+    target: ["chrome89", "edge89", "firefox89", "safari15"],
+    sourcemap: true,
+  },
   plugins: [
     svelte(),
     VitePWA({