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,51 @@
+import Link from "next/link";
+import { getMe, isModerator } from "@/lib/api";
+import { buttonVariants } from "@/components/ui/button";
+import { NavLink, SignOutButton } from "./header-client";
+
+export function Logo() {
+  return (
+    <span
+      className="grid size-7 place-items-center rounded-md bg-foreground text-[11px] font-bold tracking-tight text-background"
+      aria-hidden
+    >
+      T5
+    </span>
+  );
+}
+
+export async function Header() {
+  const me = await getMe();
+  return (
+    <header className="border-b">
+      <div className="mx-auto flex max-w-5xl flex-wrap items-center gap-x-6 gap-y-2 px-4 py-3 sm:px-6">
+        <Link href="/" className="flex items-center gap-2 font-semibold">
+          <Logo />
+          T5DE Hub
+        </Link>
+        <nav className="order-last flex w-full items-center gap-1 text-sm sm:order-none sm:w-auto">
+          <NavLink href="/online">Online</NavLink>
+          {me && <NavLink href="/account">Account</NavLink>}
+          {isModerator(me) && <NavLink href="/console">Console</NavLink>}
+        </nav>
+        <div className="ml-auto flex items-center gap-2 text-sm">
+          {me ? (
+            <>
+              <span className="hidden text-muted-foreground sm:inline">{me.username}</span>
+              <SignOutButton />
+            </>
+          ) : (
+            <>
+              <Link href="/signin" className={buttonVariants({ variant: "ghost" })}>
+                Sign in
+              </Link>
+              <Link href="/signup" className={buttonVariants()}>
+                Create account
+              </Link>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}