refactor(list): generic clean list

1 files changed, 60 insertions, 0 deletions

diff --git a/src/lib/List/CleanList.svelte b/src/lib/List/CleanList.svelte
new file mode 100644
index 00000000..e78f51ab
--- /dev/null
+++ b/src/lib/List/CleanList.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
+	import type { Media } from '$lib/Data/AniList/media';
+	import { outboundLink } from '$lib/Media/links';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
+	import settings from '$stores/settings';
+
+	export let media: Media[];
+	export let type: 'anime' | 'manga';
+	export let upcoming = false;
+	export let notYetReleased = false;
+	export let lastUpdatedMedia: number;
+</script>
+
+<ul>
+	{#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}
+			<li class="entry">
+				<span class="content">
+					<LinkedTooltip
+						id={`${type}-${title.id}`}
+						content={`<img src="${title.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+						pin={`${type}-${title.id}`}
+						pinPosition={type === 'anime' ? 'right' : 'left'}
+						disable={!$settings.displayHoverCover}
+					>
+						<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
+								style={lastUpdatedMedia === title.id && title.chapters !== progress
+									? 'color: lightcoral'
+									: ''}
+							>
+								<MediaTitleDisplay title={title.title} />
+							</span>
+						</a>
+					</LinkedTooltip>
+					{#if $settings.displaySocialButton}
+						[<a href={`https://anilist.co/${type}/${title.id}/social`} target="_blank">S</a>]
+					{/if}
+
+					<slot name="information" {progress} {title} />
+				</span>
+			</li>
+		{/if}
+	{/each}
+</ul>