perf(studio): defer optional panels and trim validator imports

e2e/ui/fixture-server.mjs

@@ -15,6 +15,7 @@ const port = Number(process.env.UI_TEST_PORT || 3107);
 if (!Number.isInteger(port) || port < 1024 || port > 65535)
 	throw Error("Invalid UI_TEST_PORT");
 const actions = new Set([
+	"@/actions/import-furni",
 	"@/actions/events",
 	"@/actions/admin-settings",
 	"@/actions/admin-table-views",
@@ -197,6 +198,7 @@ const server = createServer(async (req, res) => {
 		if (
 			[
 				"/admin/attachment-harness",
+				"/admin/studio-harness",
 				"/admin/jobs-harness",
 				"/admin/settings",
 				"/admin/articles/new",

e2e/ui/fixtures/entry.tsx

@@ -7,7 +7,9 @@ import { CmsSettingsForm } from "@/app/admin/settings/cms-settings-form";
 import { TicketsTable } from "@/app/admin/tickets/tickets-table";
 import { ArticleForm } from "@/components/admin/article-form";
 import { FurnitureSyncQueue } from "@/components/admin/studio/furniture-sync-queue";
+import { StudioClient } from "@/components/admin/studio/studio-client";
 import type { ArticleSaveResult } from "@/lib/article-input";
+import { buildFurniImportSource } from "@/lib/habbo-gamedata-hotel";
 import { themePaletteCss } from "@/lib/theme-css";
 import { PRESETS } from "@/lib/theme-presets";
 import messages from "@/messages/en.json";
@@ -103,7 +105,13 @@ createRoot(root).render(
 							? "News editor"
 							: "Furniture synchronization"}
 			</h1>
-			{route.includes("attachment-harness") ? (
+			{route.includes("studio-harness") ? (
+				<StudioClient
+					source={buildFurniImportSource("it")}
+					initialTree={[]}
+					defaultTranslate={false}
+				/>
+			) : route.includes("attachment-harness") ? (
 				<AttachmentHarness />
 			) : route.includes("events/recovery") ? (
 				<EventForm

e2e/ui/fixtures/server-actions.ts

@@ -27,3 +27,8 @@ export const createEvent = (input: unknown) =>
 	fixtureAction("create-event", input);
 export const updateEvent = (input: unknown) =>
 	fixtureAction("update-event", input);
+
+export const deleteImportedFurni = (input: unknown) =>
+	fixtureAction("delete-imported-furni", input);
+export const setFurnidataTranslateEnabled = (input: unknown) =>
+	fixtureAction("furnidata-translation", input);

e2e/ui/studio.spec.ts

@@ -0,0 +1,164 @@
+import { expect, test } from "@playwright/test";
+
+const items = [
+	{
+		id: 1,
+		classname: "fixture_chair",
+		name: "Fixture chair",
+		description: "Synthetic chair",
+		type: "flooritem",
+		revision: 1,
+		category: "other",
+		alreadyImported: true,
+		nitroExists: true,
+		iconUrl: "/fixture/cover.svg",
+	},
+	{
+		id: 2,
+		classname: "fixture_table",
+		name: "Fixture table",
+		description: "Synthetic table",
+		type: "flooritem",
+		revision: 1,
+		category: "other",
+		alreadyImported: false,
+		nitroExists: false,
+		iconUrl: "/fixture/cover.svg",
+	},
+];
+
+test("Studio opens and dismisses detail, Nitro editor and import review", async ({
+	page,
+}) => {
+	const errors: string[] = [];
+	const mutations: string[] = [];
+	let metadataRequests = 0;
+	page.on("pageerror", (error) => errors.push(error.message));
+	await page.route("**/api/**", async (route) => {
+		const request = route.request();
+		const url = new URL(request.url());
+		if (url.pathname === "/api/admin/studio/inspect") {
+			const { classnames } = request.postDataJSON() as { classnames: string[] };
+			return route.fulfill({
+				json: {
+					items: classnames.map((classname) => ({
+						classname,
+						sql: [],
+						catalog: [],
+						furnidata: [],
+						furnidataReadable: true,
+						nitro: { exists: false, bytes: 0 },
+						icon: { exists: false, bytes: 0 },
+					})),
+				},
+			});
+		}
+		if (url.pathname === "/api/admin/studio/source-assets") {
+			const body = request.postDataJSON() as {
+				items: Array<{ classname: string }>;
+			};
+			return route.fulfill({
+				json: {
+					items: body.items.map(({ classname }) => ({
+						classname,
+						state: "available",
+						revision: 1,
+						alternatives: [],
+						attempts: [],
+					})),
+				},
+			});
+		}
+		if (request.method() !== "GET") {
+			mutations.push(`${request.method()} ${url.pathname}`);
+			return route.fulfill({
+				status: 405,
+				json: { error: "Fixture forbids mutations" },
+			});
+		}
+		if (url.pathname.endsWith("/nitro-editor")) {
+			metadataRequests++;
+			return route.fulfill({
+				json: {
+					metadata: {
+						name: "fixture_chair",
+						logicType: "furniture_basic",
+						visualizationType: "furniture_static",
+					},
+					flags: { canstandon: false, cansiton: false, canlayon: false },
+				},
+			});
+		}
+		if (url.pathname === "/api/admin/import/furni") {
+			return route.fulfill({
+				json:
+					url.searchParams.get("action") === "stats"
+						? { totalInDb: 1, inCatalog: 1, notInCatalog: 0, missingNitro: 0 }
+						: {
+								items,
+								meta: { currentPage: 1, lastPage: 1, total: 2, perPage: 20 },
+							},
+			});
+		}
+		if (url.pathname === "/api/admin/import/clone")
+			return route.fulfill({ json: { sources: [] } });
+		if (url.pathname === "/api/admin/studio/import-jobs")
+			return route.fulfill({ json: { ok: true, jobs: [], nextCursor: null } });
+		return route.fulfill({
+			status: 404,
+			json: { error: "Unknown fixture endpoint" },
+		});
+	});
+	await page.goto("/admin/studio-harness");
+	await expect(
+		page.getByRole("button", { name: "View Fixture chair", exact: true }),
+	).toBeVisible();
+	expect(metadataRequests).toBe(0);
+	await page
+		.getByRole("button", { name: "View Fixture chair", exact: true })
+		.click();
+	await expect(
+		page.getByRole("button", { name: "Close furniture details", exact: true }),
+	).toBeVisible();
+	await expect(
+		page.getByText("Synthetic chair", { exact: true }).first(),
+	).toBeVisible();
+	await page
+		.getByRole("button", { name: "Close furniture details", exact: true })
+		.click();
+	await expect(
+		page.getByRole("button", { name: "Close furniture details", exact: true }),
+	).toHaveCount(0);
+	await page
+		.getByRole("button", { name: "Edit nitro fixture_chair", exact: true })
+		.click();
+	const editor = page.getByRole("dialog", { name: "Edit Nitro", exact: true });
+	await expect(editor).toBeVisible();
+	await expect(
+		editor.getByRole("switch", { name: "Can Sit On", exact: true }),
+	).toBeVisible();
+	expect(metadataRequests).toBe(1);
+	await editor.getByRole("button", { name: "Cancel", exact: true }).click();
+	await expect(editor).toHaveCount(0);
+	await page
+		.getByRole("button", { name: "Import fixture_table", exact: true })
+		.click();
+	const review = page.getByRole("dialog", {
+		name: "Review furniture import",
+		exact: true,
+	});
+	await expect(review).toBeVisible();
+	await expect(
+		review.getByText("Fixture table", { exact: true }),
+	).toBeVisible();
+	await expect(
+		review.getByRole("button", {
+			name: "Continue to confirmation",
+			exact: true,
+		}),
+	).toBeEnabled();
+	await review.getByRole("button", { name: "Cancel", exact: true }).click();
+	await expect(review).toHaveCount(0);
+	expect(mutations).toEqual([]);
+	expect(errors).toEqual([]);
+});