feat: cases (reports, rating reviews, removal and deletion requests, appeals) and notifications

Cases are one queue for what someone has to decide, each with a thread (internal notes for those deciding), an assignee and a decision. Reports about a product go to the teams of the catalogs hosting it and to moderators, and only the reporter and moderators know who reported. A creator lowering a rating opens a rating review; a catalog's owner asking to delete it opens a deletion request; a catalog's team can ask for a product's removal everywhere; the person an action affected can appeal it once, decided by another moderator (an admin may decide their own, flagged). Resolving carries the case out: the rating is lowered, the product removed, the catalog deleted. Notifications reach people on the website (a bell with the unread count) and their proxies (realtime): moderators' edits to their products, removals and restores, decisions and replies on their cases, membership decisions. Also: moderators can restore a removed product, and a product's creator and moderators can see it when it's adult without an adult account (getting and wearing it still need one). Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-11-05 07:03:59 -08:00
1 parent e07a6c6dac
commit 8af4b7b6a9
@@ -1,7 +1,10 @@
 import Link from "next/link";
+import { ActionForm, SubmitButton } from "@/components/forms";
 import { DateTime } from "@/components/time";
+import { Input } from "@/components/ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import type { AuditEntry } from "@/lib/api";
+import { appeal } from "./cases/actions";

 const tagLinks: Record<string, (id: string) => string> = {
  catalog: (id) => `/console/catalogs/${id}`,
@@ -59,7 +62,22 @@ export function AuditTable({ entries, empty = "Nothing yet." }: { entries: Audit
              })}
              {Object.keys(e.tags).length === 0 && e.target}
            </TableCell>
-            <TableCell className="text-xs whitespace-normal text-muted-foreground">{detailText(e.detail)}</TableCell>
+            <TableCell className="text-xs whitespace-normal text-muted-foreground">
+              {detailText(e.detail)}
+              {e.appealable && (
+                <details className="mt-1">
+                  <summary className="cursor-pointer text-foreground underline-offset-4 hover:underline">Appeal</summary>
+                  <ActionForm action={appeal} fields={{ audit: e.id }} className="mt-2">
+                    <div className="flex gap-2">
+                      <Input name="reason" required maxLength={2000} placeholder="Why it should be undone" aria-label="Why" className="h-8 min-w-48" />
+                      <SubmitButton size="sm" variant="outline" pendingLabel="Sending…">
+                        Send
+                      </SubmitButton>
+                    </div>
+                  </ActionForm>
+                </details>
+              )}
+            </TableCell>
          </TableRow>
        ))}
      </TableBody>
@@ -0,0 +1,191 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { CaseAbout, caseKinds, CaseStatus, resolveLabel } from "@/components/cases";
+import { ActionForm, SubmitButton } from "@/components/forms";
+import { PageHeader, Tag } from "@/components/status";
+import { DateTime } from "@/components/time";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { api, unwrap } from "@/lib/api";
+import { ConsoleNav, requireConsole } from "../../console-nav";
+import { addNote, assign, decide } from "../actions";
+
+export const metadata: Metadata = { title: "Case" };
+
+/** What each kind of case asks. */
+const asks: Record<string, string> = {
+  report: "Someone reported this.",
+  "rating-review": "Its creator asks to lower its rating from adult to general.",
+  "removal-request": "A catalog hosting it asks for it to be removed everywhere.",
+  "catalog-deletion": "Its owner asks for it to be deleted.",
+  appeal: "The person it affected asks for this action to be undone.",
+};
+
+export default async function CasePage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  if (!/^\d{1,9}$/.test(id)) notFound();
+  const { me } = await requireConsole(`/console/cases/${id}`);
+  const answer = await api.cases({ id: Number(id) }).get();
+  if (answer.error) notFound();
+  const { case: c, notes, canDecide, canAssign } = unwrap(answer);
+  const appealed = c.kind === "appeal" ? (c.data as { action?: string; detail?: Record<string, unknown> }) : undefined;
+
+  return (
+    <>
+      <PageHeader title={`${caseKinds[c.kind] ?? c.kind} #${c.id}`}>
+        <span className="flex flex-wrap items-center gap-2">
+          <CaseStatus status={c.status} />
+          <span>
+            opened by {c.openedBy || "someone"} <DateTime iso={c.createdAt} />
+          </span>
+          {c.assignee && <Tag>assigned to {c.assignee}</Tag>}
+        </span>
+      </PageHeader>
+      <ConsoleNav />
+      <div className="space-y-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>About</CardTitle>
+            <CardDescription>{asks[c.kind]}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm">
+            <p>
+              <CaseAbout tags={c.tags} names={c.tagNames} />
+            </p>
+            {appealed && (
+              <p>
+                <span className="text-muted-foreground">Action appealed: </span>
+                <span className="font-mono text-xs">{appealed.action}</span>
+                {appealed.detail && Object.keys(appealed.detail).length > 0 && (
+                  <span className="text-muted-foreground">
+                    {" "}
+                    ({Object.entries(appealed.detail)
+                      .map(([k, v]) => `${k}: ${typeof v === "string" ? v : JSON.stringify(v)}`)
+                      .join(", ")}
+                    )
+                  </span>
+                )}
+              </p>
+            )}
+            {c.reason && <p className="whitespace-pre-line">{c.reason}</p>}
+            {c.status !== "open" && (
+              <div className="rounded-lg border p-3">
+                <p className="font-medium">
+                  {c.status === "resolved" ? "Resolved" : "Declined"} by {c.decidedBy || "a moderator"}{" "}
+                  {c.decidedAt && (
+                    <span className="font-normal text-muted-foreground">
+                      <DateTime iso={c.decidedAt} />
+                    </span>
+                  )}
+                </p>
+                {c.resolution && <p className="mt-1 whitespace-pre-line">{c.resolution}</p>}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {canDecide && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Decide</CardTitle>
+              <CardDescription>
+                {c.kind === "report" || c.kind === "appeal"
+                  ? "Resolving records the decision; take any action where it's done (removed products are restored from Console › Products, edits undone from the product's history)."
+                  : `Resolving does it: ${resolveLabel[c.kind]?.toLowerCase()}.`}{" "}
+                {c.openedBy ? `${c.openedBy} is told, with what you write.` : ""}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ActionForm action={decide} fields={{ case: c.id }}>
+                <Textarea name="resolution" maxLength={2000} rows={3} placeholder="What you decided, and why" aria-label="Resolution" />
+                <div className="flex flex-wrap gap-2">
+                  <SubmitButton
+                    name="decision"
+                    value="resolve"
+                    pendingLabel="Saving…"
+                    confirm={c.kind === "catalog-deletion" || c.kind === "removal-request" ? `${resolveLabel[c.kind]}?` : undefined}
+                  >
+                    {resolveLabel[c.kind] ?? "Resolve"}
+                  </SubmitButton>
+                  <SubmitButton name="decision" value="decline" variant="outline" pendingLabel="Saving…">
+                    Decline
+                  </SubmitButton>
+                </div>
+              </ActionForm>
+            </CardContent>
+          </Card>
+        )}
+
+        {canAssign && c.status === "open" && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Assignment</CardTitle>
+            </CardHeader>
+            <CardContent className="flex flex-wrap gap-2">
+              <ActionForm action={assign} fields={{ case: c.id }} className="flex flex-wrap gap-2 space-y-0">
+                <Input name="to" defaultValue={c.assignee ?? me.username} maxLength={64} aria-label="Moderator" className="max-w-48" />
+                <SubmitButton variant="outline" pendingLabel="Saving…">
+                  Assign
+                </SubmitButton>
+              </ActionForm>
+              {c.assignee && (
+                <ActionForm action={assign} fields={{ case: c.id, to: "" }}>
+                  <SubmitButton variant="ghost" pendingLabel="Saving…">
+                    Unassign
+                  </SubmitButton>
+                </ActionForm>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Thread</CardTitle>
+            {canDecide && <CardDescription>Internal notes are only for those deciding.</CardDescription>}
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {notes.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No notes yet.</p>
+            ) : (
+              <ul className="divide-y">
+                {notes.map((n) => (
+                  <li key={n.id} className="space-y-1 py-3 first:pt-0">
+                    <div className="flex flex-wrap items-center gap-2 text-sm">
+                      <span className="font-medium">{n.by || "Someone"}</span>
+                      {n.internal && <Tag>Internal</Tag>}
+                      <span className="text-muted-foreground">
+                        <DateTime iso={n.at} />
+                      </span>
+                    </div>
+                    <p className="text-sm whitespace-pre-line">{n.body}</p>
+                  </li>
+                ))}
+              </ul>
+            )}
+            <ActionForm action={addNote} fields={{ case: c.id }}>
+              <Textarea name="body" required maxLength={4000} rows={3} placeholder="Write a note" aria-label="Note" />
+              <div className="flex flex-wrap items-center gap-4">
+                <SubmitButton variant="outline" pendingLabel="Sending…">
+                  Add note
+                </SubmitButton>
+                {canDecide && (
+                  <label className="flex items-center gap-2 text-sm">
+                    <input type="checkbox" name="internal" className="size-4 accent-foreground" />
+                    Internal
+                  </label>
+                )}
+              </div>
+            </ActionForm>
+          </CardContent>
+        </Card>
+
+        <Link href="/console/cases" className="text-sm underline-offset-4 hover:underline">
+          All cases
+        </Link>
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,98 @@
+"use server";
+// Cases (reports, reviews, requests, appeals) and notifications, from the website.
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { api, unwrap } from "@/lib/api";
+import { attempt, field, type ActionState } from "@/lib/actions";
+
+/** Reports a product, catalog, room or person. */
+export async function report(_: ActionState, form: FormData): Promise<ActionState> {
+  const kind = field(form, "about");
+  const id = field(form, "id");
+  if (!["product", "catalog", "room", "person"].includes(kind)) return { error: "Nothing to report." };
+  return attempt(async () => {
+    unwrap(await api.cases.post({ kind: "report", about: { [kind]: id }, reason: field(form, "reason") }));
+    revalidatePath("/console/cases");
+    return "Reported. Moderators will look at it; you'll be told what they decide.";
+  });
+}
+
+/** Appeals an action from the audit log. */
+export async function appeal(_: ActionState, form: FormData): Promise<ActionState> {
+  let id = 0;
+  const state = await attempt(async () => {
+    const { case: c } = unwrap(await api.cases.post({ kind: "appeal", audit: Number(field(form, "audit")), reason: field(form, "reason") }));
+    id = c.id;
+  });
+  if (state?.error) return state;
+  redirect(`/console/cases/${id}`);
+}
+
+/** A catalog's team asks moderators to remove a product everywhere. */
+export async function requestRemoval(_: ActionState, form: FormData): Promise<ActionState> {
+  return attempt(async () => {
+    unwrap(
+      await api.cases.post({
+        kind: "removal-request",
+        about: { product: field(form, "product") },
+        catalog: field(form, "catalog"),
+        reason: field(form, "reason"),
+      }),
+    );
+    revalidatePath("/console/cases");
+    return "Asked. Moderators will decide.";
+  });
+}
+
+/** A catalog's owner asks for it to be deleted. */
+export async function requestDeletion(_: ActionState, form: FormData): Promise<ActionState> {
+  const id = field(form, "id");
+  let kase = 0;
+  const state = await attempt(async () => {
+    kase = unwrap(await api.catalogs({ id }).delete.post({ reason: field(form, "reason") })).case;
+  });
+  if (state?.error) return state;
+  redirect(`/console/cases/${kase}`);
+}
+
+const onCase = (form: FormData) => {
+  const id = Number(field(form, "case"));
+  return { id, done: () => revalidatePath(`/console/cases/${id}`) };
+};
+
+export async function addNote(_: ActionState, form: FormData): Promise<ActionState> {
+  const { id, done } = onCase(form);
+  return attempt(async () => {
+    unwrap(await api.cases({ id }).notes.post({ body: field(form, "body"), internal: form.get("internal") === "on" }));
+    done();
+  });
+}
+
+export async function assign(_: ActionState, form: FormData): Promise<ActionState> {
+  const { id, done } = onCase(form);
+  return attempt(async () => {
+    const to = field(form, "to");
+    unwrap(await api.cases({ id }).assign.post({ to: to || null }));
+    done();
+  });
+}
+
+export async function decide(_: ActionState, form: FormData): Promise<ActionState> {
+  const { id, done } = onCase(form);
+  const decision = field(form, "decision");
+  if (decision !== "resolve" && decision !== "decline") return { error: "Choose to resolve or decline it." };
+  return attempt(async () => {
+    unwrap(await api.cases({ id }).decide.post({ decision, resolution: field(form, "resolution") }));
+    done();
+    revalidatePath("/console/cases");
+    revalidatePath("/console");
+  });
+}
+
+export async function markAllRead(_: ActionState): Promise<ActionState> {
+  return attempt(async () => {
+    unwrap(await api.notifications.read.post({}));
+    revalidatePath("/notifications");
+    revalidatePath("/", "layout");
+  });
+}
@@ -0,0 +1,122 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { CaseAbout, caseKinds, CaseStatus } from "@/components/cases";
+import { PageHeader } from "@/components/status";
+import { DateTime } from "@/components/time";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { api, unwrap } from "@/lib/api";
+import { ConsoleNav, requireConsole } from "../console-nav";
+
+export const metadata: Metadata = { title: "Cases" };
+
+const statuses = ["open", "resolved", "declined"] as const;
+const kinds = ["report", "rating-review", "removal-request", "catalog-deletion", "appeal"] as const;
+
+export default async function CasesPage({ searchParams }: { searchParams: Promise<Record<string, string | string[]>> }) {
+  await requireConsole("/console/cases");
+  const params = await searchParams;
+  // Open cases unless asked otherwise ("any" for all).
+  const status = params.status === "any" ? undefined : (statuses.find((s) => s === params.status) ?? "open");
+  const kind = kinds.find((k) => k === params.kind);
+  const mine = params.mine === "1";
+  const before = typeof params.before === "string" && /^\d+$/.test(params.before) ? Number(params.before) : undefined;
+  const data = unwrap(
+    await api.cases.get({
+      query: {
+        ...(status ? { status } : {}),
+        ...(kind ? { kind } : {}),
+        ...(mine ? { mine: "1" as const } : {}),
+        ...(before ? { before } : {}),
+        limit: 50,
+      },
+    }),
+  );
+  const older = new URLSearchParams({
+    status: status ?? "any",
+    ...(kind ? { kind } : {}),
+    ...(mine ? { mine: "1" } : {}),
+    ...(data.before ? { before: String(data.before) } : {}),
+  });
+
+  return (
+    <>
+      <PageHeader title="Cases">
+        {data.moderator ? "Reports, reviews, requests and appeals." : "Cases you opened, and those about what you manage."}
+      </PageHeader>
+      <ConsoleNav />
+      <form action="/console/cases" className="mb-6 flex flex-wrap gap-2">
+        <NativeSelect name="status" defaultValue={status ?? "any"} aria-label="Status" className="w-36">
+          <NativeSelectOption value="open">Open</NativeSelectOption>
+          <NativeSelectOption value="resolved">Resolved</NativeSelectOption>
+          <NativeSelectOption value="declined">Declined</NativeSelectOption>
+          <NativeSelectOption value="any">Any status</NativeSelectOption>
+        </NativeSelect>
+        <NativeSelect name="kind" defaultValue={kind ?? ""} aria-label="Kind" className="w-44">
+          <NativeSelectOption value="">Any kind</NativeSelectOption>
+          {kinds.map((k) => (
+            <NativeSelectOption key={k} value={k}>
+              {caseKinds[k]}
+            </NativeSelectOption>
+          ))}
+        </NativeSelect>
+        <NativeSelect name="mine" defaultValue={mine ? "1" : ""} aria-label="Whose" className="w-44">
+          <NativeSelectOption value="">{data.moderator ? "Everyone's" : "All I can see"}</NativeSelectOption>
+          <NativeSelectOption value="1">Opened by me</NativeSelectOption>
+        </NativeSelect>
+        <Button type="submit">Filter</Button>
+      </form>
+      <Card>
+        <CardContent>
+          {data.cases.length === 0 ? (
+            <p className="text-sm text-muted-foreground">Nothing here.</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Case</TableHead>
+                  <TableHead>About</TableHead>
+                  <TableHead>Opened by</TableHead>
+                  <TableHead>Assigned</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Changed</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.cases.map((c) => (
+                  <TableRow key={c.id}>
+                    <TableCell className="font-medium">
+                      <Link href={`/console/cases/${c.id}`} className="underline-offset-4 hover:underline">
+                        {caseKinds[c.kind] ?? c.kind} #{c.id}
+                      </Link>
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      <CaseAbout tags={c.tags} names={c.tagNames} />
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">{c.openedBy || "someone"}</TableCell>
+                    <TableCell className="text-muted-foreground">{c.assignee ?? ""}</TableCell>
+                    <TableCell>
+                      <CaseStatus status={c.status} />
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      <DateTime iso={c.updatedAt} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+      {data.before && data.cases.length === 50 && (
+        <div className="mt-4">
+          <Link href={`/console/cases?${older}`} className={buttonVariants({ variant: "outline" })}>
+            Older
+          </Link>
+        </div>
+      )}
+    </>
+  );
+}
@@ -14,6 +14,7 @@ import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { api, unwrap, type CatalogMember, type CatalogPage } from "@/lib/api";
 import { AuditTable } from "../../audit-table";
+import { requestDeletion, requestRemoval } from "../../cases/actions";
 import { ConsoleNav, requireConsole } from "../../console-nav";
 import {
  addOperator,
@@ -357,6 +358,21 @@ export default async function ManageCatalog({ params }: { params: Promise<{ id:
                              </SubmitButton>
                            </div>
                          </ActionForm>
+                          {!p.removed && (
+                            <details className="mt-1 text-left text-xs">
+                              <summary className="cursor-pointer text-right text-muted-foreground hover:text-foreground">
+                                Ask moderators to remove it everywhere
+                              </summary>
+                              <ActionForm action={requestRemoval} fields={{ catalog: id, product: p.id }} className="mt-2">
+                                <div className="flex justify-end gap-2">
+                                  <Input name="reason" placeholder="Why" aria-label="Why" required maxLength={2000} className="h-8 w-48" />
+                                  <SubmitButton size="sm" variant="outline" pendingLabel="Asking…">
+                                    Ask
+                                  </SubmitButton>
+                                </div>
+                              </ActionForm>
+                            </details>
+                          )}
                        </TableCell>
                      )}
                    </TableRow>
@@ -394,6 +410,28 @@ export default async function ManageCatalog({ params }: { params: Promise<{ id:
          </Card>
        )}

+        {has("catalog:delete-request") && c.status !== "deleted" && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Delete Catalog</CardTitle>
+              <CardDescription>
+                Moderators review deletions for now. Once deleted, nothing is available from it; people who got its products
+                keep them only where other catalogs host them.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ActionForm action={requestDeletion} fields={{ id }}>
+                <div className="flex max-w-xl gap-2">
+                  <Input name="reason" placeholder="Why" aria-label="Why" required maxLength={2000} />
+                  <SubmitButton variant="destructive" pendingLabel="Asking…" confirm={`Ask moderators to delete ${c.name}?`}>
+                    Ask to delete
+                  </SubmitButton>
+                </div>
+              </ActionForm>
+            </CardContent>
+          </Card>
+        )}
+
        <Card>
          <CardHeader>
            <CardTitle>Recent Changes</CardTitle>
@@ -37,6 +37,7 @@ const tabs: { section: Section; href: string; label: string }[] = [
  { section: "overview", href: "/console", label: "Overview" },
  { section: "products", href: "/console/products", label: "Products" },
  { section: "catalogs", href: "/console/catalogs", label: "Catalogs" },
+  { section: "cases", href: "/console/cases", label: "Cases" },
  { section: "people", href: "/console/people", label: "People" },
  { section: "audit", href: "/console/audit", label: "Audit" },
 ];
@@ -19,6 +19,7 @@ export default async function Console() {
  const settings = me.role === "admin" ? await api.console.settings.get().then(unwrap) : undefined;

  const todo: Stat[] = [
+    { label: "Cases", value: data.todo.cases, note: "open, for you to decide", href: "/console/cases" },
    { label: "Drafts", value: data.todo.drafts, note: "to review and publish", href: "/console/products?status=draft" },
    { label: "Member Requests", value: data.todo.memberRequests, note: "waiting in your catalogs", href: "/console/catalogs" },
  ];
@@ -8,7 +8,9 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { ActionForm, SubmitButton } from "@/components/forms";
 import { api, unwrap } from "@/lib/api";
+import { restoreProduct } from "../../products/actions";
 import { ConsoleNav, requireConsole } from "../console-nav";

 export const metadata: Metadata = { title: "Products" };
@@ -112,10 +114,21 @@ export default async function ConsoleProducts({ searchParams }: { searchParams:
                      <DateTime iso={p.updatedAt} dateOnly />
                    </TableCell>
                    <TableCell className="text-right">
-                      {!p.removed && (
+                      {!p.removed ? (
                        <Link href={`/products/${p.id}/edit`} className={buttonVariants({ size: "sm", variant: "outline" })}>
                          {p.status === "draft" ? "Review" : "Edit"}
                        </Link>
+                      ) : (
+                        data.moderator && (
+                          <ActionForm action={restoreProduct} fields={{ id: p.id }}>
+                            <div className="flex justify-end gap-2">
+                              <Input name="reason" placeholder="Reason" aria-label="Reason" maxLength={500} className="h-8 w-36" />
+                              <SubmitButton size="sm" variant="outline" pendingLabel="Restoring…" confirm={`Restore ${p.name}?`}>
+                                Restore
+                              </SubmitButton>
+                            </div>
+                          </ActionForm>
+                        )
                      )}
                    </TableCell>
                  </TableRow>