From 6fca5bae396ca7ceea209be91c8b1d26dd4b9872 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Wed, 11 Feb 2026 22:59:52 -0800
Subject: [PATCH] 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   | 173 ++++++++++++-----------
 src/lib/components/ui/VirtualList.svelte | 101 +++++++++++++
 2 files changed, 192 insertions(+), 82 deletions(-)
 create mode 100644 src/lib/components/ui/VirtualList.svelte

diff --git a/src/lib/components/player/Queue.svelte b/src/lib/components/player/Queue.svelte
index 7b393ee..c317481 100644
--- a/src/lib/components/player/Queue.svelte
+++ b/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,86 +64,88 @@
 		</Button>
 	</div>
 
-	<div class="flex-1 overflow-y-auto p-2 space-y-1">
-		{#if player.displayQueue.length === 0}
+	<VirtualList
+		items={player.displayQueue}
+		itemHeight={ITEM_HEIGHT}
+		overscan={5}
+		class="p-2"
+		key={(track) => track.id}
+	>
+		{#snippet row({ item: track, index: i })}
+			<div
+				role="button"
+				tabindex="0"
+				draggable="true"
+				ondragstart={(e) => onDragStart(e, i)}
+				ondragover={(e) => onDragOver(e, i)}
+				ondrop={(e) => onDrop(e, i)}
+				onclick={() => onJump(track)}
+				onkeydown={(e) => e.key === "Enter" && onJump(track)}
+				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}
+			>
+				<div
+					class="w-6 shrink-0 flex items-center justify-center text-xs text-muted-foreground/60 font-mono"
+				>
+					<div
+						class="group-hover:hidden flex items-center justify-center w-full h-full"
+					>
+						{#if player.currentId === track.id}
+							<div class="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
+						{:else}
+							<span>{i + 1}</span>
+						{/if}
+					</div>
+
+					<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"
+					>
+						<GripVertical class="h-4 w-4" />
+					</div>
+				</div>
+
+				<div class="flex-1 min-w-0">
+					<div
+						class="font-medium line-clamp-2 leading-tight"
+						class:text-primary={player.currentId === track.id}
+					>
+						{track.animeName}
+						<span class="tag"
+							>{songTypeNumberLabel(track.type, track.number)}</span
+						>
+						<span class="text-muted-foreground font-normal"
+							>{track.globalPercent}%</span
+						>
+					</div>
+					<div class="text-xs text-foreground/80 truncate">
+						{track.title} —
+						<span class="text-muted-foreground">{track.artist}</span>
+					</div>
+				</div>
+
+				<Button
+					variant="ghost"
+					size="icon"
+					class="h-6 w-6 opacity-50 group-hover:opacity-100 transition-opacity shrink-0"
+					onclick={(e) => {
+						e.stopPropagation();
+						onRemove(track.id);
+					}}
+				>
+					<X class="h-3 w-3" />
+				</Button>
+			</div>
+		{/snippet}
+
+		{#snippet empty()}
 			<div class="text-center py-8 text-muted-foreground text-sm">
 				Queue is empty
 			</div>
-		{:else}
-			{#each player.displayQueue as track, i (track.id)}
-				<div
-					role="button"
-					tabindex="0"
-					draggable="true"
-					ondragstart={(e) => onDragStart(e, i)}
-					ondragover={(e) => onDragOver(e, i)}
-					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:active={player.currentId === track.id}
-					class:border-t-2={dragOverIndex === i}
-					class:border-primary={dragOverIndex === i}
-				>
-					<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
-									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"
-						>
-							<GripVertical class="h-4 w-4" />
-						</div>
-					</div>
-
-					<div class="flex-1 min-w-0">
-						<div
-							class="font-medium"
-							class:text-primary={player.currentId === track.id}
-						>
-							{track.animeName}
-							<span class="tag"
-								>{songTypeNumberLabel(track.type, track.number)}</span
-							>
-							<span class="text-muted-foreground font-normal"
-								>{track.globalPercent}%</span
-							>
-						</div>
-						<div class="text-xs text-foreground/80">
-							{track.title} —
-							<span class="text-muted-foreground">{track.artist}</span>
-						</div>
-					</div>
-
-					<Button
-						variant="ghost"
-						size="icon"
-						class="h-6 w-6 opacity-50 group-hover:opacity-100 transition-opacity"
-						onclick={(e) => {
-							e.stopPropagation();
-							onRemove(track.id);
-						}}
-					>
-						<X class="h-3 w-3" />
-					</Button>
-				</div>
-			{/each}
-		{/if}
-	</div>
+		{/snippet}
+	</VirtualList>
 </div>
 
 <style>
diff --git a/src/lib/components/ui/VirtualList.svelte b/src/lib/components/ui/VirtualList.svelte
new file mode 100644
index 0000000..2aa7aee
--- /dev/null
+++ b/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>