feat(desktop): implement quick install hotkey for store (#164)

apps/desktop/src/routes/app/extension/store/+page.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { getExtensionsFolder } from "@/constants"
 	import { appState, extensions } from "@/stores"
+	import { keys } from "@/stores/keys"
 	import { supabaseAPI } from "@/supabase"
 	import { goBackOnEscapeClearSearchTerm, goHomeOnEscapeClearSearchTerm } from "@/utils/key"
 	import { goBack, goHome } from "@/utils/route"
+	import { Action as ActionSchema } from "@kksh/api/models"
+	import { Action } from "@kksh/api/ui"
 	import { SBExt } from "@kksh/supabase/models"
 	import type { ExtPublishMetadata } from "@kksh/supabase/models"
 	import { type Tables } from "@kksh/supabase/types"
@@ -11,6 +14,7 @@
 	import { Constants } from "@kksh/ui"
 	import { ExtListItem } from "@kksh/ui/extension"
 	import { CustomCommandInput, GlobalCommandPaletteFooter } from "@kksh/ui/main"
+	import { platform } from "@tauri-apps/plugin-os"
 	import { goto } from "$app/navigation"
 	import { ArrowLeft } from "lucide-svelte"
 	import type { Snippet } from "svelte"
@@ -18,7 +22,11 @@
 	import { getInstallExtras } from "./[identifier]/helper.js"
 
 	let { data } = $props()
-	const { storeExtList, installedStoreExts, installedExtsMap, upgradableExpsMap } = data
+	const { storeExtList, installedExtsMap, upgradableExpsMap } = data
+	const _platform = platform()
+	let actionPanelOpen = $state(false)
+	let listviewInputRef = $state<HTMLInputElement | null>(null)
+	let highlightedCmdValue = $state("")
 
 	// function isUpgradeable(item: DbExtItem): boolean {
 	// 	if (!item.version) return true // latest extensions always have version, this check should be removed later
@@ -77,9 +85,48 @@
 				})
 			)
 	}
+
+	function onActionPanelBlur() {
+		setTimeout(() => {
+			listviewInputRef?.focus()
+		}, 300)
+	}
+
+	$effect(() => {
+		void $keys
+		const keySet = keys.getSet()
+		if (keySet.size === 2) {
+			if (keySet.has(_platform === "macos" ? "Meta" : "Control") && keySet.has("k")) {
+				setTimeout(() => {
+					actionPanelOpen = !actionPanelOpen
+					if (!actionPanelOpen) {
+						onActionPanelBlur()
+						listviewInputRef?.focus()
+					}
+				}, 100)
+			}
+		}
+	})
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key === "Escape") {
+			if (document.activeElement === listviewInputRef) {
+				goBack()
+			}
+		}
+	}
+
+	let highlightedCmd = $derived.by(() => {
+		void highlightedCmdValue
+		const ext = storeExtList.find((ext) => ext.identifier === highlightedCmdValue)
+		if (ext) {
+			return ext
+		}
+		return null
+	})
 </script>
 
-<svelte:window on:keydown={goHomeOnEscapeClearSearchTerm} />
+<svelte:window on:keydown={onkeydown} />
 {#snippet leftSlot()}
 	<Button
 		variant="outline"
@@ -91,12 +138,27 @@
 		<ArrowLeft class="size-4" />
 	</Button>
 {/snippet}
-<Command.Root class="h-screen rounded-lg border shadow-md" loop>
+<Command.Root class="h-screen rounded-lg border shadow-md" loop bind:value={highlightedCmdValue}>
 	<CustomCommandInput
+		bind:ref={listviewInputRef}
 		autofocus
 		placeholder="Type a command or search..."
 		leftSlot={leftSlot as Snippet}
 		bind:value={$appState.searchTerm}
+		onkeydown={(e) => {
+			if (e.key === "Enter") {
+				const modifier = _platform === "macos" ? e.metaKey : e.ctrlKey
+				if (modifier) {
+					if (highlightedCmd) {
+						onExtItemInstall(highlightedCmd)
+					}
+				} else {
+					if (highlightedCmd) {
+						onExtItemSelected(highlightedCmd)
+					}
+				}
+			}
+		}}
 	/>
 	<Command.List class="max-h-screen grow">
 		<Command.Empty>No results found.</Command.Empty>
@@ -105,11 +167,38 @@
 				{ext}
 				installedVersion={$installedExtsMap[ext.identifier]}
 				isUpgradable={!!$upgradableExpsMap[ext.identifier]}
-				onSelect={() => onExtItemSelected(ext)}
+				onSelect={() => {}}
 				onUpgrade={() => onExtItemUpgrade(ext)}
 				onInstall={() => onExtItemInstall(ext)}
 			/>
 		{/each}
 	</Command.List>
-	<GlobalCommandPaletteFooter />
+	<GlobalCommandPaletteFooter
+		defaultAction="Show Details"
+		bind:actionPanelOpen
+		{onActionPanelBlur}
+		actionPanel={new Action.ActionPanel({
+			title: "Actions",
+			items: [
+				new Action.Action({
+					title: `Install (${_platform === "macos" ? "⌘" : "Ctrl"} + ⏎)`,
+					value: "install"
+				})
+			]
+		})}
+		onActionSelected={(value) => {
+			if (value === "install") {
+				console.log("install")
+				if (highlightedCmd) {
+					onExtItemInstall(highlightedCmd)
+				}
+			}
+		}}
+		onDefaultActionSelected={() => {
+			console.log("default install")
+			if (highlightedCmd) {
+				onExtItemInstall(highlightedCmd)
+			}
+		}}
+	/>
 </Command.Root>

packages/api/src/ui/index.ts

@@ -21,3 +21,4 @@ export type {
 export * from "../api/client" // all client types
 export type { IUiTemplate } from "./template"
 export type { IShell } from "../api/shell"
+export * from "./template/components"

packages/ui/src/components/extension/ExtListItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Icon from "@iconify/svelte"
-	import { Icon as TIcon } from "@kksh/api/models"
+	import { ExtData, Icon as TIcon } from "@kksh/api/models"
 	import { SBExt } from "@kksh/supabase/models"
 	import { Button, Command } from "@kksh/svelte5"
 	import { Constants, IconMultiplexer } from "@kksh/ui"
@@ -28,7 +28,12 @@
 	} = $props()
 </script>
 
-<Command.Item class={cn("flex items-center justify-between", className)} {onSelect}>
+<Command.Item
+	class={cn("flex items-center justify-between", className)}
+	{onSelect}
+	value={ext.identifier}
+	keywords={[ext.name]}
+>
 	<span class="flex items-center space-x-2">
 		<span class="!h-6 !w-6">
 			<IconMultiplexer