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/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">