refactor(list): move modules to sub-modules

1 files changed, 81 insertions, 0 deletions

diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
new file mode 100644
index 00000000..659388ea
--- /dev/null
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { Media } from '$lib/AniList/media';
+	import { volumeCount } from '$lib/Media/manga';
+	import settings from '../../../stores/settings';
+	import ListTitle from '../ListTitle.svelte';
+
+	export let media: Media[];
+	export let cleanCache: () => void;
+	export let endTime: number;
+	export let lastUpdatedMedia: number;
+	export let updateMedia: (
+		id: number,
+		progress: number | undefined,
+		media: Media[]
+	) => Promise<void>;
+	export let disableIncrement = false;
+	export let pendingUpdate: number | null;
+	export let due: boolean;
+</script>
+
+<ListTitle count={media.length} time={endTime / 1000}>
+	<a href={'#'} title="Force a full refresh" on:click={cleanCache}>Refresh</a>
+</ListTitle>
+
+{#if media.length === 0}
+	<ul>
+		<li>No manga to display. <a href={'#'} on:click={cleanCache}>Force refresh</a></li>
+	</ul>
+{/if}
+
+<ul>
+	{#each media as manga}
+		{@const progress = (manga.mediaListEntry || { progress: 0 }).progress}
+
+		<li>
+			<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
+				<span
+					style={lastUpdatedMedia === manga.id && manga.chapters !== progress
+						? 'color: lightcoral'
+						: ''}
+				>
+					{#if $settings.displayNativeTitles}
+						<span title={manga.title.english || manga.title.romaji || manga.title.native}>
+							{manga.title.native}
+						</span>
+					{:else}
+						<span title={manga.title.native}>
+							{manga.title.english || manga.title.romaji || manga.title.native}
+						</span>
+					{/if}
+				</span>
+			</a>
+			{#if $settings.displaySocialButton}
+				[<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>]
+			{/if}
+			<span style="opacity: 50%;">|</span>
+			{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
+				<span style="opacity: 50%;">/{manga.chapters || '?'}</span>
+			{/if}
+			<a
+				href={'#'}
+				style={disableIncrement ? 'pointer-events: none; opacity: 50%;' : ''}
+				on:click={() =>
+					disableIncrement ? null : updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
+			>
+				+
+			</a>
+			{#if due || manga.episodes !== manga.chapters}
+				[{manga.episodes || '?'}]
+				{#await volumeCount(manga) then volumes}
+					{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
+					{#if volumes !== null && (volumeProgress || 0) < volumes}
+						<span style="color: lightcoral;">
+							Vol. {volumeProgress} &#8594; {volumes}
+						</span>
+					{/if}
+				{/await}
+			{/if}
+		</li>
+	{/each}
+</ul>