galaxy-game/ui/frontend/src/lib/header/account-menu.svelte

<!--
Account-menu popover with Account / Settings / Sessions / Theme /
Language / Logout. Phase 10 only wires Language (via the existing
i18n primitive) and Logout (`session.signOut("user")`); the rest are
stub buttons that later phases (35 polish, dedicated phases for
Sessions and Theme) take over.
-->
<script lang="ts">
	import { onMount } from "svelte";
	import {
		i18n,
		SUPPORTED_LOCALES,
		type Locale,
		type TranslationKey,
	} from "$lib/i18n/index.svelte";
	import { session } from "$lib/session-store.svelte";
	import { theme, type ThemeChoice } from "$lib/theme/theme.svelte";

	const THEME_CHOICES: ReadonlyArray<{ id: ThemeChoice; key: TranslationKey }> = [
		{ id: "system", key: "game.shell.menu.theme_system" },
		{ id: "light", key: "game.shell.menu.theme_light" },
		{ id: "dark", key: "game.shell.menu.theme_dark" },
	];

	let open = $state(false);
	let rootEl: HTMLDivElement | null = $state(null);

	function toggleOpen(): void {
		open = !open;
	}

	async function logout(): Promise<void> {
		open = false;
		await session.signOut("user");
	}

	function selectLocale(event: Event): void {
		const value = (event.target as HTMLSelectElement).value as Locale;
		i18n.setLocale(value);
	}

	function selectTheme(event: Event): void {
		const value = (event.target as HTMLSelectElement).value as ThemeChoice;
		theme.setChoice(value);
	}

	function onKeyDown(event: KeyboardEvent): void {
		if (event.key === "Escape" && open) {
			open = false;
		}
	}

	onMount(() => {
		const handleClick = (event: MouseEvent): void => {
			if (!open || rootEl === null) return;
			const target = event.target;
			if (target instanceof Node && rootEl.contains(target)) return;
			open = false;
		};
		document.addEventListener("click", handleClick, true);
		document.addEventListener("keydown", onKeyDown);
		return () => {
			document.removeEventListener("click", handleClick, true);
			document.removeEventListener("keydown", onKeyDown);
		};
	});
</script>

<div class="account-menu" bind:this={rootEl}>
	<button
		type="button"
		class="trigger"
		data-testid="account-menu-trigger"
		aria-haspopup="menu"
		aria-expanded={open}
		aria-label={i18n.t("game.shell.menu.account")}
		onclick={toggleOpen}
	>
		⚙
	</button>
	{#if open}
		<div class="surface" role="menu" data-testid="account-menu-list">
			<button type="button" role="menuitem" data-testid="account-menu-settings" disabled>
				{i18n.t("game.shell.menu.settings")}
			</button>
			<button type="button" role="menuitem" data-testid="account-menu-sessions" disabled>
				{i18n.t("game.shell.menu.sessions")}
			</button>
			<label class="field" data-testid="account-menu-theme">
				<span>{i18n.t("game.shell.menu.theme")}</span>
				<select
					data-testid="account-menu-theme-select"
					value={theme.choice}
					onchange={selectTheme}
				>
					{#each THEME_CHOICES as entry (entry.id)}
						<option value={entry.id}>{i18n.t(entry.key)}</option>
					{/each}
				</select>
			</label>
			<label class="field" data-testid="account-menu-language">
				<span>{i18n.t("game.shell.menu.language")}</span>
				<select
					data-testid="account-menu-language-select"
					value={i18n.locale}
					onchange={selectLocale}
				>
					{#each SUPPORTED_LOCALES as entry (entry.code)}
						<option value={entry.code}>{entry.nativeName}</option>
					{/each}
				</select>
			</label>
			<button
				type="button"
				role="menuitem"
				data-testid="account-menu-logout"
				onclick={logout}
			>
				{i18n.t("game.shell.menu.logout")}
			</button>
		</div>
	{/if}
</div>

<style>
	.account-menu {
		position: relative;
	}
	.trigger {
		font: inherit;
		font-size: 1.1rem;
		padding: 0.25rem 0.6rem;
		background: transparent;
		color: inherit;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		cursor: pointer;
	}
	.trigger:hover {
		background: var(--color-surface-hover);
	}
	.surface {
		position: absolute;
		top: calc(100% + 0.25rem);
		right: 0;
		min-width: 12rem;
		display: flex;
		flex-direction: column;
		background: var(--color-surface-overlay);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-lg);
		z-index: 50;
	}
	.surface > button,
	.surface > label {
		text-align: left;
		font: inherit;
		padding: 0.45rem 0.75rem;
		background: transparent;
		color: inherit;
		border: 0;
		cursor: pointer;
	}
	.surface > button:hover:not(:disabled) {
		background: var(--color-surface-hover);
	}
	.surface > button:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
	.field {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	.field select {
		font: inherit;
		background: var(--color-surface-raised);
		color: inherit;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		padding: 0.15rem 0.35rem;
	}
</style>