t5de-hub/apps/web/app/catalogs/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
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">
              <Link href={showStatus ? `/console/catalogs/${c.id}` : `/catalogs/${c.id}`} className="underline-offset-4 hover:underline">
                {c.name}
              </Link>
            </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>
  );
}