shadcn alert to clear queue

This commit is contained in:
2026-02-06 04:23:16 -08:00
parent 151f597b88
commit d5d3917974

View File

@@ -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>