songs page refactor schema

src/routes/songs/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { useSearchParams } from "runed/kit";
 	import { onMount } from "svelte";
-	import { z } from "zod";
 	import { browser } from "$app/environment";
 	import { invalidate } from "$app/navigation";
 	import SongEntry from "$lib/components/SongEntry.svelte";
@@ -10,30 +9,9 @@
 	import { trackFromSongRow } from "$lib/player/types";
 	import { SongCategoryMap, SongTypeReverseMap } from "$lib/utils/amq";
 	import type { PageData } from "./$types";
+	import { type SvelteSearchForm, SvelteSearchParamsSchema } from "./schema";
 
-	// Zod schema for URL search parameters to ensure type safety and parsing
-	const SongsSearchSchema = z
-		.object({
-			q: z.string().default(""), // song name
-			artist: z.string().default(""), // artist name
-			anime: z.string().default(""), // anime mainName
-			type: z.array(z.string()).default([]), // song type (e.g., "OP", "ED", "INS")
-			gpm: z
-				.string()
-				.optional()
-				.transform((s) => (s ? parseInt(s, 10) : undefined)), // global percent min
-			gpx: z
-				.string()
-				.optional()
-				.transform((s) => (s ? parseInt(s, 10) : undefined)), // global percent max
-			cat: z
-				.string()
-				.optional()
-				.transform((s) => (s ? parseInt(s, 10) : undefined)), // category
-		})
-		.strict();
-
-	const params = useSearchParams(SongsSearchSchema, {
+	const params = useSearchParams(SvelteSearchParamsSchema, {
 		pushHistory: false,
 		showDefaults: false,
 	});
@@ -41,7 +19,7 @@
 	let { data }: { data: PageData } = $props();
 
 	// Local form values, bound to inputs, which will update params.
-	let form = $state({
+	let form: SvelteSearchForm = $state({
 		q: params.q,
 		artist: params.artist,
 		anime: params.anime,
@@ -274,7 +252,7 @@
 	<h2 class="mt-6 text-lg font-semibold">Songs</h2>
 
 	<ul class="mt-3 space-y-2">
-		{#each data.songRows as r (String(r.annSongId) + "-" + String(r.animeAnnId) + "-" + String(r.type) + "-" + String(r.number))}
+		{#each data.songRows as r (r.annSongId)}
 			<li>
 				<SongEntry
 					annSongId={r.annSongId}