Website header: the T5DE logo, four links, and a profile menu

The header shows T5DE's logo (the client's, also the tab icon) and Online, Rooms, Products and
Catalogs; the person's pages (Account, Library, Console for moderators) and signing out are in a menu
under their picture: their first linked IMVU account's avatar picture, which /me now gives (kept an
hour), or their initial. Creating a product moves to Products (New product, /products/new; /create
redirects there), as creating a room is on Rooms.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/api/src/app.ts

@@ -4,6 +4,7 @@
 import { Elysia, t } from "elysia";
 import {
   and,
+  asc,
   desc,
   eq,
   ilike,
@@ -151,6 +152,30 @@ export function createApp({ db, auth, imvu, realtime: rt, age: ageService, rooms
     banReason: p.banReason ?? "",
   });
 
+  /** A person's picture, for the website's header: their first linked IMVU account's avatar picture (null if none,
+   * or IMVU can't say). Kept an hour per account, so pages don't each ask IMVU. */
+  const pictures = new Map<number, { url: string | null; at: number }>();
+  const picture = async (userId: string): Promise<string | null> => {
+    const [first] = await db
+      .select({ imvuId: imvuLink.imvuId })
+      .from(imvuLink)
+      .where(eq(imvuLink.userId, userId))
+      .orderBy(asc(imvuLink.linkedAt))
+      .limit(1);
+    if (!first) return null;
+    const kept = pictures.get(first.imvuId);
+    if (kept && Date.now() - kept.at < 60 * 60 * 1000) return kept.url;
+    let url: string | null = kept?.url ?? null;
+    try {
+      url = (await imvu.byId(first.imvuId)).picture;
+    } catch {
+      // IMVU unavailable: the last known one (or none), asked again next time.
+      return url;
+    }
+    pictures.set(first.imvuId, { url, at: Date.now() });
+    return url;
+  };
+
   /** Links as the website shows them: with live presence, and age by the one rule. */
   const linkViews = async (userId: string, links: Link[]) => {
     const ids = links.map((l) => l.imvuId);
@@ -442,7 +467,7 @@ export function createApp({ db, auth, imvu, realtime: rt, age: ageService, rooms
     })
 
     // Who's signed in, and the home page.
-    .get("/me", ({ me }) => ({ person: personView(me) }), { signedIn: true })
+    .get("/me", async ({ me }) => ({ person: { ...personView(me), picture: await picture(me.id) } }), { signedIn: true })
     .get("/home", async ({ person }) => {
       const online = (await visibleOnline(person)).length;
       if (!person) return { onlineCount: online };

apps/api/src/imvu.ts

@@ -8,6 +8,7 @@ export type ImvuUser = {
   tagline: string;
   ageVerified: boolean;
   accessPass: boolean;
+  picture: string | null; // the avatar's picture (https, on *.imvu.com)
 };
 
 export type ImvuRoom = {
@@ -182,5 +183,6 @@ export function parse(answer: unknown): ImvuUser {
     tagline: typeof data.tagline === "string" ? data.tagline : "",
     ageVerified: data.is_ageverified === true,
     accessPass: data.is_ap === true,
+    picture: imvuImage(data.thumbnail_url),
   };
 }

apps/api/test/age.test.ts

@@ -78,7 +78,7 @@ async function personWithAccounts(name: string, ids: { id: number; ageVerified?:
   const cookie = { v: "" };
   await call(cookie, "POST", "/api/auth/sign-up/email", { email: `${name}@example.test`, password: "a long password", name, username: name });
   for (const a of ids) {
-    accounts.set(a.id, { id: a.id, username: `${name}${a.id}`, tagline: "", ageVerified: !!a.ageVerified, accessPass: !!a.accessPass });
+    accounts.set(a.id, { id: a.id, username: `${name}${a.id}`, tagline: "", ageVerified: !!a.ageVerified, accessPass: !!a.accessPass, picture: null });
     const started = await call(cookie, "POST", "/api/v1/account/links", { username: `${name}${a.id}` });
     accounts.get(a.id)!.tagline = started.json.challenge.code;
     expect((await call(cookie, "POST", `/api/v1/account/links/${a.id}/check`)).status).toBe(200);

apps/api/test/badges.test.ts

@@ -67,7 +67,7 @@ async function person(name: string, ...ids: number[]): Promise<Person> {
   expect(p.token).not.toBe("");
   for (const [i, id] of ids.entries()) {
     const username = `${name}Av${i}`;
-    accounts.set(id, { id, username, tagline: "", ageVerified: false, accessPass: false });
+    accounts.set(id, { id, username, tagline: "", ageVerified: false, accessPass: false, picture: null });
     const started = await call(p, "POST", "/api/v1/account/links", { username });
     accounts.get(id)!.tagline = started.json.challenge.code;
     expect((await call(p, "POST", `/api/v1/account/links/${id}/check`)).status).toBe(200);

apps/api/test/decorations.test.ts

@@ -70,7 +70,7 @@ async function person(name: string, ...imvu: { id: number; ageVerified?: boolean
   p.id = (await call(p, "GET", "/api/v1/me")).json.person.id;
   for (const [i, a] of imvu.entries()) {
     const username = `${name}Av${i || ""}`;
-    accounts.set(a.id, { id: a.id, username, tagline: "", ageVerified: !!a.ageVerified, accessPass: false });
+    accounts.set(a.id, { id: a.id, username, tagline: "", ageVerified: !!a.ageVerified, accessPass: false, picture: null });
     const started = await call(p, "POST", "/api/v1/account/links", { username });
     accounts.get(a.id)!.tagline = started.json.challenge.code;
     expect((await call(p, "POST", `/api/v1/account/links/${a.id}/check`)).status).toBe(200);

apps/api/test/hosted.test.ts

@@ -66,7 +66,7 @@ async function person(name: string, ...imvu: { id: number; ageVerified?: boolean
   expect(p.token).not.toBe("");
   for (const [i, a] of imvu.entries()) {
     const username = `${name}Av${i || ""}`;
-    accounts.set(a.id, { id: a.id, username, tagline: "", ageVerified: !!a.ageVerified, accessPass: false });
+    accounts.set(a.id, { id: a.id, username, tagline: "", ageVerified: !!a.ageVerified, accessPass: false, picture: null });
     const started = await call(p, "POST", "/api/v1/account/links", { username });
     accounts.get(a.id)!.tagline = started.json.challenge.code;
     expect((await call(p, "POST", `/api/v1/account/links/${a.id}/check`)).status).toBe(200);
@@ -330,7 +330,7 @@ test("moderators boot and ban; owners lift bans", async () => {
   const mod = await person("modr", { id: 602 });
   const usr = await person("usrr", { id: 603 });
   const md2 = await person("mod2", { id: 604 });
-  accounts.set(605, { id: 605, username: "NotOnT5", tagline: "", ageVerified: false, accessPass: false }); // IMVU only
+  accounts.set(605, { id: 605, username: "NotOnT5", tagline: "", ageVerified: false, accessPass: false, picture: null }); // IMVU only
   const n = (await call(own, "POST", "/api/v1/hosted-rooms", newRoom(601))).json.room.n;
 
   // Moderators: IDs or names (linked accounts, else IMVU); the owner's own account is left out; up to 20.

apps/api/test/hub.test.ts

@@ -130,14 +130,14 @@ describe("linking IMVU accounts", () => {
   test("by tagline; the most recent proof wins; link caps", async () => {
     const carol = new Browser();
     await carol.signup("carol");
-    accounts.set(42, { id: 42, username: "CarolAv", tagline: "", ageVerified: true, accessPass: false });
+    accounts.set(42, { id: 42, username: "CarolAv", tagline: "", ageVerified: true, accessPass: false, picture: null });
     const started = await carol.call("POST", "/api/v1/account/links", { username: "carolav" });
     expect(started.json.challenge.code).toMatch(/^t5de-[A-Z2-9]{4}-[A-Z2-9]{4}$/);
     const missing = await carol.call("POST", "/api/v1/account/links/42/check");
     expect(missing.status).toBe(409);
     expect(missing.json.error).toBe("code_missing");
 
-    const linked = await link(carol, { id: 42, username: "CarolAv", ageVerified: true, accessPass: false });
+    const linked = await link(carol, { id: 42, username: "CarolAv", ageVerified: true, accessPass: false, picture: null });
     expect(linked.status).toBe(200);
     expect(linked.json.link).toMatchObject({ imvuId: 42, username: "CarolAv", adult: true });
     expect((await carol.call("POST", "/api/v1/account/links", { username: "nobody" })).json.error).toBe(
@@ -148,7 +148,7 @@ describe("linking IMVU accounts", () => {
     const before = (await db.query.imvuLink.findFirst({ where: (l, { eq }) => eq(l.imvuId, 42) }))!;
     const dave = new Browser();
     await dave.signup("dave");
-    const moved = await link(dave, { id: 42, username: "CarolAv", ageVerified: false, accessPass: false });
+    const moved = await link(dave, { id: 42, username: "CarolAv", ageVerified: false, accessPass: false, picture: null });
     expect(moved.json.moved).toBe(true);
     const after = (await db.query.imvuLink.findFirst({ where: (l, { eq }) => eq(l.imvuId, 42) }))!;
     expect(after.userId).not.toBe(before.userId);
@@ -160,7 +160,7 @@ describe("linking IMVU accounts", () => {
     await admin.call("POST", "/api/auth/sign-in/username", { username: "alice", password: "a long password" });
     const daveId = (await dave.call("GET", "/api/v1/me")).json.person.id;
     expect((await admin.call("POST", `/api/v1/console/people/${daveId}/link-cap`, { linkCap: 1 })).status).toBe(200);
-    const over = await link(dave, { id: 43, username: "DaveAlt", ageVerified: false, accessPass: false });
+    const over = await link(dave, { id: 43, username: "DaveAlt", ageVerified: false, accessPass: false, picture: null });
     expect(over.status).toBe(403);
     expect(over.json.error).toBe("link_cap");
   });
@@ -170,7 +170,7 @@ describe("T5DE's proxy", () => {
   test("signs in with a device code, connects, shows presence; a ban ends it", async () => {
     const erin = new Browser();
     await erin.signup("erin");
-    await link(erin, { id: 77, username: "ErinAv", ageVerified: false, accessPass: false });
+    await link(erin, { id: 77, username: "ErinAv", ageVerified: false, accessPass: false, picture: null });
 
     // The proxy asks for a code; until it's approved, the token request waits.
     const codeRes = await fetch(`${base}/api/auth/device/code`, {
@@ -216,7 +216,7 @@ describe("T5DE's proxy", () => {
     // An account linked while the client runs counts at once.
     ws.send(JSON.stringify({ type: "session", imvu_id: 78 }));
     await waitFor(() => messages.filter((m) => m.message === "not_linked").length === 2);
-    await link(erin, { id: 78, username: "ErinAlt", ageVerified: false, accessPass: false });
+    await link(erin, { id: 78, username: "ErinAlt", ageVerified: false, accessPass: false, picture: null });
     await waitFor(() => hub.realtime.online().some((o) => o.imvuId === 78));
     await erin.call("DELETE", "/api/v1/account/links/78");
     await waitFor(() => !hub.realtime.online().some((o) => o.imvuId === 78));

apps/api/test/products.test.ts

@@ -4,7 +4,7 @@ import { createLocalJWKSet, jwtVerify } from "jose";
 import { openDatabase, type Database } from "@t5de/db";
 import { createApp } from "../src/app";
 import { createAuth } from "../src/auth";
-import { ImvuClient, imvuImage, parseProduct, type ImvuUser } from "../src/imvu";
+import { ImvuClient, imvuImage, parse, parseProduct, type ImvuUser } from "../src/imvu";
 
 const webURL = "http://web.test";
 const apiURL = "http://api.test";
@@ -77,7 +77,7 @@ async function person(name: string, imvu?: { id: number; ageVerified: boolean })
   });
   const p = { cookie: res.headers.getSetCookie().map((c) => c.split(";")[0]).join("; ") };
   if (imvu) {
-    accounts.set(imvu.id, { id: imvu.id, username: `${name}Av`, tagline: "", ageVerified: imvu.ageVerified, accessPass: false });
+    accounts.set(imvu.id, { id: imvu.id, username: `${name}Av`, tagline: "", ageVerified: imvu.ageVerified, accessPass: false, picture: null });
     const started = await call(p, "POST", "/api/v1/account/links", { username: `${name}Av` });
     accounts.get(imvu.id)!.tagline = started.json.challenge.code;
     expect((await call(p, "POST", `/api/v1/account/links/${imvu.id}/check`)).status).toBe(200);
@@ -270,3 +270,11 @@ test("derived products carry their IMVU parent's image and categories", async ()
   expect((await call(dresser, "PUT", `/api/v1/library/${coatID}`)).status).toBe(200);
   expect((await call(dresser, "GET", "/api/v1/library")).json.library[0].product).toMatchObject({ image: coat.product_image });
 });
+
+test("an IMVU account's avatar picture is kept only from IMVU's own hosts", () => {
+  const user = (thumbnail_url: unknown) =>
+    parse({ denormalized: { "https://api.imvu.com/user/user-5": { data: { legacy_cid: 5, username: "Av", thumbnail_url } } } });
+  expect(user("https://webasset-akm.imvu.com/resized_image/p.png").picture).toBe("https://webasset-akm.imvu.com/resized_image/p.png");
+  expect(user("https://evil.example/p.png").picture).toBeNull();
+  expect(user(undefined).picture).toBeNull();
+});

apps/api/test/rooms.test.ts

@@ -88,7 +88,7 @@ async function person(name: string, imvu: { id: number; ageVerified?: boolean })
     token: res.headers.get("set-auth-token") ?? "",
   };
   expect(p.token).not.toBe("");
-  accounts.set(imvu.id, { id: imvu.id, username: `${name}Av`, tagline: "", ageVerified: !!imvu.ageVerified, accessPass: false });
+  accounts.set(imvu.id, { id: imvu.id, username: `${name}Av`, tagline: "", ageVerified: !!imvu.ageVerified, accessPass: false, picture: null });
   const started = await call(p, "POST", "/api/v1/account/links", { username: `${name}Av` });
   accounts.get(imvu.id)!.tagline = started.json.challenge.code;
   expect((await call(p, "POST", `/api/v1/account/links/${imvu.id}/check`)).status).toBe(200);

apps/web/app/create/page.tsx

@@ -1,18 +1,6 @@
-import type { Metadata } from "next";
 import { redirect } from "next/navigation";
-import { PageHeader } from "@/components/status";
-import { UploadCard } from "@/components/upload-card";
-import { getMe } from "@/lib/api";
 
-export const metadata: Metadata = { title: "Create" };
-
-export default async function Create() {
-  const me = await getMe();
-  if (!me) redirect("/signin?next=/create");
-  return (
-    <>
-      <PageHeader title="Create a product">Upload it to a catalog. You can edit its info after.</PageHeader>
-      <UploadCard title="Upload" />
-    </>
-  );
+// Where creating a product used to be.
+export default function Create() {
+  redirect("/products/new");
 }

apps/web/app/icon.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <style>
-    rect { fill: #171717; } text { fill: #fafafa; }
-    @media (prefers-color-scheme: dark) { rect { fill: #fafafa; } text { fill: #171717; } }
-  </style>
-  <rect width="32" height="32" rx="7"/>
-  <text x="16" y="21.5" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" font-weight="700">T5</text>
-</svg>

apps/web/app/products/new/page.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { PageHeader } from "@/components/status";
+import { UploadCard } from "@/components/upload-card";
+import { getMe } from "@/lib/api";
+
+export const metadata: Metadata = { title: "New product" };
+
+export default async function NewProduct() {
+  const me = await getMe();
+  if (!me) redirect("/signin?next=/products/new");
+  return (
+    <div className="space-y-6">
+      <PageHeader title="New product">
+        Upload it to a catalog. You can edit its info after.{" "}
+        <Link href="/products" className="underline-offset-4 hover:underline">
+          Back to products
+        </Link>
+      </PageHeader>
+      <UploadCard title="Upload" />
+    </div>
+  );
+}

apps/web/app/products/page.tsx

@@ -1,20 +1,28 @@
 import type { Metadata } from "next";
 import { Empty, ProductCard } from "@/components/products";
+import Link from "next/link";
 import { PageHeader } from "@/components/status";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { api, unwrap } from "@/lib/api";
+import { api, getMe, unwrap } from "@/lib/api";
 
 export const metadata: Metadata = { title: "Products" };
 
 export default async function Products({ searchParams }: { searchParams: Promise<{ q?: string | string[] }> }) {
   const raw = (await searchParams).q;
   const q = typeof raw === "string" ? raw.trim().slice(0, 100) : "";
-  const { products } = await api.products.get({ query: q ? { q } : {} }).then(unwrap);
+  const [me, { products }] = await Promise.all([getMe(), api.products.get({ query: q ? { q } : {} }).then(unwrap)]);
 
   return (
     <>
+      <div className="flex flex-wrap items-start justify-between gap-4">
         <PageHeader title="Products">Community products for T5DE.</PageHeader>
+        {me && (
+          <Link href="/products/new" className={buttonVariants({ className: "px-4" })}>
+            New product
+          </Link>
+        )}
+      </div>
       <form action="/products" className="mb-6 flex w-full max-w-md gap-2">
         <Input type="search" name="q" defaultValue={q} placeholder="Search products" aria-label="Search" />
         <Button type="submit" variant="outline">

apps/web/components/header-client.tsx

@@ -2,7 +2,8 @@
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
+import { Menu } from "@base-ui/react/menu";
+import { ChevronDown } from "lucide-react";
 import { authClient } from "@/lib/auth-client";
 import { cn } from "@/lib/utils";
 
@@ -32,21 +33,67 @@ export function NavLink({
   );
 }
 
-export function SignOutButton() {
+/** The signed-in person's menu: their picture and name, opening their pages and signing out. */
+export function ProfileMenu({ username, picture, console }: { username: string; picture: string | null; console: boolean }) {
   const router = useRouter();
-  const [pending, setPending] = useState(false);
+  const [signingOut, setSigningOut] = useState(false);
+  const item =
+    "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[highlighted]:bg-muted";
   return (
-    <Button
-      variant="outline"
-      disabled={pending}
+    <Menu.Root>
+      <Menu.Trigger
+        className="flex items-center gap-2 rounded-full py-1 pr-2.5 pl-1 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring data-[popup-open]:bg-muted"
+        aria-label="Your account"
+      >
+        <Avatar username={username} picture={picture} />
+        <span className="hidden max-w-40 truncate sm:inline">{username}</span>
+        <ChevronDown className="size-4 text-muted-foreground" aria-hidden />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner align="end" sideOffset={6} className="z-50">
+          <Menu.Popup className="min-w-44 rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none">
+            <Menu.LinkItem className={item} render={<Link href="/account" />}>
+              Account
+            </Menu.LinkItem>
+            <Menu.LinkItem className={item} render={<Link href="/library" />}>
+              Library
+            </Menu.LinkItem>
+            {console && (
+              <Menu.LinkItem className={item} render={<Link href="/console" />}>
+                Console
+              </Menu.LinkItem>
+            )}
+            <Menu.Separator className="-mx-1 my-1 h-px bg-border" />
+            <Menu.Item
+              className={item}
+              disabled={signingOut}
               onClick={async () => {
-        setPending(true);
+                setSigningOut(true);
                 await authClient.signOut();
                 router.push("/");
                 router.refresh();
               }}
             >
-      {pending ? "Signing out…" : "Sign out"}
-    </Button>
+              {signingOut ? "Signing out…" : "Sign out"}
+            </Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
+
+/** A person's picture (their first linked IMVU account's avatar), or their initial. */
+function Avatar({ username, picture }: { username: string; picture: string | null }) {
+  const [failed, setFailed] = useState(false);
+  if (picture && !failed) {
+    return (
+      <img src={picture} alt="" onError={() => setFailed(true)} className="size-7 rounded-full bg-muted object-cover object-top" />
+    );
+  }
+  return (
+    <span className="grid size-7 place-items-center rounded-full bg-muted text-xs font-semibold uppercase" aria-hidden>
+      {username.slice(0, 1)}
+    </span>
   );
 }

apps/web/components/header.tsx

@@ -1,17 +1,12 @@
+import Image from "next/image";
 import Link from "next/link";
 import { getMe, isModerator } from "@/lib/api";
 import { buttonVariants } from "@/components/ui/button";
-import { NavLink, SignOutButton } from "./header-client";
+import { NavLink, ProfileMenu } from "./header-client";
+import logo from "./t5de.png";
 
-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 function Logo({ className }: { className?: string }) {
+  return <Image src={logo} alt="T5DE" priority className={className ?? "size-9"} />;
 }
 
 export async function Header() {
@@ -19,26 +14,18 @@ export async function Header() {
   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">
+        <Link href="/" aria-label="T5DE Hub home" className="shrink-0">
           <Logo />
-          T5DE Hub
         </Link>
         <nav className="order-last flex w-full flex-wrap items-center gap-1 text-sm sm:order-none sm:w-auto">
           <NavLink href="/online">Online</NavLink>
           <NavLink href="/rooms">Rooms</NavLink>
           <NavLink href="/products">Products</NavLink>
           <NavLink href="/catalogs">Catalogs</NavLink>
-          {me && <NavLink href="/library">Library</NavLink>}
-          {me && <NavLink href="/create">Create</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 />
-            </>
+            <ProfileMenu username={me.username} picture={me.picture} console={isModerator(me)} />
           ) : (
             <>
               <Link href="/signin" className={buttonVariants({ variant: "ghost" })}>

apps/web/lib/api.ts

@@ -81,4 +81,4 @@ export const getMe = cache(async (): Promise<Person | undefined> => {
   return data && "person" in data ? data.person : undefined;
 });
 
-export const isModerator = (p: Person | undefined) => p?.role === "moderator" || p?.role === "admin";
+export const isModerator = (p: Pick<Person, "role"> | undefined) => p?.role === "moderator" || p?.role === "admin";

docs/api.md

@@ -20,7 +20,7 @@ is. Codes: `invalid`, `signed_out`, `forbidden`, `not_found`, `no_such_imvu_acco
 | `POST /api/auth/sign-up/email` | `{email, password, name, username}`. Usernames 3-32 of `A-Za-z0-9_`; passwords 10-256 characters. The first account is an admin. |
 | `POST /api/auth/sign-in/username` | `{username, password}` |
 | `POST /api/auth/sign-out` | |
-| `GET /api/v1/me` | `{person}` |
+| `GET /api/v1/me` | `{person}`, with `picture`: the avatar picture of their first linked IMVU account (from IMVU, kept an hour), or `null` |
 
 ## Proxies