fix: list view item's action panel and listview undefined error (#224)

* fix: list view item's action panel and listview undefined error

* chore: increase Node.js memory limit for build processes

* chore: configure Node.js memory limit for Tauri build process

* refactor: delete unecessary ui component code

.github/workflows/beta-build.yml

@@ -205,12 +205,15 @@ jobs:
         run: pnpm prepare
 
       - name: Build Packages
+        env:
+          NODE_OPTIONS: --max-old-space-size=4096
         run: pnpm build
 
       - name: Build the App
         working-directory: apps/desktop
         env:
           CI: false
+          NODE_OPTIONS: --max-old-space-size=4096
         run: pnpm tauri build ${{ env.BUILD_MODE}} ${{ matrix.os == 'windows-latest' && '-b nsis' || '' }}
 
       - name: Rename macos-aarch64

.github/workflows/ci.yml

@@ -52,6 +52,8 @@ jobs:
       - name: Setup
         run: pnpm prepare
       - name: Build
+        env:
+          NODE_OPTIONS: --max-old-space-size=4096
         run: pnpm build
       - name: JS Test
         if: matrix.os == 'ubuntu-24.04'

.vscode/settings.json

@@ -10,5 +10,10 @@
     "titleBar.activeForeground": "#FFFBFC"
   },
   "svelte.enable-ts-plugin": true,
-  "deno.enable": false
+  "deno.enable": false,
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true
+  }
 }

apps/desktop/package.json

@@ -16,51 +16,51 @@
 	"license": "MIT",
 	"dependencies": {
 		"@formkit/auto-animate": "^0.8.2",
-		"@inlang/paraglide-sveltekit": "0.15.5",
+		"@inlang/paraglide-sveltekit": "0.16.0",
 		"@kksh/extension": "workspace:*",
 		"@kksh/supabase": "workspace:*",
 		"@kksh/svelte5": "^0.1.15",
 		"@kksh/ui": "workspace:*",
 		"@kksh/utils": "workspace:*",
-		"@std/semver": "npm:@jsr/std__semver@^1.0.3",
-		"@supabase/supabase-js": "^2.48.0",
-		"@tanstack/table-core": "^8.20.5",
-		"@tauri-apps/api": "^2.1.1",
+		"@std/semver": "npm:@jsr/std__semver@^1.0.4",
+		"@supabase/supabase-js": "^2.49.1",
+		"@tanstack/table-core": "^8.21.2",
+		"@tauri-apps/api": "^2.3.0",
 		"@tauri-apps/plugin-autostart": "^2.2.0",
 		"@tauri-apps/plugin-shell": "^2.2.0",
 		"@tauri-apps/plugin-stronghold": "^2.2.0",
-		"dompurify": "^3.2.3",
+		"dompurify": "^3.2.4",
 		"eslint": "^9.21.0",
 		"fuse.js": "^7.1.0",
-		"gsap": "^3.12.5",
-		"kkrpc": "^0.1.1",
+		"gsap": "^3.12.7",
+		"kkrpc": "^0.1.2",
 		"lz-string": "^1.5.0",
 		"pretty-bytes": "^6.1.1",
-		"semver": "^7.6.3",
+		"semver": "^7.7.1",
 		"svelte-inspect-value": "^0.3.0",
 		"svelte-sonner": "^0.3.28",
-		"sveltekit-superforms": "^2.22.1",
+		"sveltekit-superforms": "^2.23.1",
 		"tauri-plugin-clipboard-api": "^2.1.11",
 		"tauri-plugin-shellx-api": "^2.0.15",
 		"tauri-plugin-user-input-api": "workspace:*",
-		"uuid": "^11.0.3"
+		"uuid": "^11.1.0"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.19.0",
+		"@eslint/js": "^9.21.0",
 		"@inlang/paraglide-js": "1.11.8",
 		"@kksh/types": "workspace:*",
 		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.17.1",
+		"@sveltejs/kit": "^2.17.3",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/forms": "^0.5.10",
 		"@tailwindcss/typography": "^0.5.16",
-		"@tauri-apps/cli": "^2.2.7",
+		"@tauri-apps/cli": "^2.3.1",
 		"@types/bun": "latest",
 		"@types/semver": "^7.5.8",
-		"@typescript-eslint/eslint-plugin": "^8.23.0",
-		"@typescript-eslint/parser": "^8.23.0",
+		"@typescript-eslint/eslint-plugin": "^8.25.0",
+		"@typescript-eslint/parser": "^8.25.0",
 		"autoprefixer": "^10.4.20",
 		"bits-ui": "1.0.0-next.86",
 		"clsx": "^2.1.1",
@@ -68,15 +68,15 @@
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.14.0",
 		"lucide-svelte": "^0.474.0",
-		"prettier": "^3.4.2",
+		"prettier": "^3.5.2",
 		"svelte-radix": "^2.0.1",
-		"tailwind-merge": "^2.5.5",
-		"tailwind-variants": "^0.3.0",
+		"tailwind-merge": "^2.6.0",
+		"tailwind-variants": "^0.3.1",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",
 		"tslib": "^2.8.1",
 		"typescript": "^5.6.3",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^6.0.3"
+		"typescript-eslint": "^8.25.0",
+		"vite": "^6.2.0"
 	}
 }

apps/desktop/src/routes/app/extension/ui-worker/+page.svelte

@@ -28,7 +28,7 @@
 		type IComponent,
 		type TemplateUiCommand
 	} from "@kksh/api/ui/template"
-	import { Button } from "@kksh/svelte5"
+	import { Button, Form } from "@kksh/svelte5"
 	import { LoadingBar } from "@kksh/ui"
 	import { Templates } from "@kksh/ui/extension"
 	import { GlobalCommandPaletteFooter } from "@kksh/ui/main"
@@ -48,8 +48,10 @@
 	import { goto } from "$app/navigation"
 	import { RPCChannel, WorkerParentIO } from "kkrpc/browser"
 	import { onDestroy, onMount, tick } from "svelte"
+	import Inspect from "svelte-inspect-value"
 	import { type CommandEvent } from "tauri-plugin-shellx-api"
 	import * as v from "valibot"
+	import Listview2 from "./listview2.svelte"
 
 	const { data } = $props()
 	let listviewInputRef = $state<HTMLInputElement | null>(null)
@@ -59,9 +61,9 @@
 	let unlistenRefreshWorkerExt: UnlistenFn | undefined
 	let unlistenFileDrop: UnlistenFn | undefined
 	let worker: Worker | undefined
-	let listViewContent = $state<ListSchema.List>()
-	let formViewContent = $state<FormSchema.Form>()
-	let markdownViewContent = $state<MarkdownSchema>()
+	let listViewContent = $state<ListSchema.List | null>(null)
+	let formViewContent = $state<FormSchema.Form | null>(null)
+	let markdownViewContent = $state<MarkdownSchema | null>(null)
 	let extensionLoadingBar = $state(false) // whether extension called showLoadingBar
 	let pbar = $state<number | null>(null)
 	let loading = $state(false)
@@ -74,7 +76,7 @@
 	let listview: Templates.ListView | undefined = $state(undefined)
 	const _platform = platform()
 	let unlistenPkgJsonWatch: UnlistenFn | undefined
-
+	let curViewNodeName = $state<NodeNameEnum | FormNodeNameEnum | null>(null)
 	async function goBack() {
 		if (isInMainWindow()) {
 			goto(i18n.resolveRoute("/app/"))
@@ -83,23 +85,28 @@
 		}
 	}
 
-	function clearViewContent(keep?: "list" | "form" | "markdown") {
+	async function clearViewContent(keep?: "list" | "form" | "markdown") {
 		if (keep !== "list") {
-			listViewContent = undefined
+			listViewContent = null
 		}
 		if (keep !== "form") {
-			formViewContent = undefined
+			formViewContent = null
 		}
 		if (keep !== "markdown") {
-			markdownViewContent = undefined
+			markdownViewContent = null
 		}
+		await tick()
+		// await sleep(3000)
 	}
 
 	const extUiAPI: IUiTemplate = {
-		async render(view: IComponent<ListSchema.List | FormSchema.Form | MarkdownSchema>) {
-			if (view.nodeName === NodeNameEnum.List) {
-				clearViewContent("list")
-				const parsedListViewRes = v.safeParse(ListSchema.List, view)
+		async render(_view: IComponent<ListSchema.List | FormSchema.Form | MarkdownSchema>) {
+			// console.log("render nodeName", _view.nodeName)
+			// console.log("render", _view)
+			curViewNodeName = _view.nodeName
+			if (_view.nodeName === NodeNameEnum.List) {
+				await clearViewContent("list")
+				const parsedListViewRes = v.safeParse(ListSchema.List, _view)
 				if (!parsedListViewRes.success) {
 					toast.error("Invalid List View", {
 						description: "See console for details"
@@ -179,20 +186,22 @@
 				// } else {
 				// 	listViewContent = parsedListView
 				// }
-			} else if (view.nodeName === FormNodeNameEnum.Form) {
-				listViewContent = undefined
-				clearViewContent("form")
-				const parsedForm = v.parse(FormSchema.Form, view)
+			} else if (_view.nodeName === FormNodeNameEnum.Form) {
+				listViewContent = null
+				// await clearViewContent("form")
+				// await tick()
+				const parsedForm = v.parse(FormSchema.Form, _view)
 				formViewContent = parsedForm
 				// TODO: convert form to zod schema
 				// const zodSchema = convertFormToZod(parsedForm)
 				// formViewZodSchema = zodSchema
 				// formFieldConfig = buildFieldConfig(parsedForm)
-			} else if (view.nodeName === NodeNameEnum.Markdown) {
-				clearViewContent("markdown")
-				markdownViewContent = v.parse(MarkdownSchema, view)
+			} else if (_view.nodeName === NodeNameEnum.Markdown) {
+				await clearViewContent("markdown")
+				await tick()
+				markdownViewContent = v.parse(MarkdownSchema, _view)
 			} else {
-				toast.error(`Unsupported view type: ${view.nodeName}`)
+				toast.error(`Unsupported view type: ${_view.nodeName}`)
 			}
 		},
 		async showLoadingBar(loading: boolean) {
@@ -363,7 +372,8 @@
 {#if loadingBar}
 	<LoadingBar class="fixed left-0 top-0 w-full" color="white" />
 {/if}
-{#if loaded && listViewContent !== undefined}
+
+{#if curViewNodeName === NodeNameEnum.List && listViewContent}
 	<Templates.ListView
 		bind:inputRef={listviewInputRef}
 		bind:searchTerm
@@ -385,26 +395,18 @@
 		onSearchTermChange={(searchTerm: string) => {
 			workerAPI?.onSearchTermChange(searchTerm)
 		}}
-		onHighlightedItemChanged={(value: string) => {
-			// workerAPI?.onHighlightedListItemChanged(value)
-			// if (listViewContent?.defaultAction) {
-			// 	appState.setDefaultAction(listViewContent.defaultAction)
-			// }
-			// if (listViewContent?.actions) {
-			// 	appState.setActionPanel(listViewContent.actions)
-			// }
-			try {
-				const parsedItem = v.parse(ListSchema.Item, JSON.parse(value))
-				if (parsedItem.defaultAction) {
-					appState.setDefaultAction(parsedItem.defaultAction)
-				}
-				if (parsedItem.actions) {
-					appState.setActionPanel(parsedItem.actions)
-				}
-				workerAPI?.onHighlightedListItemChanged(parsedItem.value)
-			} catch (error) {
-				console.error(error)
+		onHighlightedItemChanged={(item: ListSchema.Item) => {
+			if (item.defaultAction) {
+				appState.setDefaultAction(item.defaultAction)
+			} else if (listViewContent?.defaultAction) {
+				appState.setDefaultAction(listViewContent.defaultAction)
 			}
+			if (item.actions) {
+				appState.setActionPanel(item.actions)
+			} else if (listViewContent?.actions) {
+				appState.setActionPanel(listViewContent.actions)
+			}
+			workerAPI?.onHighlightedListItemChanged(item.value)
 		}}
 	>
 		{#snippet footer()}
@@ -422,7 +424,8 @@
 			/>
 		{/snippet}
 	</Templates.ListView>
-{:else if loaded && formViewContent !== undefined}
+{/if}
+{#if curViewNodeName === FormNodeNameEnum.Form && formViewContent}
 	<Templates.FormView
 		{formViewContent}
 		{pbar}
@@ -432,6 +435,7 @@
 			workerAPI?.onFormSubmit(formData)
 		}}
 	/>
-{:else if loaded && markdownViewContent !== undefined}
+{/if}
+{#if curViewNodeName === NodeNameEnum.Markdown && markdownViewContent}
 	<Templates.MarkdownView {markdownViewContent} onGoBack={goBack} />
 {/if}

apps/desktop/src/routes/app/extension/ui-worker/listview2.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { ListSchema } from "@kunkunapi/src/models"
+
+	let { listViewContent }: { listViewContent: ListSchema.List } = $props()
+	let detailWidth = $derived(listViewContent.detail ? (listViewContent.detail?.width ?? 70) : 0)
+</script>
+
+<div>detailWidth: {detailWidth}</div>

package.json

@@ -11,15 +11,15 @@
 		"format": "prettier --write \"**/*.{ts,tsx,md,svelte}\""
 	},
 	"devDependencies": {
-		"@ianvs/prettier-plugin-sort-imports": "^4.4.0",
+		"@ianvs/prettier-plugin-sort-imports": "^4.4.1",
 		"@kksh/api": "workspace:*",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.2",
-		"prettier-plugin-tailwindcss": "^0.6.9",
-		"svelte": "^5.16.6",
-		"svelte-check": "^4.1.1",
-		"turbo": "^2.3.4",
-		"typescript": "5.7.2",
+		"prettier": "^3.5.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.20.5",
+		"svelte-check": "^4.1.4",
+		"turbo": "^2.4.4",
+		"typescript": "^5.0.0",
 		"verify-package-export": "^0.0.3"
 	},
 	"packageManager": "pnpm@10.4.1",
@@ -27,29 +27,29 @@
 		"node": ">=22"
 	},
 	"dependencies": {
-		"@changesets/cli": "^2.27.11",
+		"@changesets/cli": "^2.28.1",
 		"@iconify/svelte": "^4.2.0",
-		"@supabase/supabase-js": "^2.48.0",
-		"@tauri-apps/api": "^2.2.0",
-		"@tauri-apps/cli": "^2.2.2",
+		"@supabase/supabase-js": "^2.49.1",
+		"@tauri-apps/api": "^2.3.0",
+		"@tauri-apps/cli": "^2.3.1",
 		"@tauri-apps/plugin-deep-link": "^2.2.0",
 		"@tauri-apps/plugin-dialog": "^2.2.0",
 		"@tauri-apps/plugin-fs": "^2.2.0",
 		"@tauri-apps/plugin-global-shortcut": "^2.2.0",
-		"@tauri-apps/plugin-http": "^2.2.0",
-		"@tauri-apps/plugin-log": "^2.2.0",
-		"@tauri-apps/plugin-notification": "^2.2.0",
+		"@tauri-apps/plugin-http": "^2.3.0",
+		"@tauri-apps/plugin-log": "^2.2.3",
+		"@tauri-apps/plugin-notification": "^2.2.1",
 		"@tauri-apps/plugin-os": "^2.2.0",
 		"@tauri-apps/plugin-process": "2.2.0",
 		"@tauri-apps/plugin-shell": "^2.2.0",
 		"@tauri-apps/plugin-store": "^2.2.0",
-		"@tauri-apps/plugin-updater": "^2.3.1",
-		"supabase": "^2.2.1",
+		"@tauri-apps/plugin-updater": "^2.5.1",
+		"supabase": "^2.15.8",
 		"tauri-plugin-keyring-api": "workspace:*",
 		"tauri-plugin-network-api": "workspace:*",
 		"tauri-plugin-system-info-api": "workspace:*",
 		"valibot": "^1.0.0-beta.11",
-		"zod": "^3.24.1"
+		"zod": "^3.24.2"
 	},
 	"workspaces": [
 		"apps/*",

packages/api/src/version.ts

@@ -21,7 +21,7 @@ export const breakingChangesVersionCheckpoints = [
 const checkpointVersions = breakingChangesVersionCheckpoints.map((c) => c.version)
 const sortedCheckpointVersions = sort(checkpointVersions)
 
-export const version = "0.1.3"
+export const version = "0.1.5"
 
 export function isVersionBetween(v: string, start: string, end: string) {
 	const vCleaned = clean(v)

packages/ui/components.json

@@ -14,4 +14,4 @@
 	},
 	"typescript": true,
 	"registry": "https://next.shadcn-svelte.com/registry"
-}
+}

packages/ui/src/components/extension/templates/form-view.svelte

@@ -20,14 +20,16 @@
 {#if pbar && pbar > 0}
 	<Progress value={Math.min(pbar, 100)} class="absolute top-0 h-0.5 rounded-none" />
 {/if}
-<div data-tauri-drag-region class="h-12 w-full"></div>
-<Button class="fixed left-2 top-2" size="icon" variant="outline" onclick={onGoBack}>
-	<ArrowLeftIcon />
-</Button>
-<main class="container flex flex-col gap-2 pb-4">
-	<h1 class="text-2xl font-bold">{formViewContent.title}</h1>
-	{#if formViewContent.description}
-		<p>{formViewContent.description}</p>
-	{/if}
-	<Form {formViewContent} {onSubmit} />
-</main>
+{#if formViewContent}
+	<div data-tauri-drag-region class="h-12 w-full"></div>
+	<Button class="fixed left-2 top-2" size="icon" variant="outline" onclick={onGoBack}>
+		<ArrowLeftIcon />
+	</Button>
+	<main class="container flex flex-col gap-2 pb-4">
+		<h1 class="text-2xl font-bold">{formViewContent.title}</h1>
+		{#if formViewContent.description}
+			<p>{formViewContent.description}</p>
+		{/if}
+		<Form {formViewContent} {onSubmit} />
+	</main>
+{/if}

packages/ui/src/components/extension/templates/form.svelte

@@ -37,6 +37,7 @@
 			onUpdate({ form, cancel }) {
 				if (!form.valid) return
 				cancel()
+				console.log("form data valid; formData", $formData)
 				const parsedData = v.parse(formSchema, $formData)
 				onSubmit?.(parsedData)
 			}

packages/ui/src/components/extension/templates/list-view.svelte

@@ -42,7 +42,7 @@
 		onEnterKeyPressed?: () => void
 		onListItemSelected?: (value: string) => void
 		onSearchTermChange?: (searchTerm: string) => void
-		onHighlightedItemChanged?: (value: string) => void
+		onHighlightedItemChanged?: (item: ListSchema.Item) => void
 		footer: Snippet
 		loading: boolean
 		listViewContent: ListSchema.List
@@ -54,7 +54,8 @@
 	// let detailWidth = $derived()
 	let prevDetailWidth = $state(0)
 
-	const detailWidth = $derived(listViewContent.detail ? (listViewContent.detail?.width ?? 70) : 0)
+	// let detailWidth = 0
+	let detailWidth = $derived(listViewContent?.detail ? (listViewContent.detail?.width ?? 70) : 0)
 
 	export function inputFocus() {
 		inputRef?.focus()
@@ -65,9 +66,22 @@
 	}
 
 	$effect(() => {
-		if (highlightedValue.startsWith("{")) {
-			onHighlightedItemChanged?.(highlightedValue)
+		// find the item whose value is equal to highlightedValue, also search sections
+		const item = listViewContent.items?.find((item) => item.value === highlightedValue)
+		if (item) {
+			onHighlightedItemChanged?.(item)
+			return
 		}
+		for (const section of listViewContent.sections ?? []) {
+			const item = section.items?.find((item) => item.value === highlightedValue)
+			if (item) {
+				onHighlightedItemChanged?.(item)
+				return
+			}
+		}
+		// if (highlightedValue.startsWith("{")) {
+		// 	onHighlightedItemChanged?.(highlightedValue)
+		// }
 	})
 
 	$effect(() => {
@@ -129,7 +143,11 @@
 	})
 	let resultingItems = $derived<ListSchema.Item[]>(
 		// when search term changes, update the resulting items
-		searchTerm.length > 0 ? itemsFuse.search(searchTerm).map((item) => item.item) : srcItems
+		listViewContent.filter === "none"
+			? searchTerm.length > 0
+				? itemsFuse.search(searchTerm).map((item) => item.item)
+				: srcItems
+			: (listViewContent.items ?? [])
 	)
 	// section total height is auto derived from section refs
 	let sectionTotalHeight = $derived(srcSections.reduce((acc, s) => acc + (s.sectionHeight ?? 0), 0))
@@ -205,6 +223,7 @@
 				>
 					{#each srcSections as section, i}
 						<VirtualCommandGroup
+							filterMode={listViewContent.filter}
 							heading={section.title ?? ""}
 							items={section.items}
 							parentRef={virtualListEl}

packages/ui/src/components/extension/templates/virtual-command-group.svelte

@@ -8,6 +8,7 @@
 
 	let {
 		heading,
+		filterMode,
 		items,
 		parentRef,
 		searchTerm,
@@ -17,6 +18,7 @@
 		onListItemSelected
 	}: {
 		heading: string
+		filterMode: "none" | "default"
 		items: ListSchema.Item[]
 		sectionHeight: number
 		searchTerm: string
@@ -45,7 +47,11 @@
 
 	let resultingItems = $derived(
 		// when search term changes, update the resulting items
-		searchTerm.length > 0 ? fuse.search(searchTerm).map((item) => item.item) : items
+		filterMode === "none"
+			? searchTerm.length > 0
+				? fuse.search(searchTerm).map((item) => item.item)
+				: items
+			: items
 	)
 
 	$effect(() => {

packages/ui/src/utils/form.ts

@@ -14,8 +14,11 @@ function addDefaultToSchema(
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function buildFormSchema(form: FormSchema.Form): v.ObjectSchema<any, undefined> {
+	if (!form) return v.object({})
 	let schema = v.object({})
+	console.log("begin buildFormSchema", form)
 	for (const field of form.fields) {
+		console.log("field", field)
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		let fieldSchema: any = undefined
 		if (field.nodeName === FormNodeNameEnum.Input) {