feat: product drafts, moderator edits with reasons and locks, info history, unlisted products and tags

New uploads are drafts: only their creator and moderators see them, nobody can get or wear them, and they're
deleted if not published within 30 days (their catalogs get delete changes). The creator reviews the info and
publishes it.

Editing a product's info is a permission check now (product:edit): moderators can edit anyone's with a reason the
creator sees, lock fields (product:lock; locked fields need product:edit-locked) and lower ratings
(product:rate-lower, not below its files'). Every change is kept in the product's info history, with who and why,
and can be undone by the same rules.

Products can be unlisted (out of search and lists, the link still works) and tagged; lists filter by tag and
catalog. The console has a Products section (everyone's for moderators, by status) and a drafts to-do.

A product's own category is left for later: the hub has no list of IMVU's categories to pick from.

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

apps/web/components/products.tsx

@@ -8,6 +8,23 @@ export function RatingTag({ rating }: { rating: string }) {
   return rating === "adult" ? <Tag tone="adult">Adult</Tag> : null;
 }
 
+/** A product's state, where it isn't plainly published and listed: draft, unlisted, deleted, removed, locked. */
+export function StateTags({
+  product: p,
+}: {
+  product: Pick<ProductSummary, "status" | "listed" | "deleted" | "removed" | "locked">;
+}) {
+  return (
+    <>
+      {p.status === "draft" && <Tag tone="strong">Draft</Tag>}
+      {p.status === "published" && !p.listed && <Tag>Unlisted</Tag>}
+      {p.deleted && <Tag tone="danger">Deleted</Tag>}
+      {p.removed && <Tag tone="danger">Removed</Tag>}
+      {p.locked.length > 0 && <Tag>Locked: {p.locked.join(", ")}</Tag>}
+    </>
+  );
+}
+
 /** 1536 → "1.5 KB". */
 export function formatSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
@@ -39,7 +56,7 @@ export function ProductCard({
   product,
   children,
 }: {
-  product: Pick<ProductSummary, "id" | "name" | "creator" | "rating" | "latest" | "image" | "categories">;
+  product: Pick<ProductSummary, "id" | "name" | "creator" | "rating" | "latest" | "image" | "categories" | "listed">;
   children?: React.ReactNode;
 }) {
   const category = product.categories.at(-1)?.name;
@@ -51,7 +68,10 @@ export function ProductCard({
           <Link href={`/products/${product.id}`} className="font-medium underline-offset-4 hover:underline">
             {product.name}
           </Link>
-          <RatingTag rating={product.rating} />
+          <span className="flex gap-1">
+            {!product.listed && <Tag>Unlisted</Tag>}
+            <RatingTag rating={product.rating} />
+          </span>
         </div>
         <p className="text-xs text-muted-foreground">
           {[product.creator && `by ${product.creator}`, category, `revision ${product.latest}`].filter(Boolean).join(" · ")}