[feat] Improve list view with fuse search and virtual list (kunkunsh#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

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kksh/desktop",
-	"version": "0.1.28",
+	"version": "0.1.29",
 	"description": "",
 	"type": "module",
 	"scripts": {

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>

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>

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}

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(() => {

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"
 	},

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)

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"
 	}

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}