make the queue a bit nicer

This commit is contained in:
2026-02-06 05:43:28 -08:00
parent 692772cb14
commit 3c0221fe37

View File

@@ -1134,8 +1134,25 @@
</div> </div>
</div> </div>
<div class="border-t pt-2"> <div class="border-t justify-between flex pt-2">
<div class="text-sm font-semibold">Queue ({snap.queue.length})</div> <div class="text-sm font-semibold">Queue ({snap.queue.length})</div>
{#if snap.currentIndex !== null}
<button
class="btn text-sm text-muted-foreground hover:underline"
onclick={() => {
const currentEl = document.querySelector(
`[data-queue-id='${snap.currentTrack?.id}']`,
);
currentEl?.scrollIntoView({
behavior: "smooth",
block: "center",
});
}}
title="Scroll to current track"
>
Scroll to current
</button>
{/if}
</div> </div>
</div> </div>
@@ -1148,12 +1165,14 @@
<li <li
class={[ class={[
"flex items-center gap-2 border-b px-2 py-2 last:border-b-0", "flex items-center gap-2 border-b px-2 py-2 last:border-b-0",
item.isCurrent && "bg-primary/10",
// visual affordances // visual affordances
draggableHint(item.track.id), draggableHint(item.track.id),
dropIndicatorClass(item.track.id), dropIndicatorClass(item.track.id),
] ]
.filter(Boolean) .filter(Boolean)
.join(" ")} .join(" ")}
data-queue-id={item.track.id}
ondragover={(e) => onDragOver(item.track.id, e)} ondragover={(e) => onDragOver(item.track.id, e)}
ondrop={(e) => onDrop(item.track.id, e)} ondrop={(e) => onDrop(item.track.id, e)}
> >