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

big buttons

Browse Source
This commit is contained in:
Yura
2026-02-06 04:53:34 -08:00
parent d0efb3549b
commit 82714100e4
3 changed files with 65 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/lib/components/GlobalPlayer.svelte
View File

@@ -54,6 +54,8 @@
X,
} from "@lucide/svelte";
const iconClass = "icon-btn";
let audioEl: HTMLAudioElement | null = null;
// Best-effort preload of the upcoming track's URL
@@ -468,16 +470,16 @@
>
<div class="mx-auto flex max-w-4xl items-center gap-2 px-3 py-2">
<button
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
onclick={() => toggleUiOpen()}
aria-label={snap.uiOpen ? "Close player" : "Open player"}
title={snap.uiOpen ? "Close player" : "Open player"}
>
{#if snap.uiOpen}
<X class="h-4 w-4" />
<X class={iconClass} />
{:else}
<ChevronsUpDown class="h-4 w-4" />
<ChevronsUpDown class={iconClass} />
{/if}
</button>
@@ -549,7 +551,7 @@
</div>
<button
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
disabled={!canPrev}
aria-label="Previous"
@@ -559,11 +561,11 @@
void syncAndAutoplay();
}}
>
<SkipBack class="h-4 w-4" />
<SkipBack class={iconClass} />
</button>
<button
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
aria-label={isPlaying ? "Pause" : "Play"}
title={isPlaying ? "Pause" : "Play"}
@@ -575,14 +577,14 @@
disabled={!snap.currentTrack}
>
{#if isPlaying}
<PauseIcon class="h-4 w-4" />
<PauseIcon class={iconClass} />
{:else}
<PlayIcon class="h-4 w-4" />
<PlayIcon class={iconClass} />
{/if}
</button>
<button
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
disabled={!canNext}
aria-label="Next"
@@ -592,7 +594,7 @@
void syncAndAutoplay();
}}
>
<SkipForward class="h-4 w-4" />
<SkipForward class={iconClass} />
</button>
</div>
@@ -603,7 +605,7 @@
<div class="flex flex-wrap items-center gap-2 pb-3">
<button
class={[
"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
"btn-icon transition-colors",
snap.shuffleEnabled &&
"border-primary/40 bg-primary/10 text-primary",
]
@@ -614,11 +616,11 @@
aria-label={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
title={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
>
<Shuffle class="h-4 w-4" />
<Shuffle class={iconClass} />
</button>
<button
class={[
"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
"btn-icon transition-colors",
snap.wrapEnabled &&
"border-primary/40 bg-primary/10 text-primary",
]
@@ -629,18 +631,18 @@
aria-label={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
title={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
>
<Repeat class="h-4 w-4" />
<Repeat class={iconClass} />
</button>
<AlertDialog.Root bind:open={clearQueueDialogOpen}>
<AlertDialog.Trigger
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
disabled={snap.queue.length === 0}
aria-label="Clear queue"
title="Clear queue"
>
<Trash2 class="h-4 w-4" />
<Trash2 class={iconClass} />
</AlertDialog.Trigger>
<AlertDialog.Content>
@@ -667,7 +669,7 @@
<label class="ml-auto flex items-center gap-2 text-sm">
<span class="text-muted-foreground" aria-hidden="true">
<Volume2 class="h-4 w-4" />
<Volume2 class={iconClass} />
</span>
<span class="sr-only">Volume</span>
<input
@@ -737,13 +739,13 @@
</button>
<button
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
onclick={() => removeTrack(item.track.id)}
aria-label="Remove from queue"
title="Remove from queue"
>
<ListX class="h-4 w-4" />
<ListX class={iconClass} />
</button>
</li>
{/each}
@@ -795,16 +797,16 @@
</div>
<button
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
onclick={() => toggleUiOpen()}
aria-label={snap.uiOpen ? "Hide player sidebar" : "Show player sidebar"}
title={snap.uiOpen ? "Hide player sidebar" : "Show player sidebar"}
>
{#if snap.uiOpen}
<PanelRightClose class="h-4 w-4" />
<PanelRightClose class={iconClass} />
{:else}
<PanelRightOpen class="h-4 w-4" />
<PanelRightOpen class={iconClass} />
{/if}
</button>
</div>
@@ -819,7 +821,7 @@
<div class="flex items-center gap-2">
<button
class={[
"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
"btn-icon transition-colors",
snap.shuffleEnabled &&
"border-primary/40 bg-primary/10 text-primary",
]
@@ -830,11 +832,11 @@
aria-label={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
title={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
>
<Shuffle class="h-4 w-4" />
<Shuffle class={iconClass} />
</button>
<button
class={[
"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
"btn-icon transition-colors",
snap.wrapEnabled &&
"border-primary/40 bg-primary/10 text-primary",
]
@@ -845,18 +847,18 @@
aria-label={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
title={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
>
<Repeat class="h-4 w-4" />
<Repeat class={iconClass} />
</button>
<AlertDialog.Root bind:open={clearQueueDialogOpen}>
<AlertDialog.Trigger
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
disabled={snap.queue.length === 0}
aria-label="Clear queue"
title="Clear queue"
>
<Trash2 class="h-4 w-4" />
<Trash2 class={iconClass} />
</AlertDialog.Trigger>
<AlertDialog.Content>
@@ -898,7 +900,7 @@
<div class="flex items-center gap-2">
<button
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
disabled={!canPrev}
aria-label="Previous"
@@ -908,11 +910,11 @@
void syncAndAutoplay();
}}
>
<SkipBack class="h-4 w-4" />
<SkipBack class={iconClass} />
</button>
<button
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
aria-label={isPlaying ? "Pause" : "Play"}
title={isPlaying ? "Pause" : "Play"}
@@ -924,14 +926,14 @@
disabled={!snap.currentTrack}
>
{#if isPlaying}
<PauseIcon class="h-4 w-4" />
<PauseIcon class={iconClass} />
{:else}
<PlayIcon class="h-4 w-4" />
<PlayIcon class={iconClass} />
{/if}
</button>
<button
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
disabled={!canNext}
aria-label="Next"
@@ -941,12 +943,12 @@
void syncAndAutoplay();
}}
>
<SkipForward class="h-4 w-4" />
<SkipForward class={iconClass} />
</button>
<label class="ml-auto flex items-center gap-2 text-sm">
<span class="text-muted-foreground" aria-hidden="true">
<Volume2 class="h-4 w-4" />
<Volume2 class={iconClass} />
</span>
<span class="sr-only">Volume</span>
<input
@@ -1010,13 +1012,13 @@
</button>
<button
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
type="button"
onclick={() => removeTrack(item.track.id)}
aria-label="Remove from queue"
title="Remove from queue"
>
<ListX class="h-4 w-4" />
<ListX class={iconClass} />
</button>
</li>
{/each}

16
src/lib/components/SongEntry.svelte
View File

@@ -83,7 +83,7 @@
<div class="mt-2 flex flex-wrap items-center gap-2">
<button
type="button"
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
disabled={!track}
title="Play"
aria-label="Play"
@@ -93,12 +93,12 @@
requestGlobalAutoplay();
}}
>
<PlayIcon class="h-4 w-4" />
<PlayIcon class="icon-btn" />
</button>
<button
type="button"
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
disabled={!track}
title="Play next"
aria-label="Play next"
@@ -108,12 +108,12 @@
requestGlobalAutoplay();
}}
>
<SkipForward class="h-4 w-4" />
<SkipForward class="icon-btn" />
</button>
<button
type="button"
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
disabled={!track}
title="Add to queue"
aria-label="Add to queue"
@@ -122,18 +122,18 @@
addToQueue(track);
}}
>
<ListPlus class="h-4 w-4" />
<ListPlus class="icon-btn" />
</button>
{#if isQueued}
<button
type="button"
class="inline-flex h-8 w-8 items-center justify-center rounded border"
class="btn-icon"
title="Remove from queue"
aria-label="Remove from queue"
onclick={() => removeTrack(annSongId)}
>
<Trash2 class="h-4 w-4" />
<Trash2 class="icon-btn" />
</button>
<span class="text-xs text-muted-foreground">Queued</span>

17
src/routes/layout.css
View File

@@ -118,3 +118,20 @@
@apply bg-background text-foreground;
}
}
@layer utilities {
/* Reusable icon sizing utility for Lucide (and similar) icons */
.icon-btn {
@apply h-6 w-6;
}
/* Shared sizing/style for icon buttons (hit area). Use alongside `.icon-btn`. */
.btn-icon {
@apply inline-flex h-10 w-10 items-center justify-center rounded border;
}
/* Optional variant: slightly smaller icon button */
.btn-icon-sm {
@apply inline-flex h-8 w-8 items-center justify-center rounded border;
}
}