From 1c51fd32dbd58971047d548fbd46af468c9d4e82 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Thu, 5 Feb 2026 19:38:20 -0800
Subject: [PATCH] list page pt. 1

---
 src/routes/list/+page.svelte | 340 +++++++++++++++++++++++++++++++++++
 1 file changed, 340 insertions(+)
 create mode 100644 src/routes/list/+page.svelte

diff --git a/src/routes/list/+page.svelte b/src/routes/list/+page.svelte
new file mode 100644
index 0000000..7ff25ee
--- /dev/null
+++ b/src/routes/list/+page.svelte
@@ -0,0 +1,340 @@
+<script lang="ts">
+	import { desc, eq, inArray } from "drizzle-orm";
+	import { Debounced } from "runed";
+	import { useSearchParams } from "runed/kit";
+	import { onMount } from "svelte";
+	import { z } from "zod";
+	import type { ClientDb } from "$lib/db/client-db";
+	import { ensureSeeded, getClientDb } from "$lib/db/client-db";
+	import {
+		anime,
+		animeSongLinks,
+		artists,
+		groups,
+		songs,
+	} from "$lib/db/schema";
+	import {
+		MalAnimeListQuerySchema,
+		MalAnimeListResponseSchema,
+	} from "$lib/types/mal";
+
+	const ListSearchSchema = MalAnimeListQuerySchema.extend({
+		mal: z.string(),
+	}).strict();
+
+	type PageStatus = "idle" | "loading" | "ready" | "error";
+
+	const params = useSearchParams(ListSearchSchema, {
+		pushHistory: false,
+		showDefaults: false,
+	});
+
+	let status = $state<PageStatus>("idle");
+	let error = $state<string | null>(null);
+
+	let isLoadingMal = $state(false);
+	let isLoadingDb = $state(false);
+
+	// Keep MAL calls snappy if you later add more query params; for now it's mostly future-proofing.
+	const debouncedMalUser = new Debounced(() => params.mal, 250);
+
+	type MalListResponse = z.infer<typeof MalAnimeListResponseSchema>;
+	type MalEntry = MalListResponse["data"][number];
+
+	let malResponse = $state<MalListResponse | null>(null);
+	let malEntries = $state<MalEntry[]>([]);
+	let malUsername = $state<string | null>(null);
+
+	type SongRow = Awaited<ReturnType<typeof querySongsForMalAnimeIds>>[number];
+	let songRows = $state<SongRow[]>([]);
+
+	/**
+	 * Fetch MAL animelist (limited to 20 for now).
+	 * Uses zod schema parsing to avoid redefining types.
+	 */
+	async function fetchMalAnimeList(username: string) {
+		const u = username.trim();
+		if (!u) return null;
+
+		// Always limit to 20 for now; we'll add pagination later.
+		const upstream = new URL(
+			`/api/mal/animelist/${encodeURIComponent(u)}`,
+			window.location.origin,
+		);
+
+		// Forward optional query params (status/sort/offset) while forcing limit=20
+		if (params.status) upstream.searchParams.set("status", params.status);
+		if (params.sort) upstream.searchParams.set("sort", params.sort);
+		if (params.offset !== undefined)
+			upstream.searchParams.set("offset", String(params.offset));
+		upstream.searchParams.set("limit", "20");
+
+		const res = await fetch(upstream);
+		if (!res.ok) {
+			const msg =
+				res.status === 404
+					? "MAL user not found"
+					: res.status === 401 || res.status === 403
+						? "MAL auth failed"
+						: `MAL request failed (${res.status})`;
+			throw new Error(msg);
+		}
+
+		const json = await res.json();
+		return MalAnimeListResponseSchema.parse(json);
+	}
+
+	/**
+	 * Client-side DB query:
+	 * Given MAL anime ids, find matching `anime` rows by `anime.malId`,
+	 * then fetch linked songs with artist/group names.
+	 *
+	 * Uses inferred types from the Drizzle select shape; no separate type defs.
+	 */
+	async function querySongsForMalAnimeIds(db: ClientDb, malAnimeIds: number[]) {
+		const ids = malAnimeIds.filter((n) => Number.isFinite(n));
+		if (ids.length === 0) return [];
+
+		// 1) Resolve MAL ids -> AMQ annIds
+		const annRows = await db
+			.select({
+				annId: anime.annId,
+				malId: anime.malId,
+				animeName: anime.mainName,
+				year: anime.year,
+				seasonId: anime.seasonId,
+			})
+			.from(anime)
+			.where(inArray(anime.malId, ids));
+
+		const annIds = annRows.map((r) => r.annId);
+		if (annIds.length === 0) return [];
+
+		// 2) Fetch songs linked to those annIds
+		// Note: we keep the selection explicit for stable inferred return types.
+		return db
+			.select({
+				annId: animeSongLinks.annId,
+				annSongId: animeSongLinks.annSongId,
+				type: animeSongLinks.type,
+				number: animeSongLinks.number,
+
+				songName: songs.name,
+				fileName: songs.fileName,
+
+				artistName: artists.name,
+				groupName: groups.name,
+
+				animeName: anime.mainName,
+				year: anime.year,
+				seasonId: anime.seasonId,
+				malId: anime.malId,
+			})
+			.from(animeSongLinks)
+			.innerJoin(anime, eq(anime.annId, animeSongLinks.annId))
+			.innerJoin(songs, eq(songs.annSongId, animeSongLinks.annSongId))
+			.leftJoin(artists, eq(artists.songArtistId, songs.songArtistId))
+			.leftJoin(groups, eq(groups.songGroupId, songs.songGroupId))
+			.where(inArray(animeSongLinks.annId, annIds))
+			.orderBy(
+				desc(anime.year),
+				desc(anime.seasonId),
+				desc(anime.annId),
+				desc(animeSongLinks.type),
+				desc(animeSongLinks.number),
+			);
+	}
+
+	async function loadAllFor(username: string) {
+		const u = username.trim();
+		if (!u) {
+			malResponse = null;
+			malEntries = [];
+			malUsername = null;
+			songRows = [];
+			return;
+		}
+
+		error = null;
+
+		// MAL fetch
+		isLoadingMal = true;
+		try {
+			const r = await fetchMalAnimeList(u);
+			malResponse = r;
+			malEntries = r?.data ?? [];
+			malUsername = u;
+		} finally {
+			isLoadingMal = false;
+		}
+
+		// DB query
+		isLoadingDb = true;
+		try {
+			await ensureSeeded();
+			const { db } = getClientDb();
+
+			const malIds = (malResponse?.data ?? []).map((e) => e.node.id);
+			songRows = await querySongsForMalAnimeIds(db, malIds);
+		} finally {
+			isLoadingDb = false;
+		}
+	}
+
+	async function loadInitial() {
+		status = "loading";
+		error = null;
+
+		try {
+			await loadAllFor(params.mal);
+			status = "ready";
+		} catch (e) {
+			error = e instanceof Error ? e.message : String(e);
+			status = "error";
+		}
+	}
+
+	onMount(() => {
+		void loadInitial();
+	});
+
+	$effect(() => {
+		if (status !== "ready") return;
+
+		const u = debouncedMalUser.current;
+
+		void (async () => {
+			try {
+				await loadAllFor(u);
+			} catch (e) {
+				error = e instanceof Error ? e.message : String(e);
+				status = "error";
+			}
+		})();
+	});
+
+	function songArtistLabel(r: SongRow) {
+		return r.artistName ?? r.groupName ?? null;
+	}
+
+	function makeMalHref(username: string) {
+		return `https://myanimelist.net/profile/${encodeURIComponent(username)}`;
+	}
+</script>
+
+<h1 class="text-2xl font-semibold">MAL List → Songs</h1>
+
+<p class="mt-2 text-sm text-muted-foreground">
+	Enter a MAL username in the URL as <code class="rounded bg-muted px-1 py-0.5"
+		>/list?mal=USERNAME</code
+	>. This will fetch up to 20 anime from MAL (for now) and then query your local
+	client DB for related songs.
+</p>
+
+{#if status === "loading"}
+	<p class="mt-3 text-sm text-muted-foreground">Loading…</p>
+{:else if status === "error"}
+	<p class="mt-3 text-sm text-red-600">Error: {error}</p>
+{:else if status === "ready"}
+	<div class="mt-4 flex flex-col gap-2">
+		<label class="text-sm text-muted-foreground" for="mal-user"
+			>MAL username</label
+		>
+		<input
+			id="mal-user"
+			class="rounded border px-3 py-2 text-sm"
+			placeholder="e.g. CaZzzer"
+			value={params.mal}
+			oninput={(e) =>
+				(params.mal = (e.currentTarget as HTMLInputElement).value)}
+			autocomplete="off"
+			spellcheck={false}
+		/>
+
+		<div class="text-sm text-muted-foreground">
+			{#if !params.mal.trim()}
+				Waiting for username…
+			{:else}
+				{#if isLoadingMal}
+					Fetching MAL list…
+				{:else}
+					MAL entries: {malEntries.length} (limited to 20)
+				{/if}
+				{" • "}
+				{#if isLoadingDb}
+					Querying songs…
+				{:else}
+					Songs found: {songRows.length}
+				{/if}
+			{/if}
+		</div>
+
+		{#if malUsername}
+			<div class="text-sm">
+				<a
+					class="hover:underline"
+					href={makeMalHref(malUsername)}
+					target="_blank"
+					rel="noreferrer"
+				>
+					View {malUsername} on MAL
+				</a>
+			</div>
+		{/if}
+	</div>
+
+	{#if params.mal.trim() && !isLoadingMal && malEntries.length === 0}
+		<p class="mt-4 text-sm text-muted-foreground">
+			No anime returned from MAL (did you set a restrictive status/sort?).
+		</p>
+	{/if}
+
+	{#if params.mal.trim() && !isLoadingDb && malEntries.length > 0 && songRows.length === 0}
+		<p class="mt-4 text-sm text-muted-foreground">
+			No songs matched in the local database. This likely means none of the MAL
+			anime IDs exist in the snapshot DB.
+		</p>
+	{/if}
+
+	{#if songRows.length > 0}
+		<h2 class="mt-6 text-lg font-semibold">Songs</h2>
+
+		<ul class="mt-3 space-y-2">
+			{#each songRows as r (String(r.annId) + ":" + String(r.annSongId))}
+				<li class="rounded border px-3 py-2">
+					<div class="font-medium">
+						{r.songName}
+						{#if songArtistLabel(r)}
+							<span class="text-sm text-muted-foreground">
+								— {songArtistLabel(r)}</span
+							>
+						{/if}
+					</div>
+
+					<div class="text-sm text-muted-foreground">
+						{r.animeName} • ANN {r.annId} • MAL {r.malId} • link type {r.type} #{r.number}
+					</div>
+
+					{#if r.fileName}
+						<div class="mt-2 text-sm">
+							<a
+								class="hover:underline"
+								href={"https://nawdist.animemusicquiz.com/" + r.fileName}
+								target="_blank"
+								rel="noreferrer"
+							>
+								Audio file
+							</a>
+						</div>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if malResponse?.paging?.next}
+		<p class="mt-6 text-sm text-muted-foreground">
+			More results exist on MAL, but pagination is not wired yet.
+		</p>
+	{/if}
+{/if}