refactor anime page to use song entry component

src/routes/anime/[annId]/+page.svelte

@@ -1,92 +1,64 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import { page } from "$app/state";
+	import { invalidate } from "$app/navigation";
 	import SongEntry from "$lib/components/SongEntry.svelte";
-	import { ensureSeeded, getClientDb } from "$lib/db/client-db";
-	import { getAnimeWithSongsByAnnId } from "$lib/db/client-db/queries";
+	import { db as clientDb } from "$lib/db/client-db";
 	import { seasonName } from "$lib/utils/amq";
+	import type { PageData } from "./$types";
 
-	type PageStatus = "idle" | "loading" | "ready" | "not-found" | "error";
+	let { data }: { data: PageData } = $props();
 
-	let status = $state<PageStatus>("idle");
-	let error = $state<string | null>(null);
+	// If SSR returned null (because client DB wasn't available),
+	// re-run load on the client once the DB is ready by invalidating.
+	onMount(() => {
+		if (data.animeWithSongs) return;
 
-	type Data = Awaited<ReturnType<typeof getAnimeWithSongsByAnnId>>;
-	let data = $state<NonNullable<Data> | null>(null);
+		// Invalid route param -> nothing to hydrate
+		if (!data.annId) return;
 
-	function parseAnnId(value: string | null): number | null {
-		if (!value) return null;
-		const n = Number(value);
-		if (!Number.isInteger(n) || n <= 0) return null;
-		return n;
-	}
-
-	async function load() {
-		status = "loading";
-		error = null;
-		data = null;
-
-		const annId = parseAnnId(page.params.annId ?? null);
-		if (!annId) {
-			status = "not-found";
+		if (clientDb) {
+			void invalidate("clientdb:songs");
 			return;
 		}
-
-		try {
-			const { db } = getClientDb();
-			await ensureSeeded();
-			const res = await getAnimeWithSongsByAnnId(db, annId);
-
-			if (!res) {
-				status = "not-found";
-				return;
-			}
-
-			data = res;
-			status = "ready";
-		} catch (e) {
-			error = e instanceof Error ? e.message : String(e);
-			status = "error";
-		}
-	}
-
-	onMount(() => {
-		void load();
 	});
 </script>
 
-{#if status === "loading"}
-	<p class="mt-3 text-sm text-muted-foreground">Loading anime…</p>
-{:else if status === "error"}
-	<p class="mt-3 text-sm text-red-600">Error: {error}</p>
-{:else if status === "not-found"}
+{#if !clientDb}
+	<p class="mt-3 text-sm text-muted-foreground">Loading DB...</p>
+{/if}
+
+{#if !data.annId}
 	<h1 class="text-2xl font-semibold">Anime not found</h1>
 	<p class="mt-2 text-sm text-muted-foreground">
 		The requested anime entry doesn’t exist (or the route param wasn’t a valid
 		ANN id).
 	</p>
-{:else if status === "ready" && data}
+{:else if !data.animeWithSongs}
+	<p class="mt-3 text-sm text-muted-foreground">Loading anime…</p>
+{:else}
 	<header class="mt-2 space-y-1">
-		<h1 class="text-2xl font-semibold">{data.anime.mainName}</h1>
+		<h1 class="text-2xl font-semibold">{data.animeWithSongs.anime.mainName}</h1>
 		<p class="text-sm text-muted-foreground">
-			{data.anime.year}{seasonName(Number(data.anime.seasonId))} • ANN {data
-				.anime.annId} • MAL {data.anime.malId}
+			{data.animeWithSongs.anime.year}{seasonName(
+				Number(data.animeWithSongs.anime.seasonId),
+			)} • ANN {data.animeWithSongs.anime.annId} • MAL {data.animeWithSongs
+				.anime.malId}
 		</p>
 	</header>
 
 	<section class="mt-6">
 		<h2 class="text-lg font-semibold">Songs</h2>
 
-		{#if data.songs.length === 0}
+		{#if data.animeWithSongs.songs.length === 0}
 			<p class="mt-2 text-sm text-muted-foreground">
 				No linked songs found for this anime.
 			</p>
 		{:else}
 			<ul class="mt-3 space-y-3">
-				{#each data.songs as s (s.annSongId)}
+				{#each data.animeWithSongs.songs as s (s.annSongId)}
 					<li>
 						<SongEntry
-							animeName={data.anime.mainName}
+							animeName={data.animeWithSongs.anime.mainName}
 							type={s.type}
 							number={s.number}
 							songName={s.songName}