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]>
2026-10-29 19:06:08 -07:00
1 parent b4f6fce9df
commit 51d5bb5ff3
@@ -0,0 +1,88 @@
+import type { Metadata } from "next";
+import { CatalogStatus, membership } from "@/components/catalogs";
+import { PageHeader } from "@/components/status";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { api, getMe, unwrap, type Catalog } from "@/lib/api";
+import { RegisterForm } from "./register-form";
+
+export const metadata: Metadata = { title: "Catalogs" };
+
+export default async function Catalogs() {
+  const [me, { catalogs }] = await Promise.all([getMe(), api.catalogs.get().then(unwrap)]);
+  const mine = catalogs.filter((c) => c.mine);
+  const directory = catalogs.filter((c) => !c.mine && c.status === "approved");
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Catalogs">Servers that host community products.</PageHeader>
+
+      {mine.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Yours</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CatalogTable catalogs={mine} showStatus />
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Directory</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {directory.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No catalogs yet.</p>
+          ) : (
+            <CatalogTable catalogs={directory} />
+          )}
+        </CardContent>
+      </Card>
+
+      {me && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Register a catalog</CardTitle>
+            <CardDescription>Run t5de-catalog, then register its address here.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <RegisterForm />
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function CatalogTable({ catalogs, showStatus = false }: { catalogs: Catalog[]; showStatus?: boolean }) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Address</TableHead>
+          <TableHead>Membership</TableHead>
+          {showStatus && <TableHead>Visibility</TableHead>}
+          {showStatus && <TableHead>Status</TableHead>}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {catalogs.map((c) => (
+          <TableRow key={c.id}>
+            <TableCell className="font-medium">{c.name}</TableCell>
+            <TableCell className="font-mono text-xs text-muted-foreground">{c.url}</TableCell>
+            <TableCell>{membership[c.membership] ?? c.membership}</TableCell>
+            {showStatus && <TableCell className="capitalize">{c.visibility}</TableCell>}
+            {showStatus && (
+              <TableCell>
+                <CatalogStatus status={c.status} />
+              </TableCell>
+            )}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}