refactor songs page to use shadcn

src/lib/components/ui/input/index.ts

@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};

src/lib/components/ui/input/input.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "input",
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
+			"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
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"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
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}

src/lib/components/ui/label/index.ts

@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};

src/lib/components/ui/label/label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+/>

src/routes/songs/+page.svelte

@@ -4,6 +4,9 @@
 	import { browser } from "$app/environment";
 	import { invalidate } from "$app/navigation";
 	import SongEntry from "$lib/components/SongEntry.svelte";
+	import { Button } from "$lib/components/ui/button";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
 	import { db as clientDb } from "$lib/db/client-db";
 	import { addAllToQueue, playAllNext } from "$lib/player/player.svelte";
 	import { trackFromSongRow } from "$lib/player/types";
@@ -61,12 +64,9 @@
 <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"
+			<Label for="anime-name">Anime Name</Label>
-				>Anime Name</label
+			<Input
-			>
-			<input
 				id="anime-name"
-				class="rounded border px-3 py-2 text-sm"
 				placeholder="e.g. Bakemonogatari"
 				bind:value={params.anime}
 				autocomplete="off"
@@ -74,12 +74,9 @@
 			/>
 		</div>
 		<div class="flex flex-col gap-2">
-			<label class="text-sm text-muted-foreground" for="song-name"
+			<Label for="song-name">Song Name</Label>
-				>Song Name</label
+			<Input
-			>
-			<input
 				id="song-name"
-				class="rounded border px-3 py-2 text-sm"
 				placeholder="e.g. Renai Circulation"
 				bind:value={params.song}
 				autocomplete="off"
@@ -88,12 +85,9 @@
 		</div>
 
 		<div class="flex flex-col gap-2">
-			<label class="text-sm text-muted-foreground" for="artist-name"
+			<Label for="artist-name">Artist Name</Label>
-				>Artist Name</label
+			<Input
-			>
-			<input
 				id="artist-name"
-				class="rounded border px-3 py-2 text-sm"
 				placeholder="e.g. Kana Hanazawa"
 				bind:value={params.artist}
 				autocomplete="off"
@@ -102,25 +96,23 @@
 		</div>
 
 		<div class="flex flex-col gap-2">
-			<label class="text-sm text-muted-foreground" for="global-percent-min"
+			<Label for="global-percent-min">Global Percent Range</Label>
-				>Global Percent Range</label
-			>
 			<div class="flex gap-2">
-				<input
+				<Input
 					id="global-percent-min"
 					type="number"
 					min="0"
 					max="100"
-					class="rounded border px-3 py-2 text-sm w-1/2"
+					class="w-1/2"
 					placeholder="Min (0-100)"
 					bind:value={params.gpm}
 				/>
-				<input
+				<Input
 					id="global-percent-max"
 					type="number"
 					min="0"
 					max="100"
-					class="rounded border px-3 py-2 text-sm w-1/2"
+					class="w-1/2"
 					placeholder="Max (0-100)"
 					bind:value={params.gpx}
 				/>
@@ -131,23 +123,23 @@
 
 {#if data.songRows.length > 0}
 	<div class="mt-6 flex flex-wrap gap-2">
-		<button
+		<Button
-			type="button"
+			variant="outline"
-			class="rounded border px-3 py-2 text-sm"
+			class="cursor-pointer"
 			onclick={() => addAllToQueue(tracksFromResults)}
 			disabled={tracksFromResults.length === 0}
 		>
 			Add all to queue
-		</button>
+		</Button>
 
-		<button
+		<Button
-			type="button"
+			variant="outline"
-			class="rounded border px-3 py-2 text-sm"
+			class="cursor-pointer"
 			onclick={() => playAllNext(tracksFromResults)}
 			disabled={tracksFromResults.length === 0}
 		>
 			Play all next
-		</button>
+		</Button>
 
 		{#if tracksFromResults.length !== data.songRows.length}
 			<span class="self-center text-sm text-muted-foreground">