From ae8ad36439a1b96d8fcc736027acf5e638c493bf Mon Sep 17 00:00:00 2001
From: Sunxyw <git@sunxyw.xyz>
Date: Thu, 16 Nov 2023 02:21:20 +0800
Subject: [PATCH] feat: add locale preferences to preferences sheet

---
 i18n/en-US/locale.json                        |  4 ++
 i18n/en-US/locale_switch.json                 |  3 -
 i18n/en-US/theme_switch.json                  |  6 --
 src/lib/shared/i18n/LocaleSwitch.svelte       | 33 ----------
 src/lib/shared/i18n/index.ts                  |  5 +-
 src/lib/shared/layout/header/Header.svelte    | 18 +++---
 .../layout/header/MobileNavigation.svelte     | 16 +++--
 .../layout/header/PreferencesSheet.svelte     | 25 --------
 .../LocalePreferencesSection.svelte           | 63 +++++++++++++++++++
 .../preferences/PreferencesSheet.svelte       | 36 +++++++++++
 .../ThemePreferencesSection.svelte}           |  0
 11 files changed, 125 insertions(+), 84 deletions(-)
 create mode 100644 i18n/en-US/locale.json
 delete mode 100644 i18n/en-US/locale_switch.json
 delete mode 100644 i18n/en-US/theme_switch.json
 delete mode 100644 src/lib/shared/i18n/LocaleSwitch.svelte
 delete mode 100644 src/lib/shared/layout/header/PreferencesSheet.svelte
 create mode 100644 src/lib/shared/layout/preferences/LocalePreferencesSection.svelte
 create mode 100644 src/lib/shared/layout/preferences/PreferencesSheet.svelte
 rename src/lib/shared/{theme/ThemeSwitch.svelte => layout/preferences/ThemePreferencesSection.svelte} (100%)

diff --git a/i18n/en-US/locale.json b/i18n/en-US/locale.json
new file mode 100644
index 0000000..db3878b
--- /dev/null
+++ b/i18n/en-US/locale.json
@@ -0,0 +1,4 @@
+{
+	"preferences": "Locale Preferences",
+	"language": "Language"
+}
diff --git a/i18n/en-US/locale_switch.json b/i18n/en-US/locale_switch.json
deleted file mode 100644
index 35ea39a..0000000
--- a/i18n/en-US/locale_switch.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"label": "Change Language"
-}
diff --git a/i18n/en-US/theme_switch.json b/i18n/en-US/theme_switch.json
deleted file mode 100644
index f1d0f44..0000000
--- a/i18n/en-US/theme_switch.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"label": "Change Theme",
-	"system": "System",
-	"light": "Light",
-	"dark": "Dark"
-}
diff --git a/src/lib/shared/i18n/LocaleSwitch.svelte b/src/lib/shared/i18n/LocaleSwitch.svelte
deleted file mode 100644
index 25cc1c6..0000000
--- a/src/lib/shared/i18n/LocaleSwitch.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { parse } from 'bcp-47';
-
-	import * as m from '$lib/shared/i18n/compiled/messages';
-	import { localePreference } from '$lib/shared/i18n/index';
-	import Select from '$lib/vgui/select/Select.svelte';
-
-	import { availableLanguageTags } from './compiled/runtime';
-
-	let clazz = '';
-	export { clazz as class };
-
-	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()}-4x3` : 'tabler:language';
-	};
-
-	$: options = availableLanguageTags.map((locale) => ({
-		value: locale,
-		label: getLanguageName(locale),
-		icon: getLanguageFlag(locale)
-	}));
-</script>
-
-<Select class={clazz} bind:value={$localePreference} label={m.locale_switch_label()} {options} />
diff --git a/src/lib/shared/i18n/index.ts b/src/lib/shared/i18n/index.ts
index 8c42b4a..a712a84 100644
--- a/src/lib/shared/i18n/index.ts
+++ b/src/lib/shared/i18n/index.ts
@@ -18,7 +18,7 @@ const logger = getLogger('i18n');
 
 function createLocalePreference() {
 	const { subscribe, set } = persistCookie(
-		writable<AvailableLanguageTag | undefined>(sourceLanguageTag),
+		writable<AvailableLanguageTag>(sourceLanguageTag),
 		'i18n-locale'
 	);
 
@@ -26,9 +26,6 @@ function createLocalePreference() {
 		if (v) {
 			setLanguageTag(v);
 		}
-		if (v === undefined) {
-			setLanguageTag(sourceLanguageTag);
-		}
 	});
 
 	return {
diff --git a/src/lib/shared/layout/header/Header.svelte b/src/lib/shared/layout/header/Header.svelte
index 378d2a2..400e446 100644
--- a/src/lib/shared/layout/header/Header.svelte
+++ b/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} />
diff --git a/src/lib/shared/layout/header/MobileNavigation.svelte b/src/lib/shared/layout/header/MobileNavigation.svelte
index 93e8640..e83dded 100644
--- a/src/lib/shared/layout/header/MobileNavigation.svelte
+++ b/src/lib/shared/layout/header/MobileNavigation.svelte
@@ -1,14 +1,11 @@
 <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';
 
@@ -16,6 +13,8 @@
 
 	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>
diff --git a/src/lib/shared/layout/header/PreferencesSheet.svelte b/src/lib/shared/layout/header/PreferencesSheet.svelte
deleted file mode 100644
index b1068e1..0000000
--- a/src/lib/shared/layout/header/PreferencesSheet.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import Icon from '@iconify/svelte';
-
-	import * as m from '$lib/shared/i18n/compiled/messages';
-	import ThemeSwitch from '$lib/shared/theme/ThemeSwitch.svelte';
-	import { Button } from '$lib/vgui/components/ui/button';
-	import * as Sheet from '$lib/vgui/components/ui/sheet';
-</script>
-
-<Sheet.Root>
-	<Sheet.Trigger asChild let:builder>
-		<Button builders={[builder]} variant="outline" size="icon">
-			<Icon icon="lucide:settings-2" class="h-5 w-5" />
-		</Button>
-	</Sheet.Trigger>
-	<Sheet.Content side="right">
-		<Sheet.Header>
-			<Sheet.Title>{m.theme_preferences()}</Sheet.Title>
-		</Sheet.Header>
-
-		<div class="py-4">
-			<ThemeSwitch />
-		</div>
-	</Sheet.Content>
-</Sheet.Root>
diff --git a/src/lib/shared/layout/preferences/LocalePreferencesSection.svelte b/src/lib/shared/layout/preferences/LocalePreferencesSection.svelte
new file mode 100644
index 0000000..2a61830
--- /dev/null
+++ b/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>
diff --git a/src/lib/shared/layout/preferences/PreferencesSheet.svelte b/src/lib/shared/layout/preferences/PreferencesSheet.svelte
new file mode 100644
index 0000000..905af34
--- /dev/null
+++ b/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>
diff --git a/src/lib/shared/theme/ThemeSwitch.svelte b/src/lib/shared/layout/preferences/ThemePreferencesSection.svelte
similarity index 100%
rename from src/lib/shared/theme/ThemeSwitch.svelte
rename to src/lib/shared/layout/preferences/ThemePreferencesSection.svelte