feat: improve blur event handling and add hide on blur setting

apps/desktop/components/cmd-palette/SearchBarDropdown.vue

@@ -7,6 +7,7 @@ import {
 	DropdownMenuRadioItem,
 	DropdownMenuTrigger
 } from "@kksh/vue/dropdown-menu"
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
 import { EllipsisVerticalIcon, PinIcon } from "lucide-vue-next"
 
 const position = ref("bottom")
@@ -15,6 +16,8 @@ function onChange() {
 }
 
 function onPin() {
+	// const win = getCurrentWebviewWindow()
+	// win.set
 	console.log("Pinned")
 }
 </script>
@@ -27,10 +30,10 @@ function onPin() {
 			</Button>
 		</DropdownMenuTrigger>
 		<DropdownMenuContent class="w-20">
-			<DropdownMenuItem @click="onPin" class="space-x-2" value="top">
+			<!-- <DropdownMenuItem @click="onPin" class="space-x-2" value="top">
 				<PinIcon class="h-4 w-4" />
 				<span>Pin</span>
-			</DropdownMenuItem>
+			</DropdownMenuItem> -->
 		</DropdownMenuContent>
 	</DropdownMenu>
 </template>

apps/desktop/components/settings/General/hideOnBlur.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Checkbox } from "@kksh/vue/checkbox"
+import { useAppConfigStore } from "~/stores/appConfig"
+import { computed } from "vue"
+
+const appConfig = useAppConfigStore()
+const checked = computed({
+	get() {
+		return appConfig.hideOnBlur
+	},
+	set(val) {
+		appConfig.setHideOnBlur(val)
+	}
+})
+</script>
+<template>
+	<div class="grid grid-cols-2 gap-4">
+		<span class="justify-self-end">{{ $t("settings.general.window-blur-bahavior") }}</span>
+		<div class="flex items-center space-x-2">
+			<Checkbox id="hide-on-blur" v-model:checked="checked" />
+			<label
+				for="hide-on-blur"
+				class="select-none text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+			>
+				{{ $t("settings.general.hide-on-blur") }}
+			</label>
+		</div>
+	</div>
+</template>

apps/desktop/components/settings/General/index.ts

@@ -5,3 +5,4 @@ export { default as ThemeCustomizer } from "./ThemeCustomizer.vue"
 export { default as TriggerHotkey } from "./TriggerHotkey.vue"
 export { default as DevExtMode } from "./DevExtMode.vue"
 export { default as Language } from "./Language.vue"
+export { default as HideOnBlur } from "./hideOnBlur.vue"

apps/desktop/components/settings/GeneralTab.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
 	DevExtMode,
+	HideOnBlur,
 	Language,
 	MenuBar,
 	Startup,
@@ -39,6 +40,7 @@ function updateHotkey(keys: string[]) {
 		<TriggerHotkey :saved-hotkey="savedHotkey" @update:saved-hotkey="updateHotkey" />
 		<MenuBar />
 		<Theme />
+		<HideOnBlur />
 		<StrikeSeparator>
 			<span class="whitespace-nowrap break-normal">{{ $t("developerSettings") }}</span>
 		</StrikeSeparator>

apps/desktop/i18n/en.ts

@@ -32,6 +32,8 @@ const enMessages = {
 	devExtLoadMode: "Dev Extension Load Mode",
 	devMode: "Development Mode",
 	prodMode: "Production Mode",
+	"settings.general.window-blur-bahavior": "Window Blur Behavior",
+	"settings.general.hide-on-blur": "Hide on Blur",
 	/* ------------------------------ Developer Tab ----------------------------- */
 	serverStatus: "Server Status",
 	installation: "Installation",

apps/desktop/i18n/zh.ts

@@ -35,6 +35,8 @@ const zhMessages: I18nMessages = {
 	devExtLoadMode: "插件开发加载模式",
 	devMode: "开发模式",
 	prodMode: "正常模式",
+	"settings.general.window-blur-bahavior": "窗口失焦行为",
+	"settings.general.hide-on-blur": "失焦隐藏",
 	/* ------------------------------ Developer Tab ----------------------------- */
 	serverStatus: "服务器状态",
 	installation: "安装",

apps/desktop/layouts/default.vue

@@ -19,6 +19,7 @@ useGoToSettingShortcuts()
 usePreventExit()
 useTestDB()
 unlistenRefreshConfig = await listenToRefreshConfig(async () => {
+	debug("Refreshing config")
 	await appConfig.init()
 	appConfig.refreshWindowStyles()
 	// useRegisterAppShortcuts()

apps/desktop/lib/utils/hotkey.ts

@@ -21,10 +21,17 @@ export async function registerAppHotkey(hotkeyStr: string) {
 					"Please open main window first"
 				)
 			}
-			if (await mainWin.isVisible()) {
-				mainWin.hide()
+			const isVisible = await mainWin.isVisible()
+			const isFocused = await mainWin.isFocused()
+			if (isVisible) {
+				if (isFocused) {
+					mainWin.hide()
+				} else {
+					mainWin.setFocus()
+				}
 			} else {
 				mainWin.show()
+				mainWin.setFocus()
 			}
 		}
 	})

apps/desktop/pages/index.vue

@@ -1,27 +1,10 @@
 <script setup lang="ts">
 import ListItem from "@/components/MainSearch/list-item.vue"
-import {
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList
-} from "@/components/ui/command"
+import { CommandEmpty, CommandGroup, CommandList } from "@/components/ui/command"
 import { $searchTermSync, setSearchTerm } from "@/lib/stores/appState"
 import { getActiveElementNodeName } from "@/lib/utils/dom"
 import { useStore } from "@nanostores/vue"
-import {
-	emit,
-	emitTo,
-	listen,
-	once,
-	type Event,
-	type EventCallback,
-	type EventName,
-	type EventTarget,
-	type Options,
-	type UnlistenFn
-} from "@tauri-apps/api/event"
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
 import { getCurrentWindow } from "@tauri-apps/api/window"
 import { platform } from "@tauri-apps/plugin-os"
 import { useListenToWindowBlur } from "~/composables/useEvents"
@@ -75,9 +58,16 @@ appConfig.$subscribe((mutation, state) => {
 })
 
 useListenToWindowBlur(() => {
-	if (!runtimeConfig.public.isDev) {
-		appWindow.hide()
-	}
+	const win = getCurrentWebviewWindow()
+	win.isFocused().then((isFocused) => {
+		// this extra is focused check may be needed because blur event got triggered somehow when window show()
+		// for edge case: when settings page is opened and focused, switch to main window, the blur event is triggered for main window
+		if (!isFocused) {
+			if (appConfig.hideOnBlur) {
+				appWindow.hide()
+			}
+		}
+	})
 })
 
 useListenToWindowFocus(() => {

apps/desktop/src-tauri/capabilities/main.json

@@ -24,6 +24,7 @@
 		"core:event:default",
 		"core:window:default",
 		"core:window:allow-start-dragging",
+		"core:window:allow-set-focus",
 		"core:window:allow-toggle-maximize",
 		"core:window:allow-internal-toggle-maximize",
 		"core:window:allow-close",

apps/desktop/src-tauri/tauri.conf.json

@@ -1,6 +1,6 @@
 {
 	"productName": "Kunkun",
-	"version": "0.1.4",
+	"version": "0.1.5",
 	"identifier": "sh.kunkun.desktop",
 	"build": {
 		"beforeDevCommand": "pnpm dev",

apps/desktop/stores/appConfig.ts

@@ -38,11 +38,47 @@ export const appConfigSchema = object({
 	lightMode: LightMode,
 	launchAtLogin: boolean(),
 	showInTray: boolean(),
-	devExtensionPath: optional(string()),
-	devExtLoadUrl: optional(boolean(), false) // load extension page from dev server
+	devExtensionPath: nullable(string()),
+	devExtLoadUrl: boolean(),
+	hideOnBlur: boolean()
 })
 type State = InferOutput<typeof appConfigSchema>
 
+// function isAppConfigEqual(a: State, b: State) {
+// 	if (a.isInitialized !== b.isInitialized) {
+// 		return false
+// 	}
+// 	if (a.theme !== b.theme) {
+// 		return false
+// 	}
+// 	if (a.radius !== b.radius) {
+// 		return false
+// 	}
+// 	if (a.triggerHotkey !== b.triggerHotkey) {
+// 		return false
+// 	}
+// 	if (a.lightMode !== b.lightMode) {
+// 		return false
+// 	}
+// 	if (a.launchAtLogin !== b.launchAtLogin) {
+// 		return false
+// 	}
+// 	if (a.showInTray !== b.showInTray) {
+// 		return false
+// 	}
+// 	if (a.devExtensionPath != b.devExtensionPath) {
+// 		console.log("devExtensionPath unequal", a.devExtensionPath, b.devExtensionPath);
+// 		return false
+// 	}
+// 	if (a.devExtLoadUrl !== b.devExtLoadUrl) {
+// 		return false
+// 	}
+// 	if (a.hideOnBlur !== b.hideOnBlur) {
+// 		return false
+// 	}
+// 	return true
+// }
+
 export const useAppConfigStore = defineStore("appConfig", {
 	state: (): State => ({
 		isInitialized: false,
@@ -52,8 +88,9 @@ export const useAppConfigStore = defineStore("appConfig", {
 		lightMode: "auto",
 		launchAtLogin: true,
 		showInTray: true,
-		devExtensionPath: undefined,
-		devExtLoadUrl: false
+		devExtensionPath: null,
+		devExtLoadUrl: false,
+		hideOnBlur: true
 	}),
 	getters: {
 		themeClass(state) {
@@ -128,7 +165,10 @@ export const useAppConfigStore = defineStore("appConfig", {
 		setShowInTray(showInTray: boolean) {
 			this.showInTray = showInTray
 		},
-		setDevExtensionPath(devExtensionPath: string | undefined) {
+		setHideOnBlur(hideOnBlur: boolean) {
+			this.hideOnBlur = hideOnBlur
+		},
+		setDevExtensionPath(devExtensionPath: string | null) {
 			this.devExtensionPath = devExtensionPath
 			emitRefreshConfig()
 			return setDevExtensionFolderForServer(devExtensionPath).then(() => {
@@ -140,7 +180,6 @@ export const useAppConfigStore = defineStore("appConfig", {
 		},
 		watch() {
 			this.$subscribe(async (mutation, state) => {
-				// console.log("mutation", mutation)
 				info("appConfig changed, saved to disk")
 				await persistAppConfig.set("config", state)
 				await persistAppConfig.save()

apps/desktop/stores/builtinCmdLoader.ts

@@ -79,6 +79,17 @@ const builtinCmds: BuiltinCmd[] = [
 			$searchTermSync.set("")
 			toast.success(`Dev Extension Live Load Mode toggled to: ${appConfig.devExtLoadUrl}`)
 		}
+	},
+	{
+		name: "Toggle Hide On Blur",
+		iconifyIcon: "ri:toggle-line",
+		description: "Toggle Hide On Blur",
+		function: async () => {
+			const appConfig = useAppConfigStore()
+			appConfig.setHideOnBlur(!appConfig.hideOnBlur)
+			$searchTermSync.set("")
+			toast.success(`"Hide on Blur" toggled to: ${appConfig.hideOnBlur}`)
+		}
 	}
 ]
 

packages/api/src/commands/server.ts

@@ -17,11 +17,11 @@ export function serverIsRunning(): Promise<boolean> {
 	return invoke(generateJarvisPluginCommand("server_is_running"))
 }
 
-export function setDevExtensionFolder(devExtFolder: string | undefined): Promise<void> {
+export function setDevExtensionFolder(devExtFolder: string | null): Promise<void> {
 	return invoke(generateJarvisPluginCommand("set_dev_extension_folder"), { devExtFolder })
 }
 
-export function setExtensionFolder(extFolder: string | undefined): Promise<void> {
+export function setExtensionFolder(extFolder: string | null): Promise<void> {
 	return invoke(generateJarvisPluginCommand("set_extension_folder"), { extFolder })
 }
 

packages/tauri-plugin-jarvis/src/utils/settings.rs

@@ -21,6 +21,7 @@ pub struct AppSettings {
     pub show_in_tray: bool,
     pub dev_extension_path: Option<PathBuf>,
     pub dev_ext_load_url: bool,
+    pub hide_on_blur: bool,
     pub trigger_hotkey: Option<Vec<String>>,
 }
 
@@ -34,6 +35,7 @@ impl Default for AppSettings {
             show_in_tray: true,
             dev_extension_path: None,
             dev_ext_load_url: false,
+            hide_on_blur: true,
             trigger_hotkey: None,
         }
     }