[feat] Improve list view with fuse search and virtual list (#215)

* chore: comment out auto install for on boarding, its behavior and speed is unpredictable * fix: clear action when ui template exits * fix: update extension command search store references * feat(ui): implement virtual list with advanced search and section handling - Add @tanstack/svelte-virtual for efficient list rendering - Integrate Fuse.js for advanced search across list items and sections - Create dynamic virtual list with support for section headers - Enhance list view with flexible search and filtering capabilities - Add new types and components for virtual list management * chore(desktop): bump package version to 0.1.29
2025-04-03 22:26:43 +00:00 · 2025-02-28 07:47:09 -05:00 · 2025-02-28 07:47:09 -05:00 · 70f7d4131e
commit 70f7d4131e
parent 97cd20906f
14 changed files with 404 additions and 63 deletions
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@ -1,6 +1,6 @@
 {
 	"name": "@kksh/desktop",
-	"version": "0.1.28",
+	"version": "0.1.29",
 	"description": "",
 	"type": "module",
 	"scripts": {
--- a/apps/desktop/src/lib/components/common/install-code-block.svelte
+++ b/apps/desktop/src/lib/components/common/install-code-block.svelte
@ -75,7 +75,7 @@
 <div class={cn("flex items-center gap-2", className)}>
 	<Shiki class={cn("w-full overflow-x-scroll rounded-md p-1 px-2")} {code} {lang} />
 	<Button class="" size="sm" variant="secondary" onclick={copy}>Copy</Button>
-	<Button class="" size="sm" variant="secondary" onclick={autoInstall} disabled={!autoInstallable}>
+	<!-- <Button class="" size="sm" variant="secondary" onclick={autoInstall} disabled={!autoInstallable}>
 		Auto Install
-	</Button>
+	</Button> -->
 </div>
--- a/apps/desktop/src/lib/components/standalone/help/deno-install.svelte
+++ b/apps/desktop/src/lib/components/standalone/help/deno-install.svelte
@ -51,18 +51,18 @@
 	runtime environment for executing extension code safely. It is optional but recommended.
 </p>
 <p class="font-mono text-sm">Choose any installation method below.</p>
-<p class="font-mono text-sm">
+<!-- <p class="font-mono text-sm">
 	If you are unsure, you can use <strong class="text-lg">Auto Install</strong>.
-</p>
+</p> -->
 <p class="font-mono text-sm text-red-400">
 	After installation, ensure the `deno` command is accessible from your system's PATH.
 </p>
-{#if _platform === "macos" || _platform === "linux"}
+<!-- {#if _platform === "macos" || _platform === "linux"}
 	<p class="font-mono text-sm text-red-400">
 		Installation with <span class="font-bold text-green-500">curl</span> command likely requires manual
 		configuration. So auto install is disabled. Please copy the command and run it in a terminal.
 	</p>
-{/if}
+{/if} -->
 {#if denoPath}
 	<div class="flex items-center gap-2">
 		<span>✅</span>
--- a/apps/desktop/src/routes/app/+page.svelte
+++ b/apps/desktop/src/routes/app/+page.svelte
@ -207,7 +207,7 @@
 	</CustomCommandInput>
 	<Command.List class="max-h-screen grow">
 		<Command.Empty data-tauri-drag-region>No results found.</Command.Empty>
-		{#if $devStoreExtCmds.length > 0}
+		{#if $devSearchExtCmds.length > 0}
 			<ExtCmds
 				heading={m.command_group_heading_dev_ext()}
 				extCmds={$devSearchExtCmds}
@ -216,7 +216,7 @@
 				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
 			/>
 		{/if}
-		{#if $storeExtCmds.length > 0}
+		{#if $storeSearchExtCmds.length > 0}
 			<ExtCmds
 				heading={m.command_group_heading_ext()}
 				extCmds={$storeSearchExtCmds}
--- a/apps/desktop/src/routes/app/extension/ui-worker/+page.svelte
+++ b/apps/desktop/src/routes/app/extension/ui-worker/+page.svelte
@ -322,6 +322,8 @@
 		winExtMap.unregisterExtensionFromWindow(appWin.label)
 		extensionLoadingBar = false
 		appState.setActionPanel(undefined)
+		appState.setDefaultAction(null)
+		appState.setActionPanel(undefined)
 	})

 	$effect(() => {
--- a/deno.lock
+++ b/deno.lock
@ -6,6 +6,7 @@
    "npm:@eslint/js@^9.18.0": "9.19.0",
    "npm:@eslint/js@^9.19.0": "9.19.0",
    "npm:@eslint/js@^9.21.0": "9.21.0",
+    "npm:@faker-js/faker@^9.5.1": "9.5.1",
    "npm:@formkit/auto-animate@~0.8.2": "0.8.2",
    "npm:@grpc/grpc-js@^1.12.2": "1.12.5",
    "npm:@grpc/proto-loader@~0.7.13": "0.7.13",
@ -47,6 +48,7 @@
    "npm:@tailwindcss/container-queries@~0.1.1": "0.1.1_tailwindcss@3.4.17__postcss@8.5.1",
    "npm:@tailwindcss/forms@~0.5.10": "0.5.10_tailwindcss@3.4.17__postcss@8.5.1",
    "npm:@tailwindcss/typography@~0.5.16": "0.5.16_tailwindcss@3.4.17__postcss@8.5.1",
+    "npm:@tanstack/svelte-virtual@^3.13.2": "3.13.2_svelte@5.19.6__acorn@8.14.0",
    "npm:@tanstack/table-core@^8.20.5": "8.20.5",
    "npm:@tauri-apps/api@^2.1.1": "2.2.0",
    "npm:@tauri-apps/api@^2.2.0": "2.2.0",
@ -121,6 +123,7 @@
    "npm:eslint@^9.21.0": "9.21.0",
    "npm:formsnap@2.0.0-next.1": "2.0.0-next.1_svelte@5.19.6__acorn@8.14.0_sveltekit-superforms@2.23.1__@sveltejs+kit@2.16.1___@sveltejs+vite-plugin-svelte@5.0.3____svelte@5.19.6_____acorn@8.14.0____vite@6.0.11_____@types+node@20.17.16_____jiti@2.4.2____@types+node@20.17.16___svelte@5.19.6____acorn@8.14.0___vite@5.4.14____@types+node@20.17.16___vite@6.0.11____@types+node@20.17.16____jiti@2.4.2___@types+node@20.17.16__svelte@5.19.6___acorn@8.14.0__valibot@1.0.0-beta.12___typescript@5.6.3__zod@3.24.1__@sveltejs+vite-plugin-svelte@5.0.3___svelte@5.19.6____acorn@8.14.0___vite@6.0.11____@types+node@20.17.16____jiti@2.4.2___@types+node@20.17.16__vite@5.4.14___@types+node@20.17.16__typescript@5.6.3__vite@6.0.11___@types+node@20.17.16___jiti@2.4.2__@types+node@20.17.16_@sveltejs+kit@2.16.1__@sveltejs+vite-plugin-svelte@5.0.3___svelte@5.19.6____acorn@8.14.0___vite@6.0.11____@types+node@20.17.16____jiti@2.4.2___@types+node@20.17.16__svelte@5.19.6___acorn@8.14.0__vite@5.4.14___@types+node@20.17.16__vite@6.0.11___@types+node@20.17.16___jiti@2.4.2__@types+node@20.17.16_valibot@1.0.0-beta.12__typescript@5.6.3_zod@3.24.1_@sveltejs+vite-plugin-svelte@5.0.3__svelte@5.19.6___acorn@8.14.0__vite@6.0.11___@types+node@20.17.16___jiti@2.4.2__@types+node@20.17.16_vite@5.4.14__@types+node@20.17.16_typescript@5.6.3_vite@6.0.11__@types+node@20.17.16__jiti@2.4.2_@types+node@20.17.16",
    "npm:fs-extra@^11.2.0": "11.3.0",
+    "npm:fuse.js@^7.1.0": "7.1.0",
    "npm:get-folder-size@5": "5.0.0",
    "npm:globals@^15.14.0": "15.14.0",
    "npm:google-protobuf@^3.21.4": "3.21.4",
@ -164,6 +167,7 @@
    "npm:shiki@^1.27.2": "1.29.2",
    "npm:supabase@^2.2.1": "2.9.6",
    "npm:svelte-check@^4.1.1": "4.1.4_svelte@5.19.6__acorn@8.14.0_typescript@5.6.3",
+    "npm:svelte-inspect-value@~0.2.2": "0.2.2_svelte@5.19.6__acorn@8.14.0",
    "npm:svelte-markdown@~0.4.1": "0.4.1_svelte@4.2.19",
    "npm:svelte-radix@^2.0.1": "2.0.1_svelte@5.19.6__acorn@8.14.0",
    "npm:svelte-sonner@~0.3.28": "0.3.28_svelte@5.19.6__acorn@8.14.0",
@ -184,6 +188,7 @@
    "npm:tauri-plugin-clipboard-api@^2.1.11": "2.1.11_typescript@5.6.3",
    "npm:tauri-plugin-shellx-api@2.0.15": "2.0.15",
    "npm:tauri-plugin-shellx-api@^2.0.14": "2.0.14",
+    "npm:tauri-plugin-shellx-api@^2.0.15": "2.0.15",
    "npm:tauri-plugin-system-info-api@2.0.8": "2.0.8_typescript@5.6.3",
    "npm:ts-proto@^2.3.0": "2.6.1",
    "npm:tslib@^2.8.1": "2.8.1",
@ -1543,6 +1548,9 @@
        "levn"
      ]
    },
+    "@faker-js/faker@9.5.1": {
+      "integrity": "sha512-0fzMEDxkExR2cn731kpDaCCnBGBUOIXEi2S1N5l8Hltp6aPf4soTMJ+g4k8r2sI5oB+rpwIW8Uy/6jkwGpnWPg=="
+    },
    "@floating-ui/core@1.6.9": {
      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
      "dependencies": [
@ -2710,7 +2718,7 @@
        "clipboardy",
        "consola@3.4.0",
        "defu",
-        "fuse.js",
+        "fuse.js@7.0.0",
        "giget",
        "h3",
        "httpxy",
@ -5003,16 +5011,26 @@
        "tailwindcss"
      ]
    },
+    "@tanstack/svelte-virtual@3.13.2_svelte@5.19.6__acorn@8.14.0": {
+      "integrity": "sha512-Rrt5tQiZg9GlrUXV40tq8Prmg7iacoWd0sAc8DCBpBxgH/BHzpWonk7BMyTw03FWmRn9aUB4PO8+HZJmPnmFng==",
+      "dependencies": [
+        "@tanstack/virtual-core@3.13.2",
+        "svelte@5.19.6_acorn@8.14.0"
+      ]
+    },
    "@tanstack/table-core@8.20.5": {
      "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg=="
    },
    "@tanstack/virtual-core@3.11.3": {
      "integrity": "sha512-v2mrNSnMwnPJtcVqNvV0c5roGCBqeogN8jDtgtuHCphdwBasOZ17x8UV8qpHUh+u0MLfX43c0uUHKje0s+Zb0w=="
    },
+    "@tanstack/virtual-core@3.13.2": {
+      "integrity": "sha512-Qzz4EgzMbO5gKrmqUondCjiHcuu4B1ftHb0pjCut661lXZdGoHeze9f/M8iwsK1t5LGR6aNuNGU7mxkowaW6RQ=="
+    },
    "@tanstack/vue-virtual@3.11.3_vue@3.5.13__typescript@5.6.3_typescript@5.6.3": {
      "integrity": "sha512-BVZ00i5XBucetRj2doVd32jOPtJthvZSVJvx9GL4gSQsyngliSCtzlP1Op7TFrEtmebRKT8QUQE1tRhOQzWecQ==",
      "dependencies": [
-        "@tanstack/virtual-core",
+        "@tanstack/virtual-core@3.11.3",
        "vue"
      ]
    },
@ -9102,6 +9120,9 @@
    "fuse.js@7.0.0": {
      "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q=="
    },
+    "fuse.js@7.1.0": {
+      "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ=="
+    },
    "gensync@1.0.0-beta.2": {
      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
    },
@ -9429,6 +9450,9 @@
    "he@1.2.0": {
      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
    },
+    "highlight.js@11.11.1": {
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w=="
+    },
    "hookable@5.5.3": {
      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
    },
@ -13532,6 +13556,15 @@
        "svelte@5.19.6_acorn@8.14.0"
      ]
    },
+    "svelte-inspect-value@0.2.2_svelte@5.19.6__acorn@8.14.0": {
+      "integrity": "sha512-Ly4QcIDoPo2O81CdIhx600bBaQdla65VXvXEMA9So947In8773Ey56k6A1WTsZiljAabxZFChBRqOt9nOYczuA==",
+      "dependencies": [
+        "esm-env",
+        "fast-deep-equal",
+        "highlight.js",
+        "svelte@5.19.6_acorn@8.14.0"
+      ]
+    },
    "svelte-markdown@0.4.1_svelte@4.2.19": {
      "integrity": "sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==",
      "dependencies": [
@ -15186,6 +15219,7 @@
            "npm:prettier@^3.4.2",
            "npm:pretty-bytes@^6.1.1",
            "npm:semver@^7.6.3",
+            "npm:svelte-inspect-value@~0.2.2",
            "npm:svelte-radix@^2.0.1",
            "npm:svelte-sonner@~0.3.28",
            "npm:sveltekit-superforms@^2.22.1",
@ -15278,6 +15312,7 @@
      "packages/extensions/demo-worker-template-ext": {
        "packageJson": {
          "dependencies": [
+            "npm:@faker-js/faker@^9.5.1",
            "npm:@jsr/kunkun__api@^0.0.13",
            "npm:@rollup/plugin-commonjs@^26.0.1",
            "npm:@rollup/plugin-node-resolve@^15.2.3",
@ -15549,6 +15584,7 @@
            "npm:@kksh/svelte5@~0.1.15",
            "npm:@shikijs/langs@^2.3.2",
            "npm:@shikijs/themes@^2.3.2",
+            "npm:@tanstack/svelte-virtual@^3.13.2",
            "npm:@types/bun@latest",
            "npm:@typescript-eslint/eslint-plugin@^8.20.0",
            "npm:@typescript-eslint/parser@^8.20.0",
@ -15559,6 +15595,7 @@
            "npm:eslint-plugin-svelte@^2.46.1",
            "npm:eslint@^9.21.0",
            "npm:formsnap@2.0.0-next.1",
+            "npm:fuse.js@^7.1.0",
            "npm:globals@^15.14.0",
            "npm:gsap@^3.12.7",
            "npm:lucide-svelte@0.471",
@ -15568,6 +15605,7 @@
            "npm:pretty-bytes@^6.1.1",
            "npm:shiki-magic-move@~0.5.2",
            "npm:shiki@^1.27.2",
+            "npm:svelte-inspect-value@~0.2.2",
            "npm:svelte-markdown@~0.4.1",
            "npm:svelte-radix@^2.0.1",
            "npm:svelte-sonner@~0.3.28",
--- a/packages/extensions/demo-worker-template-ext/package.json
+++ b/packages/extensions/demo-worker-template-ext/package.json
@ -113,6 +113,7 @@
 		"build": "bun build.ts"
 	},
 	"dependencies": {
+		"@faker-js/faker": "^9.5.1",
 		"@kksh/api": "workspace:*",
 		"@kunkun/api": "npm:@jsr/kunkun__api@^0.0.13"
 	},
--- a/packages/extensions/demo-worker-template-ext/src/index.ts
+++ b/packages/extensions/demo-worker-template-ext/src/index.ts
@ -1,3 +1,4 @@
+import { faker } from "@faker-js/faker"
 import {
 	Action,
 	app,
@ -23,6 +24,40 @@ import {
 } from "@kksh/api/ui/template"
 import { IconType } from "@kunkun/api/models"

+function generateId() {
+	return Math.random().toString(36).substring(2, 15)
+}
+
+type Item = {
+	id: string
+	name: string
+	description: string
+}
+
+type Section = {
+	name: string
+	items: Item[]
+	sectionRef: HTMLDivElement | null
+	sectionHeight: number
+}
+
+function getItems(n: number = 10): Item[] {
+	return Array.from({ length: n }, () => ({
+		id: generateId(),
+		name: faker.person.fullName(),
+		description: faker.lorem.sentence()
+	}))
+}
+
+function getSections(n: number = 10): Section[] {
+	return Array.from({ length: n }, () => ({
+		name: faker.lorem.word(),
+		items: getItems(3),
+		sectionRef: null,
+		sectionHeight: 0
+	}))
+}
+
 const nums = Array.from({ length: 20 }, (_, i) => i + 1)
 const categories = ["Suggestion", "Advice", "Idea"]
 const itemsTitle = nums.map((n) => categories.map((c) => `${c} ${n}`)).flat()
@ -52,6 +87,36 @@ class ExtensionTemplate extends TemplateUiCommand {

 	async load() {
 		ui.setSearchBarPlaceholder("Search for items")
+		const sections = getSections(2)
+		const items = getItems(5)
+		return ui.render(
+			new List.List({
+				items: items.map(
+					(item) =>
+						new List.Item({
+							title: item.name,
+							value: item.id
+							// icon: new Icon({
+							// 	type: IconType.enum.Iconify,
+							// 	value: "mingcute:appstore-fill"
+							// })
+						})
+				),
+				sections: sections.map(
+					(section) =>
+						new List.Section({
+							title: section.name,
+							items: section.items.map(
+								(item) =>
+									new List.Item({
+										title: item.name,
+										value: item.id
+									})
+							)
+						})
+				)
+			})
+		)
 		ui.showLoadingBar(true)
 		setTimeout(() => {
 			ui.showLoadingBar(false)
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -74,11 +74,14 @@
 		"@shikijs/langs": "^2.3.2",
 		"@shikijs/themes": "^2.3.2",
 		"@std/semver": "npm:@jsr/std__semver@^1.0.3",
+		"@tanstack/svelte-virtual": "^3.13.2",
 		"dompurify": "^3.2.3",
+		"fuse.js": "^7.1.0",
 		"gsap": "^3.12.7",
 		"moment": "^2.30.1",
 		"pretty-bytes": "^6.1.1",
 		"shiki-magic-move": "^0.5.2",
+		"svelte-inspect-value": "^0.2.2",
 		"svelte-markdown": "^0.4.1",
 		"valibot": "1.0.0-beta.12"
 	}
--- a/packages/ui/src/components/extension/templates/list-item.svelte
+++ b/packages/ui/src/components/extension/templates/list-item.svelte
@ -3,10 +3,27 @@
 	import { Command } from "@kksh/svelte5"
 	import { IconMultiplexer } from "../../common"

-	const { item, onSelect }: { item: ListSchema.Item; onSelect?: () => void } = $props()
+	const {
+		item,
+		class: className,
+		onSelect,
+		translateY,
+		height
+	}: {
+		item: ListSchema.Item
+		onSelect?: () => void
+		translateY?: number
+		height?: number
+		class?: string
+	} = $props()
 </script>

-<Command.Item class="gap-2" {onSelect} value={JSON.stringify(item)}>
+<Command.Item
+	class="debugitem gap-2 {className}"
+	{onSelect}
+	value={item.value}
+	style="position: absolute; top: 0; left: 0; width: 100%; height: {height}px; transform: translateY({translateY}px);"
+>
 	{#if item.icon}
 		<IconMultiplexer icon={item.icon} class="h-5 w-5" />
 	{/if}
--- a/packages/ui/src/components/extension/templates/list-view.svelte
+++ b/packages/ui/src/components/extension/templates/list-view.svelte
@ -3,13 +3,18 @@
 	import { Button, Command, Progress, Resizable } from "@kksh/svelte5"
 	import { CustomCommandInput } from "@kksh/ui/main"
 	import { commandScore } from "@kksh/ui/utils"
+	import { createVirtualizer, type VirtualItem } from "@tanstack/svelte-virtual"
+	import Fuse from "fuse.js"
 	import { ArrowLeftIcon } from "lucide-svelte"
 	import { type PaneAPI } from "paneforge"
-	import { onMount, type Snippet } from "svelte"
+	import { onMount, setContext, type Snippet } from "svelte"
+	import { Inspect } from "svelte-inspect-value"
 	import { StrikeSeparator } from "../../common"
 	import { DraggableCommandGroup } from "../../custom"
 	import ListDetail from "./list-detail.svelte"
 	import ListItem from "./list-item.svelte"
+	import { type Section } from "./types"
+	import VirtualCommandGroup from "./virtual-command-group.svelte"

 	let {
 		searchTerm = $bindable(""),
@ -87,24 +92,79 @@
 			rightPane?.resize(detailWidth)
 		}
 	})
+
+	/* -------------------------------------------------------------------------- */
+	/*                        Virtual List and Fuse Search                        */
+	/* -------------------------------------------------------------------------- */
+	const itemHeight = 30
+	setContext("itemHeight", itemHeight)
+	let sectionItems = $derived<ListSchema.Item[]>(
+		listViewContent.sections?.flatMap((section) => section.items) ?? []
+	)
+	/**
+	 * When search term is not empty, we hide sections/groups and move sections items all into items array
+	 */
+	let srcItems = $derived<ListSchema.Item[]>(
+		searchTerm.length > 0
+			? [...sectionItems, ...(listViewContent.items ?? [])]
+			: (listViewContent.items ?? [])
+	)
+	let srcSections = $state<Section[]>([])
+	$effect(() => {
+		//! srcSections cannot be derived, because its values are binded to Virtual Group, and must be a state
+		srcSections =
+			searchTerm.length === 0
+				? (listViewContent.sections?.map((section) => ({
+						...section,
+						sectionHeight: 0,
+						sectionRef: null
+					})) ?? [])
+				: []
+	})
+	let virtualListEl: HTMLDivElement | null = $state(null)
+	const itemsFuse = new Fuse<ListSchema.Item>([], {
+		includeScore: true,
+		threshold: 0.2,
+		keys: ["title", "subTitle", "keywords"]
+	})
+	let resultingItems = $derived<ListSchema.Item[]>(
+		// when search term changes, update the resulting items
+		searchTerm.length > 0 ? itemsFuse.search(searchTerm).map((item) => item.item) : srcItems
+	)
+	// section total height is auto derived from section refs
+	let sectionTotalHeight = $derived(srcSections.reduce((acc, s) => acc + (s.sectionHeight ?? 0), 0))
+	// this should be a list of numbers, the first item is 0, the second item equal to first sectionRef.clientHeight, and so on
+	let sectionsCummulativeHeight = $derived(
+		srcSections.map((s, i) =>
+			srcSections.slice(0, i).reduce((acc, s) => acc + (s.sectionHeight ?? 0), 0)
+		)
+	)
+	let virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+		count: 0,
+		getScrollElement: () => virtualListEl,
+		estimateSize: () => itemHeight,
+		overscan: 5
+	})
+	let virtualItems: VirtualItem[] = $state([])
+	let itemsTotalSize = $state(0)
+
+	$effect(() => {
+		itemsFuse.setCollection(srcItems)
+	})
+	$effect(() => {
+		void resultingItems
+		$virtualizer.setOptions({ count: resultingItems.length, scrollMargin: sectionTotalHeight })
+		virtualItems = $virtualizer.getVirtualItems()
+		itemsTotalSize = $virtualizer.getTotalSize()
+	})
 </script>

 <Command.Root
 	vimBindings={false}
 	class="h-screen w-full rounded-lg border shadow-md"
-	shouldFilter={listViewContent.filter !== "none"}
 	bind:value={highlightedValue}
 	loop
-	filter={(value, search, keywords) => {
-		if (!value.startsWith("{")) {
-			return -1
-		}
-		const item = JSON.parse(value) as ListSchema.Item
-		return (
-			commandScore(item.title, search, keywords) +
-			(item.subTitle ? commandScore(item.subTitle, search, keywords) : 0)
-		)
-	}}
+	shouldFilter={false}
 >
 	<CustomCommandInput
 		bind:value={searchTerm}
@ -137,18 +197,40 @@

 	<Resizable.PaneGroup direction="horizontal">
 		<Resizable.Pane bind:this={leftPane}>
-			<Command.List class="h-full max-h-screen" onscroll={onScroll}>
+			<Command.List class="h-full max-h-screen" onscroll={onScroll} bind:ref={virtualListEl}>
 				<Command.Empty>No results found.</Command.Empty>
-				{#each listViewContent.sections || [] as section}
-					<DraggableCommandGroup heading={section.title}>
-						{#each section.items as item}
-							<ListItem {item} onSelect={() => onListItemSelected?.(item.value)} />
-						{/each}
-					</DraggableCommandGroup>
-				{/each}
-				{#each listViewContent.items || [] as item}
-					<ListItem {item} onSelect={() => onListItemSelected?.(item.value)} />
-				{/each}
+				<div
+					style="position: relative; height: {itemsTotalSize + sectionTotalHeight}px; width: 100%;"
+					class=""
+				>
+					{#each srcSections as section, i}
+						<VirtualCommandGroup
+							heading={section.title ?? ""}
+							items={section.items}
+							parentRef={virtualListEl}
+							bind:sectionRef={section.sectionRef}
+							scrollMargin={sectionsCummulativeHeight[i] ?? 0}
+							bind:sectionHeight={section.sectionHeight}
+							{searchTerm}
+							{onListItemSelected}
+						/>
+					{/each}
+					{#each virtualItems as row (row.index)}
+						{@const item = resultingItems[row.index]}
+						{#if item}
+							<ListItem
+								height={row.size}
+								translateY={row.start}
+								{item}
+								onSelect={() => onListItemSelected?.(item.value)}
+							/>
+						{:else}
+							<Command.Item>
+								<span>No Data</span>
+							</Command.Item>
+						{/if}
+					{/each}
+				</div>
 				{#if loading}
 					<StrikeSeparator class="h-20">
 						<span>Loading</span>
--- a/packages/ui/src/components/extension/templates/types.ts
+++ b/packages/ui/src/components/extension/templates/types.ts
@ -0,0 +1,6 @@
+import type { ListSchema } from "@kksh/api/models"
+
+export type Section = ListSchema.Section & {
+	sectionHeight: number
+	sectionRef: HTMLDivElement | null
+}
--- a/packages/ui/src/components/extension/templates/virtual-command-group.svelte
+++ b/packages/ui/src/components/extension/templates/virtual-command-group.svelte
@ -0,0 +1,84 @@
+<script lang="ts">
+	import { ListSchema } from "@kksh/api/models"
+	import { createVirtualizer, type VirtualItem } from "@tanstack/svelte-virtual"
+	import Fuse from "fuse.js"
+	import { getContext } from "svelte"
+	import { DraggableCommandGroup } from "../../custom"
+	import ListItem from "./list-item.svelte"
+
+	let {
+		heading,
+		items,
+		parentRef,
+		searchTerm,
+		sectionHeight = $bindable(0),
+		sectionRef = $bindable(null),
+		scrollMargin = $bindable(0),
+		onListItemSelected
+	}: {
+		heading: string
+		items: ListSchema.Item[]
+		sectionHeight: number
+		searchTerm: string
+		parentRef: HTMLDivElement | null
+		sectionRef: HTMLDivElement | null
+		scrollMargin: number
+		onListItemSelected?: (value: string) => void
+	} = $props()
+
+	const fuse = new Fuse(items, {
+		includeScore: true,
+		threshold: 0.2,
+		keys: ["title", "subTitle", "keywords"]
+	})
+
+	const itemHeight = getContext<number>("itemHeight") ?? 30
+
+	let virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+		count: items.length,
+		getScrollElement: () => parentRef,
+		estimateSize: () => itemHeight,
+		overscan: 5
+	})
+	let virtualItems: VirtualItem[] = $state([])
+	let itemsTotalSize = $state(0)
+
+	let resultingItems = $derived(
+		// when search term changes, update the resulting items
+		searchTerm.length > 0 ? fuse.search(searchTerm).map((item) => item.item) : items
+	)
+
+	$effect(() => {
+		// when props.items update, update the fuse collection
+		fuse.setCollection(items)
+	})
+
+	$effect(() => {
+		// when resultingItems changes, update virtualizer count and scrollMargin
+		$virtualizer.setOptions({ count: resultingItems.length, scrollMargin })
+		virtualItems = $virtualizer.getVirtualItems()
+		itemsTotalSize = $virtualizer.getTotalSize()
+	})
+	$effect(() => {
+		sectionHeight = itemsTotalSize + itemHeight
+	})
+</script>
+
+<DraggableCommandGroup
+	heading={`${heading} (${items.length})`}
+	bind:ref={sectionRef}
+	class="relative"
+	style="height: {sectionHeight}px;"
+>
+	{#each virtualItems as row (row.index)}
+		{@const item = resultingItems[row.index]}
+		{#if item}
+			<ListItem
+				height={row.size}
+				translateY={row.start - scrollMargin + itemHeight}
+				{item}
+				onSelect={() => onListItemSelected?.(item.value)}
+			/>
+		{/if}
+	{/each}
+</DraggableCommandGroup>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -144,7 +144,7 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4
      '@types/debug':
        specifier: ^4.1.12
        version: 4.1.12
@ -184,7 +184,7 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4
      '@types/fs-extra':
        specifier: ^11.0.4
        version: 11.0.4
@ -323,7 +323,7 @@ importers:
        version: 2.2.7
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4
      '@types/semver':
        specifier: ^7.5.8
        version: 7.5.8
@ -335,7 +335,7 @@ importers:
        version: 8.23.0(eslint@9.21.0(jiti@2.4.0))(typescript@5.6.3)
      autoprefixer:
        specifier: ^10.4.20
-        version: 10.4.20(postcss@8.4.49)
+        version: 10.4.20(postcss@8.5.1)
      bits-ui:
        specifier: 1.0.0-next.86
        version: 1.0.0-next.86(svelte@5.16.6)
@ -474,7 +474,7 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4
      '@types/lodash':
        specifier: ^4.17.14
        version: 4.17.14
@ -514,7 +514,7 @@ importers:
        version: link:../typescript-config
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4

  packages/config-eslint:
    dependencies:
@ -557,10 +557,13 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4

  packages/extensions/demo-worker-template-ext:
    dependencies:
+      '@faker-js/faker':
+        specifier: ^9.5.1
+        version: 9.5.1
      '@kksh/api':
        specifier: workspace:*
        version: link:../../api
@ -582,7 +585,7 @@ importers:
        version: 11.1.6(rollup@4.34.2)(tslib@2.8.1)(typescript@5.7.3)
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4
      rollup-plugin-visualizer:
        specifier: ^5.12.0
        version: 5.12.0(rollup@4.34.2)
@ -689,7 +692,7 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4

  packages/grpc:
    dependencies:
@ -708,7 +711,7 @@ importers:
        version: 0.7.13
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4
      '@types/google-protobuf':
        specifier: ^3.15.12
        version: 3.15.12
@ -736,7 +739,7 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4
      verify-package-export:
        specifier: ^0.0.3
        version: 0.0.3(typescript@5.7.3)
@ -764,7 +767,7 @@ importers:
        version: 2.48.0
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4
      '@valibot/to-json-schema':
        specifier: 1.0.0-beta.4
        version: 1.0.0-beta.4(valibot@1.0.0-beta.10(typescript@5.7.3))
@ -786,7 +789,7 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4

  packages/tauri-plugins/jarvis:
    dependencies:
@ -805,7 +808,7 @@ importers:
        version: 2.48.0
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4

  packages/templates/template-ext-headless:
    dependencies:
@ -824,7 +827,7 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4

  packages/templates/template-ext-next:
    dependencies:
@ -1176,7 +1179,7 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4

  packages/types:
    dependencies:
@ -1186,7 +1189,7 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4

  packages/typescript-config: {}

@ -1213,9 +1216,15 @@ importers:
      '@std/semver':
        specifier: npm:@jsr/std__semver@^1.0.3
        version: '@jsr/std__semver@1.0.3'
+      '@tanstack/svelte-virtual':
+        specifier: ^3.13.2
+        version: 3.13.2(svelte@5.16.6)
      dompurify:
        specifier: ^3.2.3
        version: 3.2.3
+      fuse.js:
+        specifier: ^7.1.0
+        version: 7.1.0
      gsap:
        specifier: ^3.12.7
        version: 3.12.7
@ -1231,6 +1240,9 @@ importers:
      svelte:
        specifier: ^5.0.0
        version: 5.16.6
+      svelte-inspect-value:
+        specifier: ^0.2.2
+        version: 0.2.2(svelte@5.16.6)
      svelte-markdown:
        specifier: ^0.4.1
        version: 0.4.1(svelte@5.16.6)
@ -1252,7 +1264,7 @@ importers:
        version: 0.1.15(lucide-svelte@0.471.0(svelte@5.16.6))(svelte-sonner@0.3.28(svelte@5.16.6))(svelte@5.16.6)(sveltekit-superforms@2.22.1(@sveltejs/kit@2.17.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.16.6)(vite@6.0.7(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1)))(svelte@5.16.6)(vite@6.0.7(@types/node@22.13.1)(jiti@2.4.0)(terser@5.36.0)(yaml@2.6.1)))(@types/json-schema@7.0.15)(svelte@5.16.6)(typescript@5.7.3))(typescript@5.7.3)
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4
      '@typescript-eslint/eslint-plugin':
        specifier: ^8.20.0
        version: 8.20.0(@typescript-eslint/parser@8.20.0(eslint@9.21.0(jiti@2.4.0))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.0))(typescript@5.7.3)
@ -1334,7 +1346,7 @@ importers:
    devDependencies:
      '@types/bun':
        specifier: latest
-        version: 1.2.3
+        version: 1.2.4

  vendors/tauri-plugin-keyring:
    dependencies:
@ -2404,6 +2416,10 @@ packages:
  '@exodus/schemasafe@1.3.0':
    resolution: {integrity: sha512-5Aap/GaRupgNx/feGBwLLTVv8OQFfv3pq2lPRzPg9R+IOBnDgghTGW7l7EuVXOvg5cc/xSAlRW8rBrjIC3Nvqw==}

+  '@faker-js/faker@9.5.1':
+    resolution: {integrity: sha512-0fzMEDxkExR2cn731kpDaCCnBGBUOIXEi2S1N5l8Hltp6aPf4soTMJ+g4k8r2sI5oB+rpwIW8Uy/6jkwGpnWPg==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0'}
+
  '@floating-ui/core@1.6.8':
    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}

@ -4897,6 +4913,11 @@ packages:
    peerDependencies:
      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'

+  '@tanstack/svelte-virtual@3.13.2':
+    resolution: {integrity: sha512-Rrt5tQiZg9GlrUXV40tq8Prmg7iacoWd0sAc8DCBpBxgH/BHzpWonk7BMyTw03FWmRn9aUB4PO8+HZJmPnmFng==}
+    peerDependencies:
+      svelte: ^3.48.0 || ^4.0.0 || ^5.0.0
+
  '@tanstack/table-core@8.20.5':
    resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
    engines: {node: '>=12'}
@ -4904,6 +4925,9 @@ packages:
  '@tanstack/virtual-core@3.10.9':
    resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}

+  '@tanstack/virtual-core@3.13.2':
+    resolution: {integrity: sha512-Qzz4EgzMbO5gKrmqUondCjiHcuu4B1ftHb0pjCut661lXZdGoHeze9f/M8iwsK1t5LGR6aNuNGU7mxkowaW6RQ==}
+
  '@tanstack/vue-virtual@3.10.9':
    resolution: {integrity: sha512-KU2quiwJQpA0sdflpXw24bhW+x8PG+FlrSJK3Ilobim671HNn4ztLVWUCEz3Inei4dLYq+GW1MK9X6i6ZeirkQ==}
    peerDependencies:
@ -5170,8 +5194,8 @@ packages:
  '@types/btoa-lite@1.0.2':
    resolution: {integrity: sha512-ZYbcE2x7yrvNFJiU7xJGrpF/ihpkM7zKgw8bha3LNJSesvTtUNxbpzaT7WXBIryf6jovisrxTBvymxMeLLj1Mg==}

-  '@types/bun@1.2.3':
-    resolution: {integrity: sha512-054h79ipETRfjtsCW9qJK8Ipof67Pw9bodFWmkfkaUaRiIQ1dIV2VTlheshlBx3mpKr0KeK8VqnMMCtgN9rQtw==}
+  '@types/bun@1.2.4':
+    resolution: {integrity: sha512-QtuV5OMR8/rdKJs213iwXDpfVvnskPXY/S0ZiFbsTjQZycuqPbMW8Gf/XhLfwE5njW8sxI2WjISURXPlHypMFA==}

  '@types/cookie@0.6.0':
    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
@ -6220,8 +6244,8 @@ packages:
  buffer@6.0.3:
    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}

-  bun-types@1.2.3:
-    resolution: {integrity: sha512-P7AeyTseLKAvgaZqQrvp3RqFM3yN9PlcLuSTe7SoJOfZkER73mLdT2vEQi8U64S1YvM/ldcNiQjn0Sn7H9lGgg==}
+  bun-types@1.2.4:
+    resolution: {integrity: sha512-nDPymR207ZZEoWD4AavvEaa/KZe/qlrbMSchqpQwovPZCKc7pwMoENjEtHgMKaAjJhy+x6vfqSBA1QU3bJgs0Q==}

  bundle-name@4.1.0:
    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
@ -13223,6 +13247,8 @@ snapshots:
  '@exodus/schemasafe@1.3.0':
    optional: true

+  '@faker-js/faker@9.5.1': {}
+
  '@floating-ui/core@1.6.8':
    dependencies:
      '@floating-ui/utils': 0.2.8
@ -16491,10 +16517,17 @@ snapshots:
      postcss-selector-parser: 6.0.10
      tailwindcss: 3.4.17

+  '@tanstack/svelte-virtual@3.13.2(svelte@5.16.6)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.2
+      svelte: 5.16.6
+
  '@tanstack/table-core@8.20.5': {}

  '@tanstack/virtual-core@3.10.9': {}

+  '@tanstack/virtual-core@3.13.2': {}
+
  '@tanstack/vue-virtual@3.10.9(vue@3.5.13(typescript@5.6.3))':
    dependencies:
      '@tanstack/virtual-core': 3.10.9
@ -16742,9 +16775,9 @@ snapshots:

  '@types/btoa-lite@1.0.2': {}

-  '@types/bun@1.2.3':
+  '@types/bun@1.2.4':
    dependencies:
-      bun-types: 1.2.3
+      bun-types: 1.2.4

  '@types/cookie@0.6.0': {}

@ -18156,6 +18189,16 @@ snapshots:
      postcss: 8.4.49
      postcss-value-parser: 4.2.0

+  autoprefixer@10.4.20(postcss@8.5.1):
+    dependencies:
+      browserslist: 4.24.2
+      caniuse-lite: 1.0.30001676
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.1
+      postcss-value-parser: 4.2.0
+
  available-typed-arrays@1.0.7:
    dependencies:
      possible-typed-array-names: 1.0.0
@ -18291,7 +18334,7 @@ snapshots:
      base64-js: 1.5.1
      ieee754: 1.2.1

-  bun-types@1.2.3:
+  bun-types@1.2.4:
    dependencies:
      '@types/node': 22.13.1
      '@types/ws': 8.5.14
@ -22851,7 +22894,7 @@ snapshots:

  runed@0.23.2(svelte@5.16.6):
    dependencies:
-      esm-env: 1.2.1
+      esm-env: 1.2.2
      svelte: 5.16.6

  rw@1.3.3: {}