refactor(list): generic clean list

1 files changed, 59 insertions, 101 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}