refactor(list): generic clean list

3 files changed, 158 insertions, 180 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index ac5f16c8..d8ba4ef9 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -7,17 +7,15 @@
 	import { totalEpisodes } from '$lib/Media/Anime/episodes';
 	import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
 	import ListTitle from '../ListTitle.svelte';
-	import MediaTitle from '../MediaTitleDisplay.svelte';
-	import { outboundLink } from '$lib/Media/links';
 	import { onDestroy, onMount } from 'svelte';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 	import AiringTime from '$lib/Media/Anime/Airing/AiringTime.svelte';
 	import { browser } from '$app/environment';
 	import identity from '$stores/identity';
-	import Tooltip from '../../Tooltip/LinkedTooltip.svelte';
 	import '../covers.css';
 	import revalidateAnime from '$stores/revalidateAnime';
 	import CleanGrid from '$lib/List/CleanGrid.svelte';
+	import CleanList from '../CleanList.svelte';
 
 	export let media: Media[];
 	export let title: any;
@@ -87,20 +85,20 @@
 
 {#if $settings.displayCoverModeAnime}
 	<CleanGrid {media} {dummy} type="anime" {upcoming} {notYetReleased}>
-		<div slot="title" let:title let:progress>
+		<div slot="title" let:title={anime} let:progress>
 			{#if !upcoming && !notYetReleased}
-				{pendingUpdate === title.id ? progress + 1 : progress}{@html totalEpisodes(title)}
+				{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
 				<button
-					class={`button-square button-action ${pendingUpdate === title.id ? 'opaque' : ''}`}
-					style={pendingUpdate === title.id ? 'pointer-events: none;' : ''}
+					class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
+					style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
 					on:click={() => {
-						if (!dummy && pendingUpdate !== title.id) {
+						if (!dummy && pendingUpdate !== anime.id) {
 							$revalidateAnime = true;
-							lastUpdatedMedia = title.id;
-							pendingUpdate = title.id;
+							lastUpdatedMedia = anime.id;
+							pendingUpdate = anime.id;
 
-							incrementMediaProgress(title.id, title.mediaListEntry?.progress, user, () => {
-								const mediaListEntry = media.find((m) => m.id === title.id)?.mediaListEntry;
+							incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => {
+								const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
 
 								if (mediaListEntry) mediaListEntry.progress = progress + 1;
 
@@ -112,103 +110,63 @@
 					}}>+</button
 				>
 				{#if !completed || dummy}
-					[{title.nextAiringEpisode?.episode === -1
+					[{anime.nextAiringEpisode?.episode === -1
 						? '?'
-						: (title.nextAiringEpisode?.episode || 1) - 1}]
+						: (anime.nextAiringEpisode?.episode || 1) - 1}]
 					<br />
-					<AiringTime originalAnime={title} {subsPlease} />
+					<AiringTime originalAnime={anime} {subsPlease} />
 				{/if}
 			{:else}
-				<AiringTime originalAnime={title} {subsPlease} upcoming={true} />
+				<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
 			{/if}
 		</div>
 	</CleanGrid>
 {:else}
-	<ul>
-		{#each media as anime}
-			{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
-
-			{#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
-				<li class="entry">
-					<span class="content">
-						<Tooltip
-							content={`<img src="${anime.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-							id={`anime-${anime.id}`}
-							pin={`anime-${anime.id}`}
-							pinPosition="right"
-							disable={!$settings.displayHoverCover}
-						>
-							<a
-								href={$settings.displayCopyMediaTitleNotLink
-									? '#'
-									: outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)}
-								on:click={(e) => {
-									if ($settings.displayCopyMediaTitleNotLink) {
-										e.preventDefault();
-
-										navigator.clipboard.writeText(anime.title.romaji);
-									}
-								}}
-								target="_blank"
-							>
-								<span
-									style={lastUpdatedMedia === anime.id && anime.episodes !== progress
-										? 'color: lightcoral'
-										: ''}
-								>
-									<MediaTitle title={anime.title} />
-								</span>
-							</a>
-						</Tooltip>
-						{#if $settings.displaySocialButton}
-							[<a href={`https://anilist.co/anime/${anime.id}/social`} target="_blank">S</a>]
-						{/if}
-						{#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
-							<span class="opaque">|</span>
-						{/if}
-						{#if !upcoming || notYetReleased}
-							<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
-							{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
-							<button
-								class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
-								style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
-								on:click={() => {
-									if (!dummy && pendingUpdate !== anime.id) {
-										lastUpdatedMedia = anime.id;
-										pendingUpdate = anime.id;
-
-										incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => {
-											const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
-
-											if (mediaListEntry) mediaListEntry.progress = progress + 1;
-
-											previousAnimeList = media;
-											animeLists = cleanCache(user, $identity);
-											pendingUpdate = null;
-										});
-									}
-								}}>+</button
-							>
-							{#if !completed}
-								[{anime.nextAiringEpisode?.episode === -1
-									? '?'
-									: (anime.nextAiringEpisode?.episode || 1) -
-									  ((anime.nextAiringEpisode?.airingAt || 999) <
-									  (anime.nextAiringEpisode?.nativeAiringAt || 0)
-											? 2
-											: 1)}]
-								<span class:countdown={$settings.displayCountdownRightAligned}>
-									<AiringTime originalAnime={anime} {subsPlease} />
-								</span>
-							{/if}
-						{:else}
-							<span class:countdown={$settings.displayCountdownRightAligned}>
-								<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
-							</span>
-						{/if}
+	<CleanList {media} type="anime" {upcoming} {notYetReleased} {lastUpdatedMedia}>
+		<span slot="information" let:title={anime} let:progress>
+			{#if !upcoming || notYetReleased || !$settings.displayCountdownRightAligned}
+				<span class="opaque">|</span>
+			{/if}
+			{#if !upcoming || notYetReleased}
+				<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
+				{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
+				<button
+					class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`}
+					style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''}
+					on:click={() => {
+						if (!dummy && pendingUpdate !== anime.id) {
+							lastUpdatedMedia = anime.id;
+							pendingUpdate = anime.id;
+
+							incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => {
+								const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
+
+								if (mediaListEntry) mediaListEntry.progress = progress + 1;
+
+								previousAnimeList = media;
+								animeLists = cleanCache(user, $identity);
+								pendingUpdate = null;
+							});
+						}
+					}}>+</button
+				>
+				{#if !completed}
+					[{anime.nextAiringEpisode?.episode === -1
+						? '?'
+						: (anime.nextAiringEpisode?.episode || 1) -
+						  ((anime.nextAiringEpisode?.airingAt || 999) <
+						  (anime.nextAiringEpisode?.nativeAiringAt || 0)
+								? 2
+								: 1)}]
+					<span class:countdown={$settings.displayCountdownRightAligned}>
+						<AiringTime originalAnime={anime} {subsPlease} />
 					</span>
-				</li>
+				{/if}
+			{:else}
+				<span class:countdown={$settings.displayCountdownRightAligned}>
+					<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
+				</span>
 			{/if}
-		{/each}
-	</ul>
+		</span>
+	</CleanList>
 {/if}
diff --git a/src/lib/List/CleanList.svelte b/src/lib/List/CleanList.svelte
new file mode 100644
index 00000000..e78f51ab
--- /dev/null
+++ b/src/lib/List/CleanList.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
+	import type { Media } from '$lib/Data/AniList/media';
+	import { outboundLink } from '$lib/Media/links';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
+	import settings from '$stores/settings';
+
+	export let media: Media[];
+	export let type: 'anime' | 'manga';
+	export let upcoming = false;
+	export let notYetReleased = false;
+	export let lastUpdatedMedia: number;
+</script>
+
+<ul>
+	{#each media as title}
+		{@const progress = (title.mediaListEntry || { progress: 0 }).progress}
+
+		{#if type === 'anime' ? upcoming || notYetReleased || progress !== (title.nextAiringEpisode?.episode || 9999) - 1 : progress !== title.episodes}
+			<li class="entry">
+				<span class="content">
+					<LinkedTooltip
+						id={`${type}-${title.id}`}
+						content={`<img src="${title.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+						pin={`${type}-${title.id}`}
+						pinPosition={type === 'anime' ? 'right' : 'left'}
+						disable={!$settings.displayHoverCover}
+					>
+						<a
+							href={$settings.displayCopyMediaTitleNotLink
+								? '#'
+								: outboundLink(title, type, $settings.displayOutboundLinksTo)}
+							on:click={(e) => {
+								if ($settings.displayCopyMediaTitleNotLink) {
+									e.preventDefault();
+
+									navigator.clipboard.writeText(title.title.romaji);
+								}
+							}}
+							target="_blank"
+						>
+							<span
+								style={lastUpdatedMedia === title.id && title.chapters !== progress
+									? 'color: lightcoral'
+									: ''}
+							>
+								<MediaTitleDisplay title={title.title} />
+							</span>
+						</a>
+					</LinkedTooltip>
+					{#if $settings.displaySocialButton}
+						[<a href={`https://anilist.co/${type}/${title.id}/social`} target="_blank">S</a>]
+					{/if}
+
+					<slot name="information" {progress} {title} />
+				</span>
+			</li>
+		{/if}
+	{/each}
+</ul>
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 03a4a725..d067b408 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -2,19 +2,17 @@
 	import type { Media } from '$lib/Data/AniList/media';
 	import Error from '$lib/Error/RateLimited.svelte';
 	import { volumeCount } from '$lib/Media/Manga/volumes';
-	import { outboundLink } from '$lib/Media/links';
 	import settings from '$stores/settings';
 	import ListTitle from '../ListTitle.svelte';
-	import MediaTitle from '../MediaTitleDisplay.svelte';
 	import { onMount } from 'svelte';
 	import root from '$lib/Utility/root';
 	import locale from '$stores/locale';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import { browser } from '$app/environment';
 	import proxy from '$lib/Utility/proxy';
-	import Tooltip from '../../Tooltip/LinkedTooltip.svelte';
 	import '../covers.css';
 	import CleanGrid from '../CleanGrid.svelte';
+	import CleanList from '../CleanList.svelte';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -107,24 +105,24 @@
 
 {#if $settings.displayCoverModeManga || dummy}
 	<CleanGrid {media} {dummy} type="manga">
-		<div slot="title" let:title let:progress>
-			{pendingUpdate === title.id ? progress + 1 : progress}{#if !due}
-				<span class="opaque">/{title.chapters || '?'}</span>
+		<div slot="title" let:title={manga} let:progress>
+			{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
+				<span class="opaque">/{manga.chapters || '?'}</span>
 			{/if}
 			<button
-				class={`button-square button-action ${pendingUpdate === title.id ? 'opaque' : ''}`}
-				style={pendingUpdate === title.id ? 'pointer-events: none;' : ''}
+				class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
+				style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
 				on:click={() =>
-					pendingUpdate === title.id || dummy
+					pendingUpdate === manga.id || dummy
 						? null
-						: updateMedia(title.id, title.mediaListEntry?.progress, media)}
+						: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
 			>
 				+
 			</button>
-			{#if due || Math.floor(title.episodes) < title.chapters}
-				[{title.episodes || '?'}]
-				{#await volumeCount(title) then volumes}
-					{@const volumeProgress = title.mediaListEntry?.progressVolumes}
+			{#if due || Math.floor(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;">
@@ -136,72 +134,34 @@
 		</div>
 	</CleanGrid>
 {:else}
-	<ul>
-		{#each media as manga}
-			{@const progress = (manga.mediaListEntry || { progress: 0 }).progress}
-
-			{#if progress !== manga.episodes}
-				<li class="entry">
-					<Tooltip
-						id={`manga-${manga.id}`}
-						content={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-						pin={`manga-${manga.id}`}
-						pinPosition="left"
-						disable={!$settings.displayHoverCover}
-					>
-						<a
-							href={$settings.displayCopyMediaTitleNotLink
-								? '#'
-								: outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
-							on:click={(e) => {
-								if ($settings.displayCopyMediaTitleNotLink) {
-									e.preventDefault();
-
-									navigator.clipboard.writeText(manga.title.romaji);
-								}
-							}}
-							target="_blank"
-						>
-							<span
-								style={lastUpdatedMedia === manga.id && manga.chapters !== progress
-									? 'color: lightcoral'
-									: ''}
-							>
-								<MediaTitle title={manga.title} />
-							</span>
-						</a>
-					</Tooltip>
-					{#if $settings.displaySocialButton}
-						[<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>]
-					{/if}
-					<span class="opaque">|</span>
-					{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
-						<span class="opaque">/{manga.chapters || '?'}</span>
-					{/if}
-					<button
-						class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
-						style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
-						on:click={() =>
-							pendingUpdate === manga.id || dummy
-								? null
-								: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
-					>
-						+
-					</button>
-					{#if due || Math.floor(manga.episodes) < manga.chapters}
-						[{manga.episodes || '?'}]
-						{#await volumeCount(manga) then volumes}
-							{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
+	<CleanList {media} type="manga" {lastUpdatedMedia}>
+		<span slot="information" let:title={manga} let:progress>
+			<span class="opaque">|</span>
+			{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
+				<span class="opaque">/{manga.chapters || '?'}</span>
+			{/if}
+			<button
+				class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
+				style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
+				on:click={() =>
+					pendingUpdate === manga.id || dummy
+						? null
+						: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
+			>
+				+
+			</button>
+			{#if due || Math.floor(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 volumes !== null && (volumeProgress || 0) < volumes}
+						<span style="color: lightcoral;">
+							Vol. {volumeProgress} &#8594; {volumes}
+						</span>
 					{/if}
-				</li>
+				{/await}
 			{/if}
-		{/each}
-	</ul>
+		</span>
+	</CleanList>
 {/if}