feat(SequelCatcher): formatting

4 files changed, 31 insertions, 6 deletions

diff --git a/src/lib/Data/AniList/media.ts b/src/lib/Data/AniList/media.ts
index 3eb26de7..18f2de07 100644
--- a/src/lib/Data/AniList/media.ts
+++ b/src/lib/Data/AniList/media.ts
@@ -162,6 +162,7 @@ const collectionQueryTemplate = (type: Type, userId: number, options: Collection
 								id status episodes
 								title { english romaji }
 								mediaListEntry { status progress }
+								startDate { year }
 								coverImage { extraLarge }
 							}
 						}
diff --git a/src/lib/Data/AniList/prequels.ts b/src/lib/Data/AniList/prequels.ts
index e372500b..0872dc7c 100644
--- a/src/lib/Data/AniList/prequels.ts
+++ b/src/lib/Data/AniList/prequels.ts
@@ -32,6 +32,9 @@ export interface PrequelRelationNode {
 	coverImage: {
 		extraLarge: string;
 	};
+	startDate: {
+		year: number;
+	};
 }
 
 export interface PrequelRelation {
diff --git a/src/lib/Layout/Username.svelte b/src/lib/Layout/Username.svelte
new file mode 100644
index 00000000..23c9de8f
--- /dev/null
+++ b/src/lib/Layout/Username.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let username: string;
+</script>
+
+<a href={`https://anilist.co/user/${username}/`}>@{username}</a>
diff --git a/src/lib/Tools/SequelCatcher.svelte b/src/lib/Tools/SequelCatcher.svelte
index 4f783fab..5d7cf81a 100644
--- a/src/lib/Tools/SequelCatcher.svelte
+++ b/src/lib/Tools/SequelCatcher.svelte
@@ -12,6 +12,7 @@
 	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;
 
@@ -58,7 +59,7 @@
 					(media) => media.mediaListEntry?.status === 'COMPLETED'
 				)}
 
-				<ul>
+				<ol class="media-list">
 					{#each filterRelations(mediaList) as { media, unwatchedRelations }}
 						<a
 							href={outboundLink(media, 'anime', $settings.displayOutboundLinksTo)}
@@ -66,8 +67,11 @@
 						>
 							<MediaTitleDisplay title={media.title} />
 						</a>
+						<span class="opaque">
+							({media.startDate.year})
+						</span>
 
-						<ul>
+						<ol class="unwatched-relations-list">
 							{#each unwatchedRelations as relation}
 								<li>
 									<a
@@ -76,11 +80,14 @@
 									>
 										<MediaTitleDisplay title={relation.node.title} />
 									</a>
+									<span class="opaque">
+										({relation.node.startDate.year})
+									</span>
 								</li>
 							{/each}
-						</ul>
+						</ol>
 					{/each}
-				</ul>
+				</ol>
 			{:else}
 				<Message message="Cross-checking media ..." />
 
@@ -101,8 +108,17 @@
 		<p />
 
 		<blockquote style="margin: 0 0 0 1.5rem;">
-			Thanks to <a href="https://anilist.co/user/sevengirl/">@sevengirl</a> and
-			<a href="https://anilist.co/user/esthereae/">@esthereae</a> for the idea!
+			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>