add file details modal

hzrd149 · Feb 23, 2024 · 607155d · 607155d
1 parent a4eac4d
commit 607155d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 0 deletions.
diff --git a/src/components/FileCard.svelte b/src/components/FileCard.svelte
@@ -61,6 +61,12 @@
     <DotsHorizontalSolid />
   </Button>
   <Dropdown>
+    <DropdownItem
+      on:click={(e) => {
+        e.preventDefault();
+        dispatch("details", file);
+      }}>Details</DropdownItem
+    >
     <DropdownItem
       on:click={(e) => {
         e.preventDefault();

diff --git a/src/components/FileDetailsModal.svelte b/src/components/FileDetailsModal.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { Button, Modal } from "flowbite-svelte";
+  import type { TreeFile } from "../helpers/tree";
+  import { formatBytes } from "../helpers/number";
+  import { getBlobURL } from "../helpers/blob";
+  import { ndk } from "../services/ndk";
+  import { onDestroy } from "svelte";
+  import { getDriveName } from "../helpers/drives";
+  import { Name } from "@nostr-dev-kit/ndk-svelte-components";
+  export let open = false;
+  export let file: TreeFile;
+
+  const drives = ndk.storeSubscribe({ kinds: [30563 as number], "#x": [file.sha256] });
+  const files = ndk.storeSubscribe({ kinds: [1063 as number], "#x": [file.sha256] });
+
+  onDestroy(() => {
+    drives.unsubscribe();
+    files.unsubscribe();
+  });
+</script>
+
+<Modal title={file.name} bind:open autoclose outsideclose size="lg">
+  <p>
+    <span class="font-bold">sha256</span>: <code>{file.sha256}</code>
+    <br />
+    <span class="font-bold">Size</span>: {formatBytes(file.size)}
+    <br />
+    <span class="font-bold">Type</span>: {file.type || "Unknown"}
+    <br />
+    <span class="font-bold">URL</span>:
+    <a href={getBlobURL(file)} target="_blank" class="hover:underline">{getBlobURL(file)}</a>
+  </p>
+
+  {#if $drives.length > 0}
+    <div>
+      <h2 class="text-xl font-bold">Drives:</h2>
+      <ul>
+        {#each $drives as drive}
+          <li><span class="font-bold">{getDriveName(drive)}</span> by <Name user={drive.author} /></li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+  {#if $files.length > 0}
+    <div>
+      <h2 class="text-xl font-bold">Published Files:</h2>
+      <ul>
+        {#each $files as file}
+          <li><a href="https://nostr.com">{file.id.substring(0, 8)}</a> by <Name user={file.author} /></li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
+</Modal>
diff --git a/src/pages/Drive.svelte b/src/pages/Drive.svelte
@@ -29,6 +29,7 @@
   import { signEventTemplate } from "../services/ndk";
   import { servers } from "../services/servers";
   import { readFileSystemFile, getAllFileEntriesInTree, readFileSystemDirectory } from "../helpers/file-system";
+  import BlobDetailsModal from "../components/FileDetailsModal.svelte";
 
   export let params: Record<string, string | undefined> = {};
   const naddr = params["naddr"];
@@ -39,6 +40,8 @@
   $: tree = drive ? getFileTree(drive) : {};
   $: subTree = getFolder(tree, parsePath(parsed.get("path")));
 
+  let detailsModal = false;
+  let detailsFile: TreeFile | null = null;
   let confirmDelete = false;
   let selected: string[] = [];
   function toggleSelect(e: CustomEvent<string>) {
@@ -248,6 +251,10 @@
             selected = [e.detail];
             confirmDelete = true;
           }}
+          on:details={(e) => {
+            detailsFile = e.detail;
+            detailsModal = true;
+          }}
         />
       {/each}
     </div>
@@ -262,3 +269,7 @@
 {#if renameModal}
   <RenameModal bind:open={renameModal} on:submit={renameEntry} name={selected[0]} />
 {/if}
+
+{#if detailsModal && detailsFile}
+  <BlobDetailsModal bind:open={detailsModal} file={detailsFile} />
+{/if}