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/lib/sidebar/tab-bar.svelte

@@ -0,0 +1,64 @@
+<!--
+Three-button tab switcher for the Phase 10 sidebar. Each button is
+labelled and tagged so component tests can target it; the parent
+sidebar component owns the selected-tab state and re-renders the
+matching tool panel.
+-->
+<script lang="ts">
+	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
+	import type { SidebarTab } from "./types";
+
+	type Props = {
+		activeTab: SidebarTab;
+		onSelect: (tab: SidebarTab) => void;
+	};
+	let { activeTab, onSelect }: Props = $props();
+
+	const tabs: ReadonlyArray<{ id: SidebarTab; key: TranslationKey }> = [
+		{ id: "calculator", key: "game.sidebar.tab.calculator" },
+		{ id: "inspector", key: "game.sidebar.tab.inspector" },
+		{ id: "order", key: "game.sidebar.tab.order" },
+	];
+</script>
+
+<div class="tab-bar" role="tablist" data-testid="sidebar-tab-bar">
+	{#each tabs as tab (tab.id)}
+		<button
+			type="button"
+			role="tab"
+			data-testid="sidebar-tab-{tab.id}"
+			aria-selected={tab.id === activeTab}
+			class:active={tab.id === activeTab}
+			onclick={() => onSelect(tab.id)}
+		>
+			{i18n.t(tab.key)}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.tab-bar {
+		display: flex;
+		gap: 0.25rem;
+		padding: 0.5rem 0.5rem 0;
+		border-bottom: 1px solid #20253a;
+		font-family: system-ui, sans-serif;
+	}
+	.tab-bar button {
+		font: inherit;
+		font-size: 0.9rem;
+		padding: 0.4rem 0.75rem;
+		background: transparent;
+		color: #aab;
+		border: 0;
+		border-bottom: 2px solid transparent;
+		cursor: pointer;
+	}
+	.tab-bar button.active {
+		color: #e8eaf6;
+		border-bottom-color: #6d8cff;
+	}
+	.tab-bar button:hover:not(.active) {
+		color: #e8eaf6;
+	}
+</style>