fix: ui fixes report

app/(dashboard)/reports/page.tsx

@@ -7,6 +7,8 @@ import { usePagedList } from "@/lib/use-paged-list";
 import { ListShell, EmptyRow } from "@/components/list-shell";
 import { Table, THead, TR, TH, TD } from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
+import { Modal } from "@/components/ui/modal";
+import { Textarea } from "@/components/ui/input";
 import { useConfirm } from "@/components/confirm";
 import { cn, fmtDate } from "@/lib/utils";
 
@@ -25,6 +27,7 @@ export default function ReportsPage() {
   );
   const list = usePagedList<AdminReport>(fetcher, [type, q]);
   const confirm = useConfirm();
+  const [resolveTarget, setResolveTarget] = useState<AdminReport | null>(null);
 
   async function run(action: Promise<unknown>, successMsg: string) {
     try {
@@ -36,8 +39,9 @@ export default function ReportsPage() {
     }
   }
 
-  // Per-report moderation buttons. Destructive actions confirm first.
+  // The moderation button when the target is still live. Destructive actions
-  function actionsFor(r: AdminReport) {
+  // confirm first. (When the target is already removed we show "Undo" instead.)
+  function modButton(r: AdminReport) {
     if (r.type === "post") {
       return (
         <>
@@ -51,8 +55,7 @@ export default function ReportsPage() {
               if (
                 await confirm({
                   title: "Delete this post?",
-                  message:
+                  message: "It will be removed from the app. You can undo this.",
-                    "It will be removed from the app. You can restore it later from the Posts tab.",
                   confirmLabel: "Delete post",
                   destructive: true,
                 })
@@ -75,7 +78,7 @@ export default function ReportsPage() {
             if (
               await confirm({
                 title: "Delete this comment?",
-                message: "It will be removed from the thread (restorable).",
+                message: "It will be removed from the thread. You can undo this.",
                 confirmLabel: "Delete comment",
                 destructive: true,
               })
@@ -96,7 +99,7 @@ export default function ReportsPage() {
           if (
             await confirm({
               title: "Suspend this account?",
-              message: "They'll be signed out and unable to log in until you unban them.",
+              message: "They'll be signed out and unable to log in. You can undo this.",
               confirmLabel: "Suspend account",
               destructive: true,
             })
@@ -110,6 +113,25 @@ export default function ReportsPage() {
     );
   }
 
+  // Shown when the reported content is currently removed (deleted / banned) —
+  // reverts the soft-deletion or ban.
+  function undoButton(r: AdminReport) {
+    return (
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={() => {
+          if (r.type === "post") run(api.restorePost(r.target_id), "Post restored.");
+          else if (r.type === "comment")
+            run(api.restoreComment(r.target_id), "Comment restored.");
+          else run(api.unbanUser(r.target_id), "Account restored.");
+        }}
+      >
+        {r.type === "user" ? "Undo ban" : "Undo delete"}
+      </Button>
+    );
+  }
+
   const targetLabel =
     type === "user" ? "Reported account" : type === "comment" ? "Comment" : "Post";
 
@@ -153,61 +175,139 @@ export default function ReportsPage() {
           {list.items.length === 0 && !list.loading ? (
             <EmptyRow cols={5} label="No reports." />
           ) : (
-            list.items.map((r) => (
+            list.items.map((r) => {
-              <TR key={r.id} className={r.resolved_at ? "opacity-60" : ""}>
+              const resolved = !!r.resolved_at;
-                <TD className="max-w-xs">
+              return (
-                  {type === "user" ? (
+                <TR key={r.id} className={resolved ? "opacity-70" : ""}>
-                    <span className="font-medium">
+                  <TD className="max-w-xs align-top">
-                      {r.target_text ? `@${r.target_text}` : "—"}
+                    {type === "user" ? (
-                    </span>
+                      <span className="font-medium">
-                  ) : (
+                        {r.target_text ? `@${r.target_text}` : "—"}
-                    <>
-                      <div className="line-clamp-2">{r.target_text || "—"}</div>
-                      {r.target_author_handle ? (
-                        <div className="mt-0.5 text-xs text-muted-foreground">
-                          by @{r.target_author_handle}
-                        </div>
-                      ) : null}
-                    </>
-                  )}
-                </TD>
-                <TD className="max-w-xs">
-                  <div className="text-xs uppercase tracking-wide text-muted-foreground">
-                    {r.category}
-                  </div>
-                  {r.reason ? (
-                    <div className="mt-0.5 line-clamp-2">{r.reason}</div>
-                  ) : null}
-                </TD>
-                <TD className="whitespace-nowrap text-xs text-muted-foreground">
-                  {r.reporter_handle ? `@${r.reporter_handle}` : "—"}
-                </TD>
-                <TD className="whitespace-nowrap">{fmtDate(r.created_at)}</TD>
-                <TD className="text-right">
-                  <div className="flex flex-wrap justify-end gap-2">
-                    {actionsFor(r)}
-                    {r.resolved_at ? (
-                      <span className="self-center text-xs text-muted-foreground">
-                        Resolved
                       </span>
                     ) : (
-                      <Button
+                      <>
-                        size="sm"
+                        <div className="line-clamp-2">{r.target_text || "—"}</div>
-                        variant="ghost"
+                        {r.target_author_handle ? (
-                        onClick={() =>
+                          <div className="mt-0.5 text-xs text-muted-foreground">
-                          run(api.resolveReport(r.type, r.id), "Report resolved.")
+                            by @{r.target_author_handle}
-                        }
+                          </div>
-                      >
+                        ) : null}
-                        Resolve
+                      </>
-                      </Button>
                     )}
-                  </div>
+                    {r.target_removed ? (
-                </TD>
+                      <div className="mt-1 text-[10px] font-medium uppercase tracking-wide text-destructive">
-              </TR>
+                        {r.type === "user" ? "Suspended" : "Removed"}
-            ))
+                      </div>
+                    ) : null}
+                  </TD>
+                  <TD className="max-w-xs align-top">
+                    <div className="text-xs uppercase tracking-wide text-muted-foreground">
+                      {r.category}
+                    </div>
+                    {r.reason ? (
+                      <div className="mt-0.5 line-clamp-2">{r.reason}</div>
+                    ) : null}
+                  </TD>
+                  <TD className="whitespace-nowrap align-top text-xs text-muted-foreground">
+                    {r.reporter_handle ? `@${r.reporter_handle}` : "—"}
+                  </TD>
+                  <TD className="whitespace-nowrap align-top">
+                    {fmtDate(r.created_at)}
+                  </TD>
+                  <TD className="align-top text-right">
+                    {resolved ? (
+                      <div className="flex flex-col items-end gap-1.5">
+                        <span className="text-xs font-medium text-primary">
+                          ✓ Resolved
+                        </span>
+                        {r.resolution_note ? (
+                          <p className="max-w-[220px] whitespace-pre-line text-right text-xs text-muted-foreground">
+                            {r.resolution_note}
+                          </p>
+                        ) : null}
+                        {r.target_removed ? undoButton(r) : null}
+                      </div>
+                    ) : (
+                      <div className="flex flex-wrap justify-end gap-2">
+                        {r.target_removed ? undoButton(r) : modButton(r)}
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => setResolveTarget(r)}
+                        >
+                          Resolve
+                        </Button>
+                      </div>
+                    )}
+                  </TD>
+                </TR>
+              );
+            })
           )}
         </tbody>
       </Table>
+
+      <ResolveModal
+        report={resolveTarget}
+        onClose={() => setResolveTarget(null)}
+        onDone={() => {
+          setResolveTarget(null);
+          list.refresh();
+        }}
+      />
     </ListShell>
   );
 }
+
+function ResolveModal({
+  report,
+  onClose,
+  onDone,
+}: {
+  report: AdminReport | null;
+  onClose: () => void;
+  onDone: () => void;
+}) {
+  const [note, setNote] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  async function submit() {
+    if (!report || note.trim() === "") return;
+    setBusy(true);
+    try {
+      await api.resolveReport(report.type, report.id, note.trim());
+      toast.success("Report resolved.");
+      setNote("");
+      onDone();
+    } catch (err) {
+      toast.error(err instanceof AdminError ? err.message : "Could not resolve.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Modal open={!!report} onClose={onClose} title="Resolve report">
+      <div className="space-y-4">
+        <label className="block space-y-1.5">
+          <span className="text-sm font-medium">Resolution note</span>
+          <Textarea
+            value={note}
+            onChange={(e) => setNote(e.target.value)}
+            rows={4}
+            maxLength={2000}
+            placeholder="What did you do / decide? (shown in the reports table)"
+          />
+        </label>
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={submit} disabled={busy || note.trim() === ""}>
+            {busy ? "Resolving…" : "Resolve report"}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

lib/api.ts

@@ -161,6 +161,8 @@ export type AdminReport = {
   resolved_at: string | null;
   reporter_handle: string | null;
   reporter_name: string | null;
+  resolution_note: string | null;
+  target_removed: boolean;
   target_id: string;
   target_text: string | null;
   target_author_handle: string | null;
@@ -286,7 +288,10 @@ export const api = {
   reports(type: ReportType, q: string, limit: number, offset: number) {
     return listed<AdminReport>(`/admin/reports${qs({ type, q, limit, offset })}`);
   },
-  resolveReport(type: ReportType, id: string) {
+  resolveReport(type: ReportType, id: string, note: string) {
-    return call(`/admin/reports/${type}/${id}/resolve`, { method: "POST" });
+    return call(`/admin/reports/${type}/${id}/resolve`, {
+      method: "POST",
+      body: JSON.stringify({ note }),
+    });
   },
 };