Website: Next.js app for accounts, linking, who's online, device sign-in and the console

apps/web: Next.js 16 (App Router), Tailwind 4 and shadcn/ui, light and dark from the system. Pages render on the server and call the API with Eden Treaty (typed by @t5de/api), forwarding the visitor's cookie; forms use server actions; sign-up, sign-in and sign-out use Better Auth's React client. /api is rewritten to the API so its cookies are first-party. Who's online follows the API's event stream (Next's gzip is off: it held the stream back). Standalone output with a Dockerfile; deploys to Vercel as is. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-29 05:02:00 -07:00
1 parent 7afada1c63
commit 64c552330b
@@ -0,0 +1,68 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { PageHeader, Tag } from "@/components/status";
+import { DateTime } from "@/components/time";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { api, unwrap } from "@/lib/api";
+import { ConsoleNav, requireModerator } from "../console-nav";
+
+export const metadata: Metadata = { title: "People" };
+
+export default async function People({ searchParams }: { searchParams: Promise<{ q?: string | string[] }> }) {
+  const raw = (await searchParams).q;
+  const q = typeof raw === "string" ? raw.slice(0, 64) : "";
+  await requireModerator(q ? `/console/people?q=${encodeURIComponent(q)}` : "/console/people");
+  const { people } = unwrap(await api.console.people.get({ query: q ? { q } : {} }));
+
+  return (
+    <>
+      <PageHeader title="People" />
+      <ConsoleNav />
+      <Card>
+        <CardContent className="space-y-6">
+          <form action="/console/people" className="flex max-w-md gap-2">
+            <Input type="search" name="q" defaultValue={q} placeholder="T5DE or IMVU username" aria-label="Search" />
+            <Button type="submit" variant="outline">
+              Search
+            </Button>
+          </form>
+          {people.length === 0 ? (
+            <p className="text-sm text-muted-foreground">Nobody found.</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Username</TableHead>
+                  <TableHead>Role</TableHead>
+                  <TableHead>Link cap</TableHead>
+                  <TableHead>Joined</TableHead>
+                  <TableHead />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {people.map((p) => (
+                  <TableRow key={p.id}>
+                    <TableCell>
+                      <Link href={`/console/people/${p.id}`} className="font-medium underline-offset-4 hover:underline">
+                        {p.username}
+                      </Link>
+                    </TableCell>
+                    <TableCell className="capitalize">{p.role}</TableCell>
+                    <TableCell className="tabular-nums">{p.linkCap}</TableCell>
+                    <TableCell className="text-muted-foreground">
+                      <DateTime iso={p.createdAt} dateOnly />
+                    </TableCell>
+                    <TableCell className="text-right">{p.banned && <Tag tone="danger">banned</Tag>}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  );
+}