ui/phase-10: in-game shell with view-replacement skeleton

Wraps every in-game route under `/games/:id/*` in a responsive shell
with a header (race / turn placeholders, view-menu dropdown or mobile
hamburger, account menu), a three-tab sidebar (Calculator, Inspector,
Order), an active-view slot, and a mobile-only bottom-tabs row
`[Map, Calc, Order, More]`. Every view in the IA section
(`map`, `table/:entity`, `report`, `battle/:battleId?`, `mail`,
`designer/{ship-class,science}/:id?`) ships as a thin SvelteKit route
that mounts a `lib/active-view/<name>.svelte` stub rendering a
localised `coming soon` body. The lobby's `gotoGame` path now actually
lands on a rendered shell instead of a 404.

The "view router" mentioned in the plan is implemented as the file
system plus two-line route wrappers — no separate dispatch component.
Sidebar tab state lives as a `$state` rune inside `sidebar.svelte`,
which sits in the layout that SvelteKit keeps mounted across child
route swaps, so tab choice survives every active-view navigation for
free. A `?sidebar=calc|inspector|order` URL param seeds the initial
tab on first mount; the mobile bottom-tabs use a layout-owned
`mobileTool` rune with a URL-gated `effectiveTool` derivation so the
Calc / Order tool overlay only applies on `/map` and naturally drops
when the user navigates elsewhere.

Tablet ships with a click-toggle drawer for the sidebar rather than
the IA section's swipe-from-right gesture; the structural breakpoint
satisfies Phase 10's acceptance criterion and Phase 35 polish lands
the swipe. The mobile More drawer mirrors the header view-menu
content; the IA's narrower More list (Mail, Battle, Tables, History,
Settings, Logout) is also a Phase 35 polish target once History
exists.

Topic doc `ui/docs/navigation.md` captures the active-view model, the
sidebar state-preservation rule, the `?sidebar=` and `mobileTool`
conventions, and the transient map-overlay back-stack concept (with
the implementation deferred to Phase 34 alongside its first user).
i18n catalogues for `en` and `ru` add the full `game.shell.*`,
`game.view.*`, `game.sidebar.*`, `game.bottom_tabs.*` namespaces.

Tests: Vitest covers the header view-menu (every IA destination
including the Tables sub-list), the account-menu Logout / Language
wiring, the sidebar default tab / switching / `?sidebar=` seed /
close button, and every active-view stub. Playwright e2e boots an
authenticated session via `__galaxyDebug.setDeviceSessionId` (no
gateway calls — the shell makes none in Phase 10), exercises every
view through both the desktop dropdown and the mobile More drawer,
verifies sidebar tab survival across navigation, and uses
`setViewportSize` to validate the breakpoint switches at 768 px and
1024 px.

Phase 10 status stays `pending` in `ui/PLAN.md` until the local-ci
run lands green; flipping to `done` follows in the next commit per
the per-stage CI gate in `CLAUDE.md`.

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

ui/frontend/tests/game-shell-stubs.test.ts

@@ -0,0 +1,83 @@
+// Component tests for every Phase 10 active-view stub. Each stub
+// renders the localised view title plus the `coming soon` body copy
+// and exposes a stable `data-testid` so later phases can replace the
+// content without renaming the test hook. The table stub additionally
+// honours its `entity` prop and falls back to the snake_case i18n key
+// for an unknown slug.
+
+import "@testing-library/jest-dom/vitest";
+import { render } from "@testing-library/svelte";
+import { beforeEach, describe, expect, test } from "vitest";
+
+import { i18n } from "../src/lib/i18n/index.svelte";
+
+import MapView from "../src/lib/active-view/map.svelte";
+import TableView from "../src/lib/active-view/table.svelte";
+import ReportView from "../src/lib/active-view/report.svelte";
+import BattleView from "../src/lib/active-view/battle.svelte";
+import MailView from "../src/lib/active-view/mail.svelte";
+import DesignerShipClass from "../src/lib/active-view/designer-ship-class.svelte";
+import DesignerScience from "../src/lib/active-view/designer-science.svelte";
+
+beforeEach(() => {
+	i18n.resetForTests("en");
+});
+
+describe("active-view stubs", () => {
+	test("map stub renders title and coming-soon copy", () => {
+		const ui = render(MapView);
+		const node = ui.getByTestId("active-view-map");
+		expect(node).toHaveTextContent("map");
+		expect(node).toHaveTextContent("coming soon");
+	});
+
+	test("table stub maps a kebab-case entity to the right i18n title", () => {
+		const ui = render(TableView, { props: { entity: "ship-classes" } });
+		const node = ui.getByTestId("active-view-table");
+		expect(node).toHaveAttribute("data-entity", "ship-classes");
+		expect(node).toHaveTextContent("ship classes");
+		expect(node).toHaveTextContent("coming soon");
+	});
+
+	test("table stub also handles a single-word entity", () => {
+		const ui = render(TableView, { props: { entity: "planets" } });
+		expect(ui.getByTestId("active-view-table")).toHaveTextContent("planets");
+	});
+
+	test("report / mail / designer stubs render their localised titles", () => {
+		const r = render(ReportView);
+		expect(r.getByTestId("active-view-report")).toHaveTextContent(
+			"turn report",
+		);
+
+		const m = render(MailView);
+		expect(m.getByTestId("active-view-mail")).toHaveTextContent(
+			"diplomatic mail",
+		);
+
+		const sc = render(DesignerShipClass);
+		expect(
+			sc.getByTestId("active-view-designer-ship-class"),
+		).toHaveTextContent("ship-class designer");
+
+		const sci = render(DesignerScience);
+		expect(
+			sci.getByTestId("active-view-designer-science"),
+		).toHaveTextContent("science designer");
+	});
+
+	test("battle stub stamps the battleId on the host element", () => {
+		const ui = render(BattleView, { props: { battleId: "b-42" } });
+		const node = ui.getByTestId("active-view-battle");
+		expect(node).toHaveAttribute("data-battle-id", "b-42");
+		expect(node).toHaveTextContent("battle log");
+	});
+
+	test("battle stub accepts an empty battleId for the list URL", () => {
+		const ui = render(BattleView, { props: { battleId: "" } });
+		expect(ui.getByTestId("active-view-battle")).toHaveAttribute(
+			"data-battle-id",
+			"",
+		);
+	});
+});