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,72 @@
+import Link from "next/link";
+import { api, getMe, unwrap } from "@/lib/api";
+import { buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default async function Home() {
+  const [me, home] = await Promise.all([getMe(), api.home.get().then(unwrap)]);
+  const links = "links" in home ? home.links : undefined;
+
+  return (
+    <div className="space-y-14">
+      <section className="max-w-2xl space-y-5 pt-4">
+        <p className="text-sm font-medium text-muted-foreground">T5DE Hub</p>
+        <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+          One account for all your IMVU avatars.
+        </h1>
+        <p className="text-lg text-pretty text-muted-foreground">
+          Link your IMVU accounts, see who&apos;s online in T5DE, and soon, community products.
+        </p>
+        {!me && (
+          <div className="flex flex-wrap gap-3 pt-2">
+            <Link href="/signup" className={buttonVariants({ size: "lg", className: "px-4" })}>
+              Create account
+            </Link>
+            <Link href="/signin" className={buttonVariants({ size: "lg", variant: "outline", className: "px-4" })}>
+              Sign in
+            </Link>
+          </div>
+        )}
+      </section>
+
+      <section className="grid gap-4 sm:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardDescription>Online in T5DE</CardDescription>
+            <CardTitle className="text-4xl font-semibold tabular-nums">{home.onlineCount}</CardTitle>
+          </CardHeader>
+          <CardContent className="text-sm text-muted-foreground">
+            people showing that they&apos;re online.{" "}
+            <Link href="/online" className="text-foreground underline underline-offset-4">
+              See who
+            </Link>
+          </CardContent>
+        </Card>
+        {links !== undefined ? (
+          <Card>
+            <CardHeader>
+              <CardDescription>Your IMVU accounts</CardDescription>
+              <CardTitle className="text-4xl font-semibold tabular-nums">{links}</CardTitle>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground">
+              linked.{" "}
+              <Link href="/account" className="text-foreground underline underline-offset-4">
+                Manage
+              </Link>
+            </CardContent>
+          </Card>
+        ) : (
+          <Card>
+            <CardHeader>
+              <CardTitle>One account, all your avatars</CardTitle>
+            </CardHeader>
+            <CardContent className="text-sm text-muted-foreground">
+              Link any of your IMVU accounts by putting a code in its tagline. Your accounts stay private: nobody else
+              can see they&apos;re yours.
+            </CardContent>
+          </Card>
+        )}
+      </section>
+    </div>
+  );
+}