From 4a2e83f9376238dcf8a9dd8d4839515e8c075802 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 21 Jan 2024 02:08:07 -0800
Subject: refactor(settings): use typed localiser

---
 src/lib/Settings/Categories/Display.svelte | 75 ++++++++++++++----------------
 src/routes/settings/+page.svelte           | 22 ++++-----
 2 files changed, 45 insertions(+), 52 deletions(-)

diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index d9070e8e..209f1b6d 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import settings from '$stores/settings';
-	import { _ } from 'svelte-i18n';
 	import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
 	import SettingHint from '../SettingHint.svelte';
 	import root from '$lib/Utility/root';
@@ -39,7 +38,7 @@
 	};
 </script>
 
-<b>{$_('settings.display.categories.include_additional_media')}</b><br />
+<b>{$locale().settings.display.categories.include_additional_media}</b><br />
 <SettingCheckboxToggle
 	setting="displayPausedMedia"
 	text={$locale().settings.media.paused_media}
@@ -62,7 +61,7 @@
 
 <p />
 
-<b>{$_('settings.display.categories.hide_panels')}</b><br />
+<b>{$locale().settings.display.categories.hide_panels}</b><br />
 <SettingCheckboxToggle
 	setting="disableUpcomingAnime"
 	text={$locale().settings.media.upcoming_anime}
@@ -77,7 +76,7 @@
 
 <p />
 
-<b>{$_('settings.display.categories.collapse_panels_by_default')}</b><br />
+<b>{$locale().settings.display.categories.collapse_panels_by_default}</b><br />
 <SettingCheckboxToggle
 	setting="displayUpcomingAnimeCollapsed"
 	text={$locale().settings.media.upcoming_anime}
@@ -92,65 +91,59 @@
 
 <p />
 
-<b>{$_('settings.display.categories.motionAndAccessibility.title')}</b><br />
+<b>{$locale().settings.display.categories.motionAndAccessibility.title}</b><br />
 <SettingCheckboxToggle
 	setting="displayDisableAnimations"
-	text={$_(
-		'settings.display.categories.motionAndAccessibility.fields.disablePageTransitionAnimations'
-	)}
+	text={$locale().settings.display.categories.motionAndAccessibility.fields
+		.disablePageTransitionAnimations}
 />
 <SettingCheckboxToggle
 	setting="displayDisableNotifications"
-	text={$_('settings.display.categories.motionAndAccessibility.fields.disableNotifications')}
+	text={$locale().settings.display.categories.motionAndAccessibility.fields.disableNotifications}
 />
 <SettingCheckboxToggle
 	setting="displayLimitListHeight"
-	text={$_(
-		'settings.display.categories.motionAndAccessibility.fields.limitPanelAreaToScreenHeight'
-	)}
+	text={$locale().settings.display.categories.motionAndAccessibility.fields
+		.limitPanelAreaToScreenHeight}
 />
 <select bind:value={$settings.displayLanguage}>
 	<option value="en">
-		{$_('settings.languages.english', {
-			locale: 'en'
-		})}
+		{$locale('en').settings.languages.english}
+	</option>
+	<option value="ja">
+		{$locale('ja').settings.languages.japanese}
 	</option>
-	<option value="ja"
-		>{$_('settings.languages.japanese', {
-			locale: 'ja'
-		})}</option
-	>
 </select>
-{$_('settings.display.categories.motionAndAccessibility.fields.interfaceLanguage')}
+{$locale().settings.display.categories.motionAndAccessibility.fields.interfaceLanguage}
 <button class="unclickable-button button-badge badge-info"
-	>{$_('settings.display.tooltips.beta')}</button
+	>{$locale().settings.display.tooltips.beta}</button
 >
 
 <p />
 
-<b>{$_('settings.display.categories.dateAndTime.title')}</b><br />
+<b>{$locale().settings.display.categories.dateAndTime.title}</b><br />
 <SettingCheckboxToggle
 	setting="displayCountdownRightAligned"
-	text={$_('settings.display.categories.dateAndTime.fields.rightAlignCountdown')}
+	text={$locale().settings.display.categories.dateAndTime.fields.rightAlignCountdown}
 />
 <SettingCheckboxToggle
 	setting="display24HourTime"
-	text={$_('settings.display.categories.dateAndTime.fields.use24HourTime')}
+	text={$locale().settings.display.categories.dateAndTime.fields.use24HourTime}
 />
 <SettingCheckboxToggle
 	setting="displayNativeCountdown"
-	text={$_('settings.display.categories.dateAndTime.fields.nativeEpisodeCountdown')}
+	text={$locale().settings.display.categories.dateAndTime.fields.nativeEpisodeCountdown}
 />
 <SettingCheckboxToggle
 	setting="displayShortCountdown"
-	text={$_('settings.display.categories.dateAndTime.fields.abbreviateCountdown')}
+	text={$locale().settings.display.categories.dateAndTime.fields.abbreviateCountdown}
 />
 
 <p />
 
 <SettingCheckboxToggle
 	setting="displayDisableLastActivityWarning"
-	text={$_('settings.display.categories.dateAndTime.fields.disableLastActivityWarning')}
+	text={$locale().settings.display.categories.dateAndTime.fields.disableLastActivityWarning}
 >
 	<SettingHint lineBreak>
 		A warning will appear at the top of <a href={root('/')}>Home</a> and
@@ -163,7 +156,7 @@
 
 <p />
 
-<b>{$_('settings.display.categories.media.title')}</b><br />
+<b>{$locale().settings.display.categories.media.title}</b><br />
 <SettingCheckboxToggle
 	setting="displayHoverCover"
 	text="Show media cover when hovering on supported media titles"
@@ -204,21 +197,21 @@
 <SettingCheckboxToggle setting="displaySocialButton" text="Show social tab shortcut for media" />
 <select bind:value={$settings.displayTitleFormat}>
 	<option value="english">
-		{$_('settings.display.categories.media.fields.mediaTitleFormat.options.english')}
+		{$locale().settings.display.categories.media.fields.mediaTitleFormat.options.english}
 	</option>
 	<option value="romaji">
-		{$_('settings.display.categories.media.fields.mediaTitleFormat.options.romaji')}
+		{$locale().settings.display.categories.media.fields.mediaTitleFormat.options.romaji}
 	</option>
 	<option value="native">
-		{$_('settings.display.categories.media.fields.mediaTitleFormat.options.native')}
+		{$locale().settings.display.categories.media.fields.mediaTitleFormat.options.native}
 	</option>
 </select>
-{$_('settings.display.categories.media.fields.mediaTitleFormat.title')}
+{$locale().settings.display.categories.media.fields.mediaTitleFormat.title}
 {#if $settings.displayTitleFormat === 'native'}
 	&nbsp;
 	<SettingCheckboxToggle
 		setting="displayFurigana"
-		text={$_('settings.display.categories.media.fields.mediaTitleFormat.fields.showFurigana')}
+		text={$locale().settings.display.categories.media.fields.mediaTitleFormat.fields.showFurigana}
 	/>
 {:else}
 	<br />
@@ -232,7 +225,7 @@
 	<option value="animeschedule">AnimeSchedule</option>
 	<option value="myanimelist">MyAnimeList</option>
 </select>
-{$_('settings.display.categories.media.fields.outboundLinks')}
+{$locale().settings.display.categories.media.fields.outboundLinks}
 <SettingHint lineBreak>
 	If LiveChart.me or AnimeSchedule is chosen, manga links will default to AniList.
 </SettingHint><br />
@@ -258,10 +251,10 @@
 <br />
 
 <select bind:value={$settings.displayAoButa} on:change={onHelperChange}>
-	<option value="mai">{$_('settings.display.categories.helper.options.mai')}</option>
-	<option value="nodoka">{$_('settings.display.categories.helper.options.nodoka')}</option>
-	<option value="kaede">{$_('settings.display.categories.helper.options.kaede')}</option>
-	<option value="none">{$_('settings.display.categories.helper.options.none')}</option>
+	<option value="mai">{$locale().settings.display.categories.helper.options.mai}</option>
+	<option value="nodoka">{$locale().settings.display.categories.helper.options.nodoka}</option>
+	<option value="kaede">{$locale().settings.display.categories.helper.options.kaede}</option>
+	<option value="none">{$locale().settings.display.categories.helper.options.none}</option>
 </select>
-{$_('settings.display.categories.helper.title')}
-<SettingHint lineBreak>{$_('settings.display.categories.helper.hint')}</SettingHint>
+{$locale().settings.display.categories.helper.title}
+<SettingHint lineBreak>{$locale().settings.display.categories.helper.hint}</SettingHint>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index c878f364..180b3554 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -13,7 +13,7 @@
 	import { getNotificationsContext } from 'svelte-notifications';
 	import { options } from '$lib/Notification/options.js';
 	import tooltip from '$lib/Tooltip/tooltip';
-	import { _ } from 'svelte-i18n';
+	import locale from '$stores/locale.js';
 
 	export let data;
 
@@ -36,7 +36,7 @@
 	<a
 		href="https://anilist.co/user/fuwn"
 		target="_blank"
-		title={$_('settings.tooltips.author')}
+		title={$locale().settings.tooltips.author}
 		use:tooltip>@fuwn</a
 	> on AniList!
 </blockquote>
@@ -44,7 +44,7 @@
 {#if data.user === undefined}
 	<div class="card">Please log in to modify settings.</div>
 {:else}
-	<Category title={$_('settings.rss_feeds.title')} id="feeds">
+	<Category title={$locale().settings.rss_feeds.title} id="feeds">
 		<button
 			on:click={() => {
 				addNotification(
@@ -61,14 +61,14 @@
 				);
 			}}
 		>
-			{$_('settings.rss_feeds.buttons.copy_to_clipboard')}
+			{$locale().settings.rss_feeds.buttons.copy_to_clipboard}
 		</button>
 		Your AniList notifications RSS feed URL
 		<SettingHint lineBreak>
 			This <a
 				href="https://en.wikipedia.org/wiki/RSS"
 				target="_blank"
-				title={$_('settings.rss_feeds.tooltips.rss')}
+				title={$locale().settings.rss_feeds.tooltips.rss}
 				use:tooltip
 				data-tooltip-above>RSS</a
 			>
@@ -77,19 +77,19 @@
 			Do not share this link with <b>anyone</b>!
 		</SettingHint>
 	</Category>
-	<Category title={$_('settings.display.title')}><Display /></Category>
-	<Category title={$_('settings.calculation.title')}><Calculation /></Category>
-	<Category title={$_('settings.cache.title')}><Cache /></Category>
+	<Category title={$locale().settings.display.title}><Display /></Category>
+	<Category title={$locale().settings.calculation.title}><Calculation /></Category>
+	<Category title={$locale().settings.cache.title}><Cache /></Category>
 	<Category id="debug">
 		<summary
-			>{$_('settings.debug.title')}<button
+			>{$locale().settings.debug.title}<button
 				class="smaller-button button-badge badge-info"
-				title={$_('settings.debug.tooltips.version')}
+				title={$locale().settings.debug.tooltips.version}
 				use:tooltip>{data.commit.slice(0, 7)}</button
 			></summary
 		>
 
 		<Debug />
 	</Category>
-	<Category title={$_('settings.attributions.title')} open={false}><Attributions /></Category>
+	<Category title={$locale().settings.attributions.title} open={false}><Attributions /></Category>
 {/if}
-- 
cgit v1.2.3