feat(locale): settings framework localisation

3 files changed, 160 insertions, 18 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"