CaZzzer/amqtrain
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

shadcn alert to clear queue

Browse Source
This commit is contained in:
Yura
2026-02-06 04:23:16 -08:00
parent 151f597b88
commit d5d3917974
1 changed files with 66 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/lib/components/GlobalPlayer.svelte
View File

@@ -36,6 +36,7 @@
} from "$lib/player/player.svelte"; } from "$lib/player/player.svelte";
import { createMediaSessionBindings } from "$lib/player/media-session"; import { createMediaSessionBindings } from "$lib/player/media-session";
import Portal from "$lib/components/util/Portal.svelte"; import Portal from "$lib/components/util/Portal.svelte";
import * as AlertDialog from "$lib/components/ui/alert-dialog";
import { import {
ChevronsUpDown, ChevronsUpDown,
@@ -269,16 +270,7 @@
void syncAndAutoplay(); void syncAndAutoplay();
} }
function onClearQueueRequest() { let clearQueueDialogOpen = $state(false);
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) { function formatTime(seconds: number) {
if (!Number.isFinite(seconds) || seconds < 0) return "0:00"; if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
@@ -639,16 +631,38 @@
<Repeat class="h-4 w-4" /> <Repeat class="h-4 w-4" />
</button> </button>
<button <AlertDialog.Root bind:open={clearQueueDialogOpen}>
<AlertDialog.Trigger
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"
type="button" type="button"
disabled={snap.queue.length === 0} disabled={snap.queue.length === 0}
onclick={onClearQueueRequest}
aria-label="Clear queue" aria-label="Clear queue"
title="Clear queue" title="Clear queue"
> >
<Trash2 class="h-4 w-4" /> <Trash2 class="h-4 w-4" />
</button> </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"> <label class="ml-auto flex items-center gap-2 text-sm">
<span class="text-muted-foreground" aria-hidden="true"> <span class="text-muted-foreground" aria-hidden="true">
@@ -830,16 +844,38 @@
<Repeat class="h-4 w-4" /> <Repeat class="h-4 w-4" />
</button> </button>
<button <AlertDialog.Root bind:open={clearQueueDialogOpen}>
<AlertDialog.Trigger
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"
type="button" type="button"
disabled={snap.queue.length === 0} disabled={snap.queue.length === 0}
onclick={onClearQueueRequest}
aria-label="Clear queue" aria-label="Clear queue"
title="Clear queue" title="Clear queue"
> >
<Trash2 class="h-4 w-4" /> <Trash2 class="h-4 w-4" />
</button> </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>
</div> </div>