feat(ui): F8-05 — game-mode chrome cleanup + inspector compact rows (#48)

Drains six F8 polish items (parent #43) in one feature:

а) Chrome cleanup
- п.6 — remove the AccountMenu (settings/sessions/theme/language/logout
  ∼ rudimentary in-game) and replace it with a single icon-button
  light/dark theme toggle. The toggle flips an in-memory `theme.override`;
  game-shell unmount calls `theme.clearOverride()` so the lobby (and
  any re-entry) re-projects the persisted lobby choice.
- п.8 — remove the wrap-scrolling radio from the map gear popover. The
  per-game `wrapMode` store and the renderer's no-wrap path stay in
  place for a future engine-side topology feature; only the UI surface
  is dropped (wrap is a server-side concept, not a per-session UI
  affordance).

б) Inspector compact rows (single idiom: select + ✓ apply / ✗ cancel,
or contextual edit/remove/add)
- п.13 — planet name is now click-to-edit: clicking the name opens an
  inline `<input>` + ✓ confirm icon; Escape cancels; the explicit
  Rename action button and Cancel button are gone.
- п.14 — production becomes one row: primary `<select>` picks
  industry/materials/research/ship, conditional secondary `<select>`
  picks the target (tech / science / ship class) for research and
  ship contexts. Apply is gated until row state differs from the
  planet's current effective production; auto-submit-on-click is
  replaced by the apply-gate.
- п.16 — cargo routes collapse to one row: a single dropdown
  (COL/CAP/MAT/EMP plus a placeholder that absorbs the old section
  title) and contextual action buttons (add / edit + remove) to the
  right. After a successful pick or remove the dropdown stays on the
  type the user just acted on.
- п.32 — stationed ship groups hoist the race column into a dropdown
  above the table. The dropdown seeds with the player's own race when
  local groups are stationed here, otherwise the first race
  alphabetically; rendered only when more than one race is in orbit.
  The race column is dropped in both single- and multi-race modes —
  the dropdown's value already names the active race.

Tests: unit and Playwright e2e updated for every changed test-id and
flow; new coverage added for `theme.override`, the in-game toggle, the
apply-gate behaviour, and the stationed-race dropdown. i18n keys for
the removed menu items, the wrap radios, the cargo title, and the
explicit `rename.cancel` are dropped from both locales; new
`game.shell.theme_toggle.*`, `production.main/target.*`,
`production.apply/cancel`, `cargo.placeholder`, and
`ship_groups.race_filter.aria` keys land.

Docs synced: `docs/FUNCTIONAL.md` §6.7 + `docs/FUNCTIONAL_ru.md`
mirror drop the torus / no-wrap radio mention; `ui/docs/design-system.md`
documents the lobby-owned persisted picker + the in-game ephemeral
override channel.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

ui/frontend/tests/inspector-planet-production.test.ts

@@ -1,13 +1,17 @@
-// Vitest component coverage for the Phase 15 production-controls
-// subsection of the planet inspector. Drives the component against a
-// real `OrderDraftStore` (with `fake-indexeddb` standing in for the
-// browser's IDB factory) so the collapse-by-`planetNumber` rule and
-// the per-row status side-effects are exercised end-to-end.
+// Vitest component coverage for the F8-05 production-controls
+// subsection of the planet inspector. The pre-F8-05 surface was four
+// segmented main buttons (auto-submitting on click) plus a contextual
+// sub-row; F8-05 replaced it with two `<select>`s (main / target) and
+// a green ✓ apply / yellow ✗ cancel pair on the same row. The apply
+// gate is the new behaviour: row state is dirty when the user picked
+// something different from the planet's current effective production,
+// and only then can the player commit via the ✓.
 //
-// The active-segment derivation is covered by direct render-and-
-// query assertions: the parser is small enough that a table-driven
-// pass over the canonical engine display strings catches every
-// branch.
+// The tests drive the component against a real `OrderDraftStore`
+// (with `fake-indexeddb` standing in for the browser's IDB factory)
+// so the collapse-by-`planetNumber` rule remains exercised. The
+// active-target derivation is covered by a table-driven pass over the
+// canonical engine display strings.
 
 import "@testing-library/jest-dom/vitest";
 import "fake-indexeddb/auto";
@@ -106,28 +110,51 @@ function mountProduction(
 	});
 }
 
+function getMain(ui: ReturnType<typeof mountProduction>): HTMLSelectElement {
+	return ui.getByTestId("inspector-planet-production-main") as HTMLSelectElement;
+}
+
+function getTarget(
+	ui: ReturnType<typeof mountProduction>,
+): HTMLSelectElement {
+	return ui.getByTestId(
+		"inspector-planet-production-target",
+	) as HTMLSelectElement;
+}
+
 describe("planet inspector — production controls", () => {
-	test("renders the four main segments with localised labels", () => {
+	test("renders the main select with localised options and ✓/✗ icons", () => {
 		const ui = mountProduction(localPlanet({ number: 1 }));
+		const main = getMain(ui);
+		expect(main.value).toBe("");
+		const labels = Array.from(main.options).map((o) => o.textContent?.trim());
+		// One placeholder + the four production kinds, in the documented order.
+		expect(labels).toEqual([
+			"(production)",
+			"industry",
+			"materials",
+			"research",
+			"build ship",
+		]);
+		// No secondary select until research / ship is chosen.
 		expect(
-			ui.getByTestId("inspector-planet-production-segment-industry"),
-		).toHaveTextContent("industry");
+			ui.queryByTestId("inspector-planet-production-target"),
+		).toBeNull();
 		expect(
-			ui.getByTestId("inspector-planet-production-segment-materials"),
-		).toHaveTextContent("materials");
+			ui.getByTestId("inspector-planet-production-apply"),
+		).toBeDisabled();
 		expect(
-			ui.getByTestId("inspector-planet-production-segment-research"),
-		).toHaveTextContent("research");
-		expect(
-			ui.getByTestId("inspector-planet-production-segment-ship"),
-		).toHaveTextContent("build ship");
+			ui.getByTestId("inspector-planet-production-cancel"),
+		).toBeDisabled();
 	});
 
-	test("Industry click emits a CAP setProductionType command", async () => {
+	test("Industry pick + ✓ emits a CAP setProductionType command", async () => {
 		const ui = mountProduction(localPlanet({ number: 7 }));
-		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-segment-industry"),
-		);
+		const main = getMain(ui);
+		await fireEvent.change(main, { target: { value: "industry" } });
+		const apply = ui.getByTestId("inspector-planet-production-apply");
+		expect(apply).not.toBeDisabled();
+		await fireEvent.click(apply);
 		await waitFor(() => expect(draft.commands).toHaveLength(1));
 		const cmd = draft.commands[0]!;
 		expect(cmd.kind).toBe("setProductionType");
@@ -137,32 +164,29 @@ describe("planet inspector — production controls", () => {
 		expect(cmd.subject).toBe("");
 	});
 
-	test("Materials click emits a MAT setProductionType command", async () => {
+	test("Materials pick + ✓ emits a MAT setProductionType command", async () => {
 		const ui = mountProduction(localPlanet({ number: 7 }));
-		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-segment-materials"),
-		);
+		await fireEvent.change(getMain(ui), { target: { value: "materials" } });
+		await fireEvent.click(ui.getByTestId("inspector-planet-production-apply"));
 		await waitFor(() => expect(draft.commands).toHaveLength(1));
 		const cmd = draft.commands[0]!;
 		if (cmd.kind !== "setProductionType") throw new Error("wrong kind");
 		expect(cmd.productionType).toBe("MAT");
 	});
 
-	test("Research click reveals the four tech sub-buttons without emitting", async () => {
+	test("Research pick reveals the target select and apply stays disabled until a tech is chosen", async () => {
 		const ui = mountProduction(localPlanet({ number: 7 }));
 		expect(
-			ui.queryByTestId("inspector-planet-production-research-row"),
+			ui.queryByTestId("inspector-planet-production-target"),
 		).toBeNull();
-		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-segment-research"),
-		);
+		await fireEvent.change(getMain(ui), { target: { value: "research" } });
+		const target = getTarget(ui);
+		expect(target.value).toBe("");
 		expect(
-			ui.getByTestId("inspector-planet-production-research-row"),
-		).toBeInTheDocument();
-		expect(draft.commands).toHaveLength(0);
-		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-research-drive"),
-		);
+			ui.getByTestId("inspector-planet-production-apply"),
+		).toBeDisabled();
+		await fireEvent.change(target, { target: { value: "DRIVE" } });
+		await fireEvent.click(ui.getByTestId("inspector-planet-production-apply"));
 		await waitFor(() => expect(draft.commands).toHaveLength(1));
 		const cmd = draft.commands[0]!;
 		if (cmd.kind !== "setProductionType") throw new Error("wrong kind");
@@ -170,27 +194,39 @@ describe("planet inspector — production controls", () => {
 		expect(cmd.subject).toBe("");
 	});
 
-	test("Build-Ship segment shows the empty placeholder when no classes designed", async () => {
+	test("Research target with a science name emits a SCIENCE subject", async () => {
+		const ui = mountProduction(localPlanet({ number: 7 }), [], [
+			{ name: "Genetics", drive: 0, weapons: 0, shields: 0, cargo: 0 },
+		]);
+		await fireEvent.change(getMain(ui), { target: { value: "research" } });
+		await fireEvent.change(getTarget(ui), { target: { value: "Genetics" } });
+		await fireEvent.click(ui.getByTestId("inspector-planet-production-apply"));
+		await waitFor(() => expect(draft.commands).toHaveLength(1));
+		const cmd = draft.commands[0]!;
+		if (cmd.kind !== "setProductionType") throw new Error("wrong kind");
+		expect(cmd.productionType).toBe("SCIENCE");
+		expect(cmd.subject).toBe("Genetics");
+	});
+
+	test("Build-Ship with no classes shows the empty placeholder option", async () => {
 		const ui = mountProduction(localPlanet({ number: 7 }), []);
-		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-segment-ship"),
-		);
+		await fireEvent.change(getMain(ui), { target: { value: "ship" } });
 		expect(
 			ui.getByTestId("inspector-planet-production-ship-empty"),
 		).toBeInTheDocument();
+		expect(
+			ui.getByTestId("inspector-planet-production-apply"),
+		).toBeDisabled();
 	});
 
-	test("Build-Ship click on a class emits a SHIP setProductionType command", async () => {
+	test("Build-Ship + class pick + ✓ emits a SHIP setProductionType command", async () => {
 		const ui = mountProduction(localPlanet({ number: 7 }), [
 			shipClass({ name: "Scout" }),
 			shipClass({ name: "Destroyer" }),
 		]);
-		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-segment-ship"),
-		);
-		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-ship-Scout"),
-		);
+		await fireEvent.change(getMain(ui), { target: { value: "ship" } });
+		await fireEvent.change(getTarget(ui), { target: { value: "Scout" } });
+		await fireEvent.click(ui.getByTestId("inspector-planet-production-apply"));
 		await waitFor(() => expect(draft.commands).toHaveLength(1));
 		const cmd = draft.commands[0]!;
 		if (cmd.kind !== "setProductionType") throw new Error("wrong kind");
@@ -198,32 +234,41 @@ describe("planet inspector — production controls", () => {
 		expect(cmd.subject).toBe("Scout");
 	});
 
-	test("re-clicks on the same planet collapse to the latest entry via the store", async () => {
-		const ui = mountProduction(localPlanet({ number: 7 }), [
-			shipClass({ name: "Scout" }),
-		]);
-		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-segment-industry"),
+	test("Cancel resets the row to the current effective production without emitting", async () => {
+		const ui = mountProduction(
+			localPlanet({ number: 7, production: "Capital" }),
 		);
+		const main = getMain(ui);
+		expect(main.value).toBe("industry");
+		await fireEvent.change(main, { target: { value: "research" } });
+		expect(
+			ui.getByTestId("inspector-planet-production-cancel"),
+		).not.toBeDisabled();
 		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-segment-materials"),
+			ui.getByTestId("inspector-planet-production-cancel"),
 		);
-		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-segment-research"),
-		);
-		await fireEvent.click(
-			ui.getByTestId("inspector-planet-production-research-cargo"),
-		);
-		await waitFor(() => expect(draft.commands).toHaveLength(1));
-		const cmd = draft.commands[0]!;
-		if (cmd.kind !== "setProductionType") throw new Error("wrong kind");
-		expect(cmd.productionType).toBe("CARGO");
+		expect(getMain(ui).value).toBe("industry");
+		expect(draft.commands).toEqual([]);
 	});
 
-	test("active main segment derives from planet.production display string", () => {
+	test("Apply gate is closed while the row matches the current effective production", () => {
+		const ui = mountProduction(
+			localPlanet({ number: 7, production: "Drive" }),
+		);
+		// On mount the parser seeds research + DRIVE, so the apply
+		// button is inert until the player actually changes something.
+		expect(
+			ui.getByTestId("inspector-planet-production-apply"),
+		).toBeDisabled();
+		expect(
+			ui.getByTestId("inspector-planet-production-cancel"),
+		).toBeDisabled();
+	});
+
+	test("active main derivation seeds the select from planet.production", () => {
 		const cases: ReadonlyArray<{
 			production: string | null;
-			expected: "industry" | "materials" | "research" | "ship" | "none";
+			expected: "" | "industry" | "materials" | "research" | "ship";
 		}> = [
 			{ production: "Capital", expected: "industry" },
 			{ production: "Material", expected: "materials" },
@@ -232,67 +277,46 @@ describe("planet inspector — production controls", () => {
 			{ production: "Shields", expected: "research" },
 			{ production: "Cargo", expected: "research" },
 			{ production: "Scout", expected: "ship" },
-			{ production: "-", expected: "none" },
-			{ production: null, expected: "none" },
-			{ production: "UnknownThing", expected: "none" },
+			{ production: "-", expected: "" },
+			{ production: null, expected: "" },
+			{ production: "UnknownThing", expected: "" },
 		];
 		for (const tc of cases) {
 			const ui = mountProduction(
 				localPlanet({ number: 1, production: tc.production }),
 				[shipClass({ name: "Scout" })],
 			);
-			const ids: ReadonlyArray<
-				"industry" | "materials" | "research" | "ship"
-			> = ["industry", "materials", "research", "ship"];
-			for (const id of ids) {
-				const el = ui.getByTestId(
-					`inspector-planet-production-segment-${id}`,
-				);
-				if (tc.expected === id) {
-					expect(el.classList.contains("active")).toBe(true);
-				} else {
-					expect(el.classList.contains("active")).toBe(false);
-				}
-			}
+			expect(getMain(ui).value).toBe(tc.expected);
 			ui.unmount();
 		}
 	});
 
-	test("active research sub-button highlights for known display strings", () => {
+	test("active target seeds the secondary select for research display strings", () => {
 		const cases: ReadonlyArray<{
 			production: string;
-			slug: "drive" | "weapons" | "shields" | "cargo";
+			expected: "DRIVE" | "WEAPONS" | "SHIELDS" | "CARGO";
 		}> = [
-			{ production: "Drive", slug: "drive" },
-			{ production: "Weapons", slug: "weapons" },
-			{ production: "Shields", slug: "shields" },
-			{ production: "Cargo", slug: "cargo" },
+			{ production: "Drive", expected: "DRIVE" },
+			{ production: "Weapons", expected: "WEAPONS" },
+			{ production: "Shields", expected: "SHIELDS" },
+			{ production: "Cargo", expected: "CARGO" },
 		];
 		for (const tc of cases) {
 			const ui = mountProduction(
 				localPlanet({ number: 1, production: tc.production }),
 			);
-			const el = ui.getByTestId(
-				`inspector-planet-production-research-${tc.slug}`,
-			);
-			expect(el.classList.contains("active")).toBe(true);
+			expect(getMain(ui).value).toBe("research");
+			expect(getTarget(ui).value).toBe(tc.expected);
 			ui.unmount();
 		}
 	});
 
-	test("ship class sub-row matches when production equals a class name", async () => {
+	test("target select seeds the ship class when production is a class name", () => {
 		const ui = mountProduction(
 			localPlanet({ number: 1, production: "Scout" }),
 			[shipClass({ name: "Scout" }), shipClass({ name: "Destroyer" })],
 		);
-		expect(
-			ui.getByTestId("inspector-planet-production-ship-Scout").classList
-				.contains("active"),
-		).toBe(true);
-		expect(
-			ui
-				.getByTestId("inspector-planet-production-ship-Destroyer")
-				.classList.contains("active"),
-		).toBe(false);
+		expect(getMain(ui).value).toBe("ship");
+		expect(getTarget(ui).value).toBe("Scout");
 	});
 });