Improve Catalog Studio navigation and import workflow

src/app/admin/studio/layout.tsx

@@ -3,6 +3,7 @@
 import {
 	BadgeCheck,
 	Cat,
+	ChevronDown,
 	ClipboardCheck,
 	Copy,
 	Dumbbell,
@@ -15,30 +16,93 @@ import {
 	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";
 
-const TABS: { href: string; label: string; icon: LucideIcon }[] = [
-	{ href: "/admin/studio/furni", label: "Furni", icon: Puzzle },
-	{ href: "/admin/studio/upload", label: "Upload", icon: Upload },
+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 },
-	{ href: "/admin/studio/clone", label: "Clone", icon: Copy },
-	{ href: "/admin/studio/sync", label: "Sync", icon: RefreshCw },
+];
+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",
+		label: "Repair icons",
 		icon: ImageIcon,
 	},
-	{ href: "/admin/studio/audit", label: "Audit", icon: ClipboardCheck },
 	{
 		href: "/admin/studio/maintenance",
-		label: "Catalogus onderhoud",
+		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,
@@ -47,31 +111,48 @@ export default function StudioLayout({
 }) {
 	const pathname = usePathname() ?? "";
 	return (
-		<div
-			className="flex h-[calc(100dvh-7rem)] min-h-[520px] flex-col overflow-hidden rounded-xl border border-[var(--admin-border)]"
-			style={{ backgroundColor: "var(--admin-canvas)" }}
-		>
-			<div className="flex shrink-0 items-center gap-1 overflow-x-auto border-b border-[var(--admin-border)] bg-[var(--admin-surface)] px-2 py-1.5">
-				{TABS.map(({ href, label, icon: Icon }) => {
-					const active = pathname === href || pathname.startsWith(`${href}/`);
-					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 shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors",
-								active
+								"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 hover:text-[var(--admin-text)]",
+									: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
 							)}
 						>
-							<Icon size={13} />
+							<Icon size={16} />
 							{label}
 						</Link>
-					);
-				})}
-			</div>
-			<div className="min-h-0 flex-1 overflow-auto">{children}</div>
+					))}
+				</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>
 	);
 }