)
-}
+})
diff --git a/src/renderer/src/components/VirtualList.tsx b/src/renderer/src/components/VirtualList.tsx
new file mode 100644
index 0000000..9bd9bc0
--- /dev/null
+++ b/src/renderer/src/components/VirtualList.tsx
@@ -0,0 +1,70 @@
+import { useRef, type CSSProperties, type ReactNode } from 'react'
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+/**
+ * Windowed list: renders only the rows near the viewport, so a list thousands of
+ * items long stays light — one DOM subtree per visible row, not per item. This
+ * keeps the Downloads queue and a big channel's Library list responsive when a
+ * source has 1000s of videos.
+ *
+ * It owns its own scroll container, so size that container via `style`/`className`
+ * (e.g. `flex: 1` + `minHeight: 0`, or a `maxHeight`). Owning the scroller means
+ * the virtualizer anchors at scroll offset 0 and never has to track where the
+ * list sits within the page — robust even though the app shares one outer
+ * scroll area with content above each list.
+ *
+ * Row heights are measured (measureElement), so variable-height rows are fine;
+ * `estimateSize` only needs to be a rough first guess before measurement.
+ */
+export function VirtualList({
+ items,
+ estimateSize,
+ getKey,
+ renderItem,
+ overscan = 8,
+ gap = 0,
+ className,
+ style
+}: {
+ items: T[]
+ estimateSize: (index: number) => number
+ getKey: (item: T, index: number) => string
+ renderItem: (item: T, index: number) => ReactNode
+ overscan?: number
+ gap?: number
+ className?: string
+ style?: CSSProperties
+}): React.JSX.Element {
+ const scrollRef = useRef(null)
+ const virtualizer = useVirtualizer({
+ count: items.length,
+ getScrollElement: () => scrollRef.current,
+ estimateSize,
+ overscan,
+ gap,
+ getItemKey: (index) => getKey(items[index], index)
+ })
+
+ return (
+