song type schema stuff

src/routes/songs/+page.svelte

@@ -15,9 +15,9 @@
 	import { addAllToQueue, playAllNext } from "$lib/player/player.svelte";
 	import { trackFromSongRow } from "$lib/player/types";
 	import type { PageData } from "./$types";
-	import { SearchParamsSchema } from "./schema";
+	import { SearchParamsSchemaClient } from "./schema";
 
-	const params = useSearchParams(SearchParamsSchema, {
+	const params = useSearchParams(SearchParamsSchemaClient, {
 		pushHistory: false,
 		showDefaults: false,
 	});
@@ -135,7 +135,8 @@
 </form>
 
 {#if data.songRows.length > 0}
-	<div class="mt-6 flex flex-wrap gap-2">
+	<div class="mt-6 flex flex-col gap-2">
+		<div class="flex flex-wrap gap-2">
 			<Button
 				variant="outline"
 				class="cursor-pointer"
@@ -161,9 +162,12 @@
 			{/if}
 		</div>
 
-	<h2 class="mt-6 text-lg font-semibold">Songs</h2>
+		<div class="flex items-center gap-4">
+			<h2 class="text-lg font-semibold">Songs</h2>
+			<span>{data.songRows.length}</span>
+		</div>
 
-	<ul class="mt-3 space-y-2">
+		<ul class="space-y-2">
 			{#each data.songRows as r (r.annSongId)}
 				<li>
 					<SongEntry
@@ -178,6 +182,7 @@
 				</li>
 			{/each}
 		</ul>
+	</div>
 {: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.

src/routes/songs/+page.ts

@@ -1,12 +1,12 @@
 import type { SongFilters } from "$lib/db/client-db";
 import { db, ensureSeeded, getSongsWithFilters } from "$lib/db/client-db";
 import type { PageLoad } from "./$types";
-import { SearchParamsSchema } from "./schema";
+import { SearchParamsSchemaServer } from "./schema";
 
 export const load: PageLoad = async ({ url, fetch, depends }) => {
 	depends("clientdb:songs");
 
-	const parsed = SearchParamsSchema.safeParse(
+	const parsed = SearchParamsSchemaServer.safeParse(
 		Object.fromEntries(url.searchParams.entries()),
 	);
 

src/routes/songs/schema.ts

@@ -6,5 +6,12 @@ export const SearchParamsSchema = z.object({
 	anime: z.string().optional().default(""),
 	gpm: z.coerce.number().int().optional().default(0),
 	gpx: z.coerce.number().int().optional().default(100),
-	songType: z.coerce.number().int().optional().default(0),
+});
+
+export const SearchParamsSchemaClient = SearchParamsSchema.extend({
+	songType: z.string().optional().default("0"),
+});
+
+export const SearchParamsSchemaServer = SearchParamsSchema.extend({
+	songType: z.coerce.number().int().optional(),
 });