songs remove complicated params that don't work

src/routes/songs/+page.svelte

@@ -9,26 +9,15 @@
 	import { trackFromSongRow } from "$lib/player/types";
 	import { SongCategoryMap, SongTypeReverseMap } from "$lib/utils/amq";
 	import type { PageData } from "./$types";
-	import { type SvelteSearchForm, SvelteSearchParamsSchema } from "./schema";
+	import { SearchParamsSchema } from "./schema";
 
-	const params = useSearchParams(SvelteSearchParamsSchema, {
+	const params = useSearchParams(SearchParamsSchema, {
 		pushHistory: false,
 		showDefaults: false,
 	});
 
 	let { data }: { data: PageData } = $props();
 
-	// Local form values, bound to inputs, which will update params.
-	let form: SvelteSearchForm = $state({
-		q: params.q,
-		artist: params.artist,
-		anime: params.anime,
-		type: params.type,
-		gpm: params.gpm ?? "",
-		gpx: params.gpx ?? "",
-		cat: params.cat ?? "",
-	});
-
 	// If SSR returned no songRows (because client DB wasn't available),
 	// re-run load on the client once the DB is ready by invalidating.
 	onMount(() => {
@@ -50,11 +39,6 @@
 		return SongTypeReverseMap[type] || `Type ${type}`;
 	}
 
-	// Helper to map song category number back to string for UI display
-	function getSongCategoryLabel(category: number): string {
-		return SongCategoryMap[category] || `Category ${category}`;
-	}
-
 	const tracksFromResults = $derived.by(() =>
 		data.songRows
 			.map((r) =>
@@ -70,27 +54,6 @@
 			)
 			.filter((t) => t !== null),
 	);
-
-	function applyFilters() {
-		params.q = form.q;
-		params.artist = form.artist;
-		params.anime = form.anime;
-		params.type = form.type;
-		// Only set gpm/gpx if they are valid numbers
-		params.gpm = form.gpm !== "" ? String(form.gpm) : undefined;
-		params.gpx = form.gpx !== "" ? String(form.gpx) : undefined;
-		// Only set cat if it's a valid number
-		params.cat = form.cat !== "" ? String(form.cat) : undefined;
-	}
-
-	// Handle checkbox changes for song types
-	function handleSongTypeChange(typeValue: string, isChecked: boolean) {
-		if (isChecked) {
-			form.type = [...form.type, typeValue];
-		} else {
-			form.type = form.type.filter((t) => t !== typeValue);
-		}
-	}
 </script>
 
 <h1 class="text-2xl font-semibold">Songs Search</h1>
@@ -101,14 +64,21 @@
 	{/if}
 </p>
 
-<form
-	class="mt-4 flex flex-col gap-4"
-	onsubmit={(e) => {
-		e.preventDefault();
-		applyFilters();
-	}}
->
+<form class="mt-4 flex flex-col gap-4">
 	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+		<div class="flex flex-col gap-2">
+			<label class="text-sm text-muted-foreground" for="anime-name"
+				>Anime Name</label
+			>
+			<input
+				id="anime-name"
+				class="rounded border px-3 py-2 text-sm"
+				placeholder="e.g. Bakemonogatari"
+				bind:value={params.anime}
+				autocomplete="off"
+				spellcheck={false}
+			/>
+		</div>
 		<div class="flex flex-col gap-2">
 			<label class="text-sm text-muted-foreground" for="song-name"
 				>Song Name</label
@@ -117,7 +87,7 @@
 				id="song-name"
 				class="rounded border px-3 py-2 text-sm"
 				placeholder="e.g. Renai Circulation"
-				bind:value={form.q}
+				bind:value={params.song}
 				autocomplete="off"
 				spellcheck={false}
 			/>
@@ -131,44 +101,12 @@
 				id="artist-name"
 				class="rounded border px-3 py-2 text-sm"
 				placeholder="e.g. Kana Hanazawa"
-				bind:value={form.artist}
+				bind:value={params.artist}
 				autocomplete="off"
 				spellcheck={false}
 			/>
 		</div>
 
-		<div class="flex flex-col gap-2">
-			<label class="text-sm text-muted-foreground" for="anime-name"
-				>Anime Name</label
-			>
-			<input
-				id="anime-name"
-				class="rounded border px-3 py-2 text-sm"
-				placeholder="e.g. Bakemonogatari"
-				bind:value={form.anime}
-				autocomplete="off"
-				spellcheck={false}
-			/>
-		</div>
-
-		<div class="flex flex-col gap-2">
-			<label class="text-sm text-muted-foreground">Song Type</label>
-			<div class="flex flex-wrap gap-x-4 gap-y-2">
-				{#each [1, 2, 3] as typeNum}
-					<label class="flex items-center gap-2 text-sm">
-						<input
-							type="checkbox"
-							value={getSongTypeLabel(typeNum)}
-							checked={form.type.includes(getSongTypeLabel(typeNum))}
-							onchange={(e) =>
-								handleSongTypeChange(e.target.value, e.target.checked)}
-						/>
-						{getSongTypeLabel(typeNum)}
-					</label>
-				{/each}
-			</div>
-		</div>
-
 		<div class="flex flex-col gap-2">
 			<label class="text-sm text-muted-foreground" for="global-percent-min"
 				>Global Percent Range</label
@@ -181,7 +119,7 @@
 					max="100"
 					class="rounded border px-3 py-2 text-sm w-1/2"
 					placeholder="Min (0-100)"
-					bind:value={form.gpm}
+					bind:value={params.gpm}
 				/>
 				<input
 					id="global-percent-max"
@@ -190,35 +128,10 @@
 					max="100"
 					class="rounded border px-3 py-2 text-sm w-1/2"
 					placeholder="Max (0-100)"
-					bind:value={form.gpx}
+					bind:value={params.gpx}
 				/>
 			</div>
 		</div>
-
-		<div class="flex flex-col gap-2">
-			<label class="text-sm text-muted-foreground" for="song-category"
-				>Category</label
-			>
-			<select
-				id="song-category"
-				class="rounded border px-3 py-2 text-sm"
-				bind:value={form.cat}
-			>
-				<option value="">All</option>
-				{#each Object.entries(SongCategoryMap) as [key, value]}
-					<option value={key}>{value}</option>
-				{/each}
-			</select>
-		</div>
-	</div>
-
-	<div class="flex justify-start">
-		<button
-			type="submit"
-			class="rounded border px-4 py-2 text-sm bg-blue-500 text-white hover:bg-blue-600"
-		>
-			Search Songs
-		</button>
 	</div>
 </form>
 
@@ -266,7 +179,7 @@
 			</li>
 		{/each}
 	</ul>
-{:else if Object.values(form).some((val) => (Array.isArray(val) && val.length > 0) || (typeof val === "string" && val.trim() !== "") || typeof val === "number")}
+{:else if Object.values(params).some((val) => (Array.isArray(val) && val.length > 0) || (typeof val === "string" && val.trim() !== "") || typeof val === "number")}
 	<p class="mt-4 text-sm text-muted-foreground">
 		No songs found matching your criteria.
 	</p>