feat: implement main command palette UI

apps/desktop-svelte/README.md

@@ -1,7 +0,0 @@
-# Tauri + SvelteKit + TypeScript
-
-This template should help get you started developing with Tauri, SvelteKit and TypeScript in Vite.
-
-## Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer).

apps/desktop-svelte/src-tauri/Cargo.toml

@@ -44,11 +44,11 @@ tauri-plugin-jarvis = { path = "../../../packages/tauri-plugin-jarvis" }
 tauri-plugin-network = { workspace = true }
 tauri-plugin-system-info = { path = "../../../vendors/tauri-plugin-system-info" }
 tauri-plugin-clipboard = { workspace = true }
-tauri-plugin-store = "2.0.1"
+tauri-plugin-store = "2.1.0"
 tauri-plugin-deep-link = "2"
 tauri-plugin-log = { version = "2.0.1", features = ["colored"] }
 zip = "2.1.3"
-tauri-plugin-devtools = "2.0.0"
+# tauri-plugin-devtools = "2.0.0"
 
 [target."cfg(target_os = \"macos\")".dependencies]
 cocoa = "0.24.1"

apps/desktop-svelte/src-tauri/src/lib.rs

@@ -23,15 +23,44 @@ use utils::server::tauri_file_server;
 pub fn run() {
     let context = tauri::generate_context!();
     let mut builder = tauri::Builder::default();
+
     #[cfg(debug_assertions)]
     {
         println!("Install crabnebula devtools");
-        let devtools = tauri_plugin_devtools::init(); // initialize the plugin as early as possible
-        builder = builder.plugin(devtools);
+        // let devtools = tauri_plugin_devtools::init(); // initialize the plugin as early as possible
+        // builder = builder.plugin(devtools);
     }
-    #[cfg(not(debug_assertions))]
-    {
-        builder = builder.plugin(
+    // #[cfg(not(debug_assertions))]
+    // {
+    //     builder = builder.plugin(
+    //         tauri_plugin_log::Builder::new()
+    //             .targets(utils::log::get_log_targets())
+    //             .level(utils::log::get_log_level())
+    //             .filter(|metadata| !metadata.target().starts_with("mdns_sd"))
+    //             .with_colors(ColoredLevelConfig::default())
+    //             .max_file_size(10_000_000) // max 10MB
+    //             .format(|out, message, record| {
+    //                 out.finish(format_args!(
+    //                     "{}[{}] {}",
+    //                     chrono::Local::now().format("[%Y-%m-%d][%H:%M:%S]"),
+    //                     // record.target(),
+    //                     record.level(),
+    //                     message
+    //                 ))
+    //             })
+    //             .build(),
+    //     );
+    // }
+
+    let shell_unlocked = true;
+    builder = builder
+        .plugin(tauri_plugin_single_instance::init(|app, args, cwd| {
+            let _ = app
+                .get_webview_window("main")
+                .expect("no main window")
+                .set_focus();
+        }))
+        .plugin(
             tauri_plugin_log::Builder::new()
                 .targets(utils::log::get_log_targets())
                 .level(utils::log::get_log_level())
@@ -48,17 +77,7 @@ pub fn run() {
                     ))
                 })
                 .build(),
-        );
-    }
-
-    let shell_unlocked = true;
-    builder = builder
-        .plugin(tauri_plugin_single_instance::init(|app, args, cwd| {
-            let _ = app
-                .get_webview_window("main")
-                .expect("no main window")
-                .set_focus();
-        }))
+        )
         .plugin(tauri_plugin_cli::init())
         .plugin(tauri_plugin_deep_link::init())
         .plugin(tauri_plugin_shell::init())
@@ -73,7 +92,7 @@ pub fn run() {
         .plugin(tauri_plugin_notification::init())
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_shellx::init(shell_unlocked))
-        // .plugin(tauri_plugin_jarvis::init())
+        .plugin(tauri_plugin_jarvis::init())
         .plugin(tauri_plugin_clipboard::init())
         .plugin(tauri_plugin_network::init())
         .plugin(tauri_plugin_system_info::init());
@@ -90,24 +109,22 @@ pub fn run() {
             // #[cfg(all(target_os = "macos", debug_assertions))]
             // app.set_activation_policy(ActivationPolicy::Accessory);
             // let mut store = StoreBuilder::new("appConfig.bin").build(app.handle().clone());
-            let store = app.handle().store_builder("appConfig.bin").build();
+            // let store = app.handle().store_builder("appConfig.json").build()?;
 
-            let _ = store.load();
-
-            let app_settings = match AppSettings::load_from_store(&store) {
-                Ok(settings) => settings,
-                Err(_) => AppSettings::default(),
-            };
-            let dev_extension_path: Option<PathBuf> = app_settings.dev_extension_path.clone();
+            // let app_settings = match AppSettings::load_from_store(&store) {
+            //     Ok(settings) => settings,
+            //     Err(_) => AppSettings::default(),
+            // };
+            // let dev_extension_path: Option<PathBuf> = app_settings.dev_extension_path.clone();
             let my_port = tauri_plugin_network::network::scan::find_available_port_from_list(
                 tauri_plugin_jarvis::server::CANDIDATE_PORTS.to_vec(),
             )
             .unwrap();
             log::info!("Jarvis Server Port: {}", my_port);
-            log::info!(
-                "App Settings Dev Extension Path: {:?}",
-                app_settings.dev_extension_path.clone(),
-            );
+            // log::info!(
+            //     "App Settings Dev Extension Path: {:?}",
+            //     app_settings.dev_extension_path.clone(),
+            // );
             app.manage(tauri_plugin_jarvis::server::http::Server::new(
                 app.handle().clone(),
                 my_port,

apps/desktop-svelte/src/lib/components/context/AppConfigContext.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { setAppConfigContext } from "@/context"
+	import type { AppConfig } from "@/types/appConfig"
+	import type { Snippet } from "svelte"
+	import type { Writable } from "svelte/store"
+
+	const { appConfig, children }: { appConfig: Writable<AppConfig>; children: Snippet<[]> } =
+		$props()
+
+	setAppConfigContext(appConfig)
+</script>
+
+{@render children?.()}

apps/desktop-svelte/src/lib/components/main/CmdItemExt.svelte

@@ -0,0 +1,4 @@
+<!-- This file is for rendering an extension command list item -->
+<script lang="ts">
+	import IconMultiplexer from "@/components/common/IconMultiplexer.svelte"
+</script>

apps/desktop-svelte/src/lib/components/main/CommandPalette.svelte

@@ -0,0 +1,45 @@
+<!-- This file renders the main command palette, a list of commands -->
+<script lang="ts">
+	import { getAppConfigContext } from "@/context"
+	import { cn } from "@/utils"
+	import type { ExtPackageJsonExtra } from "@kksh/api/models"
+	import { isExtPathInDev } from "@kksh/extensions"
+	import * as Command from "$lib/components/ui/command/index.js"
+	import ExtCmdsGroup from "./ExtCmdsGroup.svelte"
+
+	const { extensions, class: className }: { extensions: ExtPackageJsonExtra[]; class?: string } =
+		$props()
+	const appConfig = getAppConfigContext()
+</script>
+
+<Command.Root class={cn("rounded-lg border shadow-md", className)}>
+	<Command.Input placeholder="Type a command or search..." />
+	<Command.List class="h-full max-h-fit">
+		<Command.Empty>No results found.</Command.Empty>
+		{#if $appConfig.extensionPath}
+			<ExtCmdsGroup
+				extensions={extensions.filter((ext) =>
+					isExtPathInDev($appConfig.extensionPath!, ext.extPath)
+				)}
+				heading="Dev Extensions"
+				isDev={true}
+				hmr={$appConfig.hmr}
+			/>
+		{/if}
+		{#if $appConfig.extensionPath}
+			<ExtCmdsGroup
+				extensions={extensions.filter(
+					(ext) => !isExtPathInDev($appConfig.extensionPath!, ext.extPath)
+				)}
+				heading="Extensions"
+				isDev={false}
+				hmr={false}
+			/>
+		{/if}
+		<Command.Separator />
+	</Command.List>
+	<footer
+		data-tauri-drag-region
+		class="absolute bottom-0 left-0 right-0 h-10 bg-slate-500/40"
+	></footer>
+</Command.Root>

apps/desktop-svelte/src/lib/components/main/ExtCmdsGroup.svelte

@@ -0,0 +1,54 @@
+<!-- This file renders a group of extension commands -->
+<!-- Input props to this component is an array of ExtPackageJsonExtra[] -->
+<script lang="ts">
+	import Icon from "@iconify/svelte"
+	import {
+		CustomUiCmd,
+		ExtPackageJsonExtra,
+		IconEnum,
+		IconType,
+		TemplateUiCmd
+	} from "@kksh/api/models"
+	import { Badge } from "@kksh/svelte"
+	import * as Command from "$lib/components/ui/command/index.js"
+	import IconMultiplexer from "../common/IconMultiplexer.svelte"
+
+	const {
+		extensions,
+		heading,
+		isDev,
+		hmr
+	}: { extensions: ExtPackageJsonExtra[]; heading: string; isDev: boolean; hmr: boolean } = $props()
+</script>
+
+{#snippet cmd(ext: ExtPackageJsonExtra, cmd: CustomUiCmd | TemplateUiCmd)}
+	<Command.Item class="flex justify-between">
+		<span class="flex gap-2">
+			<IconMultiplexer icon={cmd.icon ?? ext.kunkun.icon} class="!h-5 !w-5 shrink-0" />
+			<span>{cmd.name}</span>
+		</span>
+		<span class="flex gap-2">
+			{#if isDev}
+				<Badge class="rounded-sm bg-green-500 px-1">Dev</Badge>
+			{/if}
+			{#if hmr}
+				<Badge class="rounded-sm px-1">HMR</Badge>
+			{/if}
+		</span>
+	</Command.Item>
+{/snippet}
+
+{#snippet ext(ext: ExtPackageJsonExtra)}
+	{#each ext.kunkun.customUiCmds as _cmd}
+		{@render cmd(ext, _cmd)}
+	{/each}
+	{#each ext.kunkun.templateUiCmds as _cmd}
+		{@render cmd(ext, _cmd)}
+	{/each}
+{/snippet}
+
+<Command.Group {heading}>
+	{#each extensions as _ext}
+		{@render ext(_ext)}
+	{/each}
+</Command.Group>

apps/desktop-svelte/src/lib/components/ui/command/command-group.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils.js"
+	import { Command as CommandPrimitive } from "bits-ui"
 
 	let {
 		ref = $bindable(null),
@@ -9,8 +9,8 @@
 		heading,
 		...restProps
 	}: CommandPrimitive.GroupProps & {
-		heading?: string;
-	} = $props();
+		heading?: string
+	} = $props()
 </script>
 
 <CommandPrimitive.Group
@@ -20,7 +20,8 @@
 >
 	{#if heading}
 		<CommandPrimitive.GroupHeading
-			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+			class="text-muted-foreground px-2 py-1.5 text-xs font-medium select-none"
+			data-tauri-drag-region
 		>
 			{heading}
 		</CommandPrimitive.GroupHeading>

apps/desktop-svelte/src/lib/constants.ts

@@ -1,5 +1,9 @@
+import { appDataDir, join } from "@tauri-apps/api/path"
 import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_PROJECT_ID } from "$env/static/public"
 
 export const SUPABASE_ANON_KEY = PUBLIC_SUPABASE_ANON_KEY
 export const SUPABASE_URL = `https://${PUBLIC_SUPABASE_PROJECT_ID}.supabase.co`
 export const SUPABASE_GRAPHQL_ENDPOINT = `${SUPABASE_URL}/graphql/v1`
+export function getExtensionsFolder() {
+	return appDataDir().then((appDataDirPath) => join(appDataDirPath, "extensions"))
+}

apps/desktop-svelte/src/lib/context/appConfig.ts

@@ -0,0 +1,18 @@
+/**
+ * This is app state context. 
+ * It's designed to allow all components to access a shared state.
+ * With context, we can avoid prop drilling, and avoid using stores which makes components hard to encapsulate.
+ */
+import type { AppConfig } from '@/types/appConfig';
+import { getContext, setContext } from 'svelte'
+import type { Writable } from 'svelte/store';
+
+export const APP_CONFIG_CONTEXT_KEY = Symbol('appConfig')
+
+export function getAppConfigContext(): Writable<AppConfig> {
+	return getContext(APP_CONFIG_CONTEXT_KEY)
+}
+
+export function setAppConfigContext(appConfig: Writable<AppConfig>) {
+	setContext(APP_CONFIG_CONTEXT_KEY, appConfig)
+}

apps/desktop-svelte/src/lib/context/index.ts

@@ -0,0 +1 @@
+export * from './appConfig'