Refactor window handling to ensure focus after showing

- Updated various components to use promise chaining with `show()` and `setFocus()` for better window management.
- Introduced `data.win` in multiple places to streamline access to the current webview window.
- Enhanced splashscreen and app layout handling to improve user experience by ensuring the window is focused after being shown.

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

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

apps/desktop/src/lib/cmds/builtin.ts

@@ -411,7 +411,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 				visible: false
 			})
 			setTimeout(() => {
-				window.show()
+				window.show().then(() => window.setFocus())
 			}, 2_000)
 		}
 	},

apps/desktop/src/lib/utils/hotkey.ts

@@ -48,8 +48,7 @@ export async function registerAppHotkey(hotkeyStr: string) {
 					mainWin.setFocus()
 				}
 			} else {
-				mainWin.show()
+				mainWin.show().then(() => mainWin.setFocus())
-				mainWin.setFocus()
 			}
 		}
 	})

apps/desktop/src/lib/utils/key.ts

@@ -97,7 +97,7 @@ export async function globalKeyDownHandler(e: KeyboardEvent) {
 		await appWin.hide()
 		location.reload()
 		setTimeout(() => {
-			appWin.show()
+			appWin.show().then(() => appWin.setFocus())
 		}, 1_000)
 	}
 }

apps/desktop/src/routes/+layout.ts

@@ -1,5 +1,12 @@
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+
 // Tauri doesn't have a Node.js server to do proper SSR
 // so we will use adapter-static to prerender the app (SSG)
 // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
 export const prerender = true
 export const ssr = false
+
+export const load = () => {
+	const win = getCurrentWebviewWindow()
+	return { win }
+}

apps/desktop/src/routes/app/+layout.svelte

@@ -46,7 +46,8 @@
 		})
 	})
 
-	let { children } = $props()
+	let { children, data } = $props()
+
 	const unlisteners: UnlistenFn[] = []
 	onDestroy(() => {
 		unlisteners.forEach((unlistener) => unlistener())
@@ -100,7 +101,7 @@
 				})
 			)
 		}
-		getCurrentWebviewWindow().show()
+		data.win.setFocus()
 	})
 </script>
 

apps/desktop/src/routes/app/+layout.ts

@@ -1,8 +1,8 @@
 import { getExtensionsFolder, IS_IN_TAURI } from "@/constants"
+import * as path from "@tauri-apps/api/path"
 import { error } from "@tauri-apps/plugin-log"
+import { setStoreCollectionPath } from "@tauri-store/svelte"
 import type { LayoutLoad } from "./$types"
-import { setStoreCollectionPath } from '@tauri-store/svelte';
-import * as path from "@tauri-apps/api/path";
 
 export const load: LayoutLoad = async () => {
 	const appDataPath = await path.appDataDir()

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

@@ -64,12 +64,16 @@
 			if (splashscreenWin) {
 				splashscreenWin.close()
 			}
-			win.show()
+			win.show().then(() => win.setFocus())
 		})
 		win.onFocusChanged(({ payload: focused }) => {
 			if (focused) {
-				win.show()
+				win
-				inputEle?.focus()
+					.show()
+					.then(() => win.setFocus())
+					.finally(() => {
+						inputEle?.focus()
+					})
 			}
 		})
 		inputEle?.focus()

apps/desktop/src/routes/app/extension/key-displayer/+page.svelte

@@ -8,6 +8,8 @@
 	import * as userInput from "tauri-plugin-user-input-api"
 	import { type InputEvent } from "tauri-plugin-user-input-api"
 
+	let { data } = $props()
+
 	const SymbolMap = {
 		Alt: "⎇",
 		AltGr: "⌥",
@@ -97,10 +99,7 @@
 	}
 
 	$effect(() => {
-		const win = getCurrentWebviewWindow()
+		data.win.show().then(() => data.win.setFocus())
-		if (win) {
-			win.show()
-		}
 
 		userInput.setEventTypes([userInput.EventTypeEnum.KeyPress, userInput.EventTypeEnum.KeyRelease])
 		userInput.startListening((evt: InputEvent) => {

apps/desktop/src/routes/app/extension/pin-screenshot/+page.svelte

@@ -2,13 +2,12 @@
 	import { Button } from "@kksh/svelte5"
 	import { Layouts } from "@kksh/ui"
 	import { LogicalSize } from "@tauri-apps/api/dpi"
-	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
 	import { CircleX } from "lucide-svelte"
 	import { onMount } from "svelte"
 	import * as clipboard from "tauri-plugin-clipboard-api"
 
 	let image = $state<string | null>(null)
-	const appWin = getCurrentWebviewWindow()
+	let { data } = $props()
 	let originalSize = $state<{ width: number; height: number } | null>(null)
 	let originalScaleFactor = $state<number | null>(null)
 	let scale = $state<number>(1)
@@ -18,13 +17,13 @@
 
 	$effect(() => {
 		if (currentSize) {
-			appWin.setSize(new LogicalSize(currentSize.width, currentSize.height))
+			data.win.setSize(new LogicalSize(currentSize.width, currentSize.height))
 		}
 	})
 
 	async function getWindowSize() {
-		const size = await appWin.outerSize()
+		const size = await data.win.outerSize()
-		const scaleFactor = originalScaleFactor ?? (await appWin.scaleFactor())
+		const scaleFactor = originalScaleFactor ?? (await data.win.scaleFactor())
 		const logicalSize = size.toLogical(scaleFactor)
 		return { logicalSize, scaleFactor }
 	}
@@ -36,7 +35,7 @@
 				image = b64
 			})
 			.finally(() => {
-				appWin.show()
+				data.win.show().then(() => data.win.setFocus())
 			})
 		const { logicalSize, scaleFactor } = await getWindowSize()
 		originalSize = { width: logicalSize.width, height: logicalSize.height }
@@ -67,13 +66,13 @@
 <svelte:window
 	on:keydown={(e) => {
 		if (e.key === "Escape") {
-			appWin.close()
+			data.win.close()
 		}
 	}}
 />
-<Button size="icon" variant="ghost" class="fixed left-2 top-2" onclick={() => appWin.close()}
+<Button size="icon" variant="ghost" class="fixed left-2 top-2" onclick={() => data.win.close()}>
-	><CircleX /></Button
+	<CircleX />
->
+</Button>
 <main class="z-50 h-screen w-screen overflow-hidden" data-tauri-drag-region>
 	{#if image}
 		<img

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

@@ -38,7 +38,6 @@
 	let { data }: { data: PageData } = $props()
 	const { loadedExt, url, extPath, extInfoInDB } = data
 	let extSpawnedProcesses = $state<number[]>([])
-	const appWin = getCurrentWindow()
 	let iframeRef: HTMLIFrameElement
 	let uiControl = $state<{
 		iframeLoaded: boolean
@@ -65,7 +64,7 @@
 			if (isInMainWindow()) {
 				goto(i18n.resolveRoute("/app/"))
 			} else {
-				appWin.close()
+				data.win.close()
 			}
 		},
 		hideBackButton: async () => {
@@ -131,7 +130,7 @@
 			},
 			getSpawnedProcesses: () => Promise.resolve(extSpawnedProcesses),
 			paste: async () => {
-				await appWin.hide()
+				await data.win.hide()
 				await sleep(200)
 				return paste()
 			}
@@ -155,7 +154,7 @@
 		if (isInMainWindow()) {
 			goHome()
 		} else {
-			appWin.close()
+			data.win.close()
 		}
 	}
 
@@ -170,7 +169,7 @@
 	onMount(() => {
 		appState.setFullScreenLoading(true)
 		setTimeout(() => {
-			appWin.show()
+			data.win.setFocus()
 		}, 200)
 		if (iframeRef?.contentWindow) {
 			const io = new IframeParentIO(iframeRef.contentWindow)
@@ -196,7 +195,7 @@
 	})
 
 	onDestroy(() => {
-		winExtMap.unregisterExtensionFromWindow(appWin.label)
+		winExtMap.unregisterExtensionFromWindow(data.win.label)
 	})
 </script>
 
@@ -209,7 +208,7 @@
 		onclick={onBackBtnClicked}
 		style={`${positionToCssStyleString(uiControl.backBtnPosition)}`}
 	>
-		{#if appWin.label === "main"}
+		{#if data.win.label === "main"}
 			<ArrowLeftIcon class="w-4" />
 		{:else}
 			<XIcon class="w-4" />

apps/desktop/src/routes/app/extension/ui-iframe/+page.ts

@@ -1,5 +1,6 @@
 import { KunkunIframeExtParams } from "@/cmds/ext"
 import { i18n } from "@/i18n"
+import { appState } from "@/stores/appState"
 import { db, unregisterExtensionWindow } from "@kksh/api/commands"
 import type { Ext as ExtInfoInDB, ExtPackageJsonExtra } from "@kksh/api/models"
 import { loadExtensionManifestFromDisk } from "@kksh/extension"
@@ -11,7 +12,6 @@ import { toast } from "svelte-sonner"
 import * as v from "valibot"
 import { z } from "zod"
 import type { PageLoad } from "./$types"
-import { appState } from "@/stores/appState"
 
 export const load: PageLoad = async ({
 	url,

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

@@ -310,7 +310,7 @@
 	onMount(async () => {
 		setTimeout(() => {
 			appState.setLoadingBar(true)
-			appWin.show()
+			appWin.show().then(() => appWin.setFocus())
 		}, 100)
 		unlistenRefreshWorkerExt = await listenToRefreshDevExt(() => {
 			debug("Refreshing Worker Extension")

apps/desktop/src/routes/splashscreen/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { Layouts } from "@kksh/ui"
-	import { getCurrentWindow } from "@tauri-apps/api/window"
 	import { onMount } from "svelte"
 
-	onMount(async () => {
+	let { data } = $props()
-		const mainWin = await getCurrentWindow()
+
-		mainWin.show()
+	onMount(() => {
+		data.win.show().then(() => data.win.setFocus())
 	})
 </script>