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/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 (
     <>
-      <PageHeader title="Products">Community products for T5DE.</PageHeader>
+      <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}
-      onClick={async () => {
-        setPending(true);
-        await authClient.signOut();
-        router.push("/");
-        router.refresh();
-      }}
-    >
-      {pending ? "Signing out…" : "Sign out"}
-    </Button>
+    <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 () => {
+                setSigningOut(true);
+                await authClient.signOut();
+                router.push("/");
+                router.refresh();
+              }}
+            >
+              {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";