feat(manga): replace list titles

2 files changed, 19 insertions, 8 deletions

diff --git a/src/lib/List/Due/MangaList.svelte b/src/lib/List/Due/MangaList.svelte
index 4b207351..0f3e511b 100644
--- a/src/lib/List/Due/MangaList.svelte
+++ b/src/lib/List/Due/MangaList.svelte
@@ -2,11 +2,12 @@
 	import { mediaListCollection, Type, type Media } from '$lib/AniList/media';
 	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
 	import { onDestroy, onMount } from 'svelte';
-	import { chapterCount } from '$lib/Media/manga';
+	import { chapterCount, pruneAllManga } from '$lib/Media/manga';
 	import manga from '../../../stores/manga';
 	import { chapterDatabase } from '$lib/Media/chapters';
 	import settings from '../../../stores/settings';
 	import lastPruneTimes from '../../../stores/lastPruneTimes';
+	import MangaTitle from './MangaTitle.svelte';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -112,7 +113,9 @@
 		});
 	};
 
-	const cleanCache = () => {
+	const cleanCache = async () => {
+		await pruneAllManga();
+
 		mangaLists = mediaListCollection(
 			user,
 			identity,
@@ -125,19 +128,18 @@
 </script>
 
 {#await mangaLists}
-	<summary>Manga & Light Novels [...] <small style="opacity: 50%">...s</small></summary>
+	<MangaTitle />
 
 	<ul><li>Loading ...</li></ul>
 {:then media}
 	{#await cleanMedia(media, displayUnresolved)}
-		<summary>Manga & Light Novels [...] <small style="opacity: 50%">...s</small></summary>
+		<MangaTitle />
 
 		<ul><li>Loading ...</li></ul>
 	{:then cleanedMedia}
-		<summary>
-			Manga & Light Novels [{cleanedMedia.length}]
-			<small style="opacity: 50%">{endTime / 1000}s</small>
-		</summary>
+		<MangaTitle count={cleanedMedia.length} time={endTime / 1000}>
+			<a href={'#'} title="Force a refresh" on:click={cleanCache}>Force</a>
+		</MangaTitle>
 
 		{#if cleanedMedia.length === 0}
 			<ul>
@@ -160,6 +162,7 @@
 		</ul>
 	{:catch}
 		<summary>Manga & Light Novels [?] <small style="opacity: 50%">0s</small></summary>
+		<MangaTitle count={'?'} time={0} />
 
 		<ul>
 			<li>
diff --git a/src/lib/List/Due/MangaTitle.svelte b/src/lib/List/Due/MangaTitle.svelte
new file mode 100644
index 00000000..aee467dd
--- /dev/null
+++ b/src/lib/List/Due/MangaTitle.svelte
@@ -0,0 +1,8 @@
+<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
+>