refactor(list): generic grid list

1 files changed, 29 insertions, 74 deletions

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}