refactor(settings): use typed localiser

1 files changed, 34 insertions, 41 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>