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/components/cases.tsx

@@ -0,0 +1,76 @@
+// Pieces shared by the case pages and the places people open cases from.
+import Link from "next/link";
+import { ActionForm, SubmitButton } from "@/components/forms";
+import { Tag } from "@/components/status";
+import { Input } from "@/components/ui/input";
+import { report } from "@/app/console/cases/actions";
+
+export const caseKinds: Record<string, string> = {
+  report: "Report",
+  "rating-review": "Rating review",
+  "removal-request": "Removal request",
+  "catalog-deletion": "Catalog deletion",
+  appeal: "Appeal",
+};
+
+/** What resolving each kind of case does (its button). */
+export const resolveLabel: Record<string, string> = {
+  report: "Resolve",
+  "rating-review": "Lower to general",
+  "removal-request": "Remove the product",
+  "catalog-deletion": "Delete the catalog",
+  appeal: "Uphold the appeal",
+};
+
+export function CaseStatus({ status }: { status: string }) {
+  if (status === "open") return <Tag tone="strong">Open</Tag>;
+  if (status === "resolved") return <Tag>Resolved</Tag>;
+  return <Tag>Declined</Tag>;
+}
+
+const tagLinks: Record<string, (id: string) => string> = {
+  catalog: (id) => `/catalogs/${id}`,
+  product: (id) => `/products/${id}`,
+};
+
+/** What a case is about, linked. */
+export function CaseAbout({ tags, names }: { tags: Record<string, string | undefined>; names: Record<string, string> }) {
+  const parts = Object.entries(tags).filter((e): e is [string, string] => !!e[1]);
+  if (parts.length === 0) return <span className="text-muted-foreground">nothing</span>;
+  return (
+    <span className="space-x-2">
+      {parts.map(([kind, id]) => {
+        const href = tagLinks[kind]?.(id);
+        return (
+          <span key={kind}>
+            <span className="text-muted-foreground">{kind} </span>
+            {href ? (
+              <Link href={href} className="underline-offset-4 hover:underline">
+                {names[id] ?? id}
+              </Link>
+            ) : (
+              (names[id] ?? id)
+            )}
+          </span>
+        );
+      })}
+    </span>
+  );
+}
+
+/** "Report": a reason, sent to moderators (and the hosting catalogs' teams, for products). */
+export function ReportForm({ about, id, label = "Report" }: { about: "product" | "catalog" | "room" | "person"; id: string; label?: string }) {
+  return (
+    <details className="text-sm">
+      <summary className="cursor-pointer text-muted-foreground hover:text-foreground">{label}</summary>
+      <ActionForm action={report} fields={{ about, id }} className="mt-2">
+        <div className="flex max-w-xl flex-wrap gap-2">
+          <Input name="reason" required maxLength={2000} placeholder="What's wrong?" aria-label="What's wrong" className="min-w-60 flex-1" />
+          <SubmitButton variant="outline" pendingLabel="Sending…">
+            Send report
+          </SubmitButton>
+        </div>
+      </ActionForm>
+    </details>
+  );
+}

apps/web/components/catalogs.tsx

@@ -2,9 +2,9 @@ import { Tag } from "@/components/status";
 
 export const membership: Record<string, string> = { open: "Open", approval: "By approval", invite: "Invite only" };
 
-/** A catalog's status: approved, pending, rejected or suspended. */
+/** A catalog's status: approved, pending, rejected, suspended or deleted. */
 export function CatalogStatus({ status }: { status: string }) {
   if (status === "approved") return <Tag tone="strong">approved</Tag>;
-  if (status === "rejected" || status === "suspended") return <Tag tone="danger">{status}</Tag>;
+  if (status === "rejected" || status === "suspended" || status === "deleted") return <Tag tone="danger">{status}</Tag>;
   return <Tag>{status}</Tag>;
 }

apps/web/components/header.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { Bell } from "lucide-react";
 import Link from "next/link";
 import { getMe } from "@/lib/api";
 import { buttonVariants } from "@/components/ui/button";
@@ -28,7 +29,21 @@ export async function Header() {
             Download
           </a>
           {me ? (
-            <ProfileMenu username={me.username} picture={me.picture} console={me.console} />
+            <>
+              <Link
+                href="/notifications"
+                aria-label={me.unread ? `Notifications, ${me.unread} unread` : "Notifications"}
+                className={buttonVariants({ variant: "ghost", size: "icon", className: "relative" })}
+              >
+                <Bell className="size-4" />
+                {me.unread > 0 && (
+                  <span className="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground px-1 text-[10px] font-semibold text-background tabular-nums">
+                    {me.unread > 99 ? "99+" : me.unread}
+                  </span>
+                )}
+              </Link>
+              <ProfileMenu username={me.username} picture={me.picture} console={me.console} />
+            </>
           ) : (
             <>
               <Link href="/signin" className={buttonVariants({ variant: "ghost" })}>