refactor(anime): use title component

5 files changed, 24 insertions, 23 deletions

diff --git a/src/lib/List/Due/AnimeList.svelte b/src/lib/List/Due/AnimeList.svelte
index a1792290..6d1b7457 100644
--- a/src/lib/List/Due/AnimeList.svelte
+++ b/src/lib/List/Due/AnimeList.svelte
@@ -8,6 +8,7 @@
 	import settings from '../../../stores/settings';
 	import lastPruneTimes from '../../../stores/lastPruneTimes';
 	import { airingTime, cleanCache, totalEpisodes, updateMedia } from '$lib/Media/anime';
+	import ListTitle from './ListTitle.svelte';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -105,16 +106,13 @@
 </script>
 
 {#await animeLists}
-	<summary>Anime [...] <small style="opacity: 50%">...s</small></summary>
+	<ListTitle anime />
 
 	<ul><li>Loading ...</li></ul>
 {:then media}
 	{@const cleanedMedia = cleanMedia(media, displayUnresolved)}
 
-	<summary
-		>Anime [{cleanedMedia.length}]
-		<small style="opacity: 50%">{endTime / 1000}s</small></summary
-	>
+	<ListTitle time={endTime / 1000} count={cleanedMedia.length} anime />
 
 	{#if cleanedMedia.length === 0}
 		<ul>
@@ -159,7 +157,7 @@
 		{/each}
 	</ul>
 {:catch}
-	<summary>Anime [?] <small style="opacity: 50%">0s</small></summary>
+	<ListTitle time={0} count={'?'} anime />
 
 	<ul>
 		<li>
diff --git a/src/lib/List/Due/ListTitle.svelte b/src/lib/List/Due/ListTitle.svelte
new file mode 100644
index 00000000..5a37850c
--- /dev/null
+++ b/src/lib/List/Due/ListTitle.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let time: number | string = '...';
+	export let count: number | string = '...';
+	export let anime = false;
+</script>
+
+<summary>
+	{anime ? 'Anime' : 'Manga & Light Novels'} [{count}] <small style="opacity: 50%">{time}s</small>
+	<slot />
+</summary>
diff --git a/src/lib/List/Due/MangaList.svelte b/src/lib/List/Due/MangaList.svelte
index 0f3e511b..d7c37d48 100644
--- a/src/lib/List/Due/MangaList.svelte
+++ b/src/lib/List/Due/MangaList.svelte
@@ -7,7 +7,7 @@
 	import { chapterDatabase } from '$lib/Media/chapters';
 	import settings from '../../../stores/settings';
 	import lastPruneTimes from '../../../stores/lastPruneTimes';
-	import MangaTitle from './MangaTitle.svelte';
+	import ListTitle from './ListTitle.svelte';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -128,18 +128,18 @@
 </script>
 
 {#await mangaLists}
-	<MangaTitle />
+	<ListTitle />
 
 	<ul><li>Loading ...</li></ul>
 {:then media}
 	{#await cleanMedia(media, displayUnresolved)}
-		<MangaTitle />
+		<ListTitle />
 
 		<ul><li>Loading ...</li></ul>
 	{:then cleanedMedia}
-		<MangaTitle count={cleanedMedia.length} time={endTime / 1000}>
+		<ListTitle count={cleanedMedia.length} time={endTime / 1000}>
 			<a href={'#'} title="Force a refresh" on:click={cleanCache}>Force</a>
-		</MangaTitle>
+		</ListTitle>
 
 		{#if cleanedMedia.length === 0}
 			<ul>
@@ -162,7 +162,7 @@
 		</ul>
 	{:catch}
 		<summary>Manga & Light Novels [?] <small style="opacity: 50%">0s</small></summary>
-		<MangaTitle count={'?'} time={0} />
+		<ListTitle count={'?'} time={0} />
 
 		<ul>
 			<li>
diff --git a/src/lib/List/Due/MangaTitle.svelte b/src/lib/List/Due/MangaTitle.svelte
deleted file mode 100644
index aee467dd..00000000
--- a/src/lib/List/Due/MangaTitle.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-	export let time: number | string = '...';
-	export let count: number | string = '...';
-</script>
-
-<summary
-	>Manga & Light Novels [{count}] <small style="opacity: 50%">{time}s</small> <slot /></summary
->
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 72422fe0..9a9f598d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,7 +8,7 @@
 	import settings from '../stores/settings';
 	import WatchingAnimeList from '$lib/List/WatchingAnimeList.svelte';
 	import { lastActivityDate } from '$lib/AniList/activity';
-	import MangaTitle from '$lib/List/Due/MangaTitle.svelte';
+	import ListTitle from '$lib/List/Due/ListTitle.svelte';
 
 	export let data;
 
@@ -104,7 +104,8 @@
 					displayUnresolved={$settings.displayUnresolved}
 				/>
 			{:else}
-				<summary>Anime [...] <small style="opacity: 50%">...s</small></summary>
+				<ListTitle anime />
+
 				<ul><li>Loading ...</li></ul>
 			{/if}
 		</details>
@@ -117,7 +118,7 @@
 					displayUnresolved={$settings.displayUnresolved}
 				/>
 			{:else}
-				<MangaTitle />
+				<ListTitle />
 
 				<ul><li>Loading ...</li></ul>
 			{/if}