feat(locale): settings framework localisation

1 files changed, 50 insertions, 18 deletions

diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index ee53dd9e..b844c00d 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import settings from '$stores/settings';
+	import { _ } from 'svelte-i18n';
 	import SettingCheckboxToggle from '../SettingCheckboxToggle.svelte';
 	import SettingHint from '../SettingHint.svelte';
 
@@ -36,10 +37,22 @@
 	};
 </script>
 
-<b>Include additional media</b><br />
-<SettingCheckboxToggle setting="displayPausedMedia" text="Paused media" lineBreak={false} />
-<SettingCheckboxToggle setting="displayUnresolved" text="Unresolved media" lineBreak={false} />
-<SettingCheckboxToggle setting="displayPlannedAnime" text="Planned anime" lineBreak={false} />
+<b>{$_('settings.display.categories.include_additional_media')}</b><br />
+<SettingCheckboxToggle
+	setting="displayPausedMedia"
+	text={$_('settings.media.paused_media')}
+	lineBreak={false}
+/>
+<SettingCheckboxToggle
+	setting="displayUnresolved"
+	text={$_('settings.media.unresolved_media')}
+	lineBreak={false}
+/>
+<SettingCheckboxToggle
+	setting="displayPlannedAnime"
+	text={$_('settings.media.planned_anime')}
+	lineBreak={false}
+/>
 <SettingHint lineBreak>
 	Media where either the next episode's release date is unknown or the chapter count could not be
 	resolved is considered unresolved.
@@ -47,25 +60,33 @@
 
 <p />
 
-<b>Hide panels</b><br />
-<SettingCheckboxToggle setting="disableUpcomingAnime" text="Upcoming anime" lineBreak={false} />
-<SettingCheckboxToggle setting="disableAnime" text="Anime" lineBreak={false} />
-<SettingCheckboxToggle setting="disableManga" text="Manga" />
+<b>{$_('settings.display.categories.hide_panels')}</b><br />
+<SettingCheckboxToggle
+	setting="disableUpcomingAnime"
+	text={$_('settings.media.upcoming_anime')}
+	lineBreak={false}
+/>
+<SettingCheckboxToggle setting="disableAnime" text={$_('settings.media.anime')} lineBreak={false} />
+<SettingCheckboxToggle setting="disableManga" text={$_('settings.media.manga')} />
 
 <p />
 
-<b>Collapse panels by default</b><br />
+<b>{$_('settings.display.categories.collapse_panels_by_default')}</b><br />
 <SettingCheckboxToggle
 	setting="displayUpcomingAnimeCollapsed"
-	text="Upcoming anime"
+	text={$_('settings.media.upcoming_anime')}
 	lineBreak={false}
 />
-<SettingCheckboxToggle setting="displayAnimeCollapsed" text="Anime" lineBreak={false} />
-<SettingCheckboxToggle setting="displayMangaCollapsed" text="Manga" />
+<SettingCheckboxToggle
+	setting="displayAnimeCollapsed"
+	text={$_('settings.media.anime')}
+	lineBreak={false}
+/>
+<SettingCheckboxToggle setting="displayMangaCollapsed" text={$_('settings.media.manga')} />
 
 <p />
 
-<b>Motion & Accessibility</b><br />
+<b>{$_('settings.display.categories.motion_and_accessibility')}</b><br />
 <SettingCheckboxToggle
 	setting="displayDisableAnimations"
 	text="Disable page transition animations"
@@ -73,14 +94,25 @@
 <SettingCheckboxToggle setting="displayDisableNotifications" text="Disable notifications" />
 <SettingCheckboxToggle setting="displayLimitListHeight" text="Limit panel area to screen height" />
 <select bind:value={$settings.displayLanguage}>
-	<option value="en">English</option>
-	<option value="ja">Japanese</option>
+	<option value="en">
+		{$_('settings.languages.english', {
+			locale: 'en'
+		})}
+	</option>
+	<option value="ja"
+		>{$_('settings.languages.japanese', {
+			locale: 'ja'
+		})}</option
+	>
 </select>
-Interface language <button class="unclickable-button button-badge badge-info">Beta</button>
+Interface language
+<button class="unclickable-button button-badge badge-info"
+	>{$_('settings.display.tooltips.beta')}</button
+>
 
 <p />
 
-<b>Date & Time</b><br />
+<b>{$_('settings.display.categories.date_and_time')}</b><br />
 <SettingCheckboxToggle
 	setting="displayCountdownRightAligned"
 	text="Align anime episode countdown to the right"
@@ -100,7 +132,7 @@ Interface language <button class="unclickable-button button-badge badge-info">Be
 
 <p />
 
-<b>Media</b><br />
+<b>{$_('settings.display.categories.media')}</b><br />
 <SettingCheckboxToggle
 	setting="displayHoverCover"
 	text="Show media cover when hovering on supported media titles"