galaxy-game/ui/frontend/src/lib/active-view/mail.svelte

<!--
Phase 28 active-view for the diplomatic mail. Replaces the Phase 10
stub. Renders a two-pane list/detail layout on desktop and a
one-pane stack on mobile; the inner pieces (thread list, thread
pane, system-item pane, compose form) live under
`./mail/*.svelte`.
-->
<script lang="ts">
	import { page } from "$app/state";

	import { i18n } from "$lib/i18n/index.svelte";
	import { mailStore, type MailListEntry } from "$lib/mail-store.svelte";

	import ThreadList from "./mail/thread-list.svelte";
	import ThreadPane from "./mail/thread-pane.svelte";
	import SystemItemPane from "./mail/system-item-pane.svelte";
	import Compose from "./mail/compose.svelte";

	let selectedKey = $state<string | null>(null);
	let composeOpen = $state(false);

	const gameId = $derived(page.params.id ?? "");

	const entries = $derived(mailStore.entries);

	const selected = $derived.by<MailListEntry | null>(() => {
		if (selectedKey === null) {
			return null;
		}
		return entries.find((entry) => entryKey(entry) === selectedKey) ?? null;
	});

	function entryKey(entry: MailListEntry): string {
		return entry.kind === "thread"
			? `thread:${entry.raceName}`
			: `standalone:${entry.message.messageId}`;
	}

	function openEntry(entry: MailListEntry): void {
		selectedKey = entryKey(entry);
	}

	function closePane(): void {
		selectedKey = null;
	}
</script>

<section class="mail" data-testid="active-view-mail">
	<header class="mail-header">
		<h2>{i18n.t("game.view.mail")}</h2>
		<button
			type="button"
			class="compose-btn"
			data-testid="mail-compose-open"
			onclick={() => (composeOpen = true)}
			disabled={mailStore.status !== "ready"}
		>
			{i18n.t("game.mail.compose_action")}
		</button>
	</header>

	{#if mailStore.status === "loading"}
		<p class="status" data-testid="mail-loading">
			{i18n.t("game.mail.loading")}
		</p>
	{:else if mailStore.status === "error"}
		<p class="status error" data-testid="mail-error">
			{mailStore.error ?? i18n.t("game.mail.load_failed")}
		</p>
	{:else if entries.length === 0}
		<p class="status" data-testid="mail-empty">
			{i18n.t("game.mail.empty")}
		</p>
	{:else}
		<div class="panes" class:detail-open={selected !== null}>
			<div class="list-pane">
				<ThreadList
					{entries}
					selectedKey={selectedKey}
					onSelect={openEntry}
				/>
			</div>
			<div class="detail-pane">
				<button
					type="button"
					class="back-btn"
					data-testid="mail-back"
					onclick={closePane}
				>
					{i18n.t("game.mail.back")}
				</button>
				{#if selected === null}
					<p class="status empty-detail">
						{i18n.t("game.mail.select_thread")}
					</p>
				{:else if selected.kind === "thread"}
					<ThreadPane thread={selected} {gameId} />
				{:else}
					<SystemItemPane entry={selected} />
				{/if}
			</div>
		</div>
	{/if}

	{#if composeOpen}
		<Compose
			onClose={() => (composeOpen = false)}
			onSent={(raceName: string | null) => {
				composeOpen = false;
				if (raceName !== null) {
					selectedKey = `thread:${raceName}`;
				}
			}}
		/>
	{/if}
</section>

<style>
	.mail {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		padding: 1rem;
		font-family: system-ui, sans-serif;
	}
	.mail-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.mail-header h2 {
		margin: 0;
		font-size: 1.1rem;
	}
	.compose-btn {
		font: inherit;
		padding: 0.35rem 0.75rem;
		border: 1px solid var(--color-border);
		background: var(--color-surface-raised);
		color: var(--color-text);
		border-radius: 4px;
		cursor: pointer;
	}
	.compose-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
	.status {
		color: var(--color-text-muted);
	}
	.status.error {
		color: var(--color-danger);
	}
	.panes {
		display: grid;
		grid-template-columns: minmax(220px, 280px) 1fr;
		gap: 1rem;
		min-height: 320px;
	}
	.list-pane,
	.detail-pane {
		border: 1px solid var(--color-border-subtle);
		border-radius: 6px;
		padding: 0.75rem;
		background: var(--color-surface);
		overflow: hidden;
	}
	.list-pane {
		max-height: 70vh;
		overflow-y: auto;
	}
	.back-btn {
		display: none;
		font: inherit;
		margin-bottom: 0.5rem;
		padding: 0.25rem 0.5rem;
		border: 1px solid var(--color-border);
		background: transparent;
		color: var(--color-text);
		border-radius: 4px;
		cursor: pointer;
	}
	.empty-detail {
		text-align: center;
		padding: 2rem 0;
	}
	@media (max-width: 767px) {
		.panes {
			grid-template-columns: 1fr;
		}
		.list-pane {
			display: block;
		}
		.detail-pane {
			display: none;
		}
		.panes.detail-open .list-pane {
			display: none;
		}
		.panes.detail-open .detail-pane {
			display: block;
		}
		.panes.detail-open .back-btn {
			display: inline-block;
		}
	}
</style>