From 1fb5c8c5b6008e5f9cb87e8ef01cef322d7c304f Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 21 Jan 2024 01:58:30 -0800
Subject: feat(locale): typed locale getter

---
 src/lib/Locale/layout.ts                   |  2 +-
 src/lib/Settings/Categories/Display.svelte | 23 ++++++++++-------
 src/stores/locale.ts                       | 40 ++++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 src/stores/locale.ts

(limited to 'src')

diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index 05e36daf..59862632 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -1,4 +1,4 @@
-type LocaleValue = string | LocaleValue[]; // | { [key: string]: LocaleValue };
+type LocaleValue = string; // | LocaleValue[] | { [key: string]: LocaleValue };
 
 export interface LocaleDictionary {
 	[key: string]: LocaleDictionary | string | Array<string | LocaleDictionary> | null;
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index f4bc6f79..d9070e8e 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -4,6 +4,7 @@
 	import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
 	import SettingHint from '../SettingHint.svelte';
 	import root from '$lib/Utility/root';
+	import locale from '$stores/locale';
 
 	const onHelperChange = () => {
 		const mai = document.getElementById('mai') as HTMLImageElement;
@@ -41,17 +42,17 @@
 <b>{$_('settings.display.categories.include_additional_media')}</b><br />
 <SettingCheckboxToggle
 	setting="displayPausedMedia"
-	text={$_('settings.media.paused_media')}
+	text={$locale().settings.media.paused_media}
 	lineBreak={false}
 />
 <SettingCheckboxToggle
 	setting="displayUnresolved"
-	text={$_('settings.media.unresolved_media')}
+	text={$locale().settings.media.unresolved_media}
 	lineBreak={false}
 />
 <SettingCheckboxToggle
 	setting="displayPlannedAnime"
-	text={$_('settings.media.planned_anime')}
+	text={$locale().settings.media.planned_anime}
 	lineBreak={false}
 />
 <SettingHint lineBreak>
@@ -64,26 +65,30 @@
 <b>{$_('settings.display.categories.hide_panels')}</b><br />
 <SettingCheckboxToggle
 	setting="disableUpcomingAnime"
-	text={$_('settings.media.upcoming_anime')}
+	text={$locale().settings.media.upcoming_anime}
 	lineBreak={false}
 />
-<SettingCheckboxToggle setting="disableAnime" text={$_('settings.media.anime')} lineBreak={false} />
-<SettingCheckboxToggle setting="disableManga" text={$_('settings.media.manga')} />
+<SettingCheckboxToggle
+	setting="disableAnime"
+	text={$locale().settings.media.anime}
+	lineBreak={false}
+/>
+<SettingCheckboxToggle setting="disableManga" text={$locale().settings.media.manga} />
 
 <p />
 
 <b>{$_('settings.display.categories.collapse_panels_by_default')}</b><br />
 <SettingCheckboxToggle
 	setting="displayUpcomingAnimeCollapsed"
-	text={$_('settings.media.upcoming_anime')}
+	text={$locale().settings.media.upcoming_anime}
 	lineBreak={false}
 />
 <SettingCheckboxToggle
 	setting="displayAnimeCollapsed"
-	text={$_('settings.media.anime')}
+	text={$locale().settings.media.anime}
 	lineBreak={false}
 />
-<SettingCheckboxToggle setting="displayMangaCollapsed" text={$_('settings.media.manga')} />
+<SettingCheckboxToggle setting="displayMangaCollapsed" text={$locale().settings.media.manga} />
 
 <p />
 
diff --git a/src/stores/locale.ts b/src/stores/locale.ts
new file mode 100644
index 00000000..ba657bf5
--- /dev/null
+++ b/src/stores/locale.ts
@@ -0,0 +1,40 @@
+import { derived, type Readable } from 'svelte/store';
+import { json } from 'svelte-i18n';
+import type { Locale } from '$lib/Locale/layout';
+
+// type FormatXMLElementFn<T, R = string | T | (string | T)[]> = (parts: Array<string | T>) => R;
+
+// interface Options {
+// 	id?: string;
+// 	locale?: string;
+// 	format?: string;
+// 	default?: string;
+// 	values?:
+// 		| Record<
+// 				string,
+// 				string | number | boolean | Date | FormatXMLElementFn<unknown> | null | undefined
+// 		  >
+// 		| undefined;
+// }
+
+const createLocale = () => {
+	return derived(json, ($json) => {
+		return (locale = undefined) =>
+			new Proxy(
+				{},
+				{
+					get(_target, key) {
+						const localisation = $json(key.toString(), locale);
+
+						if (localisation === key.toString()) return undefined;
+
+						return localisation;
+					}
+				}
+			);
+	}) as Readable<(locale?: string) => Locale>;
+};
+
+const locale = createLocale();
+
+export default locale;
-- 
cgit v1.2.3