more player improvements

src/lib/components/GlobalPlayer.svelte

@@ -19,6 +19,7 @@
 	import { browser } from "$app/environment";
 	import { onDestroy, onMount } from "svelte";
 	import {
+		clearQueue,
 		jumpToTrack,
 		next,
 		nowPlayingLabel,
@@ -47,6 +48,7 @@
 		Shuffle,
 		SkipBack,
 		SkipForward,
+		Trash2,
 		Volume2,
 		X,
 	} from "@lucide/svelte";
@@ -267,6 +269,17 @@
 		void syncAndAutoplay();
 	}
 
+	function onClearQueueRequest() {
+		if (snap.queue.length === 0) return;
+
+		const ok = window.confirm(
+			"Clear the queue? This will remove all queued tracks.",
+		);
+		if (!ok) return;
+
+		clearQueue();
+	}
+
 	function formatTime(seconds: number) {
 		if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
 		const s = Math.floor(seconds);
@@ -596,7 +609,13 @@
 				<div class="mx-auto max-w-4xl space-y-3">
 					<div class="flex flex-wrap items-center gap-2">
 						<button
-							class="inline-flex h-8 w-8 items-center justify-center rounded border"
+							class={[
+								"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
+								snap.shuffleEnabled &&
+									"border-primary/40 bg-primary/10 text-primary",
+							]
+								.filter(Boolean)
+								.join(" ")}
 							type="button"
 							onclick={() => toggleShuffle()}
 							aria-label={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
@@ -605,7 +624,13 @@
 							<Shuffle class="h-4 w-4" />
 						</button>
 						<button
-							class="inline-flex h-8 w-8 items-center justify-center rounded border"
+							class={[
+								"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
+								snap.wrapEnabled &&
+									"border-primary/40 bg-primary/10 text-primary",
+							]
+								.filter(Boolean)
+								.join(" ")}
 							type="button"
 							onclick={() => toggleWrap()}
 							aria-label={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
@@ -614,6 +639,17 @@
 							<Repeat class="h-4 w-4" />
 						</button>
 
+						<button
+							class="inline-flex h-8 w-8 items-center justify-center rounded border"
+							type="button"
+							disabled={snap.queue.length === 0}
+							onclick={onClearQueueRequest}
+							aria-label="Clear queue"
+							title="Clear queue"
+						>
+							<Trash2 class="h-4 w-4" />
+						</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" />
@@ -764,7 +800,13 @@
 					</div>
 					<div class="flex items-center gap-2">
 						<button
-							class="inline-flex h-8 w-8 items-center justify-center rounded border"
+							class={[
+								"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
+								snap.shuffleEnabled &&
+									"border-primary/40 bg-primary/10 text-primary",
+							]
+								.filter(Boolean)
+								.join(" ")}
 							type="button"
 							onclick={() => toggleShuffle()}
 							aria-label={snap.shuffleEnabled ? "Shuffle on" : "Shuffle off"}
@@ -773,7 +815,13 @@
 							<Shuffle class="h-4 w-4" />
 						</button>
 						<button
-							class="inline-flex h-8 w-8 items-center justify-center rounded border"
+							class={[
+								"inline-flex h-8 w-8 items-center justify-center rounded border transition-colors",
+								snap.wrapEnabled &&
+									"border-primary/40 bg-primary/10 text-primary",
+							]
+								.filter(Boolean)
+								.join(" ")}
 							type="button"
 							onclick={() => toggleWrap()}
 							aria-label={snap.wrapEnabled ? "Wrap on" : "Wrap off"}
@@ -781,6 +829,17 @@
 						>
 							<Repeat class="h-4 w-4" />
 						</button>
+
+						<button
+							class="inline-flex h-8 w-8 items-center justify-center rounded border"
+							type="button"
+							disabled={snap.queue.length === 0}
+							onclick={onClearQueueRequest}
+							aria-label="Clear queue"
+							title="Clear queue"
+						>
+							<Trash2 class="h-4 w-4" />
+						</button>
 					</div>
 				</div>