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/src/routes/games/[id]/+layout.svelte

@@ -0,0 +1,92 @@
+<!--
+Phase 10 in-game shell. Composes the header, a conditionally-visible
+sidebar (Calculator / Inspector / Order tabs), the active-view slot
+filled by the child route, and a mobile-only bottom-tab bar. The
+layout owns:
+
+- `sidebarOpen` — tablet-only drawer toggle. Desktop keeps the
+  sidebar pinned via CSS; mobile hides it entirely.
+- `mobileTool` — mobile-only tool overlay state. The tool only
+  visually overrides the active-view slot when the URL is `/map`,
+  so navigating to any other view through the More drawer or the
+  header view-menu naturally drops the overlay even if `mobileTool`
+  was set on a previous tap.
+
+State preservation across active-view switches works for free
+because SvelteKit keeps this layout instance mounted while children
+swap.
+-->
+<script lang="ts">
+	import { page } from "$app/state";
+	import Header from "$lib/header/header.svelte";
+	import Sidebar from "$lib/sidebar/sidebar.svelte";
+	import BottomTabs from "$lib/sidebar/bottom-tabs.svelte";
+	import Calculator from "$lib/sidebar/calculator-tab.svelte";
+	import Order from "$lib/sidebar/order-tab.svelte";
+	import type { MobileTool } from "$lib/sidebar/types";
+
+	let { children } = $props();
+
+	let sidebarOpen = $state(false);
+	let mobileTool: MobileTool = $state("map");
+
+	const gameId = $derived(page.params.id ?? "");
+	const isOnMap = $derived(/\/games\/[^/]+\/map\/?$/.test(page.url.pathname));
+	const effectiveTool: MobileTool = $derived.by(() =>
+		isOnMap ? mobileTool : "map",
+	);
+
+	function toggleSidebar(): void {
+		sidebarOpen = !sidebarOpen;
+	}
+</script>
+
+<div class="game-shell" data-testid="game-shell">
+	<Header
+		{gameId}
+		{sidebarOpen}
+		onToggleSidebar={toggleSidebar}
+	/>
+	<div class="body">
+		<main class="active-view-host" data-testid="active-view-host">
+			{#if effectiveTool === "calc"}
+				<Calculator />
+			{:else if effectiveTool === "order"}
+				<Order />
+			{:else}
+				{@render children()}
+			{/if}
+		</main>
+		<Sidebar open={sidebarOpen} onClose={() => (sidebarOpen = false)} />
+	</div>
+	<BottomTabs
+		{gameId}
+		activeTool={effectiveTool}
+		onSelectTool={(tool) => (mobileTool = tool)}
+	/>
+</div>
+
+<style>
+	.game-shell {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+		background: #0a0e1a;
+		color: #e8eaf6;
+	}
+	.body {
+		flex: 1;
+		display: flex;
+		min-height: 0;
+	}
+	.active-view-host {
+		flex: 1;
+		min-width: 0;
+		overflow-y: auto;
+	}
+	@media (max-width: 767.98px) {
+		.body {
+			padding-bottom: 3.25rem;
+		}
+	}
+</style>