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>
|
||||
|
||||
@@ -0,0 +1,273 @@
|
||||
<!--
|
||||
Phase 28 — compose dialog for diplomatic mail. The recipient picker
|
||||
reads `gameState.report.races[]` (Phase 22), the kind toggle exposes
|
||||
personal / broadcast / admin; broadcast and admin sends are gated
|
||||
server-side, the UI surfaces the resulting 403 inline.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { getContext } from "svelte";
|
||||
|
||||
import { i18n } from "$lib/i18n/index.svelte";
|
||||
import { mailStore } from "$lib/mail-store.svelte";
|
||||
import {
|
||||
RENDERED_REPORT_CONTEXT_KEY,
|
||||
type RenderedReportSource,
|
||||
} from "$lib/rendered-report.svelte";
|
||||
|
||||
type ComposeKind = "personal" | "broadcast" | "admin";
|
||||
type AdminAudience = "active" | "active_and_removed" | "all_members";
|
||||
|
||||
let {
|
||||
onClose,
|
||||
onSent,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
onSent: (raceName: string | null) => void;
|
||||
} = $props();
|
||||
|
||||
const rendered = getContext<RenderedReportSource | undefined>(
|
||||
RENDERED_REPORT_CONTEXT_KEY,
|
||||
);
|
||||
|
||||
const races = $derived.by<string[]>(() => {
|
||||
const r = rendered?.report;
|
||||
if (!r) {
|
||||
return [];
|
||||
}
|
||||
return r.races.map((race) => race.name);
|
||||
});
|
||||
|
||||
let kind = $state<ComposeKind>("personal");
|
||||
let raceName = $state("");
|
||||
let adminTarget = $state<"user" | "all">("user");
|
||||
let adminAudience = $state<AdminAudience>("active");
|
||||
let subject = $state("");
|
||||
let body = $state("");
|
||||
let error = $state<string | null>(null);
|
||||
let sending = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (raceName === "" && races.length > 0) {
|
||||
raceName = races[0];
|
||||
}
|
||||
});
|
||||
|
||||
async function submit(event: SubmitEvent): Promise<void> {
|
||||
event.preventDefault();
|
||||
error = null;
|
||||
const bodyText = body.trim();
|
||||
if (bodyText === "") {
|
||||
error = i18n.t("game.mail.body_required");
|
||||
return;
|
||||
}
|
||||
const needsRecipient = kind === "personal" || (kind === "admin" && adminTarget === "user");
|
||||
if (needsRecipient && raceName === "") {
|
||||
error = i18n.t("game.mail.recipient_required");
|
||||
return;
|
||||
}
|
||||
sending = true;
|
||||
try {
|
||||
if (kind === "personal") {
|
||||
await mailStore.composePersonal({
|
||||
raceName,
|
||||
subject,
|
||||
body: bodyText,
|
||||
});
|
||||
onSent(raceName);
|
||||
return;
|
||||
}
|
||||
if (kind === "broadcast") {
|
||||
await mailStore.composeBroadcast({ subject, body: bodyText });
|
||||
onSent(null);
|
||||
return;
|
||||
}
|
||||
await mailStore.composeAdmin({
|
||||
target: adminTarget,
|
||||
raceName: adminTarget === "user" ? raceName : undefined,
|
||||
recipients: adminTarget === "all" ? adminAudience : undefined,
|
||||
subject,
|
||||
body: bodyText,
|
||||
});
|
||||
onSent(null);
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : String(err);
|
||||
} finally {
|
||||
sending = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="overlay" data-testid="mail-compose">
|
||||
<form class="dialog" onsubmit={submit}>
|
||||
<header>
|
||||
<h3>{i18n.t("game.mail.compose_action")}</h3>
|
||||
<button type="button" class="close" onclick={onClose}>×</button>
|
||||
</header>
|
||||
|
||||
<label>
|
||||
{i18n.t("game.mail.compose.target_label")}
|
||||
<select bind:value={kind} data-testid="mail-compose-kind">
|
||||
<option value="personal">{i18n.t("game.mail.compose.target_personal")}</option>
|
||||
<option value="broadcast">{i18n.t("game.mail.compose.target_broadcast")}</option>
|
||||
<option value="admin">{i18n.t("game.mail.compose.target_admin")}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{#if kind === "admin"}
|
||||
<label>
|
||||
{i18n.t("game.mail.compose.recipients_label")}
|
||||
<select bind:value={adminTarget} data-testid="mail-compose-admin-target">
|
||||
<option value="user">{i18n.t("game.mail.compose.target_personal")}</option>
|
||||
<option value="all">{i18n.t("game.mail.compose.target_broadcast")}</option>
|
||||
</select>
|
||||
</label>
|
||||
{#if adminTarget === "all"}
|
||||
<label>
|
||||
{i18n.t("game.mail.compose.recipients_label")}
|
||||
<select bind:value={adminAudience} data-testid="mail-compose-admin-audience">
|
||||
<option value="active">{i18n.t("game.mail.compose.recipients_active")}</option>
|
||||
<option value="active_and_removed">{i18n.t("game.mail.compose.recipients_active_and_removed")}</option>
|
||||
<option value="all_members">{i18n.t("game.mail.compose.recipients_all_members")}</option>
|
||||
</select>
|
||||
</label>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if kind === "personal" || (kind === "admin" && adminTarget === "user")}
|
||||
<label>
|
||||
{i18n.t("game.mail.recipient_label")}
|
||||
<select bind:value={raceName} data-testid="mail-compose-recipient">
|
||||
{#each races as race (race)}
|
||||
<option value={race}>{race}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<label>
|
||||
<span class="visually-hidden">{i18n.t("game.mail.subject_placeholder")}</span>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={subject}
|
||||
placeholder={i18n.t("game.mail.subject_placeholder")}
|
||||
data-testid="mail-compose-subject"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<span class="visually-hidden">{i18n.t("game.mail.body_placeholder")}</span>
|
||||
<textarea
|
||||
bind:value={body}
|
||||
placeholder={i18n.t("game.mail.body_placeholder")}
|
||||
rows="6"
|
||||
data-testid="mail-compose-body"
|
||||
></textarea>
|
||||
</label>
|
||||
|
||||
{#if error}
|
||||
<p class="error" data-testid="mail-compose-error">{error}</p>
|
||||
{/if}
|
||||
|
||||
<footer>
|
||||
<button type="button" onclick={onClose}>
|
||||
{i18n.t("game.mail.compose.cancel")}
|
||||
</button>
|
||||
<button type="submit" disabled={sending} data-testid="mail-compose-send">
|
||||
{i18n.t("game.mail.compose.send")}
|
||||
</button>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
}
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: #161616;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 8px;
|
||||
min-width: min(420px, 90vw);
|
||||
max-width: min(560px, 95vw);
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
header h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.close {
|
||||
font: inherit;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
font-size: 0.85rem;
|
||||
color: #ccc;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
padding: 0.4rem 0.5rem;
|
||||
border: 1px solid #444;
|
||||
background: #111;
|
||||
color: inherit;
|
||||
border-radius: 4px;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
footer button {
|
||||
font: inherit;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border: 1px solid #444;
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
footer button[type="submit"] {
|
||||
background: #2a4d7d;
|
||||
border-color: #2a4d7d;
|
||||
}
|
||||
footer button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.error {
|
||||
color: #c62828;
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
}
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!--
|
||||
Phase 28 — right-pane for stand-alone messages (system mail, admin
|
||||
notifications, and the caller's own paid-tier broadcasts). The pane
|
||||
is read-only: no reply box, no per-recipient context. Soft-delete is
|
||||
available for incoming rows that the caller has read.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
import { i18n } from "$lib/i18n/index.svelte";
|
||||
import { mailStore, type MailStandalone } from "$lib/mail-store.svelte";
|
||||
import { systemTitleKey } from "./system-titles";
|
||||
|
||||
let { entry }: { entry: MailStandalone } = $props();
|
||||
|
||||
let showOriginal = $state(false);
|
||||
|
||||
const incoming = $derived(entry.message.recipientUserName !== "" && entry.message.senderKind !== "player");
|
||||
|
||||
onMount(() => {
|
||||
if (incoming && entry.message.readAt === null) {
|
||||
void mailStore.markRead(entry.message.messageId);
|
||||
}
|
||||
});
|
||||
|
||||
const displayBody = $derived(
|
||||
entry.message.translatedBody && !showOriginal
|
||||
? entry.message.translatedBody
|
||||
: entry.message.body,
|
||||
);
|
||||
const displaySubject = $derived(
|
||||
entry.message.translatedSubject && !showOriginal
|
||||
? entry.message.translatedSubject
|
||||
: entry.message.subject,
|
||||
);
|
||||
|
||||
const headerKey = $derived.by(() => {
|
||||
const m = entry.message;
|
||||
if (m.senderKind === "system") {
|
||||
return systemTitleKey(m);
|
||||
}
|
||||
if (m.senderKind === "admin") {
|
||||
return "game.mail.admin.title" as const;
|
||||
}
|
||||
return "game.mail.broadcast.title" as const;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="standalone" data-testid="mail-system-item">
|
||||
<h3 class="title">{i18n.t(headerKey)}</h3>
|
||||
{#if displaySubject}
|
||||
<div class="subject">{displaySubject}</div>
|
||||
{/if}
|
||||
<p class="body">{displayBody}</p>
|
||||
{#if entry.message.translatedBody}
|
||||
<button
|
||||
type="button"
|
||||
class="toggle"
|
||||
onclick={() => (showOriginal = !showOriginal)}
|
||||
>
|
||||
{showOriginal ? i18n.t("game.mail.show_translation") : i18n.t("game.mail.show_original")}
|
||||
</button>
|
||||
{/if}
|
||||
{#if incoming}
|
||||
<button
|
||||
type="button"
|
||||
class="delete"
|
||||
onclick={() => mailStore.softDelete(entry.message.messageId)}
|
||||
data-testid="mail-system-delete"
|
||||
>
|
||||
{i18n.t("game.mail.delete_action")}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.standalone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: #b3a14c;
|
||||
}
|
||||
.subject {
|
||||
font-weight: 700;
|
||||
}
|
||||
.body {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.toggle,
|
||||
.delete {
|
||||
align-self: flex-start;
|
||||
font: inherit;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border: 1px solid #444;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
// Maps a system-mail message (lifecycle hook) to its i18n title key.
|
||||
// Kept as a typed helper so the thread-list and detail panes pick the
|
||||
// same title even when the body templates evolve.
|
||||
|
||||
import type { TranslationKey } from "$lib/i18n/index.svelte";
|
||||
import type { MailMessage } from "../../../api/diplomail";
|
||||
|
||||
const KEYWORDS: Array<{ test: RegExp; key: TranslationKey }> = [
|
||||
{ test: /game[._ ]paused/i, key: "game.mail.system.game_paused.title" },
|
||||
{ test: /game[._ ]cancelled|cancelled/i, key: "game.mail.system.game_cancelled.title" },
|
||||
{ test: /membership[._ ]removed|kicked/i, key: "game.mail.system.membership_removed.title" },
|
||||
{ test: /membership[._ ]blocked|blocked/i, key: "game.mail.system.membership_blocked.title" },
|
||||
];
|
||||
|
||||
/**
|
||||
* systemTitleKey returns the localised title key for a system mail
|
||||
* row. The lobby renders these messages through templated subjects;
|
||||
* the UI matches on the subject to pick a canonical title regardless
|
||||
* of language. Falls back to a generic system-mail title when no
|
||||
* pattern matches.
|
||||
*/
|
||||
export function systemTitleKey(message: MailMessage): TranslationKey {
|
||||
const subject = message.subject ?? "";
|
||||
for (const { test, key } of KEYWORDS) {
|
||||
if (test.test(subject)) {
|
||||
return key;
|
||||
}
|
||||
}
|
||||
return "game.mail.system.generic.title";
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,255 @@
|
||||
<!--
|
||||
Phase 28 — right-pane transcript for a single per-race thread.
|
||||
Renders messages oldest → newest, with outgoing messages visually
|
||||
distinct from incoming. Each message body goes through `textContent`
|
||||
(no HTML parsing); the optional translation has a per-message
|
||||
"show original" / "show translation" toggle. A persistent reply box
|
||||
sits at the bottom of the pane.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
import { i18n } from "$lib/i18n/index.svelte";
|
||||
import { mailStore, type MailThread } from "$lib/mail-store.svelte";
|
||||
import type { MailMessage } from "../../../api/diplomail";
|
||||
|
||||
let {
|
||||
thread,
|
||||
gameId,
|
||||
}: {
|
||||
thread: MailThread;
|
||||
gameId: string;
|
||||
} = $props();
|
||||
|
||||
let replyBody = $state("");
|
||||
let replyError = $state<string | null>(null);
|
||||
let sending = $state(false);
|
||||
const showOriginal = $state<Map<string, boolean>>(new Map());
|
||||
|
||||
// Mark every still-unread incoming message in this thread as read
|
||||
// when the pane mounts. Idempotent on the server; the store
|
||||
// optimistically flips `readAt` so the header badge updates
|
||||
// without waiting for the round-trip.
|
||||
onMount(() => {
|
||||
for (const m of thread.messages) {
|
||||
const incoming = m.senderRaceName === thread.raceName;
|
||||
if (incoming && m.readAt === null) {
|
||||
void mailStore.markRead(m.messageId);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function isOutgoing(m: MailMessage): boolean {
|
||||
// Outgoing messages have the local user as sender, which
|
||||
// corresponds to `recipientRaceName === thread.raceName` (the
|
||||
// thread is keyed on the other party's race name).
|
||||
return m.recipientRaceName === thread.raceName;
|
||||
}
|
||||
|
||||
function displayBody(m: MailMessage): string {
|
||||
if (m.translatedBody && !showOriginal.get(m.messageId)) {
|
||||
return m.translatedBody;
|
||||
}
|
||||
return m.body;
|
||||
}
|
||||
|
||||
function displaySubject(m: MailMessage): string {
|
||||
if (m.translatedSubject && !showOriginal.get(m.messageId)) {
|
||||
return m.translatedSubject ?? "";
|
||||
}
|
||||
return m.subject;
|
||||
}
|
||||
|
||||
function toggleTranslation(messageId: string): void {
|
||||
showOriginal.set(messageId, !(showOriginal.get(messageId) ?? false));
|
||||
// Trigger reactivity on the map proxy.
|
||||
showOriginal.size; // eslint-disable-line @typescript-eslint/no-unused-expressions
|
||||
}
|
||||
|
||||
async function submitReply(event: SubmitEvent): Promise<void> {
|
||||
event.preventDefault();
|
||||
replyError = null;
|
||||
const body = replyBody.trim();
|
||||
if (body === "") {
|
||||
replyError = i18n.t("game.mail.body_required");
|
||||
return;
|
||||
}
|
||||
sending = true;
|
||||
try {
|
||||
await mailStore.composePersonal({
|
||||
raceName: thread.raceName,
|
||||
subject: "",
|
||||
body,
|
||||
});
|
||||
replyBody = "";
|
||||
} catch (err) {
|
||||
replyError = err instanceof Error ? err.message : String(err);
|
||||
} finally {
|
||||
sending = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
// Force the component to depend on the gameId rune so a game
|
||||
// switch re-mounts the pane (the parent unmounts the old one
|
||||
// implicitly via the entry-key change, but this keeps the
|
||||
// dependency explicit for SSR-disabled hot reloads).
|
||||
void gameId;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="thread" data-testid="mail-thread-pane">
|
||||
<h3 class="title">{thread.raceName}</h3>
|
||||
<ol class="messages">
|
||||
{#each thread.messages as m (m.messageId)}
|
||||
<li class="message" class:outgoing={isOutgoing(m)}>
|
||||
<div class="meta">
|
||||
<span class="from">
|
||||
{#if isOutgoing(m)}
|
||||
{i18n.t("game.mail.outgoing_label")}
|
||||
{:else}
|
||||
{thread.raceName}
|
||||
{/if}
|
||||
</span>
|
||||
<time>{m.createdAt.toISOString().slice(0, 19).replace("T", " ")}</time>
|
||||
</div>
|
||||
{#if displaySubject(m)}
|
||||
<div class="subject">{displaySubject(m)}</div>
|
||||
{/if}
|
||||
<p class="body">{displayBody(m)}</p>
|
||||
{#if m.translatedBody}
|
||||
<button
|
||||
type="button"
|
||||
class="toggle"
|
||||
onclick={() => toggleTranslation(m.messageId)}
|
||||
>
|
||||
{#if showOriginal.get(m.messageId)}
|
||||
{i18n.t("game.mail.show_translation")}
|
||||
{:else}
|
||||
{i18n.t("game.mail.show_original")}
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
{#if !isOutgoing(m)}
|
||||
<button
|
||||
type="button"
|
||||
class="delete"
|
||||
onclick={() => mailStore.softDelete(m.messageId)}
|
||||
data-testid="mail-delete"
|
||||
>
|
||||
{i18n.t("game.mail.delete_action")}
|
||||
</button>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
|
||||
<form class="reply" onsubmit={submitReply}>
|
||||
<label for="mail-reply-body">{i18n.t("game.mail.reply_label")}</label>
|
||||
<textarea
|
||||
id="mail-reply-body"
|
||||
bind:value={replyBody}
|
||||
placeholder={i18n.t("game.mail.body_placeholder")}
|
||||
rows="3"
|
||||
data-testid="mail-reply-body"
|
||||
></textarea>
|
||||
{#if replyError}
|
||||
<p class="error" data-testid="mail-reply-error">{replyError}</p>
|
||||
{/if}
|
||||
<button type="submit" disabled={sending} data-testid="mail-reply-send">
|
||||
{i18n.t("game.mail.compose.send")}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
height: 100%;
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.messages {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
overflow-y: auto;
|
||||
max-height: 50vh;
|
||||
}
|
||||
.message {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
background: #1c1c1c;
|
||||
border: 1px solid #2a2a2a;
|
||||
}
|
||||
.message.outgoing {
|
||||
background: #15252e;
|
||||
}
|
||||
.meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.subject {
|
||||
font-weight: 700;
|
||||
}
|
||||
.body {
|
||||
margin: 0.25rem 0 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.toggle,
|
||||
.delete {
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
font: inherit;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border: 1px solid #444;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.reply {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.reply textarea {
|
||||
font: inherit;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #444;
|
||||
background: #111;
|
||||
color: inherit;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
}
|
||||
.reply button {
|
||||
align-self: flex-end;
|
||||
font: inherit;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border: 1px solid #444;
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.reply button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.error {
|
||||
color: #c62828;
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -123,6 +123,46 @@ const en = {
|
||||
"game.view.report": "turn report",
|
||||
"game.view.battle": "battle log",
|
||||
"game.view.mail": "diplomatic mail",
|
||||
"game.view.mail.badge": "{count}",
|
||||
"game.events.mail_new.message": "new mail from {from}",
|
||||
"game.events.mail_new.action": "view",
|
||||
"game.mail.loading": "loading mail…",
|
||||
"game.mail.load_failed": "could not load mail",
|
||||
"game.mail.empty": "no diplomatic messages yet",
|
||||
"game.mail.back": "back",
|
||||
"game.mail.compose_action": "compose",
|
||||
"game.mail.select_thread": "pick a thread on the left to read it",
|
||||
"game.mail.broadcast.title": "your broadcast",
|
||||
"game.mail.admin.title": "admin notification",
|
||||
"game.mail.system.generic.title": "system message",
|
||||
"game.mail.system.game_paused.title": "game paused",
|
||||
"game.mail.system.game_cancelled.title": "game cancelled",
|
||||
"game.mail.system.membership_removed.title": "membership removed",
|
||||
"game.mail.system.membership_blocked.title": "membership blocked",
|
||||
"game.mail.subject_placeholder": "subject (optional)",
|
||||
"game.mail.body_placeholder": "your message…",
|
||||
"game.mail.recipient_label": "race",
|
||||
"game.mail.recipient_required": "pick a recipient race",
|
||||
"game.mail.body_required": "the message body cannot be empty",
|
||||
"game.mail.body_too_long": "the body exceeds the {limit} byte limit",
|
||||
"game.mail.subject_too_long": "the subject exceeds the {limit} byte limit",
|
||||
"game.mail.compose.send": "send",
|
||||
"game.mail.compose.cancel": "cancel",
|
||||
"game.mail.compose.target_personal": "personal",
|
||||
"game.mail.compose.target_broadcast": "broadcast",
|
||||
"game.mail.compose.target_admin": "admin",
|
||||
"game.mail.compose.recipients_active": "active members",
|
||||
"game.mail.compose.recipients_active_and_removed": "active + removed",
|
||||
"game.mail.compose.recipients_all_members": "all members",
|
||||
"game.mail.compose.target_label": "kind",
|
||||
"game.mail.compose.recipients_label": "audience",
|
||||
"game.mail.compose.send_failed": "send failed",
|
||||
"game.mail.show_original": "show original",
|
||||
"game.mail.show_translation": "show translation",
|
||||
"game.mail.translation_unavailable": "translation unavailable",
|
||||
"game.mail.reply_label": "reply",
|
||||
"game.mail.delete_action": "delete",
|
||||
"game.mail.outgoing_label": "you",
|
||||
"game.view.designer.ship_class": "ship-class designer",
|
||||
"game.view.designer.science": "science designer",
|
||||
"game.sidebar.tab.calculator": "calculator",
|
||||
|
||||
@@ -124,6 +124,46 @@ const ru: Record<keyof typeof en, string> = {
|
||||
"game.view.report": "отчёт хода",
|
||||
"game.view.battle": "журнал боёв",
|
||||
"game.view.mail": "дипломатическая почта",
|
||||
"game.view.mail.badge": "{count}",
|
||||
"game.events.mail_new.message": "новое письмо от {from}",
|
||||
"game.events.mail_new.action": "открыть",
|
||||
"game.mail.loading": "загрузка почты…",
|
||||
"game.mail.load_failed": "не удалось загрузить почту",
|
||||
"game.mail.empty": "дипломатических сообщений пока нет",
|
||||
"game.mail.back": "назад",
|
||||
"game.mail.compose_action": "написать",
|
||||
"game.mail.select_thread": "выбери ветку слева",
|
||||
"game.mail.broadcast.title": "твоя рассылка",
|
||||
"game.mail.admin.title": "административное уведомление",
|
||||
"game.mail.system.generic.title": "системное сообщение",
|
||||
"game.mail.system.game_paused.title": "игра поставлена на паузу",
|
||||
"game.mail.system.game_cancelled.title": "игра отменена",
|
||||
"game.mail.system.membership_removed.title": "членство удалено",
|
||||
"game.mail.system.membership_blocked.title": "членство заблокировано",
|
||||
"game.mail.subject_placeholder": "тема (необязательно)",
|
||||
"game.mail.body_placeholder": "твоё сообщение…",
|
||||
"game.mail.recipient_label": "раса",
|
||||
"game.mail.recipient_required": "выбери расу-получателя",
|
||||
"game.mail.body_required": "тело сообщения не может быть пустым",
|
||||
"game.mail.body_too_long": "длина тела превышает лимит {limit} байт",
|
||||
"game.mail.subject_too_long": "длина темы превышает лимит {limit} байт",
|
||||
"game.mail.compose.send": "отправить",
|
||||
"game.mail.compose.cancel": "отмена",
|
||||
"game.mail.compose.target_personal": "личное",
|
||||
"game.mail.compose.target_broadcast": "рассылка",
|
||||
"game.mail.compose.target_admin": "админ.",
|
||||
"game.mail.compose.recipients_active": "активным членам",
|
||||
"game.mail.compose.recipients_active_and_removed": "активным + удалённым",
|
||||
"game.mail.compose.recipients_all_members": "всем членам",
|
||||
"game.mail.compose.target_label": "тип",
|
||||
"game.mail.compose.recipients_label": "адресаты",
|
||||
"game.mail.compose.send_failed": "отправка не удалась",
|
||||
"game.mail.show_original": "показать оригинал",
|
||||
"game.mail.show_translation": "показать перевод",
|
||||
"game.mail.translation_unavailable": "перевод недоступен",
|
||||
"game.mail.reply_label": "ответить",
|
||||
"game.mail.delete_action": "удалить",
|
||||
"game.mail.outgoing_label": "ты",
|
||||
"game.view.designer.ship_class": "конструктор класса кораблей",
|
||||
"game.view.designer.science": "редактор наук",
|
||||
"game.sidebar.tab.calculator": "калькулятор",
|
||||
|
||||
Reference in New Issue
Block a user