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