feat(studio): surface the Visual Catalog Manager in the Studio nav

The catalog manager (with auto-category wizard) now lives inside the Studio
navigation for teams that manage furniture inline. The button is gated on
CATALOG_EDIT; only users with that permission see the launcher.

- Split server/client Studio layout to derive permissions server-side
- Add optional triggerLabel prop to CatalogManagerDialog for custom labels
- Wire the Catalog manager button in the Studio nav right cluster
- Keep existing /admin/catalog entry points unchanged

src/app/admin/studio/layout.tsx

@@ -1,158 +1,21 @@
-"use client";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { StudioLayoutClient } from "./studio-layout-client";
 
-import {
+export default async function StudioLayout({
-	BadgeCheck,
-	Cat,
-	ChevronDown,
-	ClipboardCheck,
-	Copy,
-	Dumbbell,
-	Image as ImageIcon,
-	type LucideIcon,
-	Puzzle,
-	RefreshCw,
-	Shirt,
-	Upload,
-	Wrench,
-} from "lucide-react";
-import { usePathname } from "next/navigation";
-import { useState } from "react";
-import Link from "@/components/link";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
-
-type StudioLink = { href: string; label: string; icon: LucideIcon };
-const assets: StudioLink[] = [
-	{ href: "/admin/studio/furni", label: "Furniture", icon: Puzzle },
-	{ href: "/admin/studio/badges", label: "Badges", icon: BadgeCheck },
-	{ href: "/admin/studio/clothing", label: "Clothing", icon: Shirt },
-	{ href: "/admin/studio/effects", label: "Effects", icon: Dumbbell },
-	{ href: "/admin/studio/pets", label: "Pets", icon: Cat },
-];
-const imports: StudioLink[] = [
-	{ href: "/admin/studio/upload", label: "Upload files", icon: Upload },
-	{ href: "/admin/studio/clone", label: "Import from a source", icon: Copy },
-	{ href: "/admin/studio/sync", label: "Sync & repository", icon: RefreshCw },
-];
-const maintenance: StudioLink[] = [
-	{ href: "/admin/studio/audit", label: "Catalog audit", icon: ClipboardCheck },
-	{
-		href: "/admin/studio/repair-icons",
-		label: "Repair icons",
-		icon: ImageIcon,
-	},
-	{
-		href: "/admin/studio/maintenance",
-		label: "Catalog maintenance",
-		icon: Wrench,
-	},
-];
-const activePath = (path: string, href: string) =>
-	path === href || path.startsWith(`${href}/`);
-
-function StudioMenu({
-	label,
-	links,
-	pathname,
-}: {
-	label: string;
-	links: StudioLink[];
-	pathname: string;
-}) {
-	const [open, setOpen] = useState(false);
-	const active = links.find((link) => activePath(pathname, link.href));
-	return (
-		<Popover open={open} onOpenChange={setOpen}>
-			<PopoverTrigger
-				className={cn(
-					"flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium",
-					active
-						? "bg-[var(--admin-accent)]/10 text-[var(--admin-text)]"
-						: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
-				)}
-			>
-				{label}
-				<ChevronDown size={14} />
-			</PopoverTrigger>
-			<PopoverContent
-				align="end"
-				className="w-64 border-[var(--admin-border)] bg-[var(--admin-surface)] p-1.5 text-[var(--admin-text)]"
-			>
-				{links.map(({ href, label: title, icon: Icon }) => (
-					<Link
-						key={href}
-						href={href}
-						style={{
-							color: activePath(pathname, href)
-								? "var(--admin-text)"
-								: "var(--admin-text-muted)",
-						}}
-						onClick={() => setOpen(false)}
-						aria-current={activePath(pathname, href) ? "page" : undefined}
-						className="flex min-h-11 items-center gap-3 rounded-md px-3 text-sm hover:bg-[var(--admin-accent)]/10 aria-[current=page]:bg-[var(--admin-accent)]/15"
-					>
-						<Icon size={16} />
-						{title}
-					</Link>
-				))}
-			</PopoverContent>
-		</Popover>
-	);
-}
-
-export default function StudioLayout({
 	children,
 }: {
 	children: React.ReactNode;
 }) {
-	const pathname = usePathname() ?? "";
+	const { session, permissions } = await getAdminContext();
+	const canEditCatalog = canAccess(
+		permissions,
+		PERMS.CATALOG_EDIT,
+		session.user.rank,
+	);
+
 	return (
-		<div className="flex h-[calc(100dvh-7rem)] min-h-[600px] min-w-0 flex-col overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text)]">
+		<StudioLayoutClient canEditCatalog={canEditCatalog}>
-			<nav
+			{children}
-				aria-label="Catalog Studio"
+		</StudioLayoutClient>
-				className="flex shrink-0 flex-wrap items-center justify-between gap-1 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] p-2"
-			>
-				<div className="flex flex-wrap gap-1">
-					{assets.map(({ href, label, icon: Icon }) => (
-						<Link
-							key={href}
-							href={href}
-							style={{
-								color: activePath(pathname, href)
-									? "var(--admin-accent-foreground)"
-									: "var(--admin-text-muted)",
-							}}
-							aria-current={activePath(pathname, href) ? "page" : undefined}
-							className={cn(
-								"flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium transition-colors",
-								activePath(pathname, href)
-									? "bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]"
-									: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
-							)}
-						>
-							<Icon size={16} />
-							{label}
-						</Link>
-					))}
-				</div>
-				<div className="flex flex-wrap gap-1">
-					<StudioMenu
-						label="Import & sync"
-						links={imports}
-						pathname={pathname}
-					/>
-					<StudioMenu
-						label="Maintenance"
-						links={maintenance}
-						pathname={pathname}
-					/>
-				</div>
-			</nav>
-			<div className="min-h-0 min-w-0 flex-1 overflow-auto">{children}</div>
-		</div>
 	);
 }

src/app/admin/studio/studio-layout-client.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import {
+	BadgeCheck,
+	Cat,
+	ChevronDown,
+	ClipboardCheck,
+	Copy,
+	Dumbbell,
+	Image as ImageIcon,
+	type LucideIcon,
+	Puzzle,
+	RefreshCw,
+	Shirt,
+	Upload,
+	Wrench,
+} from "lucide-react";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { CatalogManagerDialog } from "@/app/admin/catalog/catalog-manager-dialog-wrapper";
+import Link from "@/components/link";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+type StudioLink = { href: string; label: string; icon: LucideIcon };
+const assets: StudioLink[] = [
+	{ href: "/admin/studio/furni", label: "Furniture", icon: Puzzle },
+	{ href: "/admin/studio/badges", label: "Badges", icon: BadgeCheck },
+	{ href: "/admin/studio/clothing", label: "Clothing", icon: Shirt },
+	{ href: "/admin/studio/effects", label: "Effects", icon: Dumbbell },
+	{ href: "/admin/studio/pets", label: "Pets", icon: Cat },
+];
+const imports: StudioLink[] = [
+	{ href: "/admin/studio/upload", label: "Upload files", icon: Upload },
+	{ href: "/admin/studio/clone", label: "Import from a source", icon: Copy },
+	{ href: "/admin/studio/sync", label: "Sync & repository", icon: RefreshCw },
+];
+const maintenance: StudioLink[] = [
+	{ href: "/admin/studio/audit", label: "Catalog audit", icon: ClipboardCheck },
+	{
+		href: "/admin/studio/repair-icons",
+		label: "Repair icons",
+		icon: ImageIcon,
+	},
+	{
+		href: "/admin/studio/maintenance",
+		label: "Catalog maintenance",
+		icon: Wrench,
+	},
+];
+const activePath = (path: string, href: string) =>
+	path === href || path.startsWith(`${href}/`);
+
+function StudioMenu({
+	label,
+	links,
+	pathname,
+}: {
+	label: string;
+	links: StudioLink[];
+	pathname: string;
+}) {
+	const [open, setOpen] = useState(false);
+	const active = links.find((link) => activePath(pathname, link.href));
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger
+				className={cn(
+					"flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium",
+					active
+						? "bg-[var(--admin-accent)]/10 text-[var(--admin-text)]"
+						: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
+				)}
+			>
+				{label}
+				<ChevronDown size={14} />
+			</PopoverTrigger>
+			<PopoverContent
+				align="end"
+				className="w-64 border-[var(--admin-border)] bg-[var(--admin-surface)] p-1.5 text-[var(--admin-text)]"
+			>
+				{links.map(({ href, label: title, icon: Icon }) => (
+					<Link
+						key={href}
+						href={href}
+						style={{
+							color: activePath(pathname, href)
+								? "var(--admin-text)"
+								: "var(--admin-text-muted)",
+						}}
+						onClick={() => setOpen(false)}
+						aria-current={activePath(pathname, href) ? "page" : undefined}
+						className="flex min-h-11 items-center gap-3 rounded-md px-3 text-sm hover:bg-[var(--admin-accent)]/10 aria-[current=page]:bg-[var(--admin-accent)]/15"
+					>
+						<Icon size={16} />
+						{title}
+					</Link>
+				))}
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+export function StudioLayoutClient({
+	canEditCatalog,
+	children,
+}: {
+	canEditCatalog: boolean;
+	children: React.ReactNode;
+}) {
+	const pathname = usePathname() ?? "";
+	return (
+		<div className="flex h-[calc(100dvh-7rem)] min-h-[600px] min-w-0 flex-col overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text)]">
+			<nav
+				aria-label="Catalog Studio"
+				className="flex shrink-0 flex-wrap items-center justify-between gap-1 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] p-2"
+			>
+				<div className="flex flex-wrap gap-1">
+					{assets.map(({ href, label, icon: Icon }) => (
+						<Link
+							key={href}
+							href={href}
+							style={{
+								color: activePath(pathname, href)
+									? "var(--admin-accent-foreground)"
+									: "var(--admin-text-muted)",
+							}}
+							aria-current={activePath(pathname, href) ? "page" : undefined}
+							className={cn(
+								"flex min-h-10 items-center gap-2 rounded-lg px-3 text-sm font-medium transition-colors",
+								activePath(pathname, href)
+									? "bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]"
+									: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
+							)}
+						>
+							<Icon size={16} />
+							{label}
+						</Link>
+					))}
+				</div>
+				<div className="flex flex-wrap gap-1">
+					{canEditCatalog && (
+						<CatalogManagerDialog
+							catalogType="normal"
+							canEdit
+							triggerLabel="Catalog manager"
+						/>
+					)}
+					<StudioMenu
+						label="Import & sync"
+						links={imports}
+						pathname={pathname}
+					/>
+					<StudioMenu
+						label="Maintenance"
+						links={maintenance}
+						pathname={pathname}
+					/>
+				</div>
+			</nav>
+			<div className="min-h-0 min-w-0 flex-1 overflow-auto">{children}</div>
+		</div>
+	);
+}

src/components/admin/catalog-manager/catalog-manager-dialog.tsx

@@ -74,11 +74,13 @@ export function CatalogManagerDialog({
 	catalogType = "normal",
 	canEdit = false,
 	totals = null,
+	triggerLabel,
 }: {
 	initialRoots?: RootTab[];
 	catalogType?: CatalogManagerMode;
 	canEdit?: boolean;
 	totals?: CatalogStatsTotals | null;
+	triggerLabel?: string;
 }) {
 	const [open, setOpen] = useState(false);
 	const [mounted, setMounted] = useState(false);
@@ -115,7 +117,7 @@ export function CatalogManagerDialog({
 				onClick={() => setOpen(true)}
 			>
 				<LayoutGrid className="h-4 w-4" />
-				{title}
+				{triggerLabel ?? title}
 			</Button>
 			{mounted && open
 				? createPortal(