feat(manga): replace list titles

5 files changed, 33 insertions, 17 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
+>
diff --git a/src/lib/Media/manga.ts b/src/lib/Media/manga.ts
index c2bbf5db..9d0e08a6 100644
--- a/src/lib/Media/manga.ts
+++ b/src/lib/Media/manga.ts
@@ -1,7 +1,16 @@
 import { recentMediaActivities, type Media } from '$lib/AniList/media';
+import manga from '../../stores/manga';
 import type { UserIdentity } from '../AniList/identity';
 import { chapterDatabase } from './chapters';
 
+export const pruneAllManga = async () => {
+	const all = await chapterDatabase.chapters.toArray();
+	const ids = all.map((m) => m.id);
+
+	manga.set('');
+	await chapterDatabase.chapters.bulkDelete(ids);
+};
+
 export const chapterCount = async (
 	identity: UserIdentity,
 	manga: Media,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ee021e1d..72422fe0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,6 +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';
 
 	export let data;
 
@@ -116,7 +117,8 @@
 					displayUnresolved={$settings.displayUnresolved}
 				/>
 			{:else}
-				<summary>Manga & Light Novels [...] <small style="opacity: 50%">...s</small></summary>
+				<MangaTitle />
+
 				<ul><li>Loading ...</li></ul>
 			{/if}
 		</details>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 2fe6b466..6cc336e6 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -7,6 +7,7 @@
 	import settings from '../../stores/settings';
 	import SettingToggle from '$lib/Settings/SettingToggle.svelte';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
+	import { pruneAllManga } from '$lib/Media/manga';
 
 	export let data;
 
@@ -18,13 +19,6 @@
 		anime.set('');
 		await chapterDatabase.chapters.bulkDelete(ids);
 	};
-	const pruneAll = async () => {
-		const all = await chapterDatabase.chapters.toArray();
-		const ids = all.map((m) => m.id);
-
-		manga.set('');
-		await chapterDatabase.chapters.bulkDelete(ids);
-	};
 </script>
 
 {#if data.user === undefined}
@@ -129,7 +123,7 @@
 
 		<p />
 
-		<a href={'#'} on:click={pruneAll}>Re-cache <b>ALL</b> manga</a>
+		<a href={'#'} on:click={pruneAllManga}>Re-cache <b>ALL</b> manga</a>
 		<SettingHint lineBreak>Force a re-cache of all cached manga chapter counts</SettingHint>
 
 		<p />