refactor(SequelSpy): move prequel list to component

3 files changed, 39 insertions, 33 deletions

diff --git a/src/lib/Tools/SequelSpy/Prequels.svelte b/src/lib/Tools/SequelSpy/Prequels.svelte
new file mode 100644
index 00000000..ab1c4ac5
--- /dev/null
+++ b/src/lib/Tools/SequelSpy/Prequels.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { MediaPrequel } from '$lib/Data/AniList/prequels';
+	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
+	import { airingTime } from '$lib/Media/Anime/Airing/time';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
+	import settings from '$stores/settings';
+	import type { Media } from '$lib/Data/AniList/media';
+
+	export let currentPrequels: MediaPrequel[];
+
+	const prequelAiringTime = (prequel: MediaPrequel) =>
+		airingTime(prequel as unknown as Media, null, false, true);
+</script>
+
+<ul>
+	{#each currentPrequels.sort((a, b) => new Date(a.startDate.year, a.startDate.month - 1, a.startDate.day).getTime() - new Date(b.startDate.year, b.startDate.month - 1, b.startDate.day).getTime()) as prequel}
+		<li id={`${prequel.id}`}>
+			<LinkedTooltip
+				content={`<img src="${
+					$settings.displayDataSaver ? prequel.coverImage.medium : prequel.coverImage.extraLarge
+				}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+				pin={`${prequel.id}`}
+				pinPosition="top"
+				disable={!$settings.displayHoverCover}
+			>
+				<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
+					<MediaTitleDisplay title={prequel.title} />
+				</a>
+				<span class="opaque">|</span>
+				{prequel.seen}<span class="opaque">/{prequel.episodes}</span>
+				{@html prequelAiringTime(prequel)}
+			</LinkedTooltip>
+		</li>
+	{/each}
+</ul>
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy/Tool.svelte
index 28db4466..8956e00a 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy/Tool.svelte
@@ -1,19 +1,15 @@
 <script lang="ts">
 	import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
 	import { prequels, type MediaPrequel } from '$lib/Data/AniList/prequels';
-	import MediaTitle from '$lib/List/MediaTitleDisplay.svelte';
 	import { onMount } from 'svelte';
-	import { clearAllParameters, parseOrDefault } from '../Utility/parameters';
-	import { airingTime } from '$lib/Media/Anime/Airing/time';
-	import type { Media } from '$lib/Data/AniList/media';
+	import { clearAllParameters, parseOrDefault } from '../../Utility/parameters';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { season as getSeason } from '$lib/Media/Anime/season';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import identity from '$stores/identity';
 	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
-	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
-	import settings from '$stores/settings';
+	import Prequels from './Prequels.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -36,9 +32,6 @@
 	}
 
 	onMount(() => clearAllParameters(['year', 'season']));
-
-	const prequelAiringTime = (prequel: MediaPrequel) =>
-		airingTime(prequel as unknown as Media, null, false, true);
 </script>
 
 {#if user === undefined || $identity.id === -2}
@@ -58,29 +51,7 @@
 		{#await currentPrequels}
 			<Skeleton card={false} count={5} height="0.9rem" list />
 		{:then currentPrequels}
-			<ul>
-				{#each currentPrequels.sort((a, b) => new Date(a.startDate.year, a.startDate.month - 1, a.startDate.day).getTime() - new Date(b.startDate.year, b.startDate.month - 1, b.startDate.day).getTime()) as prequel}
-					<li id={`${prequel.id}`}>
-						<LinkedTooltip
-							content={`<img src="${
-								$settings.displayDataSaver
-									? prequel.coverImage.medium
-									: prequel.coverImage.extraLarge
-							}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-							pin={`${prequel.id}`}
-							pinPosition="top"
-							disable={!$settings.displayHoverCover}
-						>
-							<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
-								<MediaTitle title={prequel.title} />
-							</a>
-							<span class="opaque">|</span>
-							{prequel.seen}<span class="opaque">/{prequel.episodes}</span>
-							{@html prequelAiringTime(prequel)}
-						</LinkedTooltip>
-					</li>
-				{/each}
-			</ul>
+			<Prequels {currentPrequels} />
 		{/await}
 
 		<p />
diff --git a/src/routes/tools/[tool]/+page.svelte b/src/routes/tools/[tool]/+page.svelte
index 8d9d4ba5..3749c096 100644
--- a/src/routes/tools/[tool]/+page.svelte
+++ b/src/routes/tools/[tool]/+page.svelte
@@ -5,7 +5,7 @@
 	import Wrapped from '$lib/Tools/Wrapped/Tool.svelte';
 	import EpisodeDiscussionCollector from '$lib/Tools/EpisodeDiscussionCollector.svelte';
 	import CharacterBirthdays from '$lib/Tools/Birthdays.svelte';
-	import SequelSpy from '$lib/Tools/SequelSpy.svelte';
+	import SequelSpy from '$lib/Tools/SequelSpy/Tool.svelte';
 	import { closest } from '$lib/Error/path';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import RandomFollower from '$lib/Tools/RandomFollower.svelte';