ui/frontend/src/lib/header/view-menu.svelte

@@ -15,10 +15,13 @@ polishes microcopy.
 	import { onMount } from "svelte";
 	import { goto } from "$app/navigation";
 	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
+	import { mailStore } from "$lib/mail-store.svelte";
 
 	type Props = { gameId: string };
 	let { gameId }: Props = $props();
 
+	const mailUnread = $derived(mailStore.unreadCount);
+
 	let open = $state(false);
 	let rootEl: HTMLDivElement | null = $state(null);
 
@@ -122,9 +125,15 @@ polishes microcopy.
 				type="button"
 				role="menuitem"
 				data-testid="view-menu-item-mail"
+				class="with-badge"
 				onclick={() => go(`/games/${gameId}/mail`)}
 			>
-				{i18n.t("game.view.mail")}
+				<span>{i18n.t("game.view.mail")}</span>
+				{#if mailUnread > 0}
+					<span class="badge" data-testid="view-menu-item-mail-badge">
+						{i18n.t("game.view.mail.badge", { count: String(mailUnread) })}
+					</span>
+				{/if}
 			</button>
 			<button
 				type="button"
@@ -200,6 +209,21 @@ polishes microcopy.
 		border: 0;
 		cursor: pointer;
 	}
+	.surface > button.with-badge {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+	.surface > button.with-badge .badge {
+		min-width: 1.5rem;
+		padding: 0 0.4rem;
+		text-align: center;
+		font-size: 0.75rem;
+		border-radius: 999px;
+		background: #2a4d7d;
+		color: #fff;
+	}
 	.surface > button:hover,
 	.surface > details > summary:hover {
 		background: #1c2238;

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();