Implement Admin Reporting UI with backend and frontend support (#21)

* Initial plan for issue

* Implement Admin Reporting UI with backend and frontend

Co-authored-by: v0l <1172179+v0l@users.noreply.github.com>

* Implement reviewed flag for reports instead of deletion and revert upload.tsx changes

Co-authored-by: v0l <1172179+v0l@users.noreply.github.com>

* Remove legacy files migration logic from upload UI

Co-authored-by: v0l <1172179+v0l@users.noreply.github.com>

* Delete ui_src/package-lock.json

* Delete ui_src/yarn.lock

* Restore yarn.lock file to original state

Co-authored-by: v0l <1172179+v0l@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: v0l <1172179+v0l@users.noreply.github.com>
Co-authored-by: Kieran <kieran@harkin.me>

migrations/20250610140000_add_reviewed_flag.sql

@@ -0,0 +1,5 @@
+-- Add reviewed flag to reports table
+alter table reports add column reviewed boolean not null default false;
+
+-- Index for efficient filtering of non-reviewed reports
+create index ix_reports_reviewed on reports (reviewed);

src/db.rs

@@ -116,6 +116,7 @@ pub struct Report {
     pub reporter_id: u64,
     pub event_json: String,
     pub created: DateTime<Utc>,
+    pub reviewed: bool,
 }
 
 #[derive(Clone)]
@@ -394,14 +395,14 @@ impl Database {
     /// List reports with pagination for admin view
     pub async fn list_reports(&self, offset: u32, limit: u32) -> Result<(Vec<Report>, i64), Error> {
         let reports: Vec<Report> = sqlx::query_as(
-            "select id, file_id, reporter_id, event_json, created from reports order by created desc limit ? offset ?"
+            "select id, file_id, reporter_id, event_json, created, reviewed from reports where reviewed = false order by created desc limit ? offset ?"
         )
             .bind(limit)
             .bind(offset)
             .fetch_all(&self.pool)
             .await?;
         
-        let count: i64 = sqlx::query("select count(id) from reports")
+        let count: i64 = sqlx::query("select count(id) from reports where reviewed = false")
             .fetch_one(&self.pool)
             .await?
             .try_get(0)?;
@@ -412,10 +413,19 @@ impl Database {
     /// Get reports for a specific file
     pub async fn get_file_reports(&self, file_id: &[u8]) -> Result<Vec<Report>, Error> {
         sqlx::query_as(
-            "select id, file_id, reporter_id, event_json, created from reports where file_id = ? order by created desc"
+            "select id, file_id, reporter_id, event_json, created, reviewed from reports where file_id = ? order by created desc"
         )
             .bind(file_id)
             .fetch_all(&self.pool)
             .await
     }
+
+    /// Mark a report as reviewed (used for acknowledging)
+    pub async fn mark_report_reviewed(&self, report_id: u64) -> Result<(), Error> {
+        sqlx::query("update reports set reviewed = true where id = ?")
+            .bind(report_id)
+            .execute(&self.pool)
+            .await?;
+        Ok(())
+    }
 }

src/routes/admin.rs

@@ -8,7 +8,7 @@ use rocket::{routes, Responder, Route, State};
 use sqlx::{Error, QueryBuilder, Row};
 
 pub fn admin_routes() -> Vec<Route> {
-    routes![admin_list_files, admin_get_self, admin_list_reports]
+    routes![admin_list_files, admin_get_self, admin_list_reports, admin_acknowledge_report]
 }
 
 #[derive(Serialize, Default)]
@@ -191,6 +191,29 @@ async fn admin_list_reports(
     }
 }
 
+#[rocket::delete("/reports/<report_id>")]
+async fn admin_acknowledge_report(
+    auth: Nip98Auth,
+    report_id: u64,
+    db: &State<Database>,
+) -> AdminResponse<()> {
+    let pubkey_vec = auth.event.pubkey.to_bytes().to_vec();
+
+    let user = match db.get_user(&pubkey_vec).await {
+        Ok(user) => user,
+        Err(_) => return AdminResponse::error("User not found"),
+    };
+
+    if !user.is_admin {
+        return AdminResponse::error("User is not an admin");
+    }
+
+    match db.mark_report_reviewed(report_id).await {
+        Ok(()) => AdminResponse::success(()),
+        Err(e) => AdminResponse::error(&format!("Could not acknowledge report: {}", e)),
+    }
+}
+
 impl Database {
     pub async fn list_all_files(
         &self,

ui_src/src/upload/admin.ts

@@ -12,6 +12,15 @@ export interface AdminSelf {
   total_available_quota?: number;
 }
 
+export interface Report {
+  id: number;
+  file_id: string;
+  reporter_id: number;
+  event_json: string;
+  created: string;
+  reviewed: boolean;
+}
+
 export class Route96 {
   constructor(
     readonly url: string,
@@ -39,6 +48,25 @@ export class Route96 {
     };
   }
 
+  async listReports(page = 0, count = 10) {
+    const rsp = await this.#req(
+      `admin/reports?page=${page}&count=${count}`,
+      "GET",
+    );
+    const data = await this.#handleResponse<AdminResponseReportList>(rsp);
+    return {
+      ...data,
+      ...data.data,
+      files: data.data.files,
+    };
+  }
+
+  async acknowledgeReport(reportId: number) {
+    const rsp = await this.#req(`admin/reports/${reportId}`, "DELETE");
+    const data = await this.#handleResponse<AdminResponse<void>>(rsp);
+    return data;
+  }
+
   async #handleResponse<T extends AdminResponseBase>(rsp: Response) {
     if (rsp.ok) {
       return (await rsp.json()) as T;
@@ -94,3 +122,10 @@ export type AdminResponseFileList = AdminResponse<{
   count: number;
   files: Array<NostrEvent>;
 }>;
+
+export type AdminResponseReportList = AdminResponse<{
+  total: number;
+  page: number;
+  count: number;
+  files: Array<Report>;
+}>;

ui_src/src/views/reports.tsx

@@ -0,0 +1,141 @@
+import { NostrLink } from "@snort/system";
+import classNames from "classnames";
+import Profile from "../components/profile";
+import { Report } from "../upload/admin";
+
+export default function ReportList({
+  reports,
+  pages,
+  page,
+  onPage,
+  onAcknowledge,
+  onDeleteFile,
+}: {
+  reports: Array<Report>;
+  pages?: number;
+  page?: number;
+  onPage?: (n: number) => void;
+  onAcknowledge?: (reportId: number) => void;
+  onDeleteFile?: (fileId: string) => void;
+}) {
+  if (reports.length === 0) {
+    return <b>No Reports</b>;
+  }
+
+  function pageButtons(page: number, n: number) {
+    const ret = [];
+    const start = 0;
+
+    for (let x = start; x < n; x++) {
+      ret.push(
+        <div
+          key={x}
+          onClick={() => onPage?.(x)}
+          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,
+              "bg-neutral-400": page === x,
+            },
+          )}
+        >
+          {x + 1}
+        </div>,
+      );
+    }
+
+    return ret;
+  }
+
+  function getReporterPubkey(eventJson: string): string | null {
+    try {
+      const event = JSON.parse(eventJson);
+      return event.pubkey;
+    } catch {
+      return null;
+    }
+  }
+
+  function getReportReason(eventJson: string): string {
+    try {
+      const event = JSON.parse(eventJson);
+      return event.content || "No reason provided";
+    } catch {
+      return "Invalid event data";
+    }
+  }
+
+  function formatDate(dateString: string): string {
+    return new Date(dateString).toLocaleString();
+  }
+
+  return (
+    <>
+      <table className="w-full border-collapse border border-neutral-500">
+        <thead>
+          <tr className="bg-neutral-700">
+            <th className="border border-neutral-500 py-2 px-4 text-left">Report ID</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">File ID</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">Reporter</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">Reason</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">Created</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {reports.map((report) => {
+            const reporterPubkey = getReporterPubkey(report.event_json);
+            const reason = getReportReason(report.event_json);
+            
+            return (
+              <tr key={report.id} className="hover:bg-neutral-700">
+                <td className="border border-neutral-500 py-2 px-4">{report.id}</td>
+                <td className="border border-neutral-500 py-2 px-4 font-mono text-sm">
+                  {report.file_id.substring(0, 12)}...
+                </td>
+                <td className="border border-neutral-500 py-2 px-4">
+                  {reporterPubkey ? (
+                    <Profile link={NostrLink.publicKey(reporterPubkey)} size={20} />
+                  ) : (
+                    "Unknown"
+                  )}
+                </td>
+                <td className="border border-neutral-500 py-2 px-4 max-w-xs truncate">
+                  {reason}
+                </td>
+                <td className="border border-neutral-500 py-2 px-4">
+                  {formatDate(report.created)}
+                </td>
+                <td className="border border-neutral-500 py-2 px-4">
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => onAcknowledge?.(report.id)}
+                      className="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm"
+                    >
+                      Acknowledge
+                    </button>
+                    <button
+                      onClick={() => onDeleteFile?.(report.file_id)}
+                      className="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm"
+                    >
+                      Delete File
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      
+      {pages !== undefined && (
+        <>
+          <div className="flex justify-center mt-4">
+            <div className="flex gap-1">{pageButtons(page ?? 0, pages)}</div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}

ui_src/src/views/upload.tsx

@@ -8,16 +8,13 @@ import usePublisher from "../hooks/publisher";
 import { Nip96, Nip96FileList } from "../upload/nip96";
 import { AdminSelf, Route96 } from "../upload/admin";
 import { FormatBytes } from "../const";
-import Report from "../report.json";
 
 export default function Upload() {
   const [type, setType] = useState<"blossom" | "nip96">("blossom");
   const [noCompress, setNoCompress] = useState(false);
-  const [showLegacy, setShowLegacy] = useState(false);
   const [toUpload, setToUpload] = useState<File>();
   const [self, setSelf] = useState<AdminSelf>();
   const [error, setError] = useState<string>();
-  const [bulkPrgress, setBulkProgress] = useState<number>();
   const [results, setResults] = useState<Array<object>>([]);
   const [listedFiles, setListedFiles] = useState<Nip96FileList>();
   const [adminListedFiles, setAdminListedFiles] = useState<Nip96FileList>();
@@ -28,9 +25,6 @@ export default function Upload() {
   const login = useLogin();
   const pub = usePublisher();
 
-  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}`;
   async function doUpload() {
@@ -116,20 +110,6 @@ export default function Upload() {
     }
   }
 
-  async function migrateLegacy() {
-    if (!pub) return;
-    const uploader = new Blossom(url, pub);
-    let ctr = 0;
-    for (const f of myLegacyFiles) {
-      try {
-        await uploader.mirror(`https://void.cat/d/${f}`);
-      } catch (e) {
-        console.error(e);
-      }
-      setBulkProgress(ctr++ / myLegacyFiles.length);
-    }
-  }
-
   useEffect(() => {
     listUploads(listedPage);
   }, [listedPage]);
@@ -211,27 +191,6 @@ export default function Upload() {
         </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
-          <div className="flex gap-2">
-            <Button onClick={() => migrateLegacy()}>Migrate Files</Button>
-            <Button onClick={() => setShowLegacy((s) => !s)}>
-              {!showLegacy ? "Show Files" : "Hide Files"}
-            </Button>
-          </div>
-          {bulkPrgress !== undefined && <progress value={bulkPrgress} />}
-        </div>
-      )}
-      {showLegacy && (
-        <FileList
-          files={myLegacyFiles.map((f) => ({
-            id: f,
-            url: `https://void.cat/d/${f}`,
-          }))}
-        />
-      )}
       {listedFiles && (
         <FileList
           files={listedFiles.files}

ui_src/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/profile.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/views/files.tsx","./src/views/header.tsx","./src/views/upload.tsx"],"version":"5.6.2"}
+{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/profile.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"version":"5.6.2"}