feat(list): furigana

5 files changed, 43 insertions, 20 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 7ce10d4d..2da182d5 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -6,6 +6,7 @@
 	import { airingTime, cleanCache, totalEpisodes, updateMedia } from '$lib/Media/anime';
 	import type { AniListAuthorisation, UserIdentity } from '$lib/AniList/identity';
 	import ListTitle from '../ListTitle.svelte';
+	import MediaTitle from '../MediaTitle.svelte';
 
 	export let media: Media[];
 	export let title: string;
@@ -49,15 +50,7 @@
 						? 'color: lightcoral'
 						: ''}
 				>
-					{#if $settings.displayNativeTitles}
-						<span title={anime.title.english || anime.title.romaji || anime.title.native}>
-							{anime.title.native}
-						</span>
-					{:else}
-						<span title={anime.title.native}>
-							{anime.title.english || anime.title.romaji || anime.title.native}
-						</span>
-					{/if}
+					<MediaTitle media={anime} />
 				</span>
 			</a>
 			{#if $settings.displaySocialButton}
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 659388ea..009fb868 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -3,6 +3,7 @@
 	import { volumeCount } from '$lib/Media/manga';
 	import settings from '../../../stores/settings';
 	import ListTitle from '../ListTitle.svelte';
+	import MediaTitle from '../MediaTitle.svelte';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -39,15 +40,7 @@
 						? 'color: lightcoral'
 						: ''}
 				>
-					{#if $settings.displayNativeTitles}
-						<span title={manga.title.english || manga.title.romaji || manga.title.native}>
-							{manga.title.native}
-						</span>
-					{:else}
-						<span title={manga.title.native}>
-							{manga.title.english || manga.title.romaji || manga.title.native}
-						</span>
-					{/if}
+					<MediaTitle media={manga} />
 				</span>
 			</a>
 			{#if $settings.displaySocialButton}
diff --git a/src/lib/List/MediaTitle.svelte b/src/lib/List/MediaTitle.svelte
new file mode 100644
index 00000000..b98f4125
--- /dev/null
+++ b/src/lib/List/MediaTitle.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Media } from '$lib/AniList/media';
+	import settings from '../../stores/settings';
+	import * as wanakana from 'wanakana';
+
+	export let media: Media;
+</script>
+
+{#if $settings.displayNativeTitles}
+	{#if $settings.displayFurigana}
+		<span title={media.title.english || media.title.romaji || media.title.native}>
+			<ruby>
+				{media.title.native}
+				<rt>
+					{wanakana.toKana(media.title.romaji)}
+				</rt>
+			</ruby>
+		</span>
+	{:else}
+		<span title={media.title.english || media.title.romaji || media.title.native}>
+			{media.title.native}
+		</span>
+	{/if}
+{:else}
+	<span title={media.title.native}>
+		{media.title.english || media.title.romaji || media.title.native}
+	</span>
+{/if}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 2282ba7e..4a40b318 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -60,7 +60,14 @@
 		<SettingCheckboxToggle setting="limitListHeight" text="Limit list area to screen" />
 		<SettingCheckboxToggle setting="displaySocialButton" text="Show social button" />
 		<SettingCheckboxToggle setting="displayUnresolved" text="Display unresolved media" />
-		<SettingCheckboxToggle setting="displayNativeTitles" text="Display titles in native language" />
+		<SettingCheckboxToggle
+			setting="displayNativeTitles"
+			text="Display titles in native language"
+			lineBreak={!$settings.displayNativeTitles}
+		/>
+		{#if $settings.displayNativeTitles}
+			<SettingCheckboxToggle setting="displayFurigana" text="Display furigana for titles" />
+		{/if}
 
 		<SettingCheckboxToggle setting="hoverNavigation" text="Display navigation as hover bar">
 			<SettingHint lineBreak>
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index e7d07324..a194f6c3 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -21,6 +21,7 @@ export interface Settings {
 	guessMethod: 'median' | 'iqr_median' | 'iqr_mode' | 'mode';
 	disableOutOfDateVolumeWarning: boolean;
 	displayPlannedAnime: boolean;
+	displayFurigana: boolean;
 }
 
 const defaultSettings: Settings = {
@@ -42,7 +43,8 @@ const defaultSettings: Settings = {
 	displayNativeTitles: false,
 	guessMethod: 'median',
 	disableOutOfDateVolumeWarning: false,
-	displayPlannedAnime: true
+	displayPlannedAnime: true,
+	displayFurigana: false
 };
 
 const createStore = () => {