refactor(list): generic grid list

1 files changed, 65 insertions, 0 deletions

diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte
new file mode 100644
index 00000000..faf3d7b3
--- /dev/null
+++ b/src/lib/List/CleanGrid.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Media } from '$lib/Data/AniList/media';
+	import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
+	import { outboundLink } from '$lib/Media/links';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
+	import settings from '$stores/settings';
+	import { mediaTitle } from './mediaTitle';
+	import './covers.css';
+
+	export let media: Media[];
+	export let dummy = false;
+	export let type: 'anime' | 'manga';
+	export let upcoming = false;
+	export let notYetReleased = false;
+</script>
+
+<div
+	class="covers"
+	style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
+>
+	{#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}
+			<div class="cover-card" id={`${type}-${title.id}`}>
+				<LinkedTooltip
+					pin={`${type}-${title.id}`}
+					content={title ? mediaTitle(title) : ''}
+					relative={dummy}
+				>
+					<div class="cover-card-image">
+						<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 class="cover-container">
+								<ParallaxImage
+									source={title.coverImage.extraLarge}
+									alternativeText="Cover"
+									limit={12.5}
+									classList={`cover${
+										title.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
+									}`}
+								/>
+							</span>
+						</a>
+					</div>
+				</LinkedTooltip>
+
+				<div class="cover-title">
+					<slot name="title" {progress} {title} />
+				</div>
+			</div>
+		{/if}
+	{/each}
+</div>