feat: per-import translation toggle and language picker in studio
CI / check (push) Successful in 28s
CI / release (push) Skipped
CI / deploy (push) Successful in 53s

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.
This commit is contained in:
openhands committed 2026-08-24 18:16:42 +02:00
1 parent d6af754211
commit 6dced0fb54
5 files changed
+223 -10

No files matched your search

+18
View File
@@ -1,6 +1,7 @@
"use server";
import { z } from "zod";
import { db, WebsiteSetting } from "@/lib/db";
import { PERMS } from "@/lib/permissions";
import { adminAction } from "@/lib/safe-action";
import { actionOk } from "@/lib/safe-action-shared";
@@ -8,6 +9,7 @@ import {
cleanupConvertedSwfs,
deleteImportedItem,
} from "@/lib/services/furni-import";
import { siteSettings } from "@/lib/services/site-settings";
export const cleanSwfFiles = adminAction(
{ permission: PERMS.ASSETS_IMPORT },
@@ -29,3 +31,19 @@ export const deleteImportedFurni = adminAction(
>,
),
);
const translateToggleSchema = z.object({ enabled: z.boolean() });
/** Persist the global "translate furniture names" setting from the studio. */
export const setFurnidataTranslateEnabled = adminAction(
{ permission: PERMS.ASSETS_IMPORT, schema: translateToggleSchema },
async (ctx) => {
const value = ctx.data.enabled ? "1" : "0";
await db
.insert(WebsiteSetting)
.values({ key: "furnidata_translate_enabled", value })
.onDuplicateKeyUpdate({ set: { value } });
await siteSettings.reload();
return actionOk({ enabled: ctx.data.enabled });
},
);
+4 -1
View File
@@ -4,6 +4,7 @@ import { buildFurniImportSource } from "@/lib/habbo-gamedata-hotel";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { getTreeFlat } from "@/lib/services/catalog-tree";
import { getHabboGamedataHotel } from "@/lib/services/habbo-gamedata-hotel";
import { siteSettings } from "@/lib/services/site-settings";
export default async function StudioFurniPage(_props: {
params: Promise<{ locale: string }>;
@@ -13,15 +14,17 @@ export default async function StudioFurniPage(_props: {
redirect("/admin");
}
const [hotel, catalogTree] = await Promise.all([
const [hotel, catalogTree, translateEnabled] = await Promise.all([
getHabboGamedataHotel(),
getTreeFlat(),
siteSettings.getBool("furnidata_translate_enabled", true),
]);
return (
<StudioClient
source={buildFurniImportSource(hotel)}
initialTree={catalogTree}
defaultTranslate={translateEnabled}
/>
);
}
+29 -6
View File
@@ -527,11 +527,24 @@ export const POST = withAdmin(
const { catalogNameFixed, haveOfferFixed, costCreditsFixed } =
await fixDatabaseConsistencyAfterImport();
// Rebuild all localized furnidata files (best effort)
// Rebuild localized furnidata files (best effort). `translate: false`
// skips entirely; `translate: true` forces a build even when the global
// setting is off; undefined falls back to the global setting. An optional
// `langs` array restricts which languages are rebuilt.
let languages: Awaited<ReturnType<typeof buildLocalizedFurniDataFiles>> =
[];
try {
languages = await buildLocalizedFurniDataFiles();
if (body.translate !== false) {
const langs = Array.isArray(body.langs)
? (body.langs as unknown[]).filter(
(l): l is string => typeof l === "string",
)
: undefined;
languages = await buildLocalizedFurniDataFiles(
body.translate === true,
langs,
);
}
} catch (err) {
console.warn(
"[import-furni] Localized furnidata build failed:",
@@ -638,14 +651,24 @@ export const POST = withAdmin(
// Verify + fix interaction_modes_count (single consolidated pass)
const verification = await verifyAndFixInteractionModesCount();
// Patch localized furnidata files for this single furni (best effort)
// Patch localized furnidata files for this single furni (best effort).
// Same `translate` / `langs` contract as the batch path above.
let languagesPatch: Awaited<
ReturnType<typeof patchLocalizedFurniDataEntries>
> = [];
try {
languagesPatch = await patchLocalizedFurniDataEntries([
{ classname, name, description: description ?? "" },
]);
if (body.translate !== false) {
const langs = Array.isArray(body.langs)
? (body.langs as unknown[]).filter(
(l): l is string => typeof l === "string",
)
: undefined;
languagesPatch = await patchLocalizedFurniDataEntries(
[{ classname, name, description: description ?? "" }],
body.translate === true,
langs,
);
}
} catch (err) {
console.warn(
"[import-furni] Localized patch failed:",
+159 -1
View File
@@ -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 && (
+13 -2
View File
@@ -433,6 +433,7 @@ function cloneFurniData(
*/
export async function buildLocalizedFurniDataFiles(
force = false,
langs?: readonly string[],
): Promise<LanguageFileResult[]> {
if (!force && !(await translationEnabled())) {
logger.debug(
@@ -440,6 +441,10 @@ export async function buildLocalizedFurniDataFiles(
);
return [];
}
const langsToBuild =
langs && langs.length > 0
? FURNIDATA_LANGUAGES.filter((l) => langs.includes(l.lang))
: FURNIDATA_LANGUAGES;
return withFurniDataLock(async () => {
const master = (await readFurniData()) as Record<
string,
@@ -448,7 +453,7 @@ export async function buildLocalizedFurniDataFiles(
// Fetch all language maps in parallel (uses per-hotel memory cache).
const maps = await Promise.all(
FURNIDATA_LANGUAGES.map(async ({ lang, hotel }) => {
langsToBuild.map(async ({ lang, hotel }) => {
const map = await fetchTranslationsForHotel(hotel);
return { lang, hotel, map };
}),
@@ -577,6 +582,7 @@ export async function buildLocalizedFurniDataFiles(
export async function patchLocalizedFurniDataEntries(
entries: Array<{ classname: string; name?: string; description?: string }>,
force = false,
langs?: readonly string[],
): Promise<LanguageFileResult[]> {
if (entries.length === 0) return [];
if (!force && !(await translationEnabled())) {
@@ -586,9 +592,14 @@ export async function patchLocalizedFurniDataEntries(
return [];
}
const langsToBuild =
langs && langs.length > 0
? FURNIDATA_LANGUAGES.filter((l) => langs.includes(l.lang))
: FURNIDATA_LANGUAGES;
return withFurniDataLock(async () => {
const maps = await Promise.all(
FURNIDATA_LANGUAGES.map(async ({ lang, hotel }) => {
langsToBuild.map(async ({ lang, hotel }) => {
const map = await fetchTranslationsForHotel(hotel);
return { lang, hotel, map };
}),