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

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">