feat: add locale preferences to preferences sheet

i18n/en-US/locale.json

@@ -0,0 +1,4 @@
+{
+	"preferences": "Locale Preferences",
+	"language": "Language"
+}

src/lib/shared/i18n/index.ts

@@ -18,17 +18,14 @@ const logger = getLogger('i18n');
 
 function createLocalePreference() {
 	const { subscribe, set } = persistCookie(
-		writable<AvailableLanguageTag | undefined>(sourceLanguageTag),
+		writable<AvailableLanguageTag>(sourceLanguageTag),
 		'i18n-locale'
 	);
 
 	subscribe((v) => {
 		if (v) {
 			setLanguageTag(v);
 		}
-		if (v === undefined) {
-			setLanguageTag(sourceLanguageTag);
-		}
 	});
 
 	return {

src/lib/shared/layout/header/Header.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
-	import { Menu } from 'lucide-svelte';
 
 	import * as m from '$lib/shared/i18n/compiled/messages';
 
-	import LocaleSwitch from '$lib/shared/i18n/LocaleSwitch.svelte';
 	import BrandLogo from '$lib/shared/layout/BrandLogo.svelte';
 	import DesktopNavigation from '$lib/shared/layout/header/DesktopNavigation.svelte';
 	import MobileNavigation from '$lib/shared/layout/header/MobileNavigation.svelte';
-	import PreferencesSheet from '$lib/shared/layout/header/PreferencesSheet.svelte';
-	import ThemeSwitch from '$lib/shared/theme/ThemeSwitch.svelte';
+	import PreferencesSheet from '$lib/shared/layout/preferences/PreferencesSheet.svelte';
 	import { Button } from '$lib/vgui/components/ui/button';
 
 	let mobileMenuOpen = false;
+	let preferencesOpen = false;
+	let preferencesSide: 'right' | 'bottom' = 'right';
+	$: preferencesSide = mobileMenuOpen ? 'bottom' : 'right';
 </script>
 
 <header class="border-rainbow z-30 border-b-2 bg-background shadow-md">
@@ -40,10 +40,12 @@
 			</div>
 		{/if}
 		<div class="hidden gap-x-4 lg:flex">
-			<!--			<LocaleSwitch class="w-46" />-->
-			<!--			<ThemeSwitch />-->
-			<PreferencesSheet />
+			<Button variant="outline" size="icon" on:click={() => (preferencesOpen = true)}>
+				<Icon icon="lucide:settings-2" class="h-5 w-5" />
+			</Button>
 		</div>
 	</nav>
-	<MobileNavigation bind:mobileMenuOpen />
+	<MobileNavigation bind:mobileMenuOpen bind:preferencesOpen />
 </header>
+
+<PreferencesSheet side={preferencesSide} bind:open={preferencesOpen} />

src/lib/shared/layout/header/MobileNavigation.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 	import { melt, createDialog } from '@melt-ui/svelte';
-	import { Menu } from 'lucide-svelte';
 	import { writable } from 'svelte/store';
 	import { fly } from 'svelte/transition';
 
 	import * as m from '$lib/shared/i18n/compiled/messages';
-	import LocaleSwitch from '$lib/shared/i18n/LocaleSwitch.svelte';
 	import BrandLogo from '$lib/shared/layout/BrandLogo.svelte';
-	import ThemeSwitch from '$lib/shared/theme/ThemeSwitch.svelte';
 
 	import { Button } from '$lib/vgui/components/ui/button';
 
 	import * as Nav from './navigation';
 
 	export let mobileMenuOpen = false;
 
+	export let preferencesOpen = false;
+
 	const store = writable(mobileMenuOpen);
 	$: store.set(mobileMenuOpen);
 	store.subscribe((value) => mobileMenuOpen !== value && (mobileMenuOpen = value));
@@ -59,8 +58,15 @@
 					</div>
 
 					<div class="space-y-4">
-						<LocaleSwitch class="w-full" />
-						<ThemeSwitch class="w-full" />
+						<Button
+							variant="outline"
+							size="lg"
+							class="w-full"
+							on:click={() => (preferencesOpen = true)}
+						>
+							<Icon icon="lucide:settings-2" class="mr-2 h-5 w-5" />
+							Open Preferences
+						</Button>
 					</div>
 				</div>
 			</div>

src/lib/shared/layout/preferences/LocalePreferencesSection.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { parse } from 'bcp-47';
+
+	import * as m from '$lib/shared/i18n/compiled/messages';
+	import { availableLanguageTags } from '$lib/shared/i18n/compiled/runtime';
+	import { type AvailableLanguageTag, languageTag } from '$lib/shared/i18n/compiled/runtime';
+	import { localePreference } from '$lib/shared/i18n/index';
+	import { availableThemeModes, availableThemes } from '$lib/shared/theme/options';
+	import { ThemeMode, themeMode } from '$lib/shared/theme/preferences';
+	import { Label } from '$lib/vgui/components/ui/label';
+	import * as Select from '$lib/vgui/components/ui/select';
+
+	import type { SelectOption } from '@melt-ui/svelte';
+
+	const getLanguageName = (locale: string): string => {
+		return (
+			new Intl.DisplayNames([locale], {
+				type: 'language'
+			}).of(locale) || locale
+		);
+	};
+
+	const getLanguageFlag = (locale: string): string => {
+		const parsed = parse(locale, { forgiving: true });
+		return parsed.region ? `flag:${parsed.region.toLowerCase()}-1x1` : 'tabler:language';
+	};
+
+	const handleLanguageSelectedChange = (v: SelectOption<unknown> | undefined) => {
+		if (v) {
+			localePreference.set(v.value as AvailableLanguageTag);
+		}
+	};
+</script>
+
+<div class="space-y-4">
+	<div class="space-y-2">
+		<Label>{m.locale_language()}</Label>
+		<Select.Root
+			portal={null}
+			onSelectedChange={handleLanguageSelectedChange}
+			selected={{ value: $localePreference, label: getLanguageName(languageTag()) }}
+		>
+			<Select.Trigger>
+				<Select.Value asChild>
+					<div class="flex gap-x-3">
+						<Icon icon={getLanguageFlag(languageTag())} class="h-5 w-5" />
+						{getLanguageName(languageTag())}
+					</div>
+				</Select.Value>
+			</Select.Trigger>
+			<Select.Content>
+				{#each availableLanguageTags as language}
+					<Select.Item value={language} label={getLanguageName(language)} class="flex gap-x-3">
+						<Icon icon={getLanguageFlag(language)} class="h-5 w-5" />
+						{getLanguageName(language)}
+					</Select.Item>
+				{/each}
+			</Select.Content>
+			<Select.Input name="language" />
+		</Select.Root>
+	</div>
+</div>

src/lib/shared/layout/preferences/PreferencesSheet.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+
+	import * as m from '$lib/shared/i18n/compiled/messages';
+	import LocalePreferencesSection from '$lib/shared/layout/preferences/LocalePreferencesSection.svelte';
+	import ThemePreferencesSection from '$lib/shared/layout/preferences/ThemePreferencesSection.svelte';
+	import { Button } from '$lib/vgui/components/ui/button';
+	import * as Sheet from '$lib/vgui/components/ui/sheet';
+
+	export let side: 'right' | 'bottom';
+	export let open: boolean;
+</script>
+
+<Sheet.Root bind:open>
+	<Sheet.Content {side} class="space-y-4">
+		<section>
+			<Sheet.Header>
+				<Sheet.Title>{m.locale_preferences()}</Sheet.Title>
+			</Sheet.Header>
+
+			<div class="py-4">
+				<LocalePreferencesSection />
+			</div>
+		</section>
+
+		<section>
+			<Sheet.Header>
+				<Sheet.Title>{m.theme_preferences()}</Sheet.Title>
+			</Sheet.Header>
+
+			<div class="py-4">
+				<ThemePreferencesSection />
+			</div>
+		</section>
+	</Sheet.Content>
+</Sheet.Root>