feat: use tanstack virtual list (#580)

* add

* feat: move to `devDependency`

Author: baseplate-admin

src/frontend/package-lock.json

@@ -15,6 +15,7 @@
 		"test": "npm run test:unit -- --run",
 		"test:unit": "vitest"
 	},
+	"dependencies": {},
 	"devDependencies": {
 		"@codemirror/commands": "^6.10.3",
 		"@codemirror/language": "^6.12.2",
@@ -35,6 +36,7 @@
 		"@tailwindcss/vite": "^4.2.1",
 		"@tanstack/svelte-query": "^6.1.0",
 		"@tanstack/svelte-query-devtools": "^6.0.4",
+		"@tanstack/svelte-virtual": "^3.13.23",
 		"@types/node": "^25",
 		"@types/nprogress": "^0.2.3",
 		"@types/qrcode": "^1.5.6",

src/frontend/package.json

@@ -2,6 +2,9 @@
 	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
 	import { Scrollbar } from './index';
 	import { cn, type WithoutChild } from '$lib/utils.js';
+	import { createVirtualizer, type VirtualizerOptions } from '@tanstack/svelte-virtual';
+	import type { VirtualItem } from '@tanstack/virtual-core';
+	import type { Snippet } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -10,14 +13,29 @@
 		orientation = 'vertical',
 		scrollbarXClasses = '',
 		scrollbarYClasses = '',
+		virtualOptions,
+		item,
 		children,
 		...restProps
 	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
 		orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
 		scrollbarXClasses?: string | undefined;
 		scrollbarYClasses?: string | undefined;
 		viewportRef?: HTMLElement | null;
+		virtualOptions?:
+			| Omit<VirtualizerOptions<HTMLElement, HTMLElement>, 'getScrollElement'>
+			| undefined;
+		item?: Snippet<[VirtualItem]> | undefined;
 	} = $props();
+
+	const virtualizer = $derived(
+		virtualOptions && viewportRef
+			? createVirtualizer({ ...virtualOptions, getScrollElement: () => viewportRef })
+			: null
+	);
+
+	const virtualItems = $derived($virtualizer?.getVirtualItems() ?? []);
+	const totalSize = $derived($virtualizer?.getTotalSize() ?? 0);
 </script>
 
 <ScrollAreaPrimitive.Root
@@ -31,7 +49,19 @@
 		data-slot="scroll-area-viewport"
 		class="size-full rounded-[inherit] ring-ring/10 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 dark:ring-ring/20 dark:outline-ring/40"
 	>
-		{@render children?.()}
+		{#if virtualizer && item}
+			<div style="height: {totalSize}px; position: relative;">
+				{#each virtualItems as row (row.index)}
+					<div
+						style="position: absolute; top: 0; transform: translateY({row.start}px); width: 100%; height: {row.size}px;"
+					>
+						{@render item(row)}
+					</div>
+				{/each}
+			</div>
+		{:else}
+			{@render children?.()}
+		{/if}
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === 'vertical' || orientation === 'both'}
 		<Scrollbar orientation="vertical" class={scrollbarYClasses} />