galaxy-game/ui/frontend/src/lib/active-view/report/section-my-ship-groups.svelte

<!--
Phase 23 Report View — my ship groups section. Renders the local
ship groups with a short-form id (first 8 hex chars; the full UUID
is in `data-id` for tests and copy-paste lookups). `cargo` is
shown together with `load` when carrying.
-->
<script lang="ts">
	import { getContext } from "svelte";

	import { i18n } from "$lib/i18n/index.svelte";
	import {
		RENDERED_REPORT_CONTEXT_KEY,
		type RenderedReportSource,
	} from "$lib/rendered-report.svelte";
	import { formatFloat, planetLabel } from "./format";

	const rendered = getContext<RenderedReportSource | undefined>(
		RENDERED_REPORT_CONTEXT_KEY,
	);
	const report = $derived(rendered?.report ?? null);
	const rows = $derived(report?.localShipGroups ?? []);
	const planets = $derived(report?.planets ?? []);

	function shortId(id: string): string {
		return id.slice(0, 8);
	}

	function cargoCell(
		cargo: string,
		load: number,
	): string {
		if (cargo === "NONE") return "—";
		return `${cargo} (${formatFloat(load)})`;
	}
</script>

<section
	id="report-my-ship-groups"
	class="grid-section"
	data-testid="report-section-my-ship-groups"
>
	<h2>{i18n.t("game.report.section.my_ship_groups.title")}</h2>

	{#if report === null}
		<p class="status">{i18n.t("game.report.loading")}</p>
	{:else if rows.length === 0}
		<p class="status" data-testid="my-ship-groups-empty">
			{i18n.t("game.report.section.my_ship_groups.empty")}
		</p>
	{:else}
		<table class="grid" data-testid="my-ship-groups-table">
			<thead>
				<tr>
					<th>{i18n.t("game.report.section.my_ship_groups.column.id")}</th>
					<th>{i18n.t("game.report.section.my_ship_groups.column.class")}</th>
					<th>{i18n.t("game.report.section.my_ship_groups.column.count")}</th>
					<th>{i18n.t("game.report.section.my_ship_groups.column.cargo")}</th>
					<th>{i18n.t("game.report.section.my_ship_groups.column.state")}</th>
					<th>{i18n.t("game.report.section.my_ship_groups.column.destination")}</th>
					<th>{i18n.t("game.report.section.my_ship_groups.column.origin")}</th>
					<th>{i18n.t("game.report.section.my_ship_groups.column.range")}</th>
					<th>{i18n.t("game.report.section.my_ship_groups.column.speed")}</th>
					<th>{i18n.t("game.report.section.my_ship_groups.column.mass")}</th>
					<th>{i18n.t("game.report.section.my_ship_groups.column.fleet")}</th>
				</tr>
			</thead>
			<tbody>
				{#each rows as g (g.id)}
					<tr data-testid="my-ship-groups-row" data-id={g.id}>
						<td><span class="uuid">{shortId(g.id)}</span></td>
						<td>{g.class}</td>
						<td>{g.count}</td>
						<td>{cargoCell(g.cargo, g.load)}</td>
						<td>{g.state}</td>
						<td>{planetLabel(g.destination, planets)}</td>
						<td>
							{g.origin === null ? "—" : planetLabel(g.origin, planets)}
						</td>
						<td>{g.range === null ? "—" : formatFloat(g.range)}</td>
						<td>{formatFloat(g.speed)}</td>
						<td>{formatFloat(g.mass)}</td>
						<td>{g.fleet ?? "—"}</td>
					</tr>
				{/each}
			</tbody>
		</table>
	{/if}
</section>

<style>
	.grid-section h2 {
		margin: 0 0 0.5rem;
		font-size: 1.05rem;
		color: var(--color-text);
	}
	.status {
		margin: 0;
		color: var(--color-text-muted);
		font-size: 0.9rem;
	}
	.grid {
		border-collapse: collapse;
		width: 100%;
		font-variant-numeric: tabular-nums;
		font-size: 0.9rem;
	}
	.grid th,
	.grid td {
		padding: 0.4rem 0.6rem;
		text-align: left;
		border-bottom: 1px solid var(--color-border-subtle);
	}
	.grid th {
		color: var(--color-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		font-size: 0.75rem;
	}
	.grid tbody tr:hover {
		background: var(--color-surface);
	}
	.uuid {
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		color: var(--color-accent);
	}
</style>