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/audit/page.tsx

@@ -1,5 +1,8 @@
+import { ClipboardCheck } from "lucide-react";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { AuditClient } from "@/app/admin/import/audit/audit-client";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function StudioAuditPage(_props: {
@@ -9,16 +12,14 @@ export default async function StudioAuditPage(_props: {
 	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
 		redirect("/admin");
 	}
+	const t = await getTranslations("admin.studio");
 	return (
-		<div className="space-y-6 p-4">
-			<div>
-				<h1 className="text-2xl font-bold tracking-tight">Catalog Audit</h1>
-				<p className="mt-1 text-muted-foreground">
-					Scan your entire furniture catalog for missing entries, broken
-					references, missing files, and items available from clone sources.
-				</p>
-			</div>
+		<StudioPage
+			icon={ClipboardCheck}
+			title={t("nav.catalogAudit")}
+			subtitle={t("pages.auditSubtitle")}
+		>
 			<AuditClient />
-		</div>
+		</StudioPage>
 	);
 }

src/app/admin/studio/badges/page.tsx

@@ -1,5 +1,8 @@
+import { BadgeCheck } from "lucide-react";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { ImportBadgesClient } from "@/app/admin/import/badges/import-badges-client";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function StudioBadgesPage(_props: {
@@ -9,9 +12,14 @@ export default async function StudioBadgesPage(_props: {
 	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
 		redirect("/admin");
 	}
+	const t = await getTranslations("admin.studio");
 	return (
-		<div className="p-4">
+		<StudioPage
+			icon={BadgeCheck}
+			title={t("nav.badges")}
+			subtitle={t("pages.badgesSubtitle")}
+		>
 			<ImportBadgesClient />
-		</div>
+		</StudioPage>
 	);
 }

src/app/admin/studio/clone/page.tsx

@@ -1,5 +1,8 @@
+import { Copy } from "lucide-react";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { ImportCloneClient } from "@/app/admin/import/clone/import-clone-client";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function StudioClonePage(_props: {
@@ -9,9 +12,14 @@ export default async function StudioClonePage(_props: {
 	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
 		redirect("/admin");
 	}
+	const t = await getTranslations("admin.studio");
 	return (
-		<div className="p-4">
+		<StudioPage
+			icon={Copy}
+			title={t("nav.importFromSource")}
+			subtitle={t("pages.cloneSubtitle")}
+		>
 			<ImportCloneClient />
-		</div>
+		</StudioPage>
 	);
 }

src/app/admin/studio/clothing/page.tsx

@@ -1,5 +1,8 @@
+import { Shirt } from "lucide-react";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { ImportClothingClient } from "@/app/admin/import/clothing/import-clothing-client";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function StudioClothingPage(_props: {
@@ -9,9 +12,14 @@ export default async function StudioClothingPage(_props: {
 	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
 		redirect("/admin");
 	}
+	const t = await getTranslations("admin.studio");
 	return (
-		<div className="p-4">
+		<StudioPage
+			icon={Shirt}
+			title={t("nav.clothing")}
+			subtitle={t("pages.clothingSubtitle")}
+		>
 			<ImportClothingClient />
-		</div>
+		</StudioPage>
 	);
 }

src/app/admin/studio/effects/page.tsx

@@ -1,5 +1,8 @@
+import { Dumbbell } from "lucide-react";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { ImportEffectsClient } from "@/app/admin/import/effects/import-effects-client";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function StudioEffectsPage(_props: {
@@ -9,9 +12,14 @@ export default async function StudioEffectsPage(_props: {
 	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
 		redirect("/admin");
 	}
+	const t = await getTranslations("admin.studio");
 	return (
-		<div className="p-4">
+		<StudioPage
+			icon={Dumbbell}
+			title={t("nav.effects")}
+			subtitle={t("pages.effectsSubtitle")}
+		>
 			<ImportEffectsClient />
-		</div>
+		</StudioPage>
 	);
 }

src/app/admin/studio/loading.tsx

@@ -0,0 +1,30 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state for any Catalog Studio sub-page. Mirrors the StudioPage
+ * header (icon tile, title, subtitle) and a body block so navigation between
+ * studio tools shows a stable skeleton instead of a blank pause.
+ */
+export default function StudioLoading() {
+	return (
+		<div className="p-4">
+			<div className="space-y-5">
+				<div className="flex flex-wrap items-start justify-between gap-4">
+					<div className="flex min-w-0 items-center gap-3">
+						<Skeleton className="h-10 w-10 shrink-0 rounded-xl bg-[var(--admin-accent)]/10" />
+						<div className="min-w-0">
+							<Skeleton className="h-8 w-48" />
+							<Skeleton className="mt-2 h-4 w-72 max-w-full" />
+						</div>
+					</div>
+				</div>
+				<div className="space-y-3 rounded-xl border border-[var(--admin-border)] p-4">
+					<Skeleton className="h-5 w-40" />
+					<Skeleton className="h-4 w-full" />
+					<Skeleton className="h-4 w-2/3" />
+					<Skeleton className="h-9 w-32" />
+				</div>
+			</div>
+		</div>
+	);
+}

src/app/admin/studio/maintenance/page.tsx

@@ -1,7 +1,9 @@
+import { Wrench } from "lucide-react";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { CatalogIntegrityPanel } from "@/components/admin/catalog/catalog-integrity-panel";
 import { CatalogMaintenancePanel } from "@/components/admin/catalog/catalog-maintenance-panel";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function StudioCatalogMaintenancePage() {
@@ -16,20 +18,27 @@ export default async function StudioCatalogMaintenancePage() {
 		session.user.rank,
 	);
 	const t = await getTranslations("pages.admin.catalog.integrity");
+	const studioT = await getTranslations("admin.studio");
 	return (
-		<div className="min-h-0 space-y-6">
-			<CatalogIntegrityPanel canRepair={canRepair} />
-			{canRepair && (
-				<details className="rounded-xl border p-4">
-					<summary className="cursor-pointer font-medium">
-						{t("legacyTitle")}
-					</summary>
-					<p className="mt-3 text-sm text-muted-foreground">
-						{t("legacyHint")}
-					</p>
-					<CatalogMaintenancePanel />
-				</details>
-			)}
-		</div>
+		<StudioPage
+			icon={Wrench}
+			title={studioT("nav.catalogMaintenance")}
+			subtitle={studioT("pages.maintenanceSubtitle")}
+		>
+			<div className="min-h-0 space-y-6">
+				<CatalogIntegrityPanel canRepair={canRepair} />
+				{canRepair && (
+					<details className="rounded-xl border p-4">
+						<summary className="cursor-pointer font-medium">
+							{t("legacyTitle")}
+						</summary>
+						<p className="mt-3 text-sm text-muted-foreground">
+							{t("legacyHint")}
+						</p>
+						<CatalogMaintenancePanel />
+					</details>
+				)}
+			</div>
+		</StudioPage>
 	);
 }

src/app/admin/studio/nitro-cleanup/page.tsx

@@ -1,5 +1,8 @@
+import { FileX2 } from "lucide-react";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { NitroCleanupPanel } from "@/components/admin/studio/nitro-cleanup-panel";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function StudioNitroCleanupPage() {
@@ -7,16 +10,14 @@ export default async function StudioNitroCleanupPage() {
 	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
 		redirect("/admin");
 	}
+	const t = await getTranslations("admin.studio");
 	return (
-		<div className="space-y-6 p-4">
-			<div>
-				<h1 className="text-2xl font-bold tracking-tight">Nitro cleanup</h1>
-				<p className="mt-1 text-muted-foreground">
-					Scan the nitro directories for fake bundles (no matching furniture)
-					and broken bundles (unparseable) and remove them.
-				</p>
-			</div>
+		<StudioPage
+			icon={FileX2}
+			title={t("nav.nitroCleanup")}
+			subtitle={t("pages.nitroCleanupSubtitle")}
+		>
 			<NitroCleanupPanel />
-		</div>
+		</StudioPage>
 	);
 }

src/app/admin/studio/pets/page.tsx

@@ -1,5 +1,8 @@
+import { Cat } from "lucide-react";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { ImportPetsClient } from "@/app/admin/import/pets/import-pets-client";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function StudioPetsPage(_props: {
@@ -9,9 +12,14 @@ export default async function StudioPetsPage(_props: {
 	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
 		redirect("/admin");
 	}
+	const t = await getTranslations("admin.studio");
 	return (
-		<div className="p-4">
+		<StudioPage
+			icon={Cat}
+			title={t("nav.pets")}
+			subtitle={t("pages.petsSubtitle")}
+		>
 			<ImportPetsClient />
-		</div>
+		</StudioPage>
 	);
 }

src/app/admin/studio/repair-icons/page.tsx

@@ -1,5 +1,8 @@
+import { Image as ImageIcon } from "lucide-react";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { RepairIconsClient } from "@/app/admin/import/repair-icons/repair-icons-client";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function StudioRepairIconsPage(_props: {
@@ -9,19 +12,14 @@ export default async function StudioRepairIconsPage(_props: {
 	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
 		redirect("/admin");
 	}
+	const t = await getTranslations("admin.studio");
 	return (
-		<div className="space-y-6 p-4">
-			<div>
-				<h1 className="text-2xl font-bold tracking-tight">
-					Repair Missing Icons
-				</h1>
-				<p className="mt-1 text-muted-foreground">
-					Scan all existing furniture and download any missing icon files. Icons
-					are extracted from local .nitro bundles or fetched from configured
-					clone sources.
-				</p>
-			</div>
+		<StudioPage
+			icon={ImageIcon}
+			title={t("pages.repairIconsTitle")}
+			subtitle={t("pages.repairIconsSubtitle")}
+		>
 			<RepairIconsClient />
-		</div>
+		</StudioPage>
 	);
 }

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

src/app/admin/studio/sync/catalog-git-configuration.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -13,6 +14,7 @@ interface Configuration {
 	hasToken: boolean;
 }
 export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
+	const t = useTranslations("admin.studio.sync");
 	const [config, setConfig] = useState<Configuration | null>(null),
 		[token, setToken] = useState(""),
 		[busy, setBusy] = useState(false),
@@ -26,10 +28,7 @@ export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
 					signal: abort.signal,
 					cache: "no-store",
 				});
-				if (!res.ok)
-					throw new Error(
-						"Unable to read Git settings. Settings edit permission is required.",
-					);
+				if (!res.ok) throw new Error(t("loadFailed"));
 				const data = await res.json();
 				if (!abort.signal.aborted) setConfig(data);
 			} catch (error) {
@@ -37,7 +36,7 @@ export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
 			}
 		})();
 		return () => abort.abort();
-	}, []);
+	}, [t]);
 	async function submit(action: "save" | "test") {
 		if (!config || busy) return;
 		setBusy(true);
@@ -50,12 +49,11 @@ export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
 				body: JSON.stringify({ ...config, token, action }),
 			});
 			const data = await res.json();
-			if (!res.ok)
-				throw new Error(data.error || "Git configuration request failed");
+			if (!res.ok) throw new Error(data.error || t("requestFailed"));
 			if (action === "save") {
 				setConfig(data);
 				setToken("");
-				setMessage("Gitea configuration saved.");
+				setMessage(t("saved"));
 				onSaved();
 			} else setMessage(data.message);
 		} catch (error) {
@@ -70,19 +68,18 @@ export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
 			open
 		>
 			<summary className="cursor-pointer font-semibold">
-				Gitea connection settings
+				{t("gitTitle")}
 			</summary>
 			<p className="my-3 text-sm text-[var(--admin-text-muted)]">
-				Connect your self-hosted Gitea repository over HTTPS. The CMS manages
-				its own checkout; no Git-specific .env settings are needed.
+				{t("gitIntro")}
 			</p>
 			{config && (
 				<fieldset disabled={busy} className="space-y-3">
 					<p className="text-sm">
-						Provider: <strong>Gitea self-hosted</strong>
+						{t("providerLabel")} <strong>{t("providerValue")}</strong>
 					</p>
 					<label htmlFor="catalog-git-1" className="block text-sm">
-						Repository URL
+						{t("repositoryUrl")}
 						<Input
 							id="catalog-git-1"
 							type="url"
@@ -94,7 +91,7 @@ export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
 					</label>
 					<div className="grid gap-3 sm:grid-cols-2">
 						<label htmlFor="catalog-git-2" className="block text-sm">
-							Branch
+							{t("branch")}
 							<Input
 								id="catalog-git-2"
 								value={config.branch}
@@ -104,7 +101,7 @@ export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
 							/>
 						</label>
 						<label htmlFor="catalog-git-3" className="block text-sm">
-							Gitea username
+							{t("username")}
 							<Input
 								id="catalog-git-3"
 								autoComplete="off"
@@ -116,23 +113,18 @@ export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
 						</label>
 					</div>
 					<label htmlFor="catalog-git-4" className="block text-sm">
-						Gitea access token
+						{t("accessToken")}
 						<Input
 							id="catalog-git-4"
 							type="password"
 							autoComplete="new-password"
 							value={token}
-							placeholder={
-								config.hasToken
-									? "Token saved — leave blank to keep it"
-									: "Enter a token with repository write access"
-							}
+							placeholder={config.hasToken ? t("tokenSaved") : t("tokenEnter")}
 							onChange={(event) => setToken(event.target.value)}
 						/>
 					</label>
 					<p className="text-xs text-[var(--admin-text-muted)]">
-						The token is stored encrypted and is never returned to the browser.
-						Changing repository or username requires entering the token again.
+						{t("tokenNote")}
 					</p>
 					<label className="flex items-center gap-2 text-sm">
 						<input
@@ -142,14 +134,14 @@ export function CatalogGitConfiguration({ onSaved }: { onSaved: () => void }) {
 								setConfig({ ...config, enabled: event.target.checked })
 							}
 						/>
-						Automatically export catalog changes
+						{t("autoExport")}
 					</label>
 					<div className="flex flex-wrap gap-2">
 						<Button variant="outline" onClick={() => void submit("test")}>
-							Test connection
+							{t("testConnection")}
 						</Button>
 						<Button onClick={() => void submit("save")}>
-							{busy ? "Working…" : "Save Gitea settings"}
+							{busy ? t("working") : t("saveSettings")}
 						</Button>
 					</div>
 				</fieldset>

src/app/admin/studio/sync/page.tsx

@@ -1,6 +1,9 @@
+import { RefreshCw } from "lucide-react";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { OfficialSyncClient } from "@/app/admin/import/official/official-sync-client";
 import { SyncAllClient } from "@/app/admin/import/sync/sync-all-client";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 import { CatalogExportClient } from "./catalog-export-client";
@@ -12,44 +15,42 @@ export default async function StudioSyncPage(_props: {
 	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
 		redirect("/admin");
 	}
+	const t = await getTranslations("admin.studio");
 	return (
-		<div className="space-y-8">
-			<CatalogExportClient
-				canConfigure={canAccess(
-					permissions,
-					PERMS.SETTINGS_EDIT,
-					session.user.rank,
-				)}
-			/>
-			<h1 className="text-2xl font-bold tracking-tight">Sync All Sources</h1>
-			<p className="text-muted-foreground mt-2">
-				Scan configured sources and automatically import any furniture that is
-				not yet present in your hotel.
-			</p>
+		<StudioPage
+			icon={RefreshCw}
+			title={t("nav.syncRepository")}
+			subtitle={t("sync.pageSubtitle")}
+		>
+			<div className="space-y-6">
+				<CatalogExportClient
+					canConfigure={canAccess(
+						permissions,
+						PERMS.SETTINGS_EDIT,
+						session.user.rank,
+					)}
+				/>
 
-			<div className="space-y-4">
-				<div>
-					<h2 className="text-lg font-semibold text-muted-foreground mb-2">
-						Clone Sources
+				<section className="space-y-3 rounded-lg border border-[var(--admin-border)] p-4">
+					<h2 className="text-lg font-semibold">
+						{t("sync.cloneSourcesTitle")}
 					</h2>
-					<p className="text-sm text-muted-foreground">
-						Scan all configured clone sources and automatically import any
-						furniture that is not yet present in your hotel.
+					<p className="text-sm text-[var(--admin-text-muted)]">
+						{t("sync.cloneSourcesBody")}
 					</p>
 					<SyncAllClient />
-				</div>
+				</section>
 
-				<div>
-					<h2 className="text-lg font-semibold text-muted-foreground mb-2">
-						Official Furnidata
+				<section className="space-y-3 rounded-lg border border-[var(--admin-border)] p-4">
+					<h2 className="text-lg font-semibold">
+						{t("sync.officialFurnidataTitle")}
 					</h2>
-					<p className="text-sm text-muted-foreground">
-						Scan the official Habbo furnidata and automatically import any
-						furniture that your hotel doesn't have yet.
+					<p className="text-sm text-[var(--admin-text-muted)]">
+						{t("sync.officialFurnidataBody")}
 					</p>
 					<OfficialSyncClient />
-				</div>
+				</section>
 			</div>
-		</div>
+		</StudioPage>
 	);
 }

src/app/admin/studio/upload/page.tsx

@@ -1,5 +1,8 @@
+import { Upload } from "lucide-react";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { UploadFurniClient } from "@/app/admin/import/furni/upload/upload-furni-client";
+import { StudioPage } from "@/components/admin/studio/studio-page";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function StudioUploadPage(_props: {
@@ -9,19 +12,14 @@ export default async function StudioUploadPage(_props: {
 	if (!canAccess(permissions, PERMS.ASSETS_IMPORT, session.user.rank)) {
 		redirect("/admin");
 	}
+	const t = await getTranslations("admin.studio");
 	return (
-		<div className="space-y-6 p-4">
-			<div>
-				<h1 className="text-2xl font-bold tracking-tight">
-					Upload .hab Furniture
-				</h1>
-				<p className="mt-1 text-muted-foreground">
-					Upload a .hab bundle and optional icon to import furniture into the
-					hotel. The database entry, catalog item, and FurnitureData.json will
-					be updated automatically.
-				</p>
-			</div>
+		<StudioPage
+			icon={Upload}
+			title={t("pages.uploadTitle")}
+			subtitle={t("pages.uploadSubtitle")}
+		>
 			<UploadFurniClient />
-		</div>
+		</StudioPage>
 	);
 }