galaxy-game/ui/frontend/src/lib/sidebar/tab-bar.svelte

<!--
Three-button tab switcher for the sidebar. Each button is labelled
and tagged so component tests can target it; the parent sidebar
component owns the selected-tab state and re-renders the matching
tool panel.

Phase 12 introduces the `hideOrder` prop: when true the Order entry
is filtered out of the tab list. The current consumer is the
`historyMode` flag forwarded from the in-game shell layout — the
flag is constant `false` in Phase 12 and Phase 26's history mode
flips it on.
-->
<script lang="ts">
	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
	import type { SidebarTab } from "./types";

	type Props = {
		activeTab: SidebarTab;
		onSelect: (tab: SidebarTab) => void;
		hideOrder?: boolean;
	};
	let { activeTab, onSelect, hideOrder = false }: Props = $props();

	const allTabs: ReadonlyArray<{ id: SidebarTab; key: TranslationKey }> = [
		{ id: "calculator", key: "game.sidebar.tab.calculator" },
		{ id: "inspector", key: "game.sidebar.tab.inspector" },
		{ id: "order", key: "game.sidebar.tab.order" },
	];
	const tabs = $derived(
		hideOrder ? allTabs.filter((t) => t.id !== "order") : allTabs,
	);

	let tablistEl: HTMLDivElement | undefined = $state();

	// WAI-ARIA tabs keyboard pattern: arrows move between tabs (with
	// wrap-around), Home/End jump to the ends. Activation is automatic —
	// moving focus also selects the tab — and focus follows to the
	// newly-active tab button.
	function onKeydown(event: KeyboardEvent, index: number): void {
		const ids = tabs.map((t) => t.id);
		let next = index;
		switch (event.key) {
			case "ArrowRight":
			case "ArrowDown":
				next = (index + 1) % ids.length;
				break;
			case "ArrowLeft":
			case "ArrowUp":
				next = (index - 1 + ids.length) % ids.length;
				break;
			case "Home":
				next = 0;
				break;
			case "End":
				next = ids.length - 1;
				break;
			default:
				return;
		}
		event.preventDefault();
		onSelect(ids[next]);
		tablistEl
			?.querySelector<HTMLElement>(`[data-testid="sidebar-tab-${ids[next]}"]`)
			?.focus();
	}
</script>

<div
	class="tab-bar"
	role="tablist"
	data-testid="sidebar-tab-bar"
	bind:this={tablistEl}
>
	{#each tabs as tab, i (tab.id)}
		<button
			type="button"
			role="tab"
			id="sidebar-tab-{tab.id}"
			data-testid="sidebar-tab-{tab.id}"
			aria-selected={tab.id === activeTab}
			aria-controls="sidebar-panel"
			tabindex={tab.id === activeTab ? 0 : -1}
			class:active={tab.id === activeTab}
			onclick={() => onSelect(tab.id)}
			onkeydown={(e) => onKeydown(e, i)}
		>
			{i18n.t(tab.key)}
		</button>
	{/each}
</div>

<style>
	.tab-bar {
		display: flex;
		gap: 0.25rem;
		padding: 0.5rem 0.5rem 0;
		border-bottom: 1px solid var(--color-border-subtle);
		font-family: var(--font-sans);
	}
	.tab-bar button {
		font: inherit;
		font-size: 0.9rem;
		padding: 0.4rem 0.75rem;
		background: transparent;
		color: var(--color-text-muted);
		border: 0;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}
	.tab-bar button.active {
		color: var(--color-text);
		border-bottom-color: var(--color-accent);
	}
	.tab-bar button:hover:not(.active) {
		color: var(--color-text);
	}
</style>