From d5d39179740e16862a92e038450ff753f348cab2 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 04:23:16 -0800
Subject: [PATCH] shadcn alert to clear queue

---
 src/lib/components/GlobalPlayer.svelte | 96 ++++++++++++++++++--------
 1 file changed, 66 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/GlobalPlayer.svelte b/src/lib/components/GlobalPlayer.svelte
index 7e50cd9..ac7a8b8 100644
--- a/src/lib/components/GlobalPlayer.svelte
+++ b/src/lib/components/GlobalPlayer.svelte
@@ -36,6 +36,7 @@
 	} from "$lib/player/player.svelte";
 	import { createMediaSessionBindings } from "$lib/player/media-session";
 	import Portal from "$lib/components/util/Portal.svelte";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
 
 	import {
 		ChevronsUpDown,
@@ -269,16 +270,7 @@
 		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();
-	}
+	let clearQueueDialogOpen = $state(false);
 
 	function formatTime(seconds: number) {
 		if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
@@ -639,16 +631,38 @@
 							<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>
+						<AlertDialog.Root bind:open={clearQueueDialogOpen}>
+							<AlertDialog.Trigger
+								class="inline-flex h-8 w-8 items-center justify-center rounded border"
+								type="button"
+								disabled={snap.queue.length === 0}
+								aria-label="Clear queue"
+								title="Clear queue"
+							>
+								<Trash2 class="h-4 w-4" />
+							</AlertDialog.Trigger>
+
+							<AlertDialog.Content>
+								<AlertDialog.Header>
+									<AlertDialog.Title>Clear queue?</AlertDialog.Title>
+									<AlertDialog.Description>
+										This will remove all queued tracks.
+									</AlertDialog.Description>
+								</AlertDialog.Header>
+
+								<AlertDialog.Footer>
+									<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+									<AlertDialog.Action
+										onclick={() => {
+											clearQueue();
+											clearQueueDialogOpen = false;
+										}}
+									>
+										Clear
+									</AlertDialog.Action>
+								</AlertDialog.Footer>
+							</AlertDialog.Content>
+						</AlertDialog.Root>
 
 						<label class="ml-auto flex items-center gap-2 text-sm">
 							<span class="text-muted-foreground" aria-hidden="true">
@@ -830,16 +844,38 @@
 							<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>
+						<AlertDialog.Root bind:open={clearQueueDialogOpen}>
+							<AlertDialog.Trigger
+								class="inline-flex h-8 w-8 items-center justify-center rounded border"
+								type="button"
+								disabled={snap.queue.length === 0}
+								aria-label="Clear queue"
+								title="Clear queue"
+							>
+								<Trash2 class="h-4 w-4" />
+							</AlertDialog.Trigger>
+
+							<AlertDialog.Content>
+								<AlertDialog.Header>
+									<AlertDialog.Title>Clear queue?</AlertDialog.Title>
+									<AlertDialog.Description>
+										This will remove all queued tracks.
+									</AlertDialog.Description>
+								</AlertDialog.Header>
+
+								<AlertDialog.Footer>
+									<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+									<AlertDialog.Action
+										onclick={() => {
+											clearQueue();
+											clearQueueDialogOpen = false;
+										}}
+									>
+										Clear
+									</AlertDialog.Action>
+								</AlertDialog.Footer>
+							</AlertDialog.Content>
+						</AlertDialog.Root>
 					</div>
 				</div>