refactor(list): generic clean list

1 files changed, 39 insertions, 79 deletions

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}