songs add single song type to filters

src/routes/songs/+page.svelte

@@ -7,6 +7,10 @@
 	import { Button } from "$lib/components/ui/button";
 	import { Input } from "$lib/components/ui/input";
 	import { Label } from "$lib/components/ui/label";
+	import {
+		NativeSelect,
+		NativeSelectOption,
+	} from "$lib/components/ui/native-select";
 	import { db as clientDb } from "$lib/db/client-db";
 	import { addAllToQueue, playAllNext } from "$lib/player/player.svelte";
 	import { trackFromSongRow } from "$lib/player/types";
@@ -118,6 +122,15 @@
 				/>
 			</div>
 		</div>
+		<div class="flex flex-col gap-2">
+			<Label for="song-type">Song Type</Label>
+			<NativeSelect id="song-type" bind:value={params.songType}>
+				<NativeSelectOption value="0">All</NativeSelectOption>
+				<NativeSelectOption value="1">OP</NativeSelectOption>
+				<NativeSelectOption value="2">ED</NativeSelectOption>
+				<NativeSelectOption value="3">INS</NativeSelectOption>
+			</NativeSelect>
+		</div>
 	</div>
 </form>
 

src/routes/songs/+page.ts

@@ -19,6 +19,7 @@ export const load: PageLoad = async ({ url, fetch, depends }) => {
 			filters.globalPercentMin = parsed.data.gpm;
 		if (parsed.data.gpx !== undefined)
 			filters.globalPercentMax = parsed.data.gpx;
+		if (parsed.data.songType) filters.songTypes = [parsed.data.songType];
 	}
 
 	// Client-only DB: on the server `db` is null, so return [] and let hydration re-run load in browser.

src/routes/songs/schema.ts

@@ -6,4 +6,5 @@ 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),
 });