Phase 28 (Steps 6+9): mail active view + i18n keys

Step 6 — mail active view + subcomponents.

- `lib/active-view/mail.svelte` replaces the Phase 10 stub with the
  list / detail layout: two-pane on desktop, one-pane stack on
  mobile (CSS media query, no separate route).
- `lib/active-view/mail/thread-list.svelte` renders per-race
  threads collapsed to their last message plus stand-alone
  system / admin / outgoing-broadcast items, with unread badges.
- `lib/active-view/mail/thread-pane.svelte` is the chat-style
  transcript for one race; bodies render through `textContent`,
  per-message Show original / translation toggles flip the
  rendering when a translated body is present, and a persistent
  reply box at the bottom calls `mailStore.composePersonal`.
- `lib/active-view/mail/system-item-pane.svelte` renders one
  stand-alone item read-only with the same translation toggle.
- `lib/active-view/mail/compose.svelte` is the compose dialog:
  recipient race picker fed from `report.races[]`, kind toggle
  (personal / broadcast / admin), admin sub-toggle for target
  user / all and recipient-scope picker. Server-side enforces
  paid-tier and owner gating; the UI surfaces 403 inline.
- `lib/active-view/mail/system-titles.ts` keeps the keyword →
  i18n-title mapping for lifecycle-hook system mail so both the
  list and the detail pane pick the same canonical title.

Step 9 — i18n strings (en + ru).

`game.mail.*`, `game.view.mail.badge`, `game.events.mail_new.*`,
`game.mail.system.*` keys added in lockstep across both locales
covering compose labels / validation copy / per-system titles /
translation toggle / reply / delete affordances.

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

ui/frontend/src/lib/active-view/mail/thread-list.svelte

@@ -0,0 +1,130 @@
+<!--
+Phase 28 — left-pane list of mail entries. Each entry is either a
+per-race thread (collapsed to the latest message) or a stand-alone
+system / admin / outgoing-broadcast item. The list is virtual only
+inside its scroll container; PixiJS / canvas concerns do not apply
+here.
+-->
+<script lang="ts">
+	import { i18n } from "$lib/i18n/index.svelte";
+	import type { MailListEntry } from "$lib/mail-store.svelte";
+	import { systemTitleKey } from "./system-titles";
+
+	let {
+		entries,
+		selectedKey,
+		onSelect,
+	}: {
+		entries: MailListEntry[];
+		selectedKey: string | null;
+		onSelect: (entry: MailListEntry) => void;
+	} = $props();
+
+	function entryKey(entry: MailListEntry): string {
+		return entry.kind === "thread"
+			? `thread:${entry.raceName}`
+			: `standalone:${entry.message.messageId}`;
+	}
+
+	function snippet(entry: MailListEntry): string {
+		if (entry.kind === "thread") {
+			const last = entry.messages[entry.messages.length - 1];
+			return last.subject || last.body;
+		}
+		return entry.message.subject || entry.message.body;
+	}
+</script>
+
+<ul class="list" data-testid="mail-thread-list">
+	{#each entries as entry (entryKey(entry))}
+		<li
+			class="row"
+			class:active={selectedKey === entryKey(entry)}
+			class:standalone={entry.kind === "standalone"}
+			class:has-unread={entry.kind === "thread" && entry.unreadCount > 0}
+			data-testid="mail-list-row"
+		>
+			<button
+				type="button"
+				class="row-btn"
+				onclick={() => onSelect(entry)}
+				data-thread-key={entryKey(entry)}
+			>
+				<span class="title">
+					{#if entry.kind === "thread"}
+						{entry.raceName}
+					{:else if entry.message.senderKind === "system"}
+						{i18n.t(systemTitleKey(entry.message))}
+					{:else if entry.message.senderKind === "admin"}
+						{i18n.t("game.mail.admin.title")}
+					{:else}
+						{i18n.t("game.mail.broadcast.title")}
+					{/if}
+				</span>
+				{#if entry.kind === "thread" && entry.unreadCount > 0}
+					<span class="badge" data-testid="mail-row-unread">{entry.unreadCount}</span>
+				{/if}
+				<span class="snippet">{snippet(entry)}</span>
+			</button>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	.list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+	.row-btn {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		grid-template-rows: auto auto;
+		gap: 0.25rem 0.5rem;
+		text-align: left;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		font: inherit;
+		background: transparent;
+		color: inherit;
+		border: 1px solid transparent;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+	.row.active .row-btn {
+		border-color: #555;
+		background: #1c1c1c;
+	}
+	.row.has-unread .title {
+		font-weight: 700;
+	}
+	.row.standalone .title {
+		color: #b3a14c;
+	}
+	.title {
+		grid-column: 1 / span 1;
+	}
+	.badge {
+		grid-column: 2 / span 1;
+		grid-row: 1 / span 1;
+		justify-self: end;
+		min-width: 1.5rem;
+		padding: 0 0.4rem;
+		text-align: center;
+		font-size: 0.75rem;
+		border-radius: 999px;
+		background: #2a4d7d;
+		color: #fff;
+	}
+	.snippet {
+		grid-column: 1 / span 2;
+		color: #999;
+		font-size: 0.85rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>