feat(locale): more localisation for display category

4 files changed, 148 insertions, 27 deletions

diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index 2216e34d..2b4db8f0 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -28,12 +28,46 @@ const English: Locale = {
 		display: {
 			title: 'Display',
 			categories: {
-				media: 'Media',
+				media: {
+					title: 'Media',
+					fields: {
+						outboundLinks: 'Outbound links',
+						mediaTitleFormat: {
+							title: 'Media title format',
+							options: {
+								english: 'English',
+								romaji: 'Romaji',
+								native: 'Native'
+							},
+							fields: {
+								showFurigana: 'Show furigana'
+							}
+						}
+					}
+				},
 				date_and_time: 'Date & Time',
-				motion_and_accessibility: 'Motion & Accessibility',
+				motionAndAccessibility: {
+					title: 'Motion & Accessibility',
+					fields: {
+						disablePageTransitionAnimations: 'Disable page transition animations',
+						disableNotifications: 'Disable notifications',
+						limitPanelAreaToScreenHeight: 'Limit panel area to screen height',
+						interfaceLanguage: 'Interface language'
+					}
+				},
 				collapse_panels_by_default: 'Collapse panels by default',
 				hide_panels: 'Hide panels',
-				include_additional_media: 'Include additional media'
+				include_additional_media: 'Include additional media',
+				helper: {
+					title: 'Helper',
+					options: {
+						mai: 'Mai',
+						nodoka: 'Nodoka',
+						kaede: 'Kaede',
+						none: 'None'
+					},
+					hint: "Let them remind you. It's for your own benefit."
+				}
 			},
 			tooltips: {
 				beta: 'Beta'
diff --git a/src/lib/Locale/japanese.ts b/src/lib/Locale/japanese.ts
index 2756d78a..76aa0c3b 100644
--- a/src/lib/Locale/japanese.ts
+++ b/src/lib/Locale/japanese.ts
@@ -29,11 +29,45 @@ const Japanese: Locale = {
 			title: '表示',
 			categories: {
 				date_and_time: '日付と時刻',
-				media: 'メディア',
-				motion_and_accessibility: 'モーションとアクセシビリティ',
+				media: {
+					title: 'メディア',
+					fields: {
+						outboundLinks: '外部リンク',
+						mediaTitleFormat: {
+							title: 'メディアタイトルのフォーマット',
+							options: {
+								english: '英語',
+								romaji: 'ローマ字',
+								native: 'ネイティブ'
+							},
+							fields: {
+								showFurigana: 'フリガナを表示する'
+							}
+						}
+					}
+				},
+				motionAndAccessibility: {
+					title: 'モーションとアクセシビリティ',
+					fields: {
+						disablePageTransitionAnimations: 'ページ遷移アニメーションを無効にする',
+						disableNotifications: '通知を無効にする',
+						limitPanelAreaToScreenHeight: 'メディアパネルの面積をスクリーンの高さに制限する',
+						interfaceLanguage: 'ユーザーインターフェース言語'
+					}
+				},
 				collapse_panels_by_default: 'メディアパネルをデフォルトで折りたたむ',
 				hide_panels: 'メディアパネルを隠す',
-				include_additional_media: 'デフォルトでは含まれていないメディアグループを追加する'
+				include_additional_media: 'デフォルトでは含まれていないメディアグループを追加する',
+				helper: {
+					title: 'ヘルパー',
+					options: {
+						mai: '麻衣',
+						nodoka: 'のどか',
+						kaede: 'かえで',
+						none: 'なし'
+					},
+					hint: '自分のためになる。'
+				}
 			},
 			tooltips: {
 				beta: 'ベータ'
diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index 45c58a33..3e86fa8d 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -1,4 +1,4 @@
-type LocaleValue = string | LocaleValue[] | { [key: string]: LocaleValue };
+type LocaleValue = string | LocaleValue[]; // | { [key: string]: LocaleValue };
 
 export interface LocaleDictionary {
 	[key: string]: LocaleDictionary | string | Array<string | LocaleDictionary> | null;
@@ -32,12 +32,46 @@ export interface Locale {
 		display: {
 			title: LocaleValue;
 			categories: {
-				media: LocaleValue;
+				media: {
+					title: LocaleValue;
+					fields: {
+						outboundLinks: LocaleValue;
+						mediaTitleFormat: {
+							title: LocaleValue;
+							options: {
+								english: LocaleValue;
+								romaji: LocaleValue;
+								native: LocaleValue;
+							};
+							fields: {
+								showFurigana: LocaleValue;
+							};
+						};
+					};
+				};
 				date_and_time: LocaleValue;
-				motion_and_accessibility: LocaleValue;
+				motionAndAccessibility: {
+					title: LocaleValue;
+					fields: {
+						disablePageTransitionAnimations: LocaleValue;
+						disableNotifications: LocaleValue;
+						limitPanelAreaToScreenHeight: LocaleValue;
+						interfaceLanguage: LocaleValue;
+					};
+				};
 				collapse_panels_by_default: LocaleValue;
 				hide_panels: LocaleValue;
 				include_additional_media: LocaleValue;
+				helper: {
+					title: LocaleValue;
+					options: {
+						mai: LocaleValue;
+						nodoka: LocaleValue;
+						kaede: LocaleValue;
+						none: LocaleValue;
+					};
+					hint: LocaleValue;
+				};
 			};
 			tooltips: {
 				beta: LocaleValue;
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index b844c00d..e6898de9 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -86,13 +86,23 @@
 
 <p />
 
-<b>{$_('settings.display.categories.motion_and_accessibility')}</b><br />
+<b>{$_('settings.display.categories.motionAndAccessibility.title')}</b><br />
 <SettingCheckboxToggle
 	setting="displayDisableAnimations"
-	text="Disable page transition animations"
+	text={$_(
+		'settings.display.categories.motionAndAccessibility.fields.disablePageTransitionAnimations'
+	)}
+/>
+<SettingCheckboxToggle
+	setting="displayDisableNotifications"
+	text={$_('settings.display.categories.motionAndAccessibility.fields.disableNotifications')}
+/>
+<SettingCheckboxToggle
+	setting="displayLimitListHeight"
+	text={$_(
+		'settings.display.categories.motionAndAccessibility.fields.limitPanelAreaToScreenHeight'
+	)}
 />
-<SettingCheckboxToggle setting="displayDisableNotifications" text="Disable notifications" />
-<SettingCheckboxToggle setting="displayLimitListHeight" text="Limit panel area to screen height" />
 <select bind:value={$settings.displayLanguage}>
 	<option value="en">
 		{$_('settings.languages.english', {
@@ -105,7 +115,7 @@
 		})}</option
 	>
 </select>
-Interface language
+{$_('settings.display.categories.motionAndAccessibility.fields.interfaceLanguage')}
 <button class="unclickable-button button-badge badge-info"
 	>{$_('settings.display.tooltips.beta')}</button
 >
@@ -132,7 +142,7 @@ Interface language
 
 <p />
 
-<b>{$_('settings.display.categories.media')}</b><br />
+<b>{$_('settings.display.categories.media.title')}</b><br />
 <SettingCheckboxToggle
 	setting="displayHoverCover"
 	text="Show media cover when hovering on supported media titles"
@@ -172,14 +182,23 @@ Interface language
 {/if}
 <SettingCheckboxToggle setting="displaySocialButton" text="Show social tab shortcut for media" />
 <select bind:value={$settings.displayTitleFormat}>
-	<option value="english">English</option>
-	<option value="romaji">Romaji</option>
-	<option value="native">Native</option>
+	<option value="english">
+		{$_('settings.display.categories.media.fields.mediaTitleFormat.options.english')}
+	</option>
+	<option value="romaji">
+		{$_('settings.display.categories.media.fields.mediaTitleFormat.options.romaji')}
+	</option>
+	<option value="native">
+		{$_('settings.display.categories.media.fields.mediaTitleFormat.options.native')}
+	</option>
 </select>
-Media title format
+{$_('settings.display.categories.media.fields.mediaTitleFormat.title')}
 {#if $settings.displayTitleFormat === 'native'}
 	&nbsp;
-	<SettingCheckboxToggle setting="displayFurigana" text="Show furigana" />
+	<SettingCheckboxToggle
+		setting="displayFurigana"
+		text={$_('settings.display.categories.media.fields.mediaTitleFormat.fields.showFurigana')}
+	/>
 {:else}
 	<br />
 {/if}
@@ -192,7 +211,7 @@ Media title format
 	<option value="animeschedule">AnimeSchedule</option>
 	<option value="myanimelist">MyAnimeList</option>
 </select>
-Outbound links
+{$_('settings.display.categories.media.fields.outboundLinks')}
 <SettingHint lineBreak>
 	If LiveChart.me or AnimeSchedule is chosen, manga links will default to AniList.
 </SettingHint><br />
@@ -218,10 +237,10 @@ Outbound links
 <br />
 
 <select bind:value={$settings.displayAoButa} on:change={onHelperChange}>
-	<option value="mai">Mai</option>
-	<option value="nodoka">Nodoka</option>
-	<option value="kaede">Kaede</option>
-	<option value="none">None</option>
+	<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>
 </select>
-Helper
-<SettingHint lineBreak>Let them remind you. It's for your own benefit.</SettingHint>
+{$_('settings.display.categories.helper.title')}
+<SettingHint lineBreak>{$_('settings.display.categories.helper.hint')}</SettingHint>