success pt. 3

src/routes/+page.svelte

@@ -1,18 +1,12 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import { getAnimeList } from "$lib/db/client-amq";
-
-	type AnimeListItem = {
-		annId: number;
-		mainName: string;
-		year: number;
-		seasonId: number;
-		malId: number;
-	};
+	import { db, ensureSeeded, getAnimeList } from "$lib/db/client-db";
 
 	let status = $state<"idle" | "loading" | "ready" | "error">("idle");
 	let error = $state<string | null>(null);
-	let anime = $state<AnimeListItem[]>([]);
+
+	type AnimeItem = Awaited<ReturnType<typeof getAnimeList>>[number];
+	let anime = $state<AnimeItem[]>([]);
 
 	onMount(() => {
 		(async () => {
@@ -20,7 +14,8 @@
 			error = null;
 
 			try {
-				anime = await getAnimeList(20);
+				await ensureSeeded();
+				anime = await getAnimeList(db, 20);
 				status = "ready";
 			} catch (e) {
 				error = e instanceof Error ? e.message : String(e);
@@ -30,7 +25,6 @@
 	});
 
 	function seasonName(seasonId: number) {
-		// matches your Season enum mapping (0..3)
 		switch (seasonId) {
 			case 0:
 				return "Winter";
@@ -51,13 +45,9 @@
 {#if status === "loading"}
 	<p class="mt-3 text-sm text-muted-foreground">Loading client database…</p>
 {:else if status === "error"}
-	<p class="mt-3 text-sm text-red-600">
-		Error: {error}
-	</p>
+	<p class="mt-3 text-sm text-red-600">Error: {error}</p>
 {:else if status === "ready"}
-	<p class="mt-3 text-sm text-muted-foreground">
-		Showing {anime.length} anime
-	</p>
+	<p class="mt-3 text-sm text-muted-foreground">Showing {anime.length} anime</p>
 
 	<ul class="mt-4 space-y-2">
 		{#each anime as a (a.annId)}