feat(queue): auto-scroll to currently playing on queue open

Adds a visible prop to Queue that triggers auto-scroll to the currently
playing track when the queue becomes visible. PlayerMobile passes the
drawer open state, PlayerDesktop passes whether a track exists.
This commit is contained in:
2026-02-12 22:01:02 -08:00
parent e3c0c6cade
commit ec3565078f
3 changed files with 11 additions and 2 deletions

View File

@@ -95,7 +95,7 @@
<div class="flex-1 overflow-hidden relative p-4">
<div class="absolute inset-0 p-4 pt-0">
<div class="h-full overflow-hidden rounded-lg border bg-muted/20">
<Queue />
<Queue visible={!!player.currentTrack} />
</div>
</div>
</div>

View File

@@ -108,7 +108,7 @@
<!-- Queue -->
<div class="flex-1 overflow-hidden relative mt-auto">
<div class="absolute inset-0">
<Queue />
<Queue visible={open} />
</div>
</div>
</div>

View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { GripVertical, LocateFixed, Play, X } from "@lucide/svelte";
import { tick } from "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";
@@ -7,6 +8,8 @@
import type { Track } from "$lib/player/types";
import { songTypeNumberLabel } from "$lib/utils/amq";
let { visible = true }: { visible?: boolean } = $props();
let virtualList: ReturnType<typeof VirtualList>;
function scrollToCurrentlyPlaying() {
@@ -17,6 +20,12 @@
if (index !== -1) virtualList?.scrollToIndex(index);
}
$effect(() => {
if (visible) {
tick().then(() => scrollToCurrentlyPlaying());
}
});
const ITEM_HEIGHT = 64;
function onRemove(id: number) {