1 files changed, 37 insertions, 83 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}