feat(ui): F8-11 — battles table under table submenu (#54)

Adds a sortable battles list as a new entity under the existing
`view → table` submenu (entity slug `battles`), replacing the
standalone top-level `battle log` shortcut which always opened a
"battle not found" placeholder. The single-battle viewer stays put
and is reached only by clicking a row (or a battle marker on the
map), identical to the existing `section-battles.svelte` flow.

Columns are planet (via the shared `planetLabel` helper) and shots
(the per-battle action count carried by `BattleSummary`), sortable
both ways with shots-desc default. No backend / FBS / map changes:
the wire payload is unchanged. Participants / observers / total
mass require the full BattleReport and were intentionally dropped
to avoid N round trips per menu open.

The top-level `battle log` item is removed from `header/view-menu`
and `sidebar/bottom-tabs` (and their stale comment blocks updated);
the now-orphan `game.view.battle` i18n key is dropped from both
locales.

ui/frontend/tests/e2e/game-shell.spec.ts

@@ -63,7 +63,6 @@ test("header view-menu navigates to every active view", async ({ page }) => {
 	const destinations: Array<[string, string]> = [
 		["view-menu-item-report", "active-view-report"],
 		["view-menu-item-mail", "active-view-mail"],
-		["view-menu-item-battle", "active-view-battle"],
 		["view-menu-item-designer-science", "active-view-designer-science"],
 		["view-menu-item-map", "active-view-map"],
 	];
@@ -86,6 +85,7 @@ test("header view-menu Tables sub-list navigates to every entity", async ({
 		"fleets",
 		"sciences",
 		"races",
+		"battles",
 	];
 	for (const entity of entities) {
 		await page.getByTestId("view-menu-trigger").click();

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

@@ -147,7 +147,6 @@ describe("game-shell header", () => {
 		const destinations: Array<[string, string]> = [
 			["view-menu-item-map", "map"],
 			["view-menu-item-report", "report"],
-			["view-menu-item-battle", "battle"],
 			["view-menu-item-mail", "mail"],
 			["view-menu-item-designer-science", "designer-science"],
 		];
@@ -170,6 +169,7 @@ describe("game-shell header", () => {
 			["view-menu-item-table-fleets", "fleets"],
 			["view-menu-item-table-sciences", "sciences"],
 			["view-menu-item-table-races", "races"],
+			["view-menu-item-table-battles", "battles"],
 		];
 		for (const [testId, entity] of tableEntities) {
 			await fireEvent.click(ui.getByTestId("view-menu-trigger"));

ui/frontend/tests/table-battles.test.ts

@@ -0,0 +1,237 @@
+// Vitest coverage for the F8-11 battles table active view. The
+// component renders against a synthetic `RenderedReportSource` (no
+// live `GameStateStore`); no draft / selection plumbing is needed
+// because the row click only mutates `activeView` (no overlay or
+// selection state). The module-level rune `battlesTableState` is
+// reset in `beforeEach` so cases stay independent.
+
+import "@testing-library/jest-dom/vitest";
+import { fireEvent, render } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { i18n } from "../src/lib/i18n/index.svelte";
+import type {
+	GameReport,
+	ReportBattle,
+	ReportPlanet,
+} from "../src/api/game-state";
+import { RENDERED_REPORT_CONTEXT_KEY } from "../src/lib/rendered-report.svelte";
+import { activeView } from "../src/lib/app-nav.svelte";
+import { resetBattlesTableState } from "../src/lib/active-view/table-battles-state.svelte";
+import { EMPTY_SHIP_GROUPS } from "./helpers/empty-ship-groups";
+
+const pageMock = vi.hoisted(() => ({
+	url: new URL("http://localhost/games/g1/table/battles"),
+	params: { id: "g1" } as Record<string, string>,
+}));
+
+const gotoMock = vi.hoisted(() => vi.fn());
+
+vi.mock("$app/state", () => ({
+	page: pageMock,
+}));
+
+vi.mock("$app/navigation", () => ({
+	goto: gotoMock,
+	pushState: vi.fn(),
+	replaceState: vi.fn(),
+}));
+
+import TableBattles from "../src/lib/active-view/table-battles.svelte";
+
+beforeEach(() => {
+	i18n.resetForTests("en");
+	pageMock.params = { id: "g1" };
+	gotoMock.mockClear();
+	activeView.reset();
+	resetBattlesTableState();
+});
+
+afterEach(() => {
+	activeView.reset();
+});
+
+function planet(num: number, name = `P${num}`): ReportPlanet {
+	return {
+		number: num,
+		name,
+		x: 0,
+		y: 0,
+		kind: "local",
+		owner: null,
+		size: null,
+		resources: null,
+		industryStockpile: null,
+		materialsStockpile: null,
+		industry: null,
+		population: null,
+		colonists: null,
+		production: null,
+		freeIndustry: null,
+	};
+}
+
+function battle(
+	overrides: Partial<ReportBattle> & Pick<ReportBattle, "id">,
+): ReportBattle {
+	return {
+		planet: 0,
+		shots: 0,
+		...overrides,
+	};
+}
+
+function makeReport(opts: {
+	turn?: number;
+	planets?: ReportPlanet[];
+	battles?: ReportBattle[];
+}): GameReport {
+	const battles = opts.battles ?? [];
+	return {
+		turn: opts.turn ?? 1,
+		mapWidth: 1000,
+		mapHeight: 1000,
+		planetCount: opts.planets?.length ?? 0,
+		planets: opts.planets ?? [],
+		race: "Me",
+		localShipClass: [],
+		routes: [],
+		localPlayerDrive: 0,
+		localPlayerWeapons: 0,
+		localPlayerShields: 0,
+		localPlayerCargo: 0,
+		...EMPTY_SHIP_GROUPS,
+		battles,
+		battleIds: battles.map((b) => b.id),
+	};
+}
+
+function mount(report: GameReport | null) {
+	const renderedReport = {
+		get report() {
+			return report;
+		},
+	};
+	const context = new Map<unknown, unknown>([
+		[RENDERED_REPORT_CONTEXT_KEY, renderedReport],
+	]);
+	return render(TableBattles, { context });
+}
+
+describe("battles table", () => {
+	test("renders a loading placeholder before the report lands", () => {
+		const ui = mount(null);
+		expect(ui.getByTestId("battles-loading")).toBeInTheDocument();
+	});
+
+	test("renders an empty placeholder when no battles exist", () => {
+		const ui = mount(makeReport({ planets: [planet(1)] }));
+		expect(ui.getByTestId("battles-empty")).toBeInTheDocument();
+	});
+
+	test("renders one row per battle with planet label and shots", () => {
+		const ui = mount(
+			makeReport({
+				planets: [planet(7, "Avalon"), planet(11, "")],
+				battles: [
+					battle({ id: "b1", planet: 7, shots: 3 }),
+					battle({ id: "b2", planet: 11, shots: 25 }),
+					battle({ id: "b3", planet: 99, shots: 1 }),
+				],
+			}),
+		);
+		const rows = ui.getAllByTestId("battles-row");
+		expect(rows).toHaveLength(3);
+		const labelById = new Map<string, string>();
+		const shotsById = new Map<string, string>();
+		for (const row of rows) {
+			const id = row.getAttribute("data-id")!;
+			labelById.set(
+				id,
+				row.querySelector("[data-testid='battles-cell-planet']")!
+					.textContent!.trim(),
+			);
+			shotsById.set(
+				id,
+				row.querySelector("[data-testid='battles-cell-shots']")!
+					.textContent!.trim(),
+			);
+		}
+		// Known planet with a name → "#N (name)"; known planet with
+		// empty name and unknown planet → "#N".
+		expect(labelById.get("b1")).toBe("#7 (Avalon)");
+		expect(labelById.get("b2")).toBe("#11");
+		expect(labelById.get("b3")).toBe("#99");
+		expect(shotsById.get("b1")).toBe("3");
+		expect(shotsById.get("b2")).toBe("25");
+		expect(shotsById.get("b3")).toBe("1");
+	});
+
+	test("default sort is shots descending", () => {
+		const ui = mount(
+			makeReport({
+				planets: [planet(1), planet(2), planet(3)],
+				battles: [
+					battle({ id: "b1", planet: 1, shots: 5 }),
+					battle({ id: "b2", planet: 2, shots: 99 }),
+					battle({ id: "b3", planet: 3, shots: 12 }),
+				],
+			}),
+		);
+		const ids = ui
+			.getAllByTestId("battles-row")
+			.map((r) => r.getAttribute("data-id"));
+		expect(ids).toEqual(["b2", "b3", "b1"]);
+	});
+
+	test("clicking the active shots header flips the direction", async () => {
+		const ui = mount(
+			makeReport({
+				planets: [planet(1), planet(2)],
+				battles: [
+					battle({ id: "b1", planet: 1, shots: 5 }),
+					battle({ id: "b2", planet: 2, shots: 99 }),
+				],
+			}),
+		);
+		await fireEvent.click(ui.getByTestId("battles-column-shots"));
+		const ids = ui
+			.getAllByTestId("battles-row")
+			.map((r) => r.getAttribute("data-id"));
+		expect(ids).toEqual(["b1", "b2"]);
+	});
+
+	test("clicking the planet header sorts ascending by planet number", async () => {
+		const ui = mount(
+			makeReport({
+				planets: [planet(1), planet(2), planet(3)],
+				battles: [
+					battle({ id: "b1", planet: 3, shots: 5 }),
+					battle({ id: "b2", planet: 1, shots: 99 }),
+					battle({ id: "b3", planet: 2, shots: 12 }),
+				],
+			}),
+		);
+		await fireEvent.click(ui.getByTestId("battles-column-planet"));
+		const ids = ui
+			.getAllByTestId("battles-row")
+			.map((r) => r.getAttribute("data-id"));
+		expect(ids).toEqual(["b2", "b3", "b1"]);
+	});
+
+	test("clicking a row opens the battle viewer with the matching id and turn", async () => {
+		const ui = mount(
+			makeReport({
+				turn: 42,
+				planets: [planet(1)],
+				battles: [battle({ id: "battle-uuid", planet: 1, shots: 4 })],
+			}),
+		);
+		await fireEvent.click(ui.getByTestId("battles-row"));
+		expect(activeView.state).toMatchObject({
+			view: "battle",
+			battleId: "battle-uuid",
+			turn: 42,
+		});
+	});
+});