feat(locale): settings framework localisation

4 files changed, 175 insertions, 29 deletions

diff --git a/src/lib/Locale/en.json b/src/lib/Locale/en.json
index f968a7d6..c9508c8d 100644
--- a/src/lib/Locale/en.json
+++ b/src/lib/Locale/en.json
@@ -9,5 +9,60 @@
 		"profile": "Profile",
 		"log_in": "Log in with AniList",
 		"log_out": "Log out"
+	},
+	"settings": {
+		"tooltips": {
+			"author": "Author of due.moe"
+		},
+		"rss_feeds": {
+			"title": "RSS Feeds",
+			"buttons": {
+				"copy_to_clipboard": "Copy to clipboard"
+			},
+			"tooltips": {
+				"rss": "Web feed data format"
+			}
+		},
+		"display": {
+			"title": "Display",
+			"categories": {
+				"media": "Media",
+				"date_and_time": "Date & Time",
+				"motion_and_accessibility": "Motion & Accessibility",
+				"collapse_panels_by_default": "Collapse panels by default",
+				"hide_panels": "Hide panels",
+				"include_additional_media": "Include additional media"
+			},
+			"tooltips": {
+				"beta": "Beta"
+			}
+		},
+		"debug": {
+			"title": "Debug",
+			"tooltips": {
+				"version": "Current due.moe version hash"
+			}
+		},
+		"calculation": {
+			"title": "Calculation"
+		},
+		"cache": {
+			"title": "Cache"
+		},
+		"attributions": {
+			"title": "Attributions"
+		},
+		"media": {
+			"anime": "Anime",
+			"manga": "Manga",
+			"upcoming_anime": "Upcoming anime",
+			"paused_media": "Paused media",
+			"unresolved_media": "Unresolved media",
+			"planned_anime": "Planned anime"
+		},
+		"languages": {
+			"english": "English",
+			"japanese": "Japanese"
+		}
 	}
 }
diff --git a/src/lib/Locale/ja.json b/src/lib/Locale/ja.json
index 6c6afb38..359aeec1 100644
--- a/src/lib/Locale/ja.json
+++ b/src/lib/Locale/ja.json
@@ -9,5 +9,60 @@
 		"profile": "プロフィール",
 		"log_in": "AniListでログイン",
 		"log_out": "ログアウト"
+	},
+	"settings": {
+		"tooltips": {
+			"author": "due.moeの作者"
+		},
+		"rss_feeds": {
+			"title": "RSSフィード",
+			"buttons": {
+				"copy_to_clipboard": "クリップボードにコピー"
+			},
+			"tooltips": {
+				"rss": "ウェブフィードデータフォーマット"
+			}
+		},
+		"display": {
+			"title": "表示",
+			"categories": {
+				"date_and_time": "日付と時刻",
+				"media": "メディア",
+				"motion_and_accessibility": "モーションとアクセシビリティ",
+				"collapse_panels_by_default": "メディアパネルをデフォルトで折りたたむ",
+				"hide_panels": "メディアパネルを隠す",
+				"include_additional_media": "デフォルトでは含まれていないメディアグループを追加する"
+			},
+			"tooltips": {
+				"beta": "ベータ"
+			}
+		},
+		"debug": {
+			"title": "デバッグ",
+			"tooltips": {
+				"version": "現在のdue.moeのバージョンハッシュ"
+			}
+		},
+		"calculation": {
+			"title": "計算"
+		},
+		"cache": {
+			"title": "キャッシュ"
+		},
+		"attributions": {
+			"title": "帰属"
+		},
+		"media": {
+			"anime": "アニメ",
+			"manga": "マンガ",
+			"upcoming_anime": "近日放送予定のアニメ",
+			"paused_media": "視聴を一時停止したメディア",
+			"unresolved_media": "未解決のメディア",
+			"planned_anime": "視聴予定アニメ"
+		},
+		"languages": {
+			"english": "英語",
+			"japanese": "日本語"
+		}
 	}
 }
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"
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 77bd3869..c878f364 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -13,6 +13,7 @@
 	import { getNotificationsContext } from 'svelte-notifications';
 	import { options } from '$lib/Notification/options.js';
 	import tooltip from '$lib/Tooltip/tooltip';
+	import { _ } from 'svelte-i18n';
 
 	export let data;
 
@@ -32,15 +33,18 @@
 
 <blockquote>
 	Have feedback or suggestions? Send a private message to
-	<a href="https://anilist.co/user/fuwn" target="_blank" title="Author of due.moe" use:tooltip
-		>@fuwn</a
+	<a
+		href="https://anilist.co/user/fuwn"
+		target="_blank"
+		title={$_('settings.tooltips.author')}
+		use:tooltip>@fuwn</a
 	> on AniList!
 </blockquote>
 
 {#if data.user === undefined}
 	<div class="card">Please log in to modify settings.</div>
 {:else}
-	<Category title="RSS Feeds" id="feeds">
+	<Category title={$_('settings.rss_feeds.title')} id="feeds">
 		<button
 			on:click={() => {
 				addNotification(
@@ -57,14 +61,14 @@
 				);
 			}}
 		>
-			Copy to clipboard
+			{$_('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="Web feed data format"
+				title={$_('settings.rss_feeds.tooltips.rss')}
 				use:tooltip
 				data-tooltip-above>RSS</a
 			>
@@ -73,19 +77,19 @@
 			Do not share this link with <b>anyone</b>!
 		</SettingHint>
 	</Category>
-	<Category title="Display"><Display /></Category>
-	<Category title="Calculation"><Calculation /></Category>
-	<Category title="Cache"><Cache /></Category>
+	<Category title={$_('settings.display.title')}><Display /></Category>
+	<Category title={$_('settings.calculation.title')}><Calculation /></Category>
+	<Category title={$_('settings.cache.title')}><Cache /></Category>
 	<Category id="debug">
 		<summary
-			>Debug<button
+			>{$_('settings.debug.title')}<button
 				class="smaller-button button-badge badge-info"
-				title="Current due.moe version hash"
+				title={$_('settings.debug.tooltips.version')}
 				use:tooltip>{data.commit.slice(0, 7)}</button
 			></summary
 		>
 
 		<Debug />
 	</Category>
-	<Category title="Attributions" open={false}><Attributions /></Category>
+	<Category title={$_('settings.attributions.title')} open={false}><Attributions /></Category>
 {/if}