1 files changed, 50 insertions, 0 deletions
diff --git a/src/lib/Tools/SequelCatcher/List.svelte b/src/lib/Tools/SequelCatcher/List.svelte
new file mode 100644
index 00000000..685cae72
--- /dev/null
+++ b/src/lib/Tools/SequelCatcher/List.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { filterRelations, type Media } from '$lib/Data/AniList/media';
+	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
+
+	import { outboundLink } from '$lib/Media/links';
+	import settings from '$stores/settings';
+
+	export let mediaListUnchecked: Media[];
+
+	const mediaList = mediaListUnchecked.filter(
+		(media) => media.mediaListEntry?.status === 'COMPLETED'
+	);
+</script>
+
+<ol class="media-list">
+	{#each filterRelations(mediaList) as { media, unwatchedRelations }}
+		<a href={outboundLink(media, 'anime', $settings.displayOutboundLinksTo)} target="_blank">
+			<MediaTitleDisplay title={media.title} />
+		</a>
+		<span class="opaque">
+			({media.startDate.year})
+		</span>
+
+		<ol class="unwatched-relations-list">
+			{#each unwatchedRelations as relation}
+				<li>
+					<a
+						href={outboundLink(relation.node, 'anime', $settings.displayOutboundLinksTo)}
+						target="_blank"
+					>
+						<MediaTitleDisplay title={relation.node.title} />
+					</a>
+					<span class="opaque">
+						({relation.node.startDate.year})
+					</span>
+				</li>
+			{/each}
+		</ol>
+	{/each}
+</ol>
+
+<style>
+	.media-list li {
+		margin-bottom: 1rem;
+	}
+
+	.unwatched-relations-list li:not(:last-child) {
+		margin-bottom: 0 !important;
+	}
+</style>