songs add single song type to filters

bun.lock

@@ -7,7 +7,7 @@
       "devDependencies": {
         "@biomejs/biome": "^2.3.14",
         "@internationalized/date": "^3.10.0",
-        "@lucide/svelte": "^0.563.1",
+        "@lucide/svelte": "^0.561.0",
         "@sveltejs/adapter-auto": "^7.0.0",
         "@sveltejs/adapter-cloudflare": "^7.2.6",
         "@sveltejs/kit": "^2.50.1",
@@ -200,7 +200,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
-    "@lucide/svelte": ["@lucide/svelte@0.563.1", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-Kt+MbnE5D9RsuI/csmf7M+HWxALe57x3A0DhQ8pPnnUpneh7zuldrYjlT+veWtk+tVnp5doQtaAAxLujzIlhBw=="],
+    "@lucide/svelte": ["@lucide/svelte@0.561.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-vofKV2UFVrKE6I4ewKJ3dfCXSV6iP6nWVmiM83MLjsU91EeJcEg7LoWUABLp/aOTxj1HQNbJD1f3g3L0JQgH9A=="],
 
     "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
 

package.json

@@ -18,7 +18,7 @@
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.14",
 		"@internationalized/date": "^3.10.0",
-		"@lucide/svelte": "^0.563.1",
+		"@lucide/svelte": "^0.561.0",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.6",
 		"@sveltejs/kit": "^2.50.1",

src/lib/components/ui/native-select/index.ts

@@ -0,0 +1,12 @@
+import Root from "./native-select.svelte";
+import Option from "./native-select-option.svelte";
+import OptGroup from "./native-select-opt-group.svelte";
+
+export {
+	Root,
+	Option,
+	OptGroup,
+	Root as NativeSelect,
+	Option as NativeSelectOption,
+	OptGroup as NativeSelectOptGroup,
+};

src/lib/components/ui/native-select/native-select-opt-group.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLOptgroupAttributes } from "svelte/elements";
+	import type { WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptgroupAttributes> = $props();
+</script>
+
+<optgroup bind:this={ref} data-slot="native-select-opt-group" {...restProps}>
+	{@render children?.()}
+</optgroup>

src/lib/components/ui/native-select/native-select-option.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLOptionAttributes } from "svelte/elements";
+	import type { WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptionAttributes> = $props();
+</script>
+
+<option bind:this={ref} data-slot="native-select-option" {...restProps}>
+	{@render children?.()}
+</option>

src/lib/components/ui/native-select/native-select.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLSelectAttributes> = $props();
+</script>
+
+<div
+	class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+	data-slot="native-select-wrapper"
+>
+	<select
+		bind:value
+		bind:this={ref}
+		data-slot="native-select"
+		class={cn(
+			"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pe-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</select>
+	<ChevronDownIcon
+		class="text-muted-foreground pointer-events-none absolute end-3.5 top-1/2 size-4 -translate-y-1/2 opacity-50 select-none"
+		aria-hidden="true"
+		data-slot="native-select-icon"
+	/>
+</div>

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),
 });