From 68c23b5f6394f71dccdb7b82835df4994f727495 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Thu, 12 Feb 2026 22:01:02 -0800
Subject: [PATCH] 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.
---
 src/lib/components/player/PlayerDesktop.svelte | 2 +-
 src/lib/components/player/PlayerMobile.svelte  | 2 +-
 src/lib/components/player/Queue.svelte         | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/player/PlayerDesktop.svelte b/src/lib/components/player/PlayerDesktop.svelte
index 2b01146..6bf32d9 100644
--- a/src/lib/components/player/PlayerDesktop.svelte
+++ b/src/lib/components/player/PlayerDesktop.svelte
@@ -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>
diff --git a/src/lib/components/player/PlayerMobile.svelte b/src/lib/components/player/PlayerMobile.svelte
index 7b905fd..cf33c3b 100644
--- a/src/lib/components/player/PlayerMobile.svelte
+++ b/src/lib/components/player/PlayerMobile.svelte
@@ -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>
diff --git a/src/lib/components/player/Queue.svelte b/src/lib/components/player/Queue.svelte
index 01b4860..f6e5047 100644
--- a/src/lib/components/player/Queue.svelte
+++ b/src/lib/components/player/Queue.svelte
@@ -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) {