Phase 28 (Steps 7+8): header unread badge + push/init wiring

Step 7 — header view-menu badge.

`view-menu.svelte` reads `mailStore.unreadCount` and renders an
inline pill next to the "diplomatic mail" entry whenever the
counter is non-zero. The badge styling matches the per-row dot in
`thread-list.svelte` so the two surfaces feel consistent.

Step 8 — push event handler + MailStore init in the in-game layout.

`routes/games/[id]/+layout.svelte`:

- registers a `diplomail.message.received` handler alongside the
  existing `game.turn.ready` / `game.paused` ones, parses the
  signed payload, calls `mailStore.applyPushEvent` to refresh the
  inbox for the matching game, and raises a toast with a "view"
  deep-link that navigates to `/games/:id/mail`;
- adds `mailStore.init({ client, cache, gameId })` to the boot
  `Promise.all` so the inbox + sent lists are warm by the time the
  view mounts, and the badge counter is populated before any user
  interaction;
- disposes the new subscription in the `onDestroy` block so a game
  switch does not leak handlers across navigations.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/frontend/src/routes/games/[id]/+layout.svelte

@@ -96,6 +96,7 @@ fresh.
 		type VerifiedEvent,
 	} from "../../../api/events.svelte";
 	import { toast } from "$lib/toast.svelte";
+	import { mailStore } from "$lib/mail-store.svelte";
 
 	let { children } = $props();
 
@@ -241,6 +242,7 @@ fresh.
 	// `currentTurn` is known cannot misfire.
 	let unsubTurnReady: (() => void) | null = null;
 	let unsubGamePaused: (() => void) | null = null;
+	let unsubMailReceived: (() => void) | null = null;
 	const turnReadyDecoder = new TextDecoder("utf-8");
 
 	function parseTurnReadyPayload(
@@ -268,6 +270,32 @@ fresh.
 		}
 	}
 
+	function parseMailReceivedPayload(
+		event: VerifiedEvent,
+	): { gameId: string; from: string } | null {
+		try {
+			const text = turnReadyDecoder.decode(event.payloadBytes);
+			const json: unknown = JSON.parse(text);
+			if (typeof json !== "object" || json === null) {
+				return null;
+			}
+			const record = json as Record<string, unknown>;
+			const eventGameId = record.game_id;
+			if (typeof eventGameId !== "string") {
+				return null;
+			}
+			const subject =
+				typeof record.subject === "string" && record.subject !== ""
+					? record.subject
+					: typeof record.preview === "string"
+						? record.preview
+						: "";
+			return { gameId: eventGameId, from: subject };
+		} catch {
+			return null;
+		}
+	}
+
 	function parseGamePausedPayload(
 		event: VerifiedEvent,
 	): { gameId: string; reason: string } | null {
@@ -408,9 +436,29 @@ fresh.
 					}
 					orderDraft.markPaused({ reason: parsed.reason });
 				});
+				unsubMailReceived = eventStream.on(
+					"diplomail.message.received",
+					(event) => {
+						const parsed = parseMailReceivedPayload(event);
+						if (parsed === null || parsed.gameId !== gameId) {
+							return;
+						}
+						void mailStore.applyPushEvent(parsed.gameId);
+						toast.show({
+							messageKey: "game.events.mail_new.message",
+							messageParams: { from: parsed.from },
+							actionLabelKey: "game.events.mail_new.action",
+							onAction: () => {
+								void goto(`/games/${gameId}/mail`);
+							},
+							durationMs: 8000,
+						});
+					},
+				);
 				await Promise.all([
 					gameState.init({ client, cache, gameId }),
 					orderDraft.init({ cache, gameId }),
+					mailStore.init({ client, cache, gameId }),
 				]);
 				galaxyClient.set(client);
 				orderDraft.bindClient(client, {
@@ -442,6 +490,10 @@ fresh.
 			unsubGamePaused();
 			unsubGamePaused = null;
 		}
+		if (unsubMailReceived !== null) {
+			unsubMailReceived();
+			unsubMailReceived = null;
+		}
 		gameState.dispose();
 		orderDraft.dispose();
 		selection.dispose();