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

<!--
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: var(--color-border-strong);
		background: var(--color-surface-raised);
	}
	.row.has-unread .title {
		font-weight: 700;
	}
	.row.standalone .title {
		color: var(--color-warning);
	}
	.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: var(--color-accent);
		color: var(--color-accent-contrast);
	}
	.snippet {
		grid-column: 1 / span 2;
		color: var(--color-text-muted);
		font-size: 0.85rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>