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]>

apps/web/app/notifications/page.tsx

@@ -0,0 +1,117 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { caseKinds } from "@/components/cases";
+import { ActionForm, SubmitButton } from "@/components/forms";
+import { PageHeader } from "@/components/status";
+import { DateTime } from "@/components/time";
+import { buttonVariants } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { api, getMe, unwrap, type NotificationEntry } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import { markAllRead } from "../console/cases/actions";
+
+export const metadata: Metadata = { title: "Notifications" };
+
+export default async function Notifications({ searchParams }: { searchParams: Promise<{ before?: string | string[] }> }) {
+  const me = await getMe();
+  if (!me) redirect("/signin?next=/notifications");
+  const raw = (await searchParams).before;
+  const before = typeof raw === "string" && /^\d+$/.test(raw) ? Number(raw) : undefined;
+  const data = unwrap(await api.notifications.get({ query: before ? { before } : {} }));
+
+  return (
+    <>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <PageHeader title="Notifications">
+          {data.unread > 0 ? `${data.unread} unread.` : "You're up to date."}
+        </PageHeader>
+        {data.unread > 0 && (
+          <ActionForm action={markAllRead}>
+            <SubmitButton variant="outline" pendingLabel="Marking…">
+              Mark all as read
+            </SubmitButton>
+          </ActionForm>
+        )}
+      </div>
+      <Card>
+        <CardContent>
+          {data.notifications.length === 0 ? (
+            <p className="text-sm text-muted-foreground">Nothing yet.</p>
+          ) : (
+            <ul className="divide-y">
+              {data.notifications.map((n) => {
+                const { text, href } = describe(n);
+                return (
+                  <li key={n.id} className={cn("flex flex-wrap items-baseline gap-x-3 gap-y-1 py-3 first:pt-0 last:pb-0", n.read && "text-muted-foreground")}>
+                    {!n.read && <span className="size-2 shrink-0 self-center rounded-full bg-foreground" aria-label="Unread" />}
+                    <span className="min-w-0 flex-1 text-sm">
+                      {href ? (
+                        <Link href={href} className="underline-offset-4 hover:underline">
+                          {text}
+                        </Link>
+                      ) : (
+                        text
+                      )}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      <DateTime iso={n.at} />
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </CardContent>
+      </Card>
+      {data.before && (
+        <div className="mt-4">
+          <Link href={`/notifications?before=${data.before}`} className={buttonVariants({ variant: "outline" })}>
+            Older
+          </Link>
+        </div>
+      )}
+    </>
+  );
+}
+
+/** A notification in words, and where it leads. */
+function describe(n: NotificationEntry): { text: string; href?: string } {
+  const d = n.data as Record<string, unknown>;
+  const s = (k: string) => (typeof d[k] === "string" ? (d[k] as string) : "");
+  const why = s("reason") ? `: “${s("reason")}”` : "";
+  switch (n.type) {
+    case "product_edited": {
+      const what =
+        s("kind") === "lock"
+          ? "changed the locks on"
+          : s("kind") === "revert"
+            ? "undid a change to"
+            : `changed the ${(d.fields as string[] | undefined)?.join(", ") ?? "info"} of`;
+      return { text: `${s("by") || "A moderator"} ${what} ${s("name")}${why}`, href: `/products/${s("product")}/edit` };
+    }
+    case "product_removed":
+      return { text: `Moderation removed ${s("name")}${why}. You can appeal it from your audit log.`, href: `/console/audit?product=${s("product")}` };
+    case "product_restored":
+      return { text: `Moderation restored ${s("name")}${why}`, href: `/products/${s("product")}` };
+    case "case_decided": {
+      const status = s("status") === "resolved" ? "resolved" : "declined";
+      const res = s("resolution") ? `: “${s("resolution")}”` : "";
+      return { text: `Your ${caseKinds[s("kind")]?.toLowerCase() ?? "case"} was ${status}${res}`, href: `/console/cases/${d.case}` };
+    }
+    case "case_note":
+      return { text: `${s("by") || "Someone"} replied on your ${caseKinds[s("kind")]?.toLowerCase() ?? "case"}`, href: `/console/cases/${d.case}` };
+    case "membership_decided": {
+      const status = s("status");
+      const text =
+        status === "member"
+          ? `You're a member of ${s("name")}`
+          : status === "banned"
+            ? `${s("name")} banned you`
+            : `${s("name")} declined your request to join`;
+      return { text, href: `/catalogs/${s("catalog")}` };
+    }
+    default:
+      return { text: n.type };
+  }
+}