From 5d860ec9675a832dca5e8fd855bca0c9debfb5ef Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 23 Aug 2024 13:51:32 -0700
Subject: refactor(Tools): SequelCatcher as modules

---
 src/lib/Tools/SequelCatcher.svelte      | 124 --------------------------------
 src/lib/Tools/SequelCatcher/List.svelte |  50 +++++++++++++
 src/lib/Tools/SequelCatcher/Tool.svelte |  80 +++++++++++++++++++++
 3 files changed, 130 insertions(+), 124 deletions(-)
 delete mode 100644 src/lib/Tools/SequelCatcher.svelte
 create mode 100644 src/lib/Tools/SequelCatcher/List.svelte
 create mode 100644 src/lib/Tools/SequelCatcher/Tool.svelte

(limited to 'src/lib/Tools')

diff --git a/src/lib/Tools/SequelCatcher.svelte b/src/lib/Tools/SequelCatcher.svelte
deleted file mode 100644
index 5d7cf81a..00000000
--- a/src/lib/Tools/SequelCatcher.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts">
-	import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
-	import userIdentity from '$stores/identity';
-	import { filterRelations, type Media, mediaListCollection, Type } from '$lib/Data/AniList/media';
-	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
-	import anime from '$stores/anime';
-	import identity from '$stores/identity';
-	import { onMount } from 'svelte';
-	import lastPruneTimes from '$stores/lastPruneTimes';
-	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
-	import { outboundLink } from '$lib/Media/links';
-	import settings from '$stores/settings';
-	import Message from '$lib/Loading/Message.svelte';
-	import Skeleton from '$lib/Loading/Skeleton.svelte';
-	import Username from '$lib/Layout/Username.svelte';
-
-	export let user: AniListAuthorisation;
-
-	let mediaList: Promise<Media[]>;
-
-	onMount(async () => {
-		if (user === undefined || $identity.id === -2) return;
-
-		mediaList = mediaListCollection(
-			user,
-			$userIdentity,
-			Type.Anime,
-			$anime,
-			$lastPruneTimes.anime,
-			{
-				forcePrune: true,
-				includeCompleted: true,
-				all: true,
-				includeRelations: true
-			}
-		);
-	});
-</script>
-
-{#if user === undefined || $identity.id === -2}
-	<LogInRestricted />
-{:else}
-	<div class="card">
-		{#await mediaList}
-			<Message message="Cross-checking media ..." />
-
-			<Skeleton
-				card={false}
-				count={8}
-				pad={false}
-				height={'0.9rem'}
-				width={'100%'}
-				list
-				grid={false}
-			/>
-		{:then mediaListUnchecked}
-			{#if mediaListUnchecked}
-				{@const mediaList = mediaListUnchecked.filter(
-					(media) => media.mediaListEntry?.status === 'COMPLETED'
-				)}
-
-				<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>
-			{:else}
-				<Message message="Cross-checking media ..." />
-
-				<Skeleton
-					card={false}
-					count={8}
-					pad={false}
-					height={'0.9rem'}
-					width={'100%'}
-					list
-					grid={false}
-				/>
-			{/if}
-		{:catch}
-			<Message message="" loader="ripple" slot withReload fullscreen>Error fetching media.</Message>
-		{/await}
-
-		<p />
-
-		<blockquote style="margin: 0 0 0 1.5rem;">
-			Thanks to <Username username="sevengirl" /> and <Username username="esthereae" /> for the idea!
-		</blockquote>
-	</div>
-{/if}
-
-<style>
-	.media-list li {
-		margin-bottom: 1rem;
-	}
-
-	.unwatched-relations-list li:not(:last-child) {
-		margin-bottom: 0 !important;
-	}
-</style>
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>
diff --git a/src/lib/Tools/SequelCatcher/Tool.svelte b/src/lib/Tools/SequelCatcher/Tool.svelte
new file mode 100644
index 00000000..06d635b3
--- /dev/null
+++ b/src/lib/Tools/SequelCatcher/Tool.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import List from './List.svelte';
+	import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
+	import userIdentity from '$stores/identity';
+	import { type Media, mediaListCollection, Type } from '$lib/Data/AniList/media';
+	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
+	import anime from '$stores/anime';
+	import identity from '$stores/identity';
+	import { onMount } from 'svelte';
+	import lastPruneTimes from '$stores/lastPruneTimes';
+	import Message from '$lib/Loading/Message.svelte';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import Username from '$lib/Layout/Username.svelte';
+
+	export let user: AniListAuthorisation;
+
+	let mediaList: Promise<Media[]>;
+
+	onMount(async () => {
+		if (user === undefined || $identity.id === -2) return;
+
+		mediaList = mediaListCollection(
+			user,
+			$userIdentity,
+			Type.Anime,
+			$anime,
+			$lastPruneTimes.anime,
+			{
+				forcePrune: true,
+				includeCompleted: true,
+				all: true,
+				includeRelations: true
+			}
+		);
+	});
+</script>
+
+{#if user === undefined || $identity.id === -2}
+	<LogInRestricted />
+{:else}
+	<div class="card">
+		{#await mediaList}
+			<Message message="Cross-checking media ..." />
+
+			<Skeleton
+				card={false}
+				count={8}
+				pad={false}
+				height={'0.9rem'}
+				width={'100%'}
+				list
+				grid={false}
+			/>
+		{:then mediaListUnchecked}
+			{#if mediaListUnchecked}
+				<List {mediaListUnchecked} />
+			{:else}
+				<Message message="Cross-checking media ..." />
+
+				<Skeleton
+					card={false}
+					count={8}
+					pad={false}
+					height={'0.9rem'}
+					width={'100%'}
+					list
+					grid={false}
+				/>
+			{/if}
+		{:catch}
+			<Message message="" loader="ripple" slot withReload fullscreen>Error fetching media.</Message>
+		{/await}
+
+		<p />
+
+		<blockquote style="margin: 0 0 0 1.5rem;">
+			Thanks to <Username username="sevengirl" /> and <Username username="esthereae" /> for the idea!
+		</blockquote>
+	</div>
+{/if}
-- 
cgit v1.2.3