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]>
This commit is contained in:
dhkatzandClaude Opus 5.5 committed
1 parent
7afada1c63
commit
64c552330b
57 files changed
+3834
No files matched your search
@@ -0,0 +1,184 @@
|
||||
import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import { ActionForm, SubmitButton } from "@/components/forms";
|
||||
import { AgeTag, PageHeader, Tag } from "@/components/status";
|
||||
import { DateTime } from "@/components/time";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { api, ApiError, unwrap } from "@/lib/api";
|
||||
import { ban, setLinkCap, setRole, unban } from "../../actions";
|
||||
import { ConsoleNav, requireModerator } from "../../console-nav";
|
||||
|
||||
export const metadata: Metadata = { title: "Person" };
|
||||
|
||||
export default async function PersonPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const me = await requireModerator(`/console/people/${id}`);
|
||||
let data;
|
||||
try {
|
||||
data = unwrap(await api.console.people({ id }).get());
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError && e.status === 404) notFound();
|
||||
throw e;
|
||||
}
|
||||
const { person, links, computers } = data;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title={person.username}>
|
||||
<span className="flex flex-wrap items-center gap-2">
|
||||
<span className="capitalize">{person.role}</span>
|
||||
<span aria-hidden>·</span>
|
||||
<span>
|
||||
joined <DateTime iso={person.createdAt} dateOnly />
|
||||
</span>
|
||||
{person.banned && <Tag tone="danger">banned: {person.banReason}</Tag>}
|
||||
</span>
|
||||
</PageHeader>
|
||||
<ConsoleNav />
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>IMVU accounts</CardTitle>
|
||||
<CardDescription>
|
||||
{links.length} of {person.linkCap}. Only moderators see which IMVU accounts belong to one person.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{links.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">None.</p>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>IMVU account</TableHead>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Linked</TableHead>
|
||||
<TableHead>Age</TableHead>
|
||||
<TableHead>Shows</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{links.map((l) => (
|
||||
<TableRow key={l.imvuId}>
|
||||
<TableCell className="font-medium">
|
||||
<span className="flex items-center gap-2">
|
||||
{l.username}
|
||||
{l.online && (
|
||||
<Tag tone="online" dot>
|
||||
online
|
||||
</Tag>
|
||||
)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground tabular-nums">{l.imvuId}</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<DateTime iso={l.linkedAt} dateOnly />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<AgeTag link={l} />
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{[l.showBadge && "badge", l.showPresence && "presence"].filter(Boolean).join(", ") || "nothing"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Signed in on {computers} computer{computers === 1 ? "" : "s"}.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Link cap</CardTitle>
|
||||
<CardDescription>How many IMVU accounts they can link (normally 10).</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ActionForm action={setLinkCap} fields={{ id: person.id }}>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
name="linkCap"
|
||||
defaultValue={person.linkCap}
|
||||
min={0}
|
||||
max={1000}
|
||||
required
|
||||
aria-label="Link cap"
|
||||
className="w-28"
|
||||
/>
|
||||
<SubmitButton pendingLabel="Setting…">Set</SubmitButton>
|
||||
</div>
|
||||
</ActionForm>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ban</CardTitle>
|
||||
<CardDescription>
|
||||
{person.banned
|
||||
? `Banned: ${person.banReason}`
|
||||
: "Covers all their IMVU accounts, and signs them out everywhere."}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{person.banned ? (
|
||||
<ActionForm action={unban} fields={{ id: person.id }}>
|
||||
<SubmitButton variant="outline" pendingLabel="Unbanning…">
|
||||
Unban
|
||||
</SubmitButton>
|
||||
</ActionForm>
|
||||
) : (
|
||||
<ActionForm action={ban} fields={{ id: person.id }}>
|
||||
<Input
|
||||
name="reason"
|
||||
placeholder="Reason (they see it)"
|
||||
required
|
||||
maxLength={500}
|
||||
aria-label="Reason"
|
||||
/>
|
||||
<SubmitButton
|
||||
className="bg-red-600 text-white hover:bg-red-600/90 dark:bg-red-600 dark:hover:bg-red-600/90"
|
||||
pendingLabel="Banning…"
|
||||
confirm={`Ban ${person.username}?`}
|
||||
>
|
||||
Ban
|
||||
</SubmitButton>
|
||||
</ActionForm>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{me.role === "admin" && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Role</CardTitle>
|
||||
<CardDescription>Moderators use the console; admins also set roles.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ActionForm action={setRole} fields={{ id: person.id }}>
|
||||
<div className="flex gap-2">
|
||||
<NativeSelect name="role" defaultValue={person.role} aria-label="Role">
|
||||
<NativeSelectOption value="user">User</NativeSelectOption>
|
||||
<NativeSelectOption value="moderator">Moderator</NativeSelectOption>
|
||||
<NativeSelectOption value="admin">Admin</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<SubmitButton pendingLabel="Setting…">Set</SubmitButton>
|
||||
</div>
|
||||
</ActionForm>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user