i18n

src/lib/components/navigation/settings-menu.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { type Theme, storedTheme } from '$lib/stores/settings';
 
+	import LanguageOptions from '$lib/components/language-options.svelte';
 	import * as Popover from '$lib/components/ui/popover';
 	import UnitOptions from '$lib/components/unit-options.svelte';
 
+	import * as m from '$lib/paraglide/messages';
 	import UnlockDialog from '$lib/paywall/UnlockDialog.svelte';
 	import { isSupporter } from '$lib/paywall/supporter';
 
@@ -11,10 +13,10 @@
 
 	// The topbar has room for one control on a phone, so units, theme and the
 	// supporter status share this menu instead of each carrying its own trigger.
-	const THEMES: { value: Theme; label: string }[] = [
-		{ value: 'system', label: 'System' },
-		{ value: 'light', label: 'Light' },
-		{ value: 'dark', label: 'Dark' }
+	const THEMES: { value: Theme; label: () => string }[] = [
+		{ value: 'system', label: m.theme_system },
+		{ value: 'light', label: m.theme_light },
+		{ value: 'dark', label: m.theme_dark }
 	];
 
 	let open = $state(false);
@@ -24,8 +26,8 @@
 <Popover.Root bind:open>
 	<Popover.Trigger
 		class="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border/70 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground"
-		aria-label="Settings"
-		title="Settings"
+		aria-label={m.settings_title()}
+		title={m.settings_title()}
 	>
 		<!-- gear -->
 		<svg
@@ -52,7 +54,7 @@
 				<span
 					class="mb-1.5 block text-[11px] font-semibold tracking-wide text-muted-foreground uppercase"
 				>
-					Theme
+					{m.theme_label()}
 				</span>
 				<div class="flex gap-1 rounded-lg bg-muted p-0.5">
 					{#each THEMES as option (option.value)}
@@ -65,12 +67,14 @@
 							onclick={() => storedTheme.set(option.value)}
 						>
 							<ThemeIcon theme={option.value} class="h-4 w-4" />
-							{option.label}
+							{option.label()}
 						</button>
 					{/each}
 				</div>
 			</div>
 
+			<LanguageOptions onSelect={() => (open = false)} />
+
 			<div class="border-t border-border/70 pt-3">
 				<button
 					type="button"
@@ -108,10 +112,10 @@
 					{/if}
 					<span class="min-w-0 flex-1">
 						<span class="block text-[13px] font-semibold">
-							{$isSupporter ? 'Supporter extras active' : 'Support Drizz.li'}
+							{$isSupporter ? m.supporter_active() : m.supporter_support()}
 						</span>
 						<span class="block text-[11px] text-muted-foreground">
-							{$isSupporter ? 'Manage your access key' : 'Unlock the supporter extras'}
+							{$isSupporter ? m.supporter_manage_key() : m.supporter_unlock()}
 						</span>
 					</span>
 				</button>