From 28643c38b829f0dc93dd692b2926f5d6f600dd3a Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Thu, 12 Feb 2026 21:56:14 -0800
Subject: [PATCH] feat(queue): add confirmation dialog when clearing the queue

Wraps the clear button in an AlertDialog that shows the number of songs
to be removed, requiring explicit confirmation before clearing.
---
 src/lib/components/player/Queue.svelte | 34 +++++++++++++++++++-------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/player/Queue.svelte b/src/lib/components/player/Queue.svelte
index c317481..93d44c5 100644
--- a/src/lib/components/player/Queue.svelte
+++ b/src/lib/components/player/Queue.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { GripVertical, Play, X } from "@lucide/svelte";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
 	import { Button } from "$lib/components/ui/button";
 	import VirtualList from "$lib/components/ui/VirtualList.svelte";
 	import { player } from "$lib/player/store.svelte";
@@ -53,15 +54,30 @@
 				>
 			{/if}
 		</h3>
-		<Button
-			variant="ghost"
-			size="sm"
-			class="h-6 w-6 p-0"
-			onclick={() => player.clearQueue()}
-		>
-			<span class="sr-only">Clear</span>
-			<X class="h-3 w-3" />
-		</Button>
+		<AlertDialog.Root>
+			<AlertDialog.Trigger>
+				{#snippet child({ props })}
+					<Button variant="ghost" size="sm" class="h-6 w-6 p-0" {...props}>
+						<span class="sr-only">Clear</span>
+						<X class="h-3 w-3" />
+					</Button>
+				{/snippet}
+			</AlertDialog.Trigger>
+			<AlertDialog.Content>
+				<AlertDialog.Header>
+					<AlertDialog.Title>Clear queue?</AlertDialog.Title>
+					<AlertDialog.Description>
+						This will remove all {player.displayQueue.length} songs from the queue.
+					</AlertDialog.Description>
+				</AlertDialog.Header>
+				<AlertDialog.Footer>
+					<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+					<AlertDialog.Action onclick={() => player.clearQueue()}
+						>Clear</AlertDialog.Action
+					>
+				</AlertDialog.Footer>
+			</AlertDialog.Content>
+		</AlertDialog.Root>
 	</div>
 
 	<VirtualList