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,57 @@
+import { ActionForm, SubmitButton } from "@/components/forms";
+import { AgeTag, Initial, Outfit, Tag } from "@/components/status";
+import { TimeAgo } from "@/components/time";
+import type { Link } from "@/lib/api";
+import { linkAction } from "./actions";
+import { LinkSettings } from "./link-settings";
+
+/** One linked IMVU account. */
+export function LinkCard({ link }: { link: Link }) {
+  return (
+    <li className="flex gap-4 py-6 first:pt-0 last:pb-0">
+      <Initial name={link.username} />
+      <div className="flex min-w-0 flex-1 flex-col gap-5 sm:flex-row sm:items-start">
+        <div className="min-w-0 flex-1 space-y-4">
+          <div className="space-y-2">
+            <div className="font-medium">{link.username}</div>
+            <div className="flex flex-wrap items-center gap-2">
+              {link.online && (
+                <Tag tone="online" dot>
+                  Online in T5DE
+                </Tag>
+              )}
+              <AgeTag link={link} />
+              <span className="text-xs text-muted-foreground">
+                checked <TimeAgo iso={link.checkedAt} />
+              </span>
+            </div>
+          </div>
+          <Outfit items={link.outfit} />
+          <LinkSettings imvuId={link.imvuId} showBadge={link.showBadge} showPresence={link.showPresence} />
+        </div>
+        <ActionForm action={linkAction} fields={{ imvu: link.imvuId }} className="sm:max-w-56 sm:text-right">
+          <div className="flex gap-2 sm:justify-end">
+            <SubmitButton
+              variant="outline"
+              name="intent"
+              value="recheck"
+              pendingLabel="Checking…"
+              title="Check age verification with IMVU again"
+            >
+              Check again
+            </SubmitButton>
+            <SubmitButton
+              variant="outline"
+              name="intent"
+              value="unlink"
+              pendingLabel="Unlinking…"
+              confirm={`Unlink ${link.username}? To link it again, you'll need a new code in its tagline.`}
+            >
+              Unlink
+            </SubmitButton>
+          </div>
+        </ActionForm>
+      </div>
+    </li>
+  );
+}