Website: products, library, catalogs and their console page

/products (search), product pages with revisions, getting and staying on a
revision, retracting; /products/:id/edit; /create and new revisions upload
from the browser straight to the catalog with a token from the hub;
/library; /catalogs (directory, registering with a once-shown key);
/console/catalogs to approve or reject. Every page now sends a nonce-based
CSP (proxy.ts), so product descriptions can't run scripts.

buttonVariants now merges classes, so outline links get their border.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/app/console/actions.ts

@@ -42,3 +42,13 @@ export async function setRole(_: ActionState, form: FormData): Promise<ActionSta
     return `Role set to ${person.role}.`;
   });
 }
+
+export async function decideCatalog(_: ActionState, form: FormData): Promise<ActionState> {
+  const id = field(form, "id");
+  const decision = field(form, "decision") === "approve" ? "approve" : "reject";
+  return attempt(async () => {
+    unwrap(await api.console.catalogs({ id })({ decision }).post());
+    revalidatePath("/console/catalogs");
+    revalidatePath("/catalogs");
+  });
+}

apps/web/app/console/catalogs/page.tsx

@@ -0,0 +1,86 @@
+import type { Metadata } from "next";
+import { CatalogStatus, membership } from "@/components/catalogs";
+import { ActionForm, SubmitButton } from "@/components/forms";
+import { PageHeader } from "@/components/status";
+import { DateTime } from "@/components/time";
+import { Card, CardContent } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { api, unwrap } from "@/lib/api";
+import { decideCatalog } from "../actions";
+import { ConsoleNav, requireModerator } from "../console-nav";
+
+export const metadata: Metadata = { title: "Catalogs" };
+
+export default async function ConsoleCatalogs() {
+  await requireModerator("/console/catalogs");
+  const { catalogs } = unwrap(await api.console.catalogs.get());
+
+  return (
+    <>
+      <PageHeader title="Catalogs" />
+      <ConsoleNav />
+      <Card>
+        <CardContent>
+          {catalogs.length === 0 ? (
+            <p className="text-sm text-muted-foreground">None registered.</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Address</TableHead>
+                  <TableHead>Takedown contact</TableHead>
+                  <TableHead>Access</TableHead>
+                  <TableHead>Registered</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {catalogs.map((c) => (
+                  <TableRow key={c.id}>
+                    <TableCell className="font-medium">{c.name}</TableCell>
+                    <TableCell className="font-mono text-xs">{c.url}</TableCell>
+                    <TableCell className="text-muted-foreground">{c.contact}</TableCell>
+                    <TableCell className="text-muted-foreground">
+                      <span className="capitalize">{c.visibility}</span>, {membership[c.membership]?.toLowerCase() ?? c.membership}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      <DateTime iso={c.createdAt} dateOnly />
+                    </TableCell>
+                    <TableCell>
+                      <CatalogStatus status={c.status} />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <ActionForm action={decideCatalog} fields={{ id: c.id }} className="space-y-1">
+                        <div className="flex justify-end gap-2">
+                          {c.status !== "approved" && (
+                            <SubmitButton size="sm" name="decision" value="approve" pendingLabel="Approving…">
+                              Approve
+                            </SubmitButton>
+                          )}
+                          {c.status !== "rejected" && (
+                            <SubmitButton
+                              size="sm"
+                              variant="outline"
+                              name="decision"
+                              value="reject"
+                              pendingLabel="Rejecting…"
+                              confirm={`Reject ${c.name}?`}
+                            >
+                              Reject
+                            </SubmitButton>
+                          )}
+                        </div>
+                      </ActionForm>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  );
+}

apps/web/app/console/console-nav.tsx

@@ -17,6 +17,7 @@ export function ConsoleNav() {
         Overview
       </NavLink>
       <NavLink href="/console/people">People</NavLink>
+      <NavLink href="/console/catalogs">Catalogs</NavLink>
     </nav>
   );
 }