refactor anime page to use song entry component

src/lib/db/client-db/queries.ts

@@ -112,7 +112,7 @@ export async function getAnimeWithSongsByAnnId(db: ClientDb, annId: number) {
 		.orderBy(desc(animeSongLinks.type), desc(animeSongLinks.number));
 
 	return {
-		anime,
+		anime: foundAnime,
 		songs: rows.map((r) => ({
 			annSongId: r.annSongId,
 			type: r.type,

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 { db as clientDb } from "$lib/db/client-db";
-	import { getAnimeWithSongsByAnnId } from "$lib/db/client-db/queries";
 	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");
+	// If SSR returned null (because client DB wasn't available),
-	let error = $state<string | null>(null);
+	// re-run load on the client once the DB is ready by invalidating.
+	onMount(() => {
+		if (data.animeWithSongs) return;
 
-	type Data = Awaited<ReturnType<typeof getAnimeWithSongsByAnnId>>;
+		// Invalid route param -> nothing to hydrate
-	let data = $state<NonNullable<Data> | null>(null);
+		if (!data.annId) return;
 
-	function parseAnnId(value: string | null): number | null {
+		if (clientDb) {
-		if (!value) return null;
+			void invalidate("clientdb:songs");
-		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";
 			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"}
+{#if !clientDb}
-	<p class="mt-3 text-sm text-muted-foreground">Loading anime…</p>
+	<p class="mt-3 text-sm text-muted-foreground">Loading DB...</p>
-{:else if status === "error"}
+{/if}
-	<p class="mt-3 text-sm text-red-600">Error: {error}</p>
+
-{:else if status === "not-found"}
+{#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
+			{data.animeWithSongs.anime.year}{seasonName(
-				.anime.annId} • MAL {data.anime.malId}
+				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}

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

@@ -0,0 +1,53 @@
+import { z } from "zod";
+// Import client-db index directly.
+// On the server, `db` will be null (because `browser` is false in that module).
+import { db, ensureSeeded } from "$lib/db/client-db";
+import { getAnimeWithSongsByAnnId } from "$lib/db/client-db/queries";
+import type { PageLoad } from "./$types";
+
+const ParamsSchema = z
+	.object({
+		annId: z.coerce.number().int().positive(),
+	})
+	.strict();
+
+export const load: PageLoad = async ({ params, fetch, depends }) => {
+	depends("clientdb:anime");
+	depends("clientdb:songs");
+
+	const parsed = ParamsSchema.safeParse(params);
+
+	// Always return a stable hydration-friendly shape.
+	// (`+page.svelte` can decide how to show not-found/error states.)
+	if (!parsed.success) {
+		return {
+			annId: null as number | null,
+			animeWithSongs: null as Awaited<
+				ReturnType<typeof getAnimeWithSongsByAnnId>
+			> | null,
+		};
+	}
+
+	const annId = parsed.data.annId;
+
+	// Client-only DB: on the server `db` is null.
+	// Return null here and let the page re-run `load()` in the browser after hydration
+	// (see `invalidate(...)` pattern used in `/list`).
+	if (!db) {
+		return {
+			annId,
+			animeWithSongs: null as Awaited<
+				ReturnType<typeof getAnimeWithSongsByAnnId>
+			> | null,
+		};
+	}
+
+	await ensureSeeded({ fetch });
+
+	const animeWithSongs = await getAnimeWithSongsByAnnId(db, annId);
+
+	return {
+		annId,
+		animeWithSongs,
+	};
+};