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

@@ -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
+		<AlertDialog.Root>
-			variant="ghost"
+			<AlertDialog.Trigger>
-			size="sm"
+				{#snippet child({ props })}
-			class="h-6 w-6 p-0"
+					<Button variant="ghost" size="sm" class="h-6 w-6 p-0" {...props}>
-			onclick={() => player.clearQueue()}
+						<span class="sr-only">Clear</span>
-		>
+						<X class="h-3 w-3" />
-			<span class="sr-only">Clear</span>
+					</Button>
-			<X class="h-3 w-3" />
+				{/snippet}
-		</Button>
+			</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