CaZzzer/amqtrain
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor songs page to use shadcn

Browse Source
This commit is contained in:
Yura
2026-02-06 11:01:48 -08:00
parent 70d53b2d83
commit f3371e386a
5 changed files with 108 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/components/ui/input/index.ts Normal file
View File

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

52
src/lib/components/ui/input/input.svelte Normal file
View File

@@ -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}

7
src/lib/components/ui/label/index.ts Normal file
View File

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

20
src/lib/components/ui/label/label.svelte Normal file
View File

@@ -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}
/>

52
src/routes/songs/+page.svelte
View File

@@ -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"
>Anime Name</label
>
<input
<Label 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"
@@ -74,12 +74,9 @@
/>
</div>
<div class="flex flex-col gap-2">
<label class="text-sm text-muted-foreground" for="song-name"
>Song Name</label
>
<input
<Label for="song-name">Song Name</Label>
<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"
>Artist Name</label
>
<input
<Label for="artist-name">Artist Name</Label>
<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"
>Global Percent Range</label
>
<Label for="global-percent-min">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
type="button"
class="rounded border px-3 py-2 text-sm"
<Button
variant="outline"
class="cursor-pointer"
onclick={() => addAllToQueue(tracksFromResults)}
disabled={tracksFromResults.length === 0}
>
Add all to queue
</button>
</Button>
<button
type="button"
class="rounded border px-3 py-2 text-sm"
<Button
variant="outline"
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">