From 8f6e0b759cbdbb94b152f1af0637bc2206abe315 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 29 Sep 2023 17:14:21 -0700
Subject: refactor(list): move to respective modules

---
 src/lib/List/AnimeListTemplate.svelte            |  81 -----------
 src/lib/List/Completed/CompletedMangaList.svelte | 169 +++++++++++++++++++++++
 src/lib/List/Completed/WatchingAnimeList.svelte  |  53 +++++++
 src/lib/List/CompletedMangaList.svelte           | 169 -----------------------
 src/lib/List/Due/AnimeList.svelte                |   2 +-
 src/lib/List/MangaListTemplate.svelte            | 169 -----------------------
 src/lib/List/Template/AnimeListTemplate.svelte   |  81 +++++++++++
 src/lib/List/Template/MangaListTemplate.svelte   | 169 +++++++++++++++++++++++
 src/lib/List/UpcomingAnimeList.svelte            |   2 +-
 src/lib/List/WatchingAnimeList.svelte            |  54 --------
 10 files changed, 474 insertions(+), 475 deletions(-)
 delete mode 100644 src/lib/List/AnimeListTemplate.svelte
 create mode 100644 src/lib/List/Completed/CompletedMangaList.svelte
 create mode 100644 src/lib/List/Completed/WatchingAnimeList.svelte
 delete mode 100644 src/lib/List/CompletedMangaList.svelte
 delete mode 100644 src/lib/List/MangaListTemplate.svelte
 create mode 100644 src/lib/List/Template/AnimeListTemplate.svelte
 create mode 100644 src/lib/List/Template/MangaListTemplate.svelte
 delete mode 100644 src/lib/List/WatchingAnimeList.svelte

(limited to 'src')

diff --git a/src/lib/List/AnimeListTemplate.svelte b/src/lib/List/AnimeListTemplate.svelte
deleted file mode 100644
index b7156e69..00000000
--- a/src/lib/List/AnimeListTemplate.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-	/* eslint svelte/no-at-html-tags: "off" */
-
-	import type { AniListAuthorisation, UserIdentity } from '$lib/AniList/identity';
-	import type { Media } from '$lib/AniList/media';
-	import Error from '$lib/Error.svelte';
-	import { airingTime, cleanCache, totalEpisodes, updateMedia } from '$lib/Media/anime';
-	import settings from '../../stores/settings';
-	import ListTitle from './ListTitle.svelte';
-
-	export let endTime: number;
-	export let cleanMedia: (media: Media[], displayUnresolved: boolean) => Media[];
-	export let animeLists: Promise<Media[]>;
-	export let user: AniListAuthorisation;
-	export let identity: UserIdentity;
-	export let title: string;
-</script>
-
-{#await animeLists}
-	<ListTitle custom={title} />
-
-	<ul><li>Loading ...</li></ul>
-{:then media}
-	{@const cleanedMedia = cleanMedia(media, $settings.displayUnresolved)}
-
-	<ListTitle time={endTime / 1000} count={cleanedMedia.length} custom={title} />
-
-	{#if cleanedMedia.length === 0}
-		<ul>
-			<li>
-				No anime to display. <a
-					href={'#'}
-					on:click={() => (animeLists = cleanCache(user, identity))}>Force refresh</a
-				>
-			</li>
-		</ul>
-	{/if}
-
-	<ul>
-		{#each cleanedMedia as anime}
-			<li>
-				<a
-					href={$settings.linkToAniList
-						? `https://anilist.co/anime/${anime.id}`
-						: `https://www.livechart.me/search?q=${
-								anime.title.native || anime.title.english || anime.title.romaji
-						  }`}
-					target="_blank"
-				>
-					{anime.title.english || anime.title.romaji || anime.title.native}
-				</a>
-				<span style="opacity: 50%;">|</span>
-				{#if title !== 'Upcoming Episodes'}
-					<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
-					{(anime.mediaListEntry || { progress: 0 }).progress}{@html totalEpisodes(anime)}
-					<a
-						href={'#'}
-						on:click={() =>
-							updateMedia(
-								anime.id,
-								anime.mediaListEntry?.progress,
-								() => (animeLists = cleanCache(user, identity))
-							)}>+</a
-					>
-					{#if !title.includes('Completed')}
-						[{anime.nextAiringEpisode?.episode === -1
-							? '?'
-							: (anime.nextAiringEpisode?.episode || 1) - 1}]
-						{@html airingTime(anime)}
-					{/if}
-				{:else}
-					{@html airingTime(anime, true)}
-				{/if}
-			</li>
-		{/each}
-	</ul>
-{:catch}
-	<ListTitle time={0} count={'?'} custom={title} />
-
-	<Error />
-{/await}
diff --git a/src/lib/List/Completed/CompletedMangaList.svelte b/src/lib/List/Completed/CompletedMangaList.svelte
new file mode 100644
index 00000000..85975e40
--- /dev/null
+++ b/src/lib/List/Completed/CompletedMangaList.svelte
@@ -0,0 +1,169 @@
+<script lang="ts">
+	import { mediaListCollection, Type, type Media } from '$lib/AniList/media';
+	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
+	import { onDestroy, onMount } from 'svelte';
+	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 ListTitle from '../ListTitle.svelte';
+	import Error from '$lib/Error.svelte';
+
+	export let user: AniListAuthorisation;
+	export let identity: UserIdentity;
+	export let displayUnresolved: boolean;
+
+	let mangaLists: Promise<Media[]>;
+	let startTime: number;
+	let endTime: number;
+
+	const keyCacher = setInterval(() => {
+		startTime = performance.now();
+		endTime = -1;
+		mangaLists = mediaListCollection(user, identity, Type.Manga, $manga, $lastPruneTimes.manga);
+	}, $settings.cacheMinutes * 1000 * 60);
+
+	onMount(async () => {
+		startTime = performance.now();
+		mangaLists = mediaListCollection(user, identity, Type.Manga, $manga, $lastPruneTimes.manga);
+	});
+
+	onDestroy(() => clearInterval(keyCacher));
+
+	const cleanMedia = async (media: Media[], displayUnresolved: boolean) => {
+		if (media === undefined) {
+			return [];
+		}
+
+		if ($lastPruneTimes.chapters === 1) {
+			lastPruneTimes.setKey('chapters', new Date().getTime());
+		} else {
+			const currentDate = new Date();
+
+			if (
+				(currentDate.getTime() - $lastPruneTimes.chapters) / 1000 / 60 >
+				$settings.cacheMangaMinutes
+			) {
+				const unresolved = await chapterDatabase.chapters.where('chapters').equals(-1).toArray();
+				const ids = unresolved.map((m) => m.id);
+
+				lastPruneTimes.setKey('chapters', currentDate.getTime());
+				await chapterDatabase.chapters.bulkDelete(ids);
+			}
+		}
+
+		const releasingMedia = media.filter(
+			(media: Media) =>
+				media.status == 'FINISHED' &&
+				(media.mediaListEntry || { status: 'DROPPED' }).status !=
+					($settings.displayPausedMedia ? '' : 'PAUSED') &&
+				(media.mediaListEntry || { progress: 0 }).progress >=
+					($settings.displayNotStarted === true ? 0 : 1)
+		);
+		let finalMedia = releasingMedia;
+		const chapterPromises = finalMedia.map((m: Media) => chapterCount(identity, m));
+		const chapterCounts = await Promise.all(chapterPromises);
+
+		finalMedia.forEach((m: Media, i) => {
+			m.episodes = chapterCounts[i] || -1337;
+		});
+
+		if (!displayUnresolved) {
+			finalMedia = finalMedia.filter((m: Media) => m.episodes !== -1337);
+		}
+
+		finalMedia.sort((a: Media, b: Media) => {
+			return (
+				(a.episodes || 9999) -
+				(a.mediaListEntry || { progress: 0 }).progress -
+				((b.episodes || 9999) - (b.mediaListEntry || { progress: 0 }).progress)
+			);
+		});
+
+		finalMedia = finalMedia.filter((item, index, array) => {
+			return (
+				array.findIndex((i) => {
+					return i.id === item.id;
+				}) === index &&
+				(item.episodes === -1337 && displayUnresolved
+					? true
+					: (item.mediaListEntry?.progress || 0) <
+					  ($settings.roundDownChapters === true ? Math.floor(item.episodes) : item.episodes))
+			);
+		});
+
+		if (!endTime || endTime === -1) {
+			endTime = performance.now() - startTime;
+		}
+
+		return finalMedia;
+	};
+
+	const updateMedia = async (id: number, progress: number | undefined) => {
+		await chapterDatabase.chapters.delete(id);
+		await fetch(`/api/anilist-increment?id=${id}&progress=${(progress || 0) + 1}`).then(() => {
+			mangaLists = mediaListCollection(
+				user,
+				identity,
+				Type.Manga,
+				$manga,
+				$lastPruneTimes.manga,
+				true
+			);
+		});
+	};
+
+	const cleanCache = async () => {
+		await pruneAllManga();
+
+		mangaLists = mediaListCollection(
+			user,
+			identity,
+			Type.Manga,
+			$manga,
+			$lastPruneTimes.manga,
+			true
+		);
+	};
+</script>
+
+{#await mangaLists}
+	<ListTitle />
+
+	<ul><li>Loading ...</li></ul>
+{:then media}
+	{#await cleanMedia(media, displayUnresolved)}
+		<ListTitle />
+
+		<ul><li>Loading ...</li></ul>
+	{:then cleanedMedia}
+		<ListTitle count={cleanedMedia.length} time={endTime / 1000}>
+			<a href={'#'} title="Force a refresh" on:click={cleanCache}>Force</a>
+		</ListTitle>
+
+		{#if cleanedMedia.length === 0}
+			<ul>
+				<li>No manga to display. <a href={'#'} on:click={cleanCache}>Force refresh</a></li>
+			</ul>
+		{/if}
+
+		<ul>
+			{#each cleanedMedia as manga}
+				<li>
+					<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
+						{manga.title.english || manga.title.romaji || manga.title.native}
+					</a>
+					<span style="opacity: 50%;">|</span>
+					{(manga.mediaListEntry || { progress: 0 }).progress}
+					<a href={'#'} on:click={() => updateMedia(manga.id, manga.mediaListEntry?.progress)}>+</a>
+					[{manga.episodes || '?'}]
+				</li>
+			{/each}
+		</ul>
+	{:catch}
+		<ListTitle count={'?'} time={0} />
+
+		<Error />
+	{/await}
+{/await}
diff --git a/src/lib/List/Completed/WatchingAnimeList.svelte b/src/lib/List/Completed/WatchingAnimeList.svelte
new file mode 100644
index 00000000..da48c32d
--- /dev/null
+++ b/src/lib/List/Completed/WatchingAnimeList.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { mediaListCollection, Type, type Media } from '$lib/AniList/media';
+	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
+	import { onMount } from 'svelte';
+	import anime from '../../../stores/anime';
+	import lastPruneTimes from '../../../stores/lastPruneTimes';
+	import settings from '../../../stores/settings';
+	import AnimeList from '../Template/AnimeListTemplate.svelte';
+
+	export let user: AniListAuthorisation;
+	export let identity: UserIdentity;
+
+	let animeLists: Promise<Media[]>;
+	let startTime: number;
+	let endTime: number;
+
+	onMount(async () => {
+		startTime = performance.now();
+		animeLists = mediaListCollection(user, identity, Type.Anime, $anime, $lastPruneTimes.anime);
+	});
+
+	const cleanMedia = (media: Media[]) => {
+		if (media === undefined) {
+			return [];
+		}
+
+		const releasingMedia = media.filter(
+			(media: Media) =>
+				media.status === 'FINISHED' &&
+				(media.mediaListEntry || { status: 'DROPPED' }).status != 'DROPPED' &&
+				(media.mediaListEntry || { status: 'DROPPED' }).status !=
+					($settings.displayPausedMedia ? '' : 'PAUSED') &&
+				(media.mediaListEntry || { progress: 0 }).progress >= ($settings.displayNotStarted ? 0 : 1)
+		);
+		let finalMedia = releasingMedia;
+
+		finalMedia.sort((a: Media, b: Media) => {
+			const difference = (anime: Media) => {
+				return anime.episodes - (anime.mediaListEntry || { progress: 0 }).progress;
+			};
+
+			return difference(a) - difference(b);
+		});
+
+		if (!endTime) {
+			endTime = performance.now() - startTime;
+		}
+
+		return finalMedia;
+	};
+</script>
+
+<AnimeList {endTime} {cleanMedia} {animeLists} {user} {identity} title="Completed Anime" />
diff --git a/src/lib/List/CompletedMangaList.svelte b/src/lib/List/CompletedMangaList.svelte
deleted file mode 100644
index 9eee9d22..00000000
--- a/src/lib/List/CompletedMangaList.svelte
+++ /dev/null
@@ -1,169 +0,0 @@
-<script lang="ts">
-	import { mediaListCollection, Type, type Media } from '$lib/AniList/media';
-	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
-	import { onDestroy, onMount } from 'svelte';
-	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 ListTitle from './ListTitle.svelte';
-	import Error from '$lib/Error.svelte';
-
-	export let user: AniListAuthorisation;
-	export let identity: UserIdentity;
-	export let displayUnresolved: boolean;
-
-	let mangaLists: Promise<Media[]>;
-	let startTime: number;
-	let endTime: number;
-
-	const keyCacher = setInterval(() => {
-		startTime = performance.now();
-		endTime = -1;
-		mangaLists = mediaListCollection(user, identity, Type.Manga, $manga, $lastPruneTimes.manga);
-	}, $settings.cacheMinutes * 1000 * 60);
-
-	onMount(async () => {
-		startTime = performance.now();
-		mangaLists = mediaListCollection(user, identity, Type.Manga, $manga, $lastPruneTimes.manga);
-	});
-
-	onDestroy(() => clearInterval(keyCacher));
-
-	const cleanMedia = async (media: Media[], displayUnresolved: boolean) => {
-		if (media === undefined) {
-			return [];
-		}
-
-		if ($lastPruneTimes.chapters === 1) {
-			lastPruneTimes.setKey('chapters', new Date().getTime());
-		} else {
-			const currentDate = new Date();
-
-			if (
-				(currentDate.getTime() - $lastPruneTimes.chapters) / 1000 / 60 >
-				$settings.cacheMangaMinutes
-			) {
-				const unresolved = await chapterDatabase.chapters.where('chapters').equals(-1).toArray();
-				const ids = unresolved.map((m) => m.id);
-
-				lastPruneTimes.setKey('chapters', currentDate.getTime());
-				await chapterDatabase.chapters.bulkDelete(ids);
-			}
-		}
-
-		const releasingMedia = media.filter(
-			(media: Media) =>
-				media.status == 'FINISHED' &&
-				(media.mediaListEntry || { status: 'DROPPED' }).status !=
-					($settings.displayPausedMedia ? '' : 'PAUSED') &&
-				(media.mediaListEntry || { progress: 0 }).progress >=
-					($settings.displayNotStarted === true ? 0 : 1)
-		);
-		let finalMedia = releasingMedia;
-		const chapterPromises = finalMedia.map((m: Media) => chapterCount(identity, m));
-		const chapterCounts = await Promise.all(chapterPromises);
-
-		finalMedia.forEach((m: Media, i) => {
-			m.episodes = chapterCounts[i] || -1337;
-		});
-
-		if (!displayUnresolved) {
-			finalMedia = finalMedia.filter((m: Media) => m.episodes !== -1337);
-		}
-
-		finalMedia.sort((a: Media, b: Media) => {
-			return (
-				(a.episodes || 9999) -
-				(a.mediaListEntry || { progress: 0 }).progress -
-				((b.episodes || 9999) - (b.mediaListEntry || { progress: 0 }).progress)
-			);
-		});
-
-		finalMedia = finalMedia.filter((item, index, array) => {
-			return (
-				array.findIndex((i) => {
-					return i.id === item.id;
-				}) === index &&
-				(item.episodes === -1337 && displayUnresolved
-					? true
-					: (item.mediaListEntry?.progress || 0) <
-					  ($settings.roundDownChapters === true ? Math.floor(item.episodes) : item.episodes))
-			);
-		});
-
-		if (!endTime || endTime === -1) {
-			endTime = performance.now() - startTime;
-		}
-
-		return finalMedia;
-	};
-
-	const updateMedia = async (id: number, progress: number | undefined) => {
-		await chapterDatabase.chapters.delete(id);
-		await fetch(`/api/anilist-increment?id=${id}&progress=${(progress || 0) + 1}`).then(() => {
-			mangaLists = mediaListCollection(
-				user,
-				identity,
-				Type.Manga,
-				$manga,
-				$lastPruneTimes.manga,
-				true
-			);
-		});
-	};
-
-	const cleanCache = async () => {
-		await pruneAllManga();
-
-		mangaLists = mediaListCollection(
-			user,
-			identity,
-			Type.Manga,
-			$manga,
-			$lastPruneTimes.manga,
-			true
-		);
-	};
-</script>
-
-{#await mangaLists}
-	<ListTitle />
-
-	<ul><li>Loading ...</li></ul>
-{:then media}
-	{#await cleanMedia(media, displayUnresolved)}
-		<ListTitle />
-
-		<ul><li>Loading ...</li></ul>
-	{:then cleanedMedia}
-		<ListTitle count={cleanedMedia.length} time={endTime / 1000}>
-			<a href={'#'} title="Force a refresh" on:click={cleanCache}>Force</a>
-		</ListTitle>
-
-		{#if cleanedMedia.length === 0}
-			<ul>
-				<li>No manga to display. <a href={'#'} on:click={cleanCache}>Force refresh</a></li>
-			</ul>
-		{/if}
-
-		<ul>
-			{#each cleanedMedia as manga}
-				<li>
-					<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
-						{manga.title.english || manga.title.romaji || manga.title.native}
-					</a>
-					<span style="opacity: 50%;">|</span>
-					{(manga.mediaListEntry || { progress: 0 }).progress}
-					<a href={'#'} on:click={() => updateMedia(manga.id, manga.mediaListEntry?.progress)}>+</a>
-					[{manga.episodes || '?'}]
-				</li>
-			{/each}
-		</ul>
-	{:catch}
-		<ListTitle count={'?'} time={0} />
-
-		<Error />
-	{/await}
-{/await}
diff --git a/src/lib/List/Due/AnimeList.svelte b/src/lib/List/Due/AnimeList.svelte
index 4d22df14..dce6e6b2 100644
--- a/src/lib/List/Due/AnimeList.svelte
+++ b/src/lib/List/Due/AnimeList.svelte
@@ -5,7 +5,7 @@
 	import anime from '../../../stores/anime';
 	import settings from '../../../stores/settings';
 	import lastPruneTimes from '../../../stores/lastPruneTimes';
-	import AnimeList from '../AnimeListTemplate.svelte';
+	import AnimeList from '../Template/AnimeListTemplate.svelte';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
diff --git a/src/lib/List/MangaListTemplate.svelte b/src/lib/List/MangaListTemplate.svelte
deleted file mode 100644
index b14ce85e..00000000
--- a/src/lib/List/MangaListTemplate.svelte
+++ /dev/null
@@ -1,169 +0,0 @@
-<script lang="ts">
-	import { mediaListCollection, Type, type Media } from '$lib/AniList/media';
-	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
-	import { onDestroy, onMount } from 'svelte';
-	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 ListTitle from './ListTitle.svelte';
-	import Error from '$lib/Error.svelte';
-
-	export let user: AniListAuthorisation;
-	export let identity: UserIdentity;
-	export let displayUnresolved: boolean;
-
-	let mangaLists: Promise<Media[]>;
-	let startTime: number;
-	let endTime: number;
-
-	const keyCacher = setInterval(() => {
-		startTime = performance.now();
-		endTime = -1;
-		mangaLists = mediaListCollection(user, identity, Type.Manga, $manga, $lastPruneTimes.manga);
-	}, $settings.cacheMinutes * 1000 * 60);
-
-	onMount(async () => {
-		startTime = performance.now();
-		mangaLists = mediaListCollection(user, identity, Type.Manga, $manga, $lastPruneTimes.manga);
-	});
-
-	onDestroy(() => clearInterval(keyCacher));
-
-	const cleanMedia = async (media: Media[], displayUnresolved: boolean) => {
-		if (media === undefined) {
-			return [];
-		}
-
-		if ($lastPruneTimes.chapters === 1) {
-			lastPruneTimes.setKey('chapters', new Date().getTime());
-		} else {
-			const currentDate = new Date();
-
-			if (
-				(currentDate.getTime() - $lastPruneTimes.chapters) / 1000 / 60 >
-				$settings.cacheMangaMinutes
-			) {
-				const unresolved = await chapterDatabase.chapters.where('chapters').equals(-1).toArray();
-				const ids = unresolved.map((m) => m.id);
-
-				lastPruneTimes.setKey('chapters', currentDate.getTime());
-				await chapterDatabase.chapters.bulkDelete(ids);
-			}
-		}
-
-		const releasingMedia = media.filter(
-			(media: Media) =>
-				media.status == 'RELEASING' &&
-				(media.mediaListEntry || { status: 'DROPPED' }).status !=
-					($settings.displayPausedMedia ? '' : 'PAUSED') &&
-				(media.mediaListEntry || { progress: 0 }).progress >=
-					($settings.displayNotStarted === true ? 0 : 1)
-		);
-		let finalMedia = releasingMedia;
-		const chapterPromises = finalMedia.map((m: Media) => chapterCount(identity, m));
-		const chapterCounts = await Promise.all(chapterPromises);
-
-		finalMedia.forEach((m: Media, i) => {
-			m.episodes = chapterCounts[i] || -1337;
-		});
-
-		if (!displayUnresolved) {
-			finalMedia = finalMedia.filter((m: Media) => m.episodes !== -1337);
-		}
-
-		finalMedia.sort((a: Media, b: Media) => {
-			return (
-				(a.episodes || 9999) -
-				(a.mediaListEntry || { progress: 0 }).progress -
-				((b.episodes || 9999) - (b.mediaListEntry || { progress: 0 }).progress)
-			);
-		});
-
-		finalMedia = finalMedia.filter((item, index, array) => {
-			return (
-				array.findIndex((i) => {
-					return i.id === item.id;
-				}) === index &&
-				(item.episodes === -1337 && displayUnresolved
-					? true
-					: (item.mediaListEntry?.progress || 0) <
-					  ($settings.roundDownChapters === true ? Math.floor(item.episodes) : item.episodes))
-			);
-		});
-
-		if (!endTime || endTime === -1) {
-			endTime = performance.now() - startTime;
-		}
-
-		return finalMedia;
-	};
-
-	const updateMedia = async (id: number, progress: number | undefined) => {
-		await chapterDatabase.chapters.delete(id);
-		await fetch(`/api/anilist-increment?id=${id}&progress=${(progress || 0) + 1}`).then(() => {
-			mangaLists = mediaListCollection(
-				user,
-				identity,
-				Type.Manga,
-				$manga,
-				$lastPruneTimes.manga,
-				true
-			);
-		});
-	};
-
-	const cleanCache = async () => {
-		await pruneAllManga();
-
-		mangaLists = mediaListCollection(
-			user,
-			identity,
-			Type.Manga,
-			$manga,
-			$lastPruneTimes.manga,
-			true
-		);
-	};
-</script>
-
-{#await mangaLists}
-	<ListTitle />
-
-	<ul><li>Loading ...</li></ul>
-{:then media}
-	{#await cleanMedia(media, displayUnresolved)}
-		<ListTitle />
-
-		<ul><li>Loading ...</li></ul>
-	{:then cleanedMedia}
-		<ListTitle count={cleanedMedia.length} time={endTime / 1000}>
-			<a href={'#'} title="Force a refresh" on:click={cleanCache}>Force</a>
-		</ListTitle>
-
-		{#if cleanedMedia.length === 0}
-			<ul>
-				<li>No manga to display. <a href={'#'} on:click={cleanCache}>Force refresh</a></li>
-			</ul>
-		{/if}
-
-		<ul>
-			{#each cleanedMedia as manga}
-				<li>
-					<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
-						{manga.title.english || manga.title.romaji || manga.title.native}
-					</a>
-					<span style="opacity: 50%;">|</span>
-					{(manga.mediaListEntry || { progress: 0 }).progress}
-					<a href={'#'} on:click={() => updateMedia(manga.id, manga.mediaListEntry?.progress)}>+</a>
-					[{manga.episodes || '?'}]
-				</li>
-			{/each}
-		</ul>
-	{:catch}
-		<ListTitle count={'?'} time={0} />
-
-		<Error />
-	{/await}
-{/await}
diff --git a/src/lib/List/Template/AnimeListTemplate.svelte b/src/lib/List/Template/AnimeListTemplate.svelte
new file mode 100644
index 00000000..bca141e3
--- /dev/null
+++ b/src/lib/List/Template/AnimeListTemplate.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	/* eslint svelte/no-at-html-tags: "off" */
+
+	import type { AniListAuthorisation, UserIdentity } from '$lib/AniList/identity';
+	import type { Media } from '$lib/AniList/media';
+	import Error from '$lib/Error.svelte';
+	import { airingTime, cleanCache, totalEpisodes, updateMedia } from '$lib/Media/anime';
+	import settings from '../../../stores/settings';
+	import ListTitle from '../ListTitle.svelte';
+
+	export let endTime: number;
+	export let cleanMedia: (media: Media[], displayUnresolved: boolean) => Media[];
+	export let animeLists: Promise<Media[]>;
+	export let user: AniListAuthorisation;
+	export let identity: UserIdentity;
+	export let title: string;
+</script>
+
+{#await animeLists}
+	<ListTitle custom={title} />
+
+	<ul><li>Loading ...</li></ul>
+{:then media}
+	{@const cleanedMedia = cleanMedia(media, $settings.displayUnresolved)}
+
+	<ListTitle time={endTime / 1000} count={cleanedMedia.length} custom={title} />
+
+	{#if cleanedMedia.length === 0}
+		<ul>
+			<li>
+				No anime to display. <a
+					href={'#'}
+					on:click={() => (animeLists = cleanCache(user, identity))}>Force refresh</a
+				>
+			</li>
+		</ul>
+	{/if}
+
+	<ul>
+		{#each cleanedMedia as anime}
+			<li>
+				<a
+					href={$settings.linkToAniList
+						? `https://anilist.co/anime/${anime.id}`
+						: `https://www.livechart.me/search?q=${
+								anime.title.native || anime.title.english || anime.title.romaji
+						  }`}
+					target="_blank"
+				>
+					{anime.title.english || anime.title.romaji || anime.title.native}
+				</a>
+				<span style="opacity: 50%;">|</span>
+				{#if title !== 'Upcoming Episodes'}
+					<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
+					{(anime.mediaListEntry || { progress: 0 }).progress}{@html totalEpisodes(anime)}
+					<a
+						href={'#'}
+						on:click={() =>
+							updateMedia(
+								anime.id,
+								anime.mediaListEntry?.progress,
+								() => (animeLists = cleanCache(user, identity))
+							)}>+</a
+					>
+					{#if !title.includes('Completed')}
+						[{anime.nextAiringEpisode?.episode === -1
+							? '?'
+							: (anime.nextAiringEpisode?.episode || 1) - 1}]
+						{@html airingTime(anime)}
+					{/if}
+				{:else}
+					{@html airingTime(anime, true)}
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{:catch}
+	<ListTitle time={0} count={'?'} custom={title} />
+
+	<Error />
+{/await}
diff --git a/src/lib/List/Template/MangaListTemplate.svelte b/src/lib/List/Template/MangaListTemplate.svelte
new file mode 100644
index 00000000..9e9f25e7
--- /dev/null
+++ b/src/lib/List/Template/MangaListTemplate.svelte
@@ -0,0 +1,169 @@
+<script lang="ts">
+	import { mediaListCollection, Type, type Media } from '$lib/AniList/media';
+	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
+	import { onDestroy, onMount } from 'svelte';
+	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 ListTitle from '../ListTitle.svelte';
+	import Error from '$lib/Error.svelte';
+
+	export let user: AniListAuthorisation;
+	export let identity: UserIdentity;
+	export let displayUnresolved: boolean;
+
+	let mangaLists: Promise<Media[]>;
+	let startTime: number;
+	let endTime: number;
+
+	const keyCacher = setInterval(() => {
+		startTime = performance.now();
+		endTime = -1;
+		mangaLists = mediaListCollection(user, identity, Type.Manga, $manga, $lastPruneTimes.manga);
+	}, $settings.cacheMinutes * 1000 * 60);
+
+	onMount(async () => {
+		startTime = performance.now();
+		mangaLists = mediaListCollection(user, identity, Type.Manga, $manga, $lastPruneTimes.manga);
+	});
+
+	onDestroy(() => clearInterval(keyCacher));
+
+	const cleanMedia = async (media: Media[], displayUnresolved: boolean) => {
+		if (media === undefined) {
+			return [];
+		}
+
+		if ($lastPruneTimes.chapters === 1) {
+			lastPruneTimes.setKey('chapters', new Date().getTime());
+		} else {
+			const currentDate = new Date();
+
+			if (
+				(currentDate.getTime() - $lastPruneTimes.chapters) / 1000 / 60 >
+				$settings.cacheMangaMinutes
+			) {
+				const unresolved = await chapterDatabase.chapters.where('chapters').equals(-1).toArray();
+				const ids = unresolved.map((m) => m.id);
+
+				lastPruneTimes.setKey('chapters', currentDate.getTime());
+				await chapterDatabase.chapters.bulkDelete(ids);
+			}
+		}
+
+		const releasingMedia = media.filter(
+			(media: Media) =>
+				media.status == 'RELEASING' &&
+				(media.mediaListEntry || { status: 'DROPPED' }).status !=
+					($settings.displayPausedMedia ? '' : 'PAUSED') &&
+				(media.mediaListEntry || { progress: 0 }).progress >=
+					($settings.displayNotStarted === true ? 0 : 1)
+		);
+		let finalMedia = releasingMedia;
+		const chapterPromises = finalMedia.map((m: Media) => chapterCount(identity, m));
+		const chapterCounts = await Promise.all(chapterPromises);
+
+		finalMedia.forEach((m: Media, i) => {
+			m.episodes = chapterCounts[i] || -1337;
+		});
+
+		if (!displayUnresolved) {
+			finalMedia = finalMedia.filter((m: Media) => m.episodes !== -1337);
+		}
+
+		finalMedia.sort((a: Media, b: Media) => {
+			return (
+				(a.episodes || 9999) -
+				(a.mediaListEntry || { progress: 0 }).progress -
+				((b.episodes || 9999) - (b.mediaListEntry || { progress: 0 }).progress)
+			);
+		});
+
+		finalMedia = finalMedia.filter((item, index, array) => {
+			return (
+				array.findIndex((i) => {
+					return i.id === item.id;
+				}) === index &&
+				(item.episodes === -1337 && displayUnresolved
+					? true
+					: (item.mediaListEntry?.progress || 0) <
+					  ($settings.roundDownChapters === true ? Math.floor(item.episodes) : item.episodes))
+			);
+		});
+
+		if (!endTime || endTime === -1) {
+			endTime = performance.now() - startTime;
+		}
+
+		return finalMedia;
+	};
+
+	const updateMedia = async (id: number, progress: number | undefined) => {
+		await chapterDatabase.chapters.delete(id);
+		await fetch(`/api/anilist-increment?id=${id}&progress=${(progress || 0) + 1}`).then(() => {
+			mangaLists = mediaListCollection(
+				user,
+				identity,
+				Type.Manga,
+				$manga,
+				$lastPruneTimes.manga,
+				true
+			);
+		});
+	};
+
+	const cleanCache = async () => {
+		await pruneAllManga();
+
+		mangaLists = mediaListCollection(
+			user,
+			identity,
+			Type.Manga,
+			$manga,
+			$lastPruneTimes.manga,
+			true
+		);
+	};
+</script>
+
+{#await mangaLists}
+	<ListTitle />
+
+	<ul><li>Loading ...</li></ul>
+{:then media}
+	{#await cleanMedia(media, displayUnresolved)}
+		<ListTitle />
+
+		<ul><li>Loading ...</li></ul>
+	{:then cleanedMedia}
+		<ListTitle count={cleanedMedia.length} time={endTime / 1000}>
+			<a href={'#'} title="Force a refresh" on:click={cleanCache}>Force</a>
+		</ListTitle>
+
+		{#if cleanedMedia.length === 0}
+			<ul>
+				<li>No manga to display. <a href={'#'} on:click={cleanCache}>Force refresh</a></li>
+			</ul>
+		{/if}
+
+		<ul>
+			{#each cleanedMedia as manga}
+				<li>
+					<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
+						{manga.title.english || manga.title.romaji || manga.title.native}
+					</a>
+					<span style="opacity: 50%;">|</span>
+					{(manga.mediaListEntry || { progress: 0 }).progress}
+					<a href={'#'} on:click={() => updateMedia(manga.id, manga.mediaListEntry?.progress)}>+</a>
+					[{manga.episodes || '?'}]
+				</li>
+			{/each}
+		</ul>
+	{:catch}
+		<ListTitle count={'?'} time={0} />
+
+		<Error />
+	{/await}
+{/await}
diff --git a/src/lib/List/UpcomingAnimeList.svelte b/src/lib/List/UpcomingAnimeList.svelte
index 14c9ed34..3c8d2884 100644
--- a/src/lib/List/UpcomingAnimeList.svelte
+++ b/src/lib/List/UpcomingAnimeList.svelte
@@ -4,7 +4,7 @@
 	import { onMount } from 'svelte';
 	import anime from '../../stores/anime';
 	import lastPruneTimes from '../../stores/lastPruneTimes';
-	import AnimeList from './AnimeListTemplate.svelte';
+	import AnimeList from './Template/AnimeListTemplate.svelte';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
diff --git a/src/lib/List/WatchingAnimeList.svelte b/src/lib/List/WatchingAnimeList.svelte
deleted file mode 100644
index 567f0e6c..00000000
--- a/src/lib/List/WatchingAnimeList.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-	import { mediaListCollection, Type, type Media } from '$lib/AniList/media';
-	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
-	import { onMount } from 'svelte';
-	import anime from '../../stores/anime';
-	import lastPruneTimes from '../../stores/lastPruneTimes';
-	import settings from '../../stores/settings';
-	import AnimeList from './AnimeListTemplate.svelte';
-
-	export let user: AniListAuthorisation;
-	export let identity: UserIdentity;
-
-	let animeLists: Promise<Media[]>;
-	let startTime: number;
-	let endTime: number;
-
-	onMount(async () => {
-		startTime = performance.now();
-		animeLists = mediaListCollection(user, identity, Type.Anime, $anime, $lastPruneTimes.anime);
-	});
-
-	const cleanMedia = (media: Media[]) => {
-		if (media === undefined) {
-			return [];
-		}
-
-		const releasingMedia = media.filter(
-			(media: Media) =>
-				media.status !== 'RELEASING' &&
-				media.status !== 'NOT_YET_RELEASED' &&
-				(media.mediaListEntry || { status: 'DROPPED' }).status != 'DROPPED' &&
-				(media.mediaListEntry || { status: 'DROPPED' }).status !=
-					($settings.displayPausedMedia ? '' : 'PAUSED') &&
-				(media.mediaListEntry || { progress: 0 }).progress >= ($settings.displayNotStarted ? 0 : 1)
-		);
-		let finalMedia = releasingMedia;
-
-		finalMedia.sort((a: Media, b: Media) => {
-			const difference = (anime: Media) => {
-				return anime.episodes - (anime.mediaListEntry || { progress: 0 }).progress;
-			};
-
-			return difference(a) - difference(b);
-		});
-
-		if (!endTime) {
-			endTime = performance.now() - startTime;
-		}
-
-		return finalMedia;
-	};
-</script>
-
-<AnimeList {endTime} {cleanMedia} {animeLists} {user} {identity} title="Completed Anime" />
-- 
cgit v1.2.3