refactor(list): generic grid list

3 files changed, 131 insertions, 157 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 9cc417fe..ac5f16c8 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -11,14 +11,13 @@
 	import { outboundLink } from '$lib/Media/links';
 	import { onDestroy, onMount } from 'svelte';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
-	import { mediaTitle } from '../mediaTitle';
 	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 ParallaxImage from '$lib/Image/ParallaxImage.svelte';
 	import revalidateAnime from '$stores/revalidateAnime';
+	import CleanGrid from '$lib/List/CleanGrid.svelte';
 
 	export let media: Media[];
 	export let title: any;
@@ -87,88 +86,43 @@
 {/if}
 
 {#if $settings.displayCoverModeAnime}
-	<div
-		class="covers"
-		style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
-	>
-		{#each media as anime}
-			{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
-
-			{#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
-				<div class="cover-card" id={`anime-${anime.id}`}>
-					<Tooltip
-						id={`anime-${anime.id}`}
-						pin={`anime-${anime.id}`}
-						content={anime ? mediaTitle(anime) : ''}
-						relative={dummy}
-					>
-						<div class="cover-card-image">
-							<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 class="cover-container">
-									<ParallaxImage
-										source={anime.coverImage.extraLarge}
-										alternativeText="Cover"
-										limit={12.5}
-										classList={`cover${
-											anime.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
-										}`}
-									/>
-								</span>
-							</a>
-						</div>
-					</Tooltip>
-
-					<div class="cover-title">
-						{#if !upcoming && !notYetReleased}
-							{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) {
-										$revalidateAnime = true;
-										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 || dummy}
-								[{anime.nextAiringEpisode?.episode === -1
-									? '?'
-									: (anime.nextAiringEpisode?.episode || 1) - 1}]
-								<br />
-								<AiringTime originalAnime={anime} {subsPlease} />
-							{/if}
-						{:else}
-							<AiringTime originalAnime={anime} {subsPlease} upcoming={true} />
-						{/if}
-					</div>
-				</div>
+	<CleanGrid {media} {dummy} type="anime" {upcoming} {notYetReleased}>
+		<div slot="title" let:title let:progress>
+			{#if !upcoming && !notYetReleased}
+				{pendingUpdate === title.id ? progress + 1 : progress}{@html totalEpisodes(title)}
+				<button
+					class={`button-square button-action ${pendingUpdate === title.id ? 'opaque' : ''}`}
+					style={pendingUpdate === title.id ? 'pointer-events: none;' : ''}
+					on:click={() => {
+						if (!dummy && pendingUpdate !== title.id) {
+							$revalidateAnime = true;
+							lastUpdatedMedia = title.id;
+							pendingUpdate = title.id;
+
+							incrementMediaProgress(title.id, title.mediaListEntry?.progress, user, () => {
+								const mediaListEntry = media.find((m) => m.id === title.id)?.mediaListEntry;
+
+								if (mediaListEntry) mediaListEntry.progress = progress + 1;
+
+								previousAnimeList = media;
+								animeLists = cleanCache(user, $identity);
+								pendingUpdate = null;
+							});
+						}
+					}}>+</button
+				>
+				{#if !completed || dummy}
+					[{title.nextAiringEpisode?.episode === -1
+						? '?'
+						: (title.nextAiringEpisode?.episode || 1) - 1}]
+					<br />
+					<AiringTime originalAnime={title} {subsPlease} />
+				{/if}
+			{:else}
+				<AiringTime originalAnime={title} {subsPlease} upcoming={true} />
 			{/if}
-		{/each}
-	</div>
+		</div>
+	</CleanGrid>
 {:else}
 	<ul>
 		{#each media as anime}
diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte
new file mode 100644
index 00000000..faf3d7b3
--- /dev/null
+++ b/src/lib/List/CleanGrid.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Media } from '$lib/Data/AniList/media';
+	import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
+	import { outboundLink } from '$lib/Media/links';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
+	import settings from '$stores/settings';
+	import { mediaTitle } from './mediaTitle';
+	import './covers.css';
+
+	export let media: Media[];
+	export let dummy = false;
+	export let type: 'anime' | 'manga';
+	export let upcoming = false;
+	export let notYetReleased = false;
+</script>
+
+<div
+	class="covers"
+	style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
+>
+	{#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}
+			<div class="cover-card" id={`${type}-${title.id}`}>
+				<LinkedTooltip
+					pin={`${type}-${title.id}`}
+					content={title ? mediaTitle(title) : ''}
+					relative={dummy}
+				>
+					<div class="cover-card-image">
+						<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 class="cover-container">
+								<ParallaxImage
+									source={title.coverImage.extraLarge}
+									alternativeText="Cover"
+									limit={12.5}
+									classList={`cover${
+										title.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
+									}`}
+								/>
+							</span>
+						</a>
+					</div>
+				</LinkedTooltip>
+
+				<div class="cover-title">
+					<slot name="title" {progress} {title} />
+				</div>
+			</div>
+		{/if}
+	{/each}
+</div>
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index c651a0b4..03a4a725 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -14,8 +14,7 @@
 	import proxy from '$lib/Utility/proxy';
 	import Tooltip from '../../Tooltip/LinkedTooltip.svelte';
 	import '../covers.css';
-	import { mediaTitle } from '../mediaTitle';
-	import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
+	import CleanGrid from '../CleanGrid.svelte';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -107,79 +106,35 @@
 {/if}
 
 {#if $settings.displayCoverModeManga || dummy}
-	<div
-		class="covers"
-		style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
-	>
-		{#each media as manga}
-			{@const progress = (manga.mediaListEntry || { progress: 0 }).progress}
-
-			{#if progress !== manga.episodes}
-				<div class="cover-card" id={`manga-${manga.id}`}>
-					<Tooltip
-						pin={`manga-${manga.id}`}
-						content={manga ? mediaTitle(manga) : ''}
-						relative={dummy}
-					>
-						<div class="cover-card-image">
-							<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 class="cover-container">
-									<ParallaxImage
-										source={manga.coverImage.extraLarge}
-										alternativeText="Cover"
-										limit={12.5}
-										classList={`cover${
-											manga.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
-										}`}
-									/>
-								</span>
-							</a>
-						</div>
-					</Tooltip>
-
-					<div class="cover-title">
-						{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}
-					</div>
-				</div>
+	<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>
 			{/if}
-		{/each}
-	</div>
+			<button
+				class={`button-square button-action ${pendingUpdate === title.id ? 'opaque' : ''}`}
+				style={pendingUpdate === title.id ? 'pointer-events: none;' : ''}
+				on:click={() =>
+					pendingUpdate === title.id || dummy
+						? null
+						: updateMedia(title.id, title.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 volumes !== null && (volumeProgress || 0) < volumes}
+						<span style="color: lightcoral;">
+							Vol. {volumeProgress} &#8594; {volumes}
+						</span>
+					{/if}
+				{/await}
+			{/if}
+		</div>
+	</CleanGrid>
 {:else}
 	<ul>
 		{#each media as manga}