perf(player): virtualize queue list rendering

Extract a generic VirtualList.svelte component that only renders
visible rows + overscan buffer using absolute positioning in a tall
sentinel div. Queue.svelte now uses VirtualList with 64px row height
(supporting 2-line titles) instead of rendering all items.

This reduces DOM nodes from 1000+ to ~20 for large queues.

src/lib/components/player/Queue.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { GripVertical, Play, X } from "@lucide/svelte";
 	import { Button } from "$lib/components/ui/button";
+	import VirtualList from "$lib/components/ui/VirtualList.svelte";
 	import { player } from "$lib/player/store.svelte";
 	import type { Track } from "$lib/player/types";
 	import { songTypeNumberLabel } from "$lib/utils/amq";
 
+	const ITEM_HEIGHT = 64;
+
 	function onRemove(id: number) {
 		player.remove(id);
 	}
 
 	function onJump(track: Track) {
-		// Wait, jump usually means play immediately?
-		// "Jump to track" -> set as current.
-		// If it's in the queue, we can just set currentId.
 		player.playId(track.id);
 	}
 
@@ -25,7 +25,7 @@
 	}
 
 	function onDragOver(e: DragEvent, index: number) {
-		e.preventDefault(); // allow drop
+		e.preventDefault();
 		if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
 		dragOverIndex = index;
 	}
@@ -45,7 +45,14 @@
 	class="flex flex-col h-full w-full bg-background/50 backdrop-blur rounded-lg border overflow-hidden"
 >
 	<div class="px-4 py-3 border-b flex justify-between items-center bg-muted/20">
-		<h3 class="font-semibold text-sm">Up Next</h3>
+		<h3 class="font-semibold text-sm">
+			Up Next
+			{#if player.displayQueue.length > 0}
+				<span class="text-muted-foreground font-normal ml-1"
+					>({player.displayQueue.length})</span
+				>
+			{/if}
+		</h3>
 		<Button
 			variant="ghost"
 			size="sm"
@@ -57,13 +64,14 @@
 		</Button>
 	</div>
 
-	<div class="flex-1 overflow-y-auto p-2 space-y-1">
+	<VirtualList
-		{#if player.displayQueue.length === 0}
+		items={player.displayQueue}
-			<div class="text-center py-8 text-muted-foreground text-sm">
+		itemHeight={ITEM_HEIGHT}
-				Queue is empty
+		overscan={5}
-			</div>
+		class="p-2"
-		{:else}
+		key={(track) => track.id}
-			{#each player.displayQueue as track, i (track.id)}
+	>
+		{#snippet row({ item: track, index: i })}
 			<div
 				role="button"
 				tabindex="0"
@@ -73,7 +81,7 @@
 				ondrop={(e) => onDrop(e, i)}
 				onclick={() => onJump(track)}
 				onkeydown={(e) => e.key === "Enter" && onJump(track)}
-					class="group flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-sm"
+				class="group flex items-center gap-2 px-3 h-full rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-sm"
 				class:active={player.currentId === track.id}
 				class:border-t-2={dragOverIndex === i}
 				class:border-primary={dragOverIndex === i}
@@ -81,20 +89,16 @@
 				<div
 					class="w-6 shrink-0 flex items-center justify-center text-xs text-muted-foreground/60 font-mono"
 				>
-						<!-- Default: Number or Active Indicator -->
 					<div
 						class="group-hover:hidden flex items-center justify-center w-full h-full"
 					>
 						{#if player.currentId === track.id}
-								<div
+							<div class="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
-									class="w-2 h-2 bg-primary rounded-full animate-pulse"
-								></div>
 						{:else}
 							<span>{i + 1}</span>
 						{/if}
 					</div>
 
-						<!-- Hover: Grip Handle -->
 					<div
 						class="[@media(hover:hover)]:hidden group-hover:flex items-center justify-center w-full h-full cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-foreground"
 						aria-label="Drag to reorder"
@@ -105,7 +109,7 @@
 
 				<div class="flex-1 min-w-0">
 					<div
-							class="font-medium"
+						class="font-medium line-clamp-2 leading-tight"
 						class:text-primary={player.currentId === track.id}
 					>
 						{track.animeName}
@@ -116,7 +120,7 @@
 							>{track.globalPercent}%</span
 						>
 					</div>
-						<div class="text-xs text-foreground/80">
+					<div class="text-xs text-foreground/80 truncate">
 						{track.title} —
 						<span class="text-muted-foreground">{track.artist}</span>
 					</div>
@@ -125,7 +129,7 @@
 				<Button
 					variant="ghost"
 					size="icon"
-						class="h-6 w-6 opacity-50 group-hover:opacity-100 transition-opacity"
+					class="h-6 w-6 opacity-50 group-hover:opacity-100 transition-opacity shrink-0"
 					onclick={(e) => {
 						e.stopPropagation();
 						onRemove(track.id);
@@ -134,9 +138,14 @@
 					<X class="h-3 w-3" />
 				</Button>
 			</div>
-			{/each}
+		{/snippet}
-		{/if}
+
+		{#snippet empty()}
+			<div class="text-center py-8 text-muted-foreground text-sm">
+				Queue is empty
 			</div>
+		{/snippet}
+	</VirtualList>
 </div>
 
 <style>

src/lib/components/ui/VirtualList.svelte

@@ -0,0 +1,101 @@
+<!--
+  Generic fixed-height virtual list.
+  Usage:
+    <VirtualList items={myArray} itemHeight={64} overscan={5}>
+      {#snippet row({ item, index })}
+        <div>…</div>
+      {/snippet}
+    </VirtualList>
+-->
+<script lang="ts" generics="T">
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    items: T[];
+    itemHeight: number;
+    overscan?: number;
+    class?: string;
+    row: Snippet<[{ item: T; index: number }]>;
+    empty?: Snippet;
+    key?: (item: T, index: number) => unknown;
+  };
+
+  let {
+    items,
+    itemHeight,
+    overscan = 5,
+    class: className = "",
+    row,
+    empty,
+    key,
+  }: Props = $props();
+
+  let containerEl = $state<HTMLDivElement | null>(null);
+  let scrollTop = $state(0);
+  let containerHeight = $state(0);
+
+  const totalHeight = $derived(items.length * itemHeight);
+
+  const startIndex = $derived(
+    Math.max(0, Math.floor(scrollTop / itemHeight) - overscan),
+  );
+  const endIndex = $derived(
+    Math.min(
+      items.length,
+      Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan,
+    ),
+  );
+  const visibleItems = $derived(
+    items.slice(startIndex, endIndex).map((item, i) => ({
+      item,
+      index: startIndex + i,
+    })),
+  );
+
+  function onScroll(e: Event) {
+    scrollTop = (e.target as HTMLDivElement).scrollTop;
+  }
+
+  $effect(() => {
+    if (!containerEl) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        containerHeight = entry.contentRect.height;
+      }
+    });
+    ro.observe(containerEl);
+    return () => ro.disconnect();
+  });
+</script>
+
+<div
+  class="virtual-list-container {className}"
+  bind:this={containerEl}
+  onscroll={onScroll}
+>
+  {#if items.length === 0}
+    {@render empty?.()}
+  {:else}
+    <div
+      class="virtual-list-sentinel"
+      style="height: {totalHeight}px; position: relative;"
+    >
+      {#each visibleItems as entry (key ? key(entry.item, entry.index) : entry.index)}
+        <div
+          class="virtual-list-item"
+          style="position: absolute; top: {entry.index *
+            itemHeight}px; left: 0; right: 0; height: {itemHeight}px;"
+        >
+          {@render row(entry)}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .virtual-list-container {
+    overflow-y: auto;
+    flex: 1;
+  }
+</style>