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/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>