feat: improve file list

2025-01-27 11:15:26 +00:00 · 2025-01-27 11:15:26 +00:00 · 5fbe40faae
commit 5fbe40faae
parent 0d8686a850
8 changed files with 175141 additions and 73 deletions
--- a/src/routes/admin.rs
+++ b/src/routes/admin.rs
@ -1,11 +1,11 @@
 use crate::auth::nip98::Nip98Auth;
-use crate::db::{Database, FileUpload};
+use crate::db::{Database, FileUpload, User};
 use crate::routes::{Nip94Event, PagedResult};
 use crate::settings::Settings;
 use rocket::serde::json::Json;
 use rocket::serde::Serialize;
 use rocket::{routes, Responder, Route, State};
-use sqlx::{Error, Row};
+use sqlx::{Error, QueryBuilder, Row};

 pub fn admin_routes() -> Vec<Route> {
    routes![admin_list_files, admin_get_self]
@ -55,6 +55,13 @@ pub struct SelfUser {
    pub total_size: u64,
 }

+#[derive(Serialize)]
+pub struct AdminNip94File {
+    #[serde(flatten)]
+    pub inner: Nip94Event,
+    pub uploader: Vec<String>,
+}
+
 #[rocket::get("/self")]
 async fn admin_get_self(auth: Nip98Auth, db: &State<Database>) -> AdminResponse<SelfUser> {
    let pubkey_vec = auth.event.pubkey.to_bytes().to_vec();
@ -76,14 +83,15 @@ async fn admin_get_self(auth: Nip98Auth, db: &State<Database>) -> AdminResponse<
    }
 }

-#[rocket::get("/files?<page>&<count>")]
+#[rocket::get("/files?<page>&<count>&<mime_type>")]
 async fn admin_list_files(
    auth: Nip98Auth,
    page: u32,
    count: u32,
+    mime_type: Option<String>,
    db: &State<Database>,
    settings: &State<Settings>,
-) -> AdminResponse<PagedResult<Nip94Event>> {
+) -> AdminResponse<PagedResult<AdminNip94File>> {
    let pubkey_vec = auth.event.pubkey.to_bytes().to_vec();
    let server_count = count.clamp(1, 5_000);

@ -95,14 +103,20 @@ async fn admin_list_files(
    if !user.is_admin {
        return AdminResponse::error("User is not an admin");
    }
-    match db.list_all_files(page * server_count, server_count).await {
+    match db
+        .list_all_files(page * server_count, server_count, mime_type)
+        .await
+    {
        Ok((files, count)) => AdminResponse::success(PagedResult {
            count: files.len() as u32,
            page,
            total: count as u32,
            files: files
-                .iter()
-                .map(|f| Nip94Event::from_upload(settings, f))
+                .into_iter()
+                .map(|f| AdminNip94File {
+                    inner: Nip94Event::from_upload(settings, &f.0),
+                    uploader: f.1.into_iter().map(|u| hex::encode(&u.pubkey)).collect(),
+                })
                .collect(),
        }),
        Err(e) => AdminResponse::error(&format!("Could not list files: {}", e)),
@ -114,21 +128,29 @@ impl Database {
        &self,
        offset: u32,
        limit: u32,
-    ) -> Result<(Vec<FileUpload>, i64), Error> {
-        let results: Vec<FileUpload> = sqlx::query_as(
-            "select u.* \
-            from uploads u \
-            order by u.created desc \
-            limit ? offset ?",
-        )
-        .bind(limit)
-        .bind(offset)
-        .fetch_all(&self.pool)
-        .await?;
+        mime_type: Option<String>,
+    ) -> Result<(Vec<(FileUpload, Vec<User>)>, i64), Error> {
+        let mut q = QueryBuilder::new("select u.* from uploads u ");
+        if let Some(m) = mime_type {
+            q.push("where u.mime_type = ");
+            q.push_bind(m);
+        }
+        q.push(" order by u.created desc limit ");
+        q.push_bind(limit);
+        q.push(" offset ");
+        q.push_bind(offset);
+
+        let results: Vec<FileUpload> = q.build_query_as().fetch_all(&self.pool).await?;
        let count: i64 = sqlx::query("select count(u.id) from uploads u")
            .fetch_one(&self.pool)
            .await?
            .try_get(0)?;
-        Ok((results, count))
+
+        let mut res = Vec::with_capacity(results.len());
+        for upload in results.into_iter() {
+            let upd = self.get_file_owners(&upload.id).await?;
+            res.push((upload, upd));
+        }
+        Ok((res, count))
    }
 }
--- a/ui_src/src/components/profile.tsx
+++ b/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>
  );
 }
--- a/ui_src/src/index.css
+++ b/ui_src/src/index.css
@ -8,5 +8,5 @@ body {
 }

 hr {
-  @apply border-neutral-500
-}
+  @apply border-neutral-500;
+}
--- a/ui_src/src/report.json
+++ b/ui_src/src/report.json
--- a/ui_src/src/upload/admin.ts
+++ b/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;
  }

--- a/ui_src/src/upload/blossom.ts
+++ b/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 {
--- a/ui_src/src/views/files.tsx
+++ b/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>
--- a/ui_src/src/views/upload.tsx
+++ b/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);
-              }
-              }
+              }}
            />
          )}
        </>