feat: improve file list

ui_src/src/components/profile.tsx

@@ -2,19 +2,32 @@ import { hexToBech32 } from "@snort/shared";
 import { NostrLink } from "@snort/system";
 import { useUserProfile } from "@snort/system-react";
 
-export default function Profile({ link }: { link: NostrLink }) {
+export default function Profile({
+  link,
+  size,
+  showName,
+}: {
+  link: NostrLink;
+  size?: number;
+  showName?: boolean;
+}) {
   const profile = useUserProfile(link.id);
+  const s = size ?? 40;
   return (
     <div className="flex gap-2 items-center">
       <img
         src={profile?.picture}
-        className="rounded-full w-12 h-12 object-fit object-center"
+        width={s}
+        height={s}
+        className="rounded-full object-fit object-center"
       />
-      <div>
-        {profile?.display_name ??
-          profile?.name ??
-          hexToBech32("npub", link.id).slice(0, 12)}
-      </div>
+      {(showName ?? true) && (
+        <div>
+          {profile?.display_name ??
+            profile?.name ??
+            hexToBech32("npub", link.id).slice(0, 12)}
+        </div>
+      )}
     </div>
   );
 }

ui_src/src/index.css

@@ -8,5 +8,5 @@ body {
 }
 
 hr {
-  @apply border-neutral-500
-}
+  @apply border-neutral-500;
+}

ui_src/src/upload/admin.ts

@@ -2,7 +2,11 @@ import { base64 } from "@scure/base";
 import { throwIfOffline } from "@snort/shared";
 import { EventKind, EventPublisher, NostrEvent } from "@snort/system";
 
-export interface AdminSelf { is_admin: boolean, file_count: number, total_size: number }
+export interface AdminSelf {
+  is_admin: boolean;
+  file_count: number;
+  total_size: number;
+}
 
 export class Route96 {
   constructor(
@@ -14,8 +18,7 @@ export class Route96 {
 
   async getSelf() {
     const rsp = await this.#req("admin/self", "GET");
-    const data =
-      await this.#handleResponse<AdminResponse<AdminSelf>>(rsp);
+    const data = await this.#handleResponse<AdminResponse<AdminSelf>>(rsp);
     return data;
   }
 

ui_src/src/upload/blossom.ts

@@ -51,9 +51,16 @@ export class Blossom {
   }
 
   async mirror(url: string) {
-    const rsp = await this.#req("mirror", "PUT", "mirror", JSON.stringify({ url }), undefined, {
-      "content-type": "application/json"
-    });
+    const rsp = await this.#req(
+      "mirror",
+      "PUT",
+      "mirror",
+      JSON.stringify({ url }),
+      undefined,
+      {
+        "content-type": "application/json",
+      },
+    );
     if (rsp.ok) {
       return (await rsp.json()) as BlobDescriptor;
     } else {

ui_src/src/views/files.tsx

@@ -1,7 +1,8 @@
-import { NostrEvent } from "@snort/system";
+import { NostrEvent, NostrLink } from "@snort/system";
 import { useState } from "react";
 import { FormatBytes } from "../const";
 import classNames from "classnames";
+import Profile from "../components/profile";
 
 interface FileInfo {
   id: string;
@@ -9,6 +10,7 @@ interface FileInfo {
   name?: string;
   type?: string;
   size?: number;
+  uploader?: Array<string>;
 }
 
 export default function FileList({
@@ -30,9 +32,17 @@ export default function FileList({
   }
 
   function renderInner(f: FileInfo) {
-    if (f.type?.startsWith("image/") || f.type?.startsWith("video/") || !f.type) {
+    if (
+      f.type?.startsWith("image/") ||
+      f.type?.startsWith("video/") ||
+      !f.type
+    ) {
       return (
-        <img src={f.url.replace(`/${f.id}`, `/thumb/${f.id}`)} className="w-full h-full object-contain object-center" loading="lazy" />
+        <img
+          src={f.url.replace(`/${f.id}`, `/thumb/${f.id}`)}
+          className="w-full h-full object-contain object-center"
+          loading="lazy"
+        />
       );
     }
   }
@@ -48,6 +58,7 @@ export default function FileList({
         name: f.content,
         type: f.tags.find((a) => a[0] === "m")?.at(1),
         size: Number(f.tags.find((a) => a[0] === "size")?.at(1)),
+        uploader: "uploader" in f ? (f.uploader as Array<string>) : undefined,
       };
     } else {
       return {
@@ -68,12 +79,14 @@ export default function FileList({
       ret.push(
         <div
           onClick={() => onPage?.(x)}
-          className={classNames("bg-neutral-700 hover:bg-neutral-600 min-w-8 text-center cursor-pointer font-bold",
+          className={classNames(
+            "bg-neutral-700 hover:bg-neutral-600 min-w-8 text-center cursor-pointer font-bold",
             {
               "rounded-l-md": x === start,
-              "rounded-r-md": (x + 1) === n,
+              "rounded-r-md": x + 1 === n,
               "bg-neutral-400": page === x,
-            })}
+            },
+          )}
         >
           {x + 1}
         </div>,
@@ -96,24 +109,39 @@ export default function FileList({
             >
               <div className="absolute flex flex-col items-center justify-center w-full h-full text-wrap text-sm break-all text-center opacity-0 hover:opacity-100 hover:bg-black/80">
                 <div>
-                  {(info.name?.length ?? 0) === 0 ? "Untitled" : info.name}
+                  {(info.name?.length ?? 0) === 0
+                    ? "Untitled"
+                    : info.name!.length > 20
+                      ? `${info.name?.substring(0, 10)}...${info.name?.substring(info.name.length - 10)}`
+                      : info.name}
                 </div>
                 <div>
                   {info.size && !isNaN(info.size)
                     ? FormatBytes(info.size, 2)
                     : ""}
                 </div>
+                <div>{info.type}</div>
                 <div className="flex gap-2">
                   <a href={info.url} className="underline" target="_blank">
                     Link
                   </a>
-                  {onDelete && <a href="#" onClick={e => {
-                    e.preventDefault();
-                    onDelete?.(info.id)
-                  }} className="underline">
-                    Delete
-                  </a>}
+                  {onDelete && (
+                    <a
+                      href="#"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        onDelete?.(info.id);
+                      }}
+                      className="underline"
+                    >
+                      Delete
+                    </a>
+                  )}
                 </div>
+                {info.uploader &&
+                  info.uploader.map((a) => (
+                    <Profile link={NostrLink.publicKey(a)} size={20} />
+                  ))}
               </div>
               {renderInner(info)}
             </div>
@@ -128,6 +156,9 @@ export default function FileList({
       <table className="table-auto text-sm">
         <thead>
           <tr>
+            <th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
+              Preview
+            </th>
             <th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
               Name
             </th>
@@ -137,6 +168,11 @@ export default function FileList({
             <th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
               Size
             </th>
+            {files.some((i) => "uploader" in i) && (
+              <th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
+                Uploader
+              </th>
+            )}
             <th className="border border-neutral-400 bg-neutral-500 py-1 px-2">
               Actions
             </th>
@@ -147,6 +183,9 @@ export default function FileList({
             const info = getInfo(a);
             return (
               <tr key={info.id}>
+                <td className="border border-neutral-500 py-1 px-2 w-8 h-8">
+                  {renderInner(info)}
+                </td>
                 <td className="border border-neutral-500 py-1 px-2 break-all">
                   {(info.name?.length ?? 0) === 0 ? "<Untitled>" : info.name}
                 </td>
@@ -158,17 +197,30 @@ export default function FileList({
                     ? FormatBytes(info.size, 2)
                     : ""}
                 </td>
+                {info.uploader && (
+                  <td className="border border-neutral-500 py-1 px-2">
+                    {info.uploader.map((a) => (
+                      <Profile link={NostrLink.publicKey(a)} size={20} />
+                    ))}
+                  </td>
+                )}
                 <td className="border border-neutral-500 py-1 px-2">
                   <div className="flex gap-2">
                     <a href={info.url} className="underline" target="_blank">
                       Link
                     </a>
-                    {onDelete && <a href="#" onClick={e => {
-                      e.preventDefault();
-                      onDelete?.(info.id)
-                    }} className="underline">
-                      Delete
-                    </a>}
+                    {onDelete && (
+                      <a
+                        href="#"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          onDelete?.(info.id);
+                        }}
+                        className="underline"
+                      >
+                        Delete
+                      </a>
+                    )}
                   </div>
                 </td>
               </tr>

ui_src/src/views/upload.tsx

@@ -30,7 +30,8 @@ export default function Upload() {
   const legacyFiles = Report as Record<string, Array<string>>;
   const myLegacyFiles = login ? (legacyFiles[login.pubkey] ?? []) : [];
 
-  const url = import.meta.env.VITE_API_URL || `${location.protocol}//${location.host}`;
+  const url =
+    import.meta.env.VITE_API_URL || `${location.protocol}//${location.host}`;
   async function doUpload() {
     if (!pub) return;
     if (!toUpload) return;
@@ -38,7 +39,9 @@ export default function Upload() {
       setError(undefined);
       if (type === "blossom") {
         const uploader = new Blossom(url, pub);
-        const result = noCompress ? await uploader.upload(toUpload) : await uploader.media(toUpload);
+        const result = noCompress
+          ? await uploader.upload(toUpload)
+          : await uploader.media(toUpload);
         setResults((s) => [...s, result]);
       }
       if (type === "nip96") {
@@ -187,29 +190,33 @@ export default function Upload() {
         </Button>
         <Button
           className="flex-1"
-          onClick={doUpload} disabled={login === undefined}>
+          onClick={doUpload}
+          disabled={login === undefined}
+        >
           Upload
         </Button>
       </div>
       <hr />
-      {!listedFiles && <Button disabled={login === undefined} onClick={() => listUploads(0)}>
-        List Uploads
-      </Button>}
+      {!listedFiles && (
+        <Button disabled={login === undefined} onClick={() => listUploads(0)}>
+          List Uploads
+        </Button>
+      )}
 
-
-      {self && <div className="flex justify-between font-medium">
-        <div>Uploads: {self.file_count.toLocaleString()}</div>
-        <div>Total Size: {FormatBytes(self.total_size)}</div>
-      </div>}
+      {self && (
+        <div className="flex justify-between font-medium">
+          <div>Uploads: {self.file_count.toLocaleString()}</div>
+          <div>Total Size: {FormatBytes(self.total_size)}</div>
+        </div>
+      )}
 
       {login && myLegacyFiles.length > 0 && (
         <div className="flex flex-col gap-4 font-bold">
-          You have {myLegacyFiles.length.toLocaleString()} files which can be migrated from void.cat
+          You have {myLegacyFiles.length.toLocaleString()} files which can be
+          migrated from void.cat
           <div className="flex gap-2">
-            <Button onClick={() => migrateLegacy()}>
-              Migrate Files
-            </Button>
-            <Button onClick={() => setShowLegacy(s => !s)}>
+            <Button onClick={() => migrateLegacy()}>Migrate Files</Button>
+            <Button onClick={() => setShowLegacy((s) => !s)}>
               {!showLegacy ? "Show Files" : "Hide Files"}
             </Button>
           </div>
@@ -218,7 +225,10 @@ export default function Upload() {
       )}
       {showLegacy && (
         <FileList
-          files={myLegacyFiles.map(f => ({ id: f, url: `https://void.cat/d/${f}` }))}
+          files={myLegacyFiles.map((f) => ({
+            id: f,
+            url: `https://void.cat/d/${f}`,
+          }))}
         />
       )}
       {listedFiles && (
@@ -248,8 +258,7 @@ export default function Upload() {
               onDelete={async (x) => {
                 await deleteFile(x);
                 await listAllUploads(adminListedPage);
-              }
-              }
+              }}
             />
           )}
         </>