Refactor window handling to improve safety and consistency

- Introduced optional chaining for `data.win` to prevent potential runtime errors when accessing window methods.
- Updated various components to ensure proper handling of window focus and visibility.
- Enhanced the layout and extension pages to utilize the current webview window more effectively, improving overall user experience.

apps/desktop/src/lib/stores/appConfig.ts

@@ -5,9 +5,9 @@ import { LoadingAnimation, PersistedAppConfig, type AppConfigState } from "@kksh
 import { debug, error, info } from "@tauri-apps/plugin-log"
 import * as os from "@tauri-apps/plugin-os"
 import { load } from "@tauri-apps/plugin-store"
+import { Store } from "@tauri-store/svelte"
 import { toast } from "svelte-sonner"
 import { get, writable } from "svelte/store"
-import { Store } from "@tauri-store/svelte"
 import * as v from "valibot"
 
 export const defaultAppConfig: AppConfigState = {
@@ -105,6 +105,5 @@ class AppConfigStore extends Store<AppConfigState> implements AppConfigAPI {
 	}
 }
 
-
 // export const appConfig = createAppConfig()
 export const appConfig = new AppConfigStore()

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

@@ -1,4 +1,5 @@
 import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+import { browser } from "$app/environment"
 
 // Tauri doesn't have a Node.js server to do proper SSR
 // so we will use adapter-static to prerender the app (SSG)
@@ -7,6 +8,8 @@ export const prerender = true
 export const ssr = false
 
 export const load = () => {
-	const win = getCurrentWebviewWindow()
+	if (browser) {
-	return { win }
+		const win = getCurrentWebviewWindow()
+		return { win }
+	}
 }

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

@@ -101,7 +101,7 @@
 				})
 			)
 		}
-		data.win.setFocus()
+		data.win?.show().then(() => data.win?.setFocus())
 	})
 </script>
 

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

@@ -99,7 +99,7 @@
 	}
 
 	$effect(() => {
-		data.win.show().then(() => data.win.setFocus())
+		data.win?.show().then(() => data.win?.setFocus())
 
 		userInput.setEventTypes([userInput.EventTypeEnum.KeyPress, userInput.EventTypeEnum.KeyRelease])
 		userInput.startListening((evt: InputEvent) => {

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

@@ -2,6 +2,7 @@
 	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"
@@ -14,16 +15,17 @@
 	let currentSize = $derived(
 		originalSize ? { width: originalSize.width * scale, height: originalSize.height * scale } : null
 	)
+	const win = getCurrentWebviewWindow()
 
 	$effect(() => {
 		if (currentSize) {
-			data.win.setSize(new LogicalSize(currentSize.width, currentSize.height))
+			win.setSize(new LogicalSize(currentSize.width, currentSize.height))
 		}
 	})
 
 	async function getWindowSize() {
-		const size = await data.win.outerSize()
+		const size = await win.outerSize()
-		const scaleFactor = originalScaleFactor ?? (await data.win.scaleFactor())
+		const scaleFactor = originalScaleFactor ?? (await win.scaleFactor())
 		const logicalSize = size.toLogical(scaleFactor)
 		return { logicalSize, scaleFactor }
 	}
@@ -35,7 +37,7 @@
 				image = b64
 			})
 			.finally(() => {
-				data.win.show().then(() => data.win.setFocus())
+				data.win?.show().then(() => data.win?.setFocus())
 			})
 		const { logicalSize, scaleFactor } = await getWindowSize()
 		originalSize = { width: logicalSize.width, height: logicalSize.height }
@@ -66,11 +68,11 @@
 <svelte:window
 	on:keydown={(e) => {
 		if (e.key === "Escape") {
-			data.win.close()
+			win.close()
 		}
 	}}
 />
-<Button size="icon" variant="ghost" class="fixed left-2 top-2" onclick={() => data.win.close()}>
+<Button size="icon" variant="ghost" class="fixed left-2 top-2" onclick={() => win.close()}>
 	<CircleX />
 </Button>
 <main class="z-50 h-screen w-screen overflow-hidden" data-tauri-drag-region>

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

@@ -64,7 +64,7 @@
 			if (isInMainWindow()) {
 				goto(i18n.resolveRoute("/app/"))
 			} else {
-				data.win.close()
+				data.win?.close()
 			}
 		},
 		hideBackButton: async () => {
@@ -130,7 +130,7 @@
 			},
 			getSpawnedProcesses: () => Promise.resolve(extSpawnedProcesses),
 			paste: async () => {
-				await data.win.hide()
+				await data.win?.hide()
 				await sleep(200)
 				return paste()
 			}
@@ -154,7 +154,7 @@
 		if (isInMainWindow()) {
 			goHome()
 		} else {
-			data.win.close()
+			data.win?.close()
 		}
 	}
 
@@ -169,7 +169,7 @@
 	onMount(() => {
 		appState.setFullScreenLoading(true)
 		setTimeout(() => {
-			data.win.setFocus()
+			data.win?.setFocus()
 		}, 200)
 		if (iframeRef?.contentWindow) {
 			const io = new IframeParentIO(iframeRef.contentWindow)
@@ -195,7 +195,7 @@
 	})
 
 	onDestroy(() => {
-		winExtMap.unregisterExtensionFromWindow(data.win.label)
+		winExtMap.unregisterExtensionFromWindow(data.win?.label ?? "")
 	})
 </script>
 
@@ -208,7 +208,7 @@
 		onclick={onBackBtnClicked}
 		style={`${positionToCssStyleString(uiControl.backBtnPosition)}`}
 	>
-		{#if data.win.label === "main"}
+		{#if data.win?.label === "main"}
 			<ArrowLeftIcon class="w-4" />
 		{:else}
 			<XIcon class="w-4" />

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

@@ -5,7 +5,7 @@
 	let { data } = $props()
 
 	onMount(() => {
-		data.win.show().then(() => data.win.setFocus())
+		data.win?.show().then(() => data.win?.setFocus())
 	})
 </script>