feat(locale): localise media lists

11 files changed, 178 insertions, 27 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index cee87891..e6f942f8 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -21,9 +21,11 @@
 	export let animeLists: Promise<Media[]>;
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
-	export let title: string;
+	export let title: any;
 	export let completed = false;
 	export let plannedOnly = false;
+	export let upcoming = false;
+	export let notYetReleased = false;
 
 	let lastUpdatedMedia = -1;
 	let previousAnimeList: Media[];
@@ -31,7 +33,7 @@
 </script>
 
 {#await fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`)).then( (r) => r.json() )}
-	<ListTitle custom={title} />
+	<ListTitle {title} />
 
 	<!-- <ul><li>Loading subtitle release data ... 33%</li></ul> -->
 
@@ -56,11 +58,13 @@
 				{endTime}
 				bind:lastUpdatedMedia
 				{completed}
+				{notYetReleased}
+				{upcoming}
 				bind:previousAnimeList
 				bind:pendingUpdate
 			/>
 		{:else}
-			<ListTitle custom={title} />
+			<ListTitle {title} />
 
 			<!-- <ul><li>Loading anime lists ... 66%</li></ul> -->
 
@@ -84,12 +88,14 @@
 			{endTime}
 			bind:lastUpdatedMedia
 			{completed}
+			{notYetReleased}
+			{upcoming}
 			{subsPlease}
 			bind:previousAnimeList
 			bind:pendingUpdate
 		/>
 	{:catch}
-		<ListTitle time={0} count={-1337} custom={title} />
+		<ListTitle time={0} count={-1337} {title} />
 
 		<Error />
 	{/await}
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index fb0aa5fc..de33178a 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -23,7 +23,7 @@
 	import AiringTime from '$lib/Media/Anime/Airing/AiringTime.svelte';
 
 	export let media: Media[];
-	export let title: string;
+	export let title: any;
 	export let animeLists: Promise<Media[]>;
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -33,6 +33,8 @@
 	export let previousAnimeList: Media[];
 	export let pendingUpdate: number | null;
 	export let subsPlease: SubsPlease | null = null;
+	export let upcoming = false;
+	export let notYetReleased = false;
 
 	let hoverCoverState: HoverCoverResponse = {};
 
@@ -54,7 +56,7 @@
 	onDestroy(() => clearInterval(keyCacher));
 </script>
 
-<ListTitle time={endTime / 1000} count={media.length} custom={title} />
+<ListTitle time={endTime / 1000} count={media.length} {title} />
 
 {#if media.length === 0}
 	No anime to display. <button on:click={() => (animeLists = cleanCache(user, identity))}>
@@ -70,7 +72,7 @@
 		{#each media as anime}
 			{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
 
-			{#if title.includes('Upcoming Episodes') || title.includes('Not Yet Released') || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
+			{#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
 				<div class="cover-card">
 					<a
 						href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
@@ -82,7 +84,7 @@
 					</a>
 
 					<div class="cover-title">
-						{#if title !== 'Upcoming Episodes' || title.includes('Not Yet Released')}
+						{#if !upcoming || notYetReleased}
 							{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
 							<button
 								class="button-square button-action"
@@ -128,7 +130,7 @@
 		{#each media as anime}
 			{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
 
-			{#if title.includes('Upcoming Episodes') || title.includes('Not Yet Released') || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
+			{#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
 				<li class="entry">
 					<span class="content">
 						<a
@@ -165,10 +167,10 @@
 						{#if $settings.displaySocialButton}
 							[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
 						{/if}
-						{#if title !== 'Upcoming Episodes' || title.includes('Not Yet Released') || !$settings.displayCountdownRightAligned}
+						{#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
 							<span style="opacity: 50%;">|</span>
 						{/if}
-						{#if title !== 'Upcoming Episodes' || title.includes('Not Yet Released')}
+						{#if !upcoming || notYetReleased}
 							<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
 							{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
 							<button
diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte
index bd9df8d7..2d317aeb 100644
--- a/src/lib/List/Anime/CompletedAnimeList.svelte
+++ b/src/lib/List/Anime/CompletedAnimeList.svelte
@@ -7,6 +7,7 @@
 	import settings from '$stores/settings';
 	import AnimeList from './AnimeListTemplate.svelte';
 	import { getNotificationsContext } from 'svelte-notifications';
+	import locale from '$stores/locale';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -48,4 +49,12 @@
 	};
 </script>
 
-<AnimeList {endTime} {cleanMedia} bind:animeLists {user} {identity} title="Anime" completed />
+<AnimeList
+	{endTime}
+	{cleanMedia}
+	bind:animeLists
+	{user}
+	{identity}
+	title={$locale().lists.completed.anime}
+	completed
+/>
diff --git a/src/lib/List/Anime/DueAnimeList.svelte b/src/lib/List/Anime/DueAnimeList.svelte
index f4439c8b..83b2890b 100644
--- a/src/lib/List/Anime/DueAnimeList.svelte
+++ b/src/lib/List/Anime/DueAnimeList.svelte
@@ -9,6 +9,7 @@
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 	import { injectAiringTime } from '$lib/Media/Anime/Airing/Subtitled/match';
 	import { getNotificationsContext } from 'svelte-notifications';
+	import locale from '$stores/locale';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -90,4 +91,11 @@
 	};
 </script>
 
-<AnimeList {endTime} {cleanMedia} bind:animeLists {user} {identity} title="Anime" />
+<AnimeList
+	{endTime}
+	{cleanMedia}
+	bind:animeLists
+	{user}
+	{identity}
+	title={$locale().lists.due.episodes}
+/>
diff --git a/src/lib/List/Anime/UpcomingAnimeList.svelte b/src/lib/List/Anime/UpcomingAnimeList.svelte
index cdcf23c0..755f1b40 100644
--- a/src/lib/List/Anime/UpcomingAnimeList.svelte
+++ b/src/lib/List/Anime/UpcomingAnimeList.svelte
@@ -8,6 +8,7 @@
 	import settings from '$stores/settings';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 	import { getNotificationsContext } from 'svelte-notifications';
+	import locale from '$stores/locale';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -75,7 +76,15 @@
 	};
 </script>
 
-<AnimeList {endTime} {cleanMedia} bind:animeLists {user} {identity} title="Upcoming Episodes" />
+<AnimeList
+	{endTime}
+	{cleanMedia}
+	bind:animeLists
+	{user}
+	{identity}
+	title={$locale().lists.upcoming.episodes}
+	upcoming
+/>
 
 {#if $settings.displayPlannedAnime}
 	<p />
@@ -86,7 +95,8 @@
 		bind:animeLists
 		{user}
 		{identity}
-		title="Not Yet Released"
+		title={$locale().lists.upcoming.notYetReleased}
+		notYetReleased
 		plannedOnly
 	/>
 {/if}
diff --git a/src/lib/List/ListTitle.svelte b/src/lib/List/ListTitle.svelte
index 889d55d9..1513e78c 100644
--- a/src/lib/List/ListTitle.svelte
+++ b/src/lib/List/ListTitle.svelte
@@ -1,15 +1,23 @@
 <script lang="ts">
+	import tooltip from '$lib/Tooltip/tooltip';
+
 	export let time: number | undefined = undefined;
 	export let count = -1337;
-	export let anime = false;
-	export let custom = '';
+	export let title: Title = {
+		title: 'Media List',
+		hint: 'This is a media list.'
+	};
 	export let progress: undefined | number = undefined;
+
+	interface Title {
+		title: string;
+		hint: string;
+	}
 </script>
 
 <summary>
-	{custom.length !== 0 ? custom : anime ? 'Anime' : 'Manga & Light Novels'} [{count === -1337
-		? '...'
-		: count}]
+	<span title={title.hint || undefined} use:tooltip>{title.title}</span>
+	[{count === -1337 ? '...' : count}]
 	<small style="opacity: 50%">{time ? time.toFixed(3) : '...'}s</small>
 	<slot />
 	{#if progress !== undefined}
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index aa996547..e14e03f0 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -17,6 +17,7 @@
 	import proxy from '$lib/Utility/proxy';
 	import Loading from '$lib/Utility/Loading.svelte';
 	import root from '$lib/Utility/root';
+	import locale from '$stores/locale';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -39,7 +40,13 @@
 </script>
 
 {#if authorised}
-	<ListTitle count={media.length} time={endTime / 1000}>
+	<ListTitle
+		count={media.length}
+		time={endTime / 1000}
+		title={due
+			? $locale().lists.due.mangaAndLightNovels
+			: $locale().lists.completed.mangaAndLightNovels}
+	>
 		<button
 			class="small-button"
 			title="Force a full refresh"
diff --git a/src/lib/List/Manga/MangaListTemplate.svelte b/src/lib/List/Manga/MangaListTemplate.svelte
index ded2d197..c200674b 100644
--- a/src/lib/List/Manga/MangaListTemplate.svelte
+++ b/src/lib/List/Manga/MangaListTemplate.svelte
@@ -16,6 +16,7 @@
 	import { getNotificationsContext } from 'svelte-notifications';
 	import { options } from '$lib/Notification/options';
 	import Skeleton from '$lib/Skeleton.svelte';
+	import locale from '$stores/locale';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -200,7 +201,7 @@
 
 {#await mangaLists}
 	{#if !authorised}
-		<ListTitle count={0} time={endTime / 1000}>
+		<ListTitle count={0} time={endTime / 1000} title={$locale().lists.due.mangaAndLightNovels}>
 			<button
 				data-umami-event="Force Refresh Manga"
 				title="Force a full refresh"
@@ -226,14 +227,14 @@
 			{authorised}
 		/>
 	{:else}
-		<ListTitle {progress} />
+		<ListTitle {progress} title={$locale().lists.due.mangaAndLightNovels} />
 
 		<Skeleton card={false} count={5} height="0.9rem" list />
 	{/if}
 {:then media}
 	{#await cleanMedia(media, displayUnresolved, forceFlag)}
 		{#if !authorised}
-			<ListTitle count={0} time={endTime / 1000}>
+			<ListTitle count={0} time={endTime / 1000} title={$locale().lists.due.mangaAndLightNovels}>
 				<button
 					data-umami-event="Force Refresh Manga"
 					title="Force a full refresh"
@@ -259,13 +260,17 @@
 				{authorised}
 			/>
 		{:else}
-			<ListTitle {progress} />
+			<ListTitle {progress} title={$locale().lists.due.mangaAndLightNovels} />
 
 			<Skeleton card={false} count={5} height="0.9rem" list />
 		{/if}
 	{:then cleanedMedia}
 		{#if !authorised}
-			<ListTitle count={cleanedMedia.length} time={endTime / 1000}>
+			<ListTitle
+				count={cleanedMedia.length}
+				time={endTime / 1000}
+				title={$locale().lists.due.mangaAndLightNovels}
+			>
 				<button
 					data-umami-event="Force Refresh Manga"
 					title="Force a full refresh"
@@ -291,7 +296,7 @@
 		/>
 	{:catch}
 		{#if authorised}
-			<ListTitle count={-1337} time={0} />
+			<ListTitle count={-1337} time={0} title={$locale().lists.due.mangaAndLightNovels} />
 		{/if}
 
 		<Error list={false} />
diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index 8deca68b..2af404b7 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -149,6 +149,38 @@ const English: Locale = {
 			statistics: '{username} has watched {anime} days of anime and read {manga} days of manga.',
 			badges: '{username} has collected {badges} badges using Badge Wall.'
 		}
+	},
+	lists: {
+		upcoming: {
+			episodes: {
+				title: 'Upcoming Episodes',
+				hint: 'Anime that you have seen all aired episodes of and have at least one scheduled episode left to air'
+			},
+			notYetReleased: {
+				title: 'Not Yet Released',
+				hint: 'Anime that have not yet aired any episodes'
+			}
+		},
+		due: {
+			episodes: {
+				title: 'Due Episodes',
+				hint: 'Airing anime that you have not seen all aired episodes of'
+			},
+			mangaAndLightNovels: {
+				title: 'Manga & Light Novels',
+				hint: 'Releasing manga and light novels that you have not read all available chapters of'
+			}
+		},
+		completed: {
+			anime: {
+				title: 'Anime',
+				hint: 'Concluded anime that you not have seen all aired episodes of'
+			},
+			mangaAndLightNovels: {
+				title: 'Manga & Light Novels',
+				hint: 'Concluded manga and light novels that you have not read all available chapters of'
+			}
+		}
 	}
 };
 
diff --git a/src/lib/Locale/japanese.ts b/src/lib/Locale/japanese.ts
index 60fc06e6..ef46bcb1 100644
--- a/src/lib/Locale/japanese.ts
+++ b/src/lib/Locale/japanese.ts
@@ -151,6 +151,38 @@ const Japanese: Locale = {
 				'{username}はAniListで{anime}日間のアニメ視聴と{manga}日間のマンガ読書を記録している。',
 			badges: '{username}はBadge Wallを使って{badges}個のバッジを収集しました。'
 		}
+	},
+	lists: {
+		upcoming: {
+			episodes: {
+				title: 'これから放送されるエピソード',
+				hint: '現在放送中のアニメで、放送された全話を見たことがあるもの'
+			},
+			notYetReleased: {
+				title: 'まだ公開されていない',
+				hint: 'まだ一話も放送されていない'
+			}
+		},
+		due: {
+			episodes: {
+				title: '視聴すべきエピソード',
+				hint: '未視聴エピソードのあるアニメ'
+			},
+			mangaAndLightNovels: {
+				title: 'マンガ＆ライトノベル',
+				hint: '未読の章があるマンガ＆ライトノベル'
+			}
+		},
+		completed: {
+			anime: {
+				title: 'アニメ',
+				hint: '放送が終了したアニメで全話見ていないもの'
+			},
+			mangaAndLightNovels: {
+				title: 'マンガ＆ライトノベル',
+				hint: '完結したマンガ＆ライトノベルで、全章を読んでいないもの'
+			}
+		}
 	}
 };
 
diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index 485256ba..fa7acf27 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -154,4 +154,36 @@ export interface Locale {
 			badges: LocaleValue;
 		};
 	};
+	lists: {
+		upcoming: {
+			episodes: {
+				title: LocaleValue;
+				hint: LocaleValue;
+			};
+			notYetReleased: {
+				title: LocaleValue;
+				hint: LocaleValue;
+			};
+		};
+		due: {
+			episodes: {
+				title: LocaleValue;
+				hint: LocaleValue;
+			};
+			mangaAndLightNovels: {
+				title: LocaleValue;
+				hint: LocaleValue;
+			};
+		};
+		completed: {
+			anime: {
+				title: LocaleValue;
+				hint: LocaleValue;
+			};
+			mangaAndLightNovels: {
+				title: LocaleValue;
+				hint: LocaleValue;
+			};
+		};
+	};
 }