feat(studio): localize catalog studio UI and polish responsive layout

Route all Catalog Studio strings through the admin.studio namespace
(workspace, filters, review, inspector, quality, sync, scale32, organize
imports and page titles/subtitles) with English fallback, and add shared
StudioPage chrome plus a loading skeleton. Tighten mobile padding on the
header and sub-bars.

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

@@ -17,6 +17,7 @@ import {
 	Wrench,
 } from "lucide-react";
 import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { CatalogManagerDialog } from "@/app/admin/catalog/catalog-manager-dialog-wrapper";
 import { OrganizeImportsLauncher } from "@/components/admin/studio/organize-imports-launcher";
@@ -28,34 +29,38 @@ import {
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 
-type StudioLink = { href: string; label: string; icon: LucideIcon };
+type StudioLink = { href: string; labelKey: 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/furni", labelKey: "furniture", icon: Puzzle },
+	{ href: "/admin/studio/badges", labelKey: "badges", icon: BadgeCheck },
+	{ href: "/admin/studio/clothing", labelKey: "clothing", icon: Shirt },
+	{ href: "/admin/studio/effects", labelKey: "effects", icon: Dumbbell },
+	{ href: "/admin/studio/pets", labelKey: "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 },
+	{ href: "/admin/studio/upload", labelKey: "uploadFiles", icon: Upload },
+	{ href: "/admin/studio/clone", labelKey: "importFromSource", icon: Copy },
+	{ href: "/admin/studio/sync", labelKey: "syncRepository", icon: RefreshCw },
 ];
 const maintenance: StudioLink[] = [
-	{ href: "/admin/studio/audit", label: "Catalog audit", icon: ClipboardCheck },
+	{
+		href: "/admin/studio/audit",
+		labelKey: "catalogAudit",
+		icon: ClipboardCheck,
+	},
 	{
 		href: "/admin/studio/repair-icons",
-		label: "Repair icons",
+		labelKey: "repairIcons",
 		icon: ImageIcon,
 	},
 	{
 		href: "/admin/studio/maintenance",
-		label: "Catalog maintenance",
+		labelKey: "catalogMaintenance",
 		icon: Wrench,
 	},
 	{
 		href: "/admin/studio/nitro-cleanup",
-		label: "Nitro cleanup",
+		labelKey: "nitroCleanup",
 		icon: FileX2,
 	},
 ];
@@ -71,6 +76,7 @@ function StudioMenu({
 	links: StudioLink[];
 	pathname: string;
 }) {
+	const t = useTranslations("admin.studio");
 	const [open, setOpen] = useState(false);
 	const active = links.find((link) => activePath(pathname, link.href));
 	return (
@@ -90,7 +96,7 @@ function StudioMenu({
 				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 }) => (
+				{links.map(({ href, labelKey, icon: Icon }) => (
 					<Link
 						key={href}
 						href={href}
@@ -103,8 +109,8 @@ function StudioMenu({
 						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}
+						<Icon size={16} aria-hidden />
+						{t(`nav.${labelKey}`)}
 					</Link>
 				))}
 			</PopoverContent>
@@ -120,14 +126,15 @@ export function StudioLayoutClient({
 	children: React.ReactNode;
 }) {
 	const pathname = usePathname() ?? "";
+	const t = useTranslations("admin.studio");
 	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)]">
+		<div className="flex h-[calc(100dvh-7rem)] min-w-0 flex-col overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-canvas)] text-[var(--admin-text)] sm:min-h-[600px]">
 			<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"
+				aria-label={t("nav.ariaLabel")}
+				className="flex shrink-0 items-center gap-1 overflow-x-auto 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 }) => (
+				<div className="flex shrink-0 gap-1">
+					{assets.map(({ href, labelKey, icon: Icon }) => (
 						<Link
 							key={href}
 							href={href}
@@ -138,35 +145,35 @@ export function StudioLayoutClient({
 							}}
 							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",
+								"flex min-h-10 shrink-0 items-center gap-2 whitespace-nowrap 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}
+							<Icon size={16} aria-hidden />
+							{t(`nav.${labelKey}`)}
 						</Link>
 					))}
 				</div>
-				<div className="flex flex-wrap gap-1">
+				<div className="ml-auto flex shrink-0 gap-1 pl-1">
 					{canEditCatalog && (
 						<>
 							<CatalogManagerDialog
 								catalogType="normal"
 								canEdit
-								triggerLabel="Catalog manager"
+								triggerLabel={t("nav.catalogManager")}
 							/>
 							<OrganizeImportsLauncher />
 						</>
 					)}
 					<StudioMenu
-						label="Import & sync"
+						label={t("nav.importSync")}
 						links={imports}
 						pathname={pathname}
 					/>
 					<StudioMenu
-						label="Maintenance"
+						label={t("nav.maintenance")}
 						links={maintenance}
 						pathname={pathname}
 					/>