feat: per-import translation toggle and language picker in studio

Furni imports can now choose whether to translate (per import) and which
languages to build, instead of always rebuilding all 13 FurnitureData_<lang>
files. The studio header also has a global switch that persists the
furnidata_translate_enabled setting, seeding the per-import default.

src/components/admin/studio/studio-client.tsx

@@ -6,6 +6,8 @@ import {
 	CircleAlert,
 	CloudDownload,
 	Download,
+	Globe,
+	Languages,
 	Layers,
 	LayoutGrid,
 	List,
@@ -23,7 +25,10 @@ import {
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
-import { deleteImportedFurni } from "@/actions/import-furni";
+import {
+	deleteImportedFurni,
+	setFurnidataTranslateEnabled,
+} from "@/actions/import-furni";
 import { NitroEditorDialog } from "@/app/admin/import/furni/nitro-editor-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -36,6 +41,11 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
 import {
 	Select,
 	SelectContent,
@@ -43,6 +53,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { adminFetch } from "@/lib/admin-fetch";
 import {
 	type AutoCatalogPreview,
@@ -67,12 +78,33 @@ import type {
 	VerificationSummary,
 } from "./studio-types";
 
+// Language codes that get a FurnitureData_<lang>.json file. Mirrors
+// FURNIDATA_LANGUAGES in furni-data-i18n (kept client-safe here so we don't pull
+// server-only fs modules into the browser bundle).
+const TRANSLATE_LANGS = [
+	"nl",
+	"en",
+	"de",
+	"fr",
+	"es",
+	"tr",
+	"it",
+	"pt",
+	"fi",
+	"pl",
+	"ru",
+	"ar",
+	"ja",
+] as const;
+
 export function StudioClient({
 	source,
 	initialTree,
+	defaultTranslate,
 }: {
 	source: FurniImportSource;
 	initialTree: TreeNode[];
+	defaultTranslate: boolean;
 }) {
 	// Catalog tree
 	const [tree] = useState<TreeNode[]>(initialTree);
@@ -137,6 +169,32 @@ export function StudioClient({
 		new Set(),
 	);
 
+	// Translation controls (per-import toggle + language selection, plus a global
+	// default that persists to the site setting and seeds the per-import toggle).
+	const ALL_LANGS = TRANSLATE_LANGS as readonly string[];
+	const [translate, setTranslate] = useState<boolean>(defaultTranslate);
+	const [translateLangs, setTranslateLangs] = useState<string[]>([
+		...ALL_LANGS,
+	]);
+	const [langPickerOpen, setLangPickerOpen] = useState(false);
+	const [globalTranslate, setGlobalTranslate] =
+		useState<boolean>(defaultTranslate);
+
+	const toggleLang = (lang: string) =>
+		setTranslateLangs((prev) =>
+			prev.includes(lang) ? prev.filter((l) => l !== lang) : [...prev, lang],
+		);
+
+	const onGlobalTranslateChange = async (next: boolean) => {
+		setGlobalTranslate(next);
+		setTranslate(next);
+		try {
+			await setFurnidataTranslateEnabled({ enabled: next });
+		} catch {
+			toast.error("Kon de globale vertaal-instelling niet opslaan");
+		}
+	};
+
 	const categories = useMemo(() => {
 		const cats = new Set(items.map((i) => i.category).filter(Boolean));
 		return ["all", ...Array.from(cats).sort()];
@@ -353,6 +411,9 @@ export function StudioClient({
 					revision: item.revision,
 					category: item.category,
 					sourceId: activeSource || undefined,
+					translate,
+					langs:
+						translate && translateLangs.length > 0 ? translateLangs : undefined,
 				}),
 			});
 			const data = await res.json();
@@ -428,6 +489,9 @@ export function StudioClient({
 						category: i.category,
 					})),
 					concurrency: 3,
+					translate,
+					langs:
+						translate && translateLangs.length > 0 ? translateLangs : undefined,
 				}),
 				signal: abort.signal,
 			});
@@ -675,6 +739,18 @@ export function StudioClient({
 						</>
 					)}
 				</div>
+
+				<div className="flex items-center gap-1.5 rounded-md border border-[var(--admin-border)] px-2.5 py-1">
+					<Switch
+						checked={globalTranslate}
+						onCheckedChange={onGlobalTranslateChange}
+						aria-label="Globale vertaling"
+					/>
+					<Globe size={13} className="text-[var(--admin-text-muted)]" />
+					<span className="text-xs font-medium text-[var(--admin-text-muted)]">
+						Vertaling (globaal)
+					</span>
+				</div>
 			</header>
 
 			{/* ── Filters + actions ─────────────────────────────── */}
@@ -839,6 +915,88 @@ export function StudioClient({
 					</button>
 				)}
 
+				{/* ── Translate control (per-import) ─────────────── */}
+				<div className="flex items-center gap-2">
+					<div className="flex h-8 items-center gap-1.5 rounded-md border border-[var(--admin-border)] px-2.5">
+						<Switch
+							checked={translate}
+							onCheckedChange={setTranslate}
+							aria-label="Vertalen bij import"
+						/>
+						<span className="text-xs font-medium text-[var(--admin-text-muted)]">
+							Vertalen
+						</span>
+					</div>
+
+					<Popover open={langPickerOpen} onOpenChange={setLangPickerOpen}>
+						<PopoverTrigger asChild>
+							<Button
+								variant="outline"
+								size="sm"
+								className="h-8 gap-1.5"
+								disabled={!translate}
+							>
+								<Languages size={13} />
+								{translateLangs.length === 0
+									? "Geen talen"
+									: translateLangs.length === ALL_LANGS.length
+										? "Alle talen"
+										: `${translateLangs.length} talen`}
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent className="w-60 p-2">
+							<div className="mb-2 flex items-center justify-between">
+								<span className="text-xs font-semibold text-[var(--admin-text)]">
+									Talen
+								</span>
+								<div className="flex gap-1">
+									<Button
+										variant="ghost"
+										size="sm"
+										className="h-6 px-2 text-[0.65rem]"
+										onClick={() => setTranslateLangs([...ALL_LANGS])}
+									>
+										Alles
+									</Button>
+									<Button
+										variant="ghost"
+										size="sm"
+										className="h-6 px-2 text-[0.65rem]"
+										onClick={() => setTranslateLangs([])}
+									>
+										Geen
+									</Button>
+								</div>
+							</div>
+							<div className="grid max-h-56 grid-cols-2 gap-1 overflow-y-auto">
+								{ALL_LANGS.map((lang) => {
+									const on = translateLangs.includes(lang);
+									return (
+										<button
+											key={lang}
+											type="button"
+											onClick={() => toggleLang(lang)}
+											className={cn(
+												"flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs transition-colors",
+												on
+													? "border-[var(--admin-accent)] bg-[var(--admin-accent)]/10 text-[var(--admin-text)]"
+													: "border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10",
+											)}
+										>
+											<Checkbox
+												checked={on}
+												aria-label={`Taal ${lang}`}
+												tabIndex={-1}
+											/>
+											{lang.toUpperCase()}
+										</button>
+									);
+								})}
+							</div>
+						</PopoverContent>
+					</Popover>
+				</div>
+
 				<div className="flex-1" />
 
 				{selectedNonImported > 0 && (