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,96 @@
+import type { Metadata } from "next";
+import { OnlineList } from "@/components/online-list";
+import { PageHeader } from "@/components/status";
+import { DateTime } from "@/components/time";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { api, unwrap, type AuditEntry } from "@/lib/api";
+import { ConsoleNav, requireModerator } from "./console-nav";
+
+export const metadata: Metadata = { title: "Console" };
+
+export default async function Console() {
+  await requireModerator("/console");
+  const data = unwrap(await api.console.get());
+  const stats = [
+    { label: "People", value: data.counts.people, note: "accounts" },
+    { label: "IMVU accounts", value: data.counts.links, note: "linked" },
+    { label: "Computers", value: data.counts.computers, note: "signed in" },
+  ];
+
+  return (
+    <>
+      <PageHeader title="Console">Moderation.</PageHeader>
+      <ConsoleNav />
+      <div className="space-y-6">
+        <div className="grid gap-4 sm:grid-cols-3">
+          {stats.map((s) => (
+            <Card key={s.label}>
+              <CardHeader>
+                <CardDescription>{s.label}</CardDescription>
+                <CardTitle className="text-3xl font-semibold tabular-nums">{s.value}</CardTitle>
+              </CardHeader>
+              <CardContent className="text-sm text-muted-foreground">{s.note}</CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Online now</CardTitle>
+            <CardDescription>
+              {data.connections} {data.connections === 1 ? "connection" : "connections"} when the page loaded
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <OnlineList initial={data.online} moderator />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Audit log</CardTitle>
+            <CardDescription>The latest 50 changes.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AuditLog entries={data.audit} />
+          </CardContent>
+        </Card>
+      </div>
+    </>
+  );
+}
+
+function AuditLog({ entries }: { entries: AuditEntry[] }) {
+  if (entries.length === 0) return <p className="text-sm text-muted-foreground">Nothing yet.</p>;
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>When</TableHead>
+          <TableHead>Who</TableHead>
+          <TableHead>What</TableHead>
+          <TableHead>Target</TableHead>
+          <TableHead>Detail</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {entries.map((e, i) => (
+          <TableRow key={i}>
+            <TableCell className="text-muted-foreground">
+              <DateTime iso={e.at} />
+            </TableCell>
+            <TableCell>{e.actor || <span className="text-muted-foreground">hub</span>}</TableCell>
+            <TableCell className="font-mono text-xs">{e.action}</TableCell>
+            <TableCell>{e.target}</TableCell>
+            <TableCell className="text-xs whitespace-normal text-muted-foreground">
+              {Object.entries((e.detail ?? {}) as Record<string, unknown>)
+                .map(([k, v]) => `${k}: ${typeof v === "string" ? v : JSON.stringify(v)}`)
+                .join(", ")}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}