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,26 @@
+"use server";
+import { revalidatePath } from "next/cache";
+import { api, ApiError, unwrap } from "@/lib/api";
+import { field } from "@/lib/actions";
+
+export type RegisterState = { error?: string; registered?: { id: string; name: string; key: string } } | null;
+
+/** Registers a catalog; its key is in the answer, the only time it's shown. */
+export async function registerCatalog(_: RegisterState, form: FormData): Promise<RegisterState> {
+  try {
+    const { catalog, key } = unwrap(
+      await api.catalogs.post({
+        name: field(form, "name"),
+        url: field(form, "url"),
+        contact: field(form, "contact"),
+        visibility: field(form, "visibility"),
+        membership: field(form, "membership"),
+      }),
+    );
+    revalidatePath("/catalogs");
+    return { registered: { id: catalog.id, name: catalog.name, key } };
+  } catch (e) {
+    if (e instanceof ApiError) return { error: e.message };
+    throw e;
+  }
+}
@@ -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>
+  );
+}
@@ -0,0 +1,79 @@
+"use client";
+import { useActionState } from "react";
+import { CopyButton } from "@/components/copy-button";
+import { ErrorText, SubmitButton } from "@/components/forms";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
+import { registerCatalog } from "./actions";
+
+export function RegisterForm() {
+  const [state, action] = useActionState(registerCatalog, null);
+  if (state?.registered) {
+    const { id, name, key } = state.registered;
+    return (
+      <Alert>
+        <AlertTitle>{name} is registered</AlertTitle>
+        <AlertDescription className="space-y-3">
+          <p>Put these in the catalog&apos;s settings. The key is shown only once. A moderator approves it next.</p>
+          <KeyLine label="CATALOG_ID" value={id} />
+          <KeyLine label="CATALOG_KEY" value={key} />
+        </AlertDescription>
+      </Alert>
+    );
+  }
+  return (
+    <form action={action}>
+      <FieldGroup>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <Field>
+            <FieldLabel htmlFor="name">Name</FieldLabel>
+            <Input id="name" name="name" required maxLength={64} />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="url">Address</FieldLabel>
+            <Input id="url" name="url" type="url" required maxLength={300} placeholder="https://" />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="contact">Takedown contact</FieldLabel>
+            <Input id="contact" name="contact" required maxLength={200} placeholder="Email or URL" />
+          </Field>
+          <div className="grid grid-cols-2 gap-4">
+            <Field>
+              <FieldLabel htmlFor="visibility">Visibility</FieldLabel>
+              <NativeSelect id="visibility" name="visibility" defaultValue="public" className="w-full">
+                <NativeSelectOption value="public">Public</NativeSelectOption>
+                <NativeSelectOption value="private">Private</NativeSelectOption>
+              </NativeSelect>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="membership">Membership</FieldLabel>
+              <NativeSelect id="membership" name="membership" defaultValue="open" className="w-full">
+                <NativeSelectOption value="open">Open</NativeSelectOption>
+                <NativeSelectOption value="approval">By approval</NativeSelectOption>
+                <NativeSelectOption value="invite">Invite only</NativeSelectOption>
+              </NativeSelect>
+            </Field>
+          </div>
+        </div>
+        <div>
+          <SubmitButton pendingLabel="Registering…">Register</SubmitButton>
+        </div>
+        {state?.error && <ErrorText>{state.error}</ErrorText>}
+      </FieldGroup>
+    </form>
+  );
+}
+
+function KeyLine({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="w-28 font-mono text-xs text-muted-foreground">{label}</span>
+      <code className="min-w-0 rounded-md border bg-muted px-2 py-1 font-mono text-xs break-all text-foreground">
+        {value}
+      </code>
+      <CopyButton text={value} />
+    </div>
+  );
+}