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>
This commit is contained in:
Ilia Denisov
@@ -1,27 +1,207 @@
|
||||
<!--
|
||||
Phase 10 stub for the diplomatic-mail active view. Phase 28 wires the
|
||||
real mail listing.
|
||||
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="active-view" data-testid="active-view-mail">
|
||||
<h2>{i18n.t("game.view.mail")}</h2>
|
||||
<p>{i18n.t("game.shell.coming_soon")}</p>
|
||||
<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>
|
||||
.active-view {
|
||||
padding: 1.5rem;
|
||||
.mail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
.active-view h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
.mail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.mail-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.active-view p {
|
||||
margin: 0;
|
||||
color: #555;
|
||||
.compose-btn {
|
||||
font: inherit;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border: 1px solid #444;
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.compose-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.status {
|
||||
color: #888;
|
||||
}
|
||||
.status.error {
|
||||
color: #c62828;
|
||||
}
|
||||
.panes {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 280px) 1fr;
|
||||
gap: 1rem;
|
||||
min-height: 320px;
|
||||
}
|
||||
.list-pane,
|
||||
.detail-pane {
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
background: #111;
|
||||
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 #444;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user