feature: splashscreen (#36)

* feat: move all pages to app folder, add splashscreen

* feat: use Dance as splashscreen

* feat: add zoom in for splashscreen logo

* refactor: move svelte files into app folder

* fix: url prefix with /app

* refactor: remove platform-specific tauri conf

Merge windows back to main tauri config. The reason I separated them was
because I need decoration: true on mac and false on windows and linux.
Now I use tauri rust API to set decorations to false for win and linux.

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

@@ -2,7 +2,7 @@
 	"$schema": "../gen/schemas/desktop-schema.json",
 	"identifier": "default",
 	"description": "Capability for the main window",
-	"windows": ["main*"],
+	"windows": ["main*", "splashscreen"],
 	"permissions": [
 		{
 			"identifier": "http:default",

apps/desktop/src-tauri/src/setup/window.rs

@@ -53,7 +53,19 @@ impl<R: Runtime> WindowExt for WebviewWindow<R> {
 }
 
 pub fn setup_window<R: Runtime>(app: &AppHandle<R>) {
-    let window = app.get_webview_window("main").unwrap();
     #[cfg(target_os = "macos")]
-    window.set_transparent_titlebar(true, true);
+    {
+        let main_win = app.get_webview_window("main").unwrap();
+        main_win.set_transparent_titlebar(true, true);
+        let splashscreen_win = app.get_webview_window("splashscreen").unwrap();
+        splashscreen_win.set_transparent_titlebar(true, true);
+    }
+    #[cfg(not(target_os = "macos"))]
+    {
+        // on linux or windows, set decorations to false
+        let main_win = app.get_webview_window("main").unwrap();
+        main_win
+            .set_decorations(false)
+            .expect("Failed to set decorations");
+    }
 }

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

@@ -13,7 +13,23 @@
 		"macOSPrivateApi": true,
 		"security": {
 			"csp": null
-		}
+		},
+		"windows": [
+			{
+				"hiddenTitle": true,
+				"url": "/app",
+				"title": "Kunkun",
+				"width": 800,
+				"visible": false,
+				"height": 600,
+				"decorations": true
+			},
+			{
+				"url": "/splashscreen",
+				"visible": false,
+				"label": "splashscreen"
+			}
+		]
 	},
 	"bundle": {
 		"createUpdaterArtifacts": true,

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

@@ -13,7 +13,6 @@ import { derived } from "svelte/store"
 import * as clipboard from "tauri-plugin-clipboard-api"
 import { open } from "tauri-plugin-shellx-api"
 import { v4 as uuidv4 } from "uuid"
-import { hexColor } from "valibot"
 
 export const rawBuiltinCmds: BuiltinCmd[] = [
 	{
@@ -25,7 +24,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		description: "Go to Extension Store",
 		function: async () => {
 			appState.clearSearchTerm()
-			goto("/extension/store")
+			goto("/app/extension/store")
 		}
 	},
 	{
@@ -36,7 +35,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		},
 		description: "",
 		function: async () => {
-			goto("/auth")
+			goto("/app/auth")
 		}
 	},
 	{
@@ -73,6 +72,23 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 			}, 2_000)
 		}
 	},
+	{
+		name: "Splashscreen (Dev)",
+		icon: {
+			type: IconEnum.Iconify,
+			value: "material-symbols:skeleton"
+		},
+		description: "",
+		flags: {
+			dev: true
+		},
+		function: async () => {
+			new WebviewWindow(`splashscreen`, {
+				url: "/splashscreen"
+			})
+			appState.clearSearchTerm()
+		}
+	},
 	{
 		name: "File Transfer",
 		icon: {
@@ -81,7 +97,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		},
 		description: "",
 		function: async () => {
-			goto("/extension/file-transfer")
+			goto("/app/extension/file-transfer")
 			appState.clearSearchTerm()
 		}
 	},
@@ -95,7 +111,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		description: "",
 		function: async () => {
 			appState.clearSearchTerm()
-			goto("/settings/add-dev-extension")
+			goto("/app/settings/add-dev-extension")
 		}
 	},
 	{
@@ -120,7 +136,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		function: async () => {
 			// const appStateStore = useAppStateStore()
 			appState.clearSearchTerm()
-			goto("/settings/set-dev-ext-path")
+			goto("/app/settings/set-dev-ext-path")
 		}
 	},
 	{
@@ -132,11 +148,11 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		description: "",
 		function: async () => {
 			appState.clearSearchTerm()
-			// goto("/window-troubleshooter")
+			// goto("/app/window-troubleshooter")
 			const winLabel = `main:extension-window-troubleshooter-${uuidv4()}`
 			console.log(winLabel)
 			new WebviewWindow(winLabel, {
-				url: "/troubleshooters/extension-window",
+				url: "/app/troubleshooters/extension-window",
 				title: "Extension Window Troubleshooter"
 			})
 		},
@@ -151,7 +167,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		description: "",
 		function: async () => {
 			appState.clearSearchTerm()
-			goto("/extension/permission-inspector")
+			goto("/app/extension/permission-inspector")
 		},
 		keywords: ["extension"]
 	},
@@ -164,7 +180,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		description: "",
 		function: async () => {
 			appState.clearSearchTerm()
-			goto("/troubleshooters/extension-loading")
+			goto("/app/troubleshooters/extension-loading")
 		},
 		keywords: ["extension", "troubleshooter"]
 	},
@@ -177,7 +193,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		description: "Create a Quicklink",
 		function: async () => {
 			appState.clearSearchTerm()
-			goto("/extension/create-quick-link")
+			goto("/app/extension/create-quick-link")
 		}
 	},
 	{
@@ -188,7 +204,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		},
 		description: "Open Settings",
 		function: async () => {
-			goto("/settings")
+			goto("/app/settings")
 			appState.clearSearchTerm()
 		}
 	},
@@ -248,7 +264,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		},
 		description: "Dance",
 		function: async () => {
-			goto("/dance")
+			goto("/app/dance")
 		}
 	},
 	{
@@ -289,7 +305,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		description: "Clipboard History",
 		function: async () => {
 			appState.clearSearchTerm()
-			goto("/extension/clipboard")
+			goto("/app/extension/clipboard")
 		}
 	},
 	{
@@ -306,7 +322,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 				return
 			}
 			const window = new WebviewWindow(`main:pinned-screenshot-${uuidv4()}`, {
-				url: "/extension/pin-screenshot",
+				url: "/app/extension/pin-screenshot",
 				title: "Pinned Screenshot",
 				hiddenTitle: true,
 				titleBarStyle: "transparent",
@@ -326,7 +342,7 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		},
 		description: "MDNS Debugger",
 		function: async () => {
-			goto("/troubleshooters/mdns-debugger")
+			goto("/app/troubleshooters/mdns-debugger")
 		},
 		flags: {
 			developer: true

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

@@ -24,7 +24,7 @@ export async function onTemplateUiCmdSelect(
 ) {
 	await createExtSupportDir(ext.extPath)
 	// console.log("onTemplateUiCmdSelect", ext, cmd, isDev, hmr)
-	const url = `/extension/ui-worker?extPath=${encodeURIComponent(ext.extPath)}&cmdName=${encodeURIComponent(cmd.name)}`
+	const url = `/app/extension/ui-worker?extPath=${encodeURIComponent(ext.extPath)}&cmdName=${encodeURIComponent(cmd.name)}`
 	if (cmd.window) {
 		const winLabel = await winExtMap.registerExtensionWithWindow({ extPath: ext.extPath })
 		const window = launchNewExtWindow(winLabel, url, cmd.window)
@@ -52,7 +52,7 @@ export async function onCustomUiCmdSelect(
 	} else {
 		url = decodeURIComponent(convertFileSrc(`${trimSlash(cmd.main)}`, "ext"))
 	}
-	let url2 = `/extension/ui-iframe?url=${encodeURIComponent(url)}&extPath=${encodeURIComponent(ext.extPath)}`
+	let url2 = `/app/extension/ui-iframe?url=${encodeURIComponent(url)}&extPath=${encodeURIComponent(ext.extPath)}`
 	if (cmd.window) {
 		const winLabel = await winExtMap.registerExtensionWithWindow({
 			extPath: ext.extPath,
@@ -61,7 +61,7 @@ export async function onCustomUiCmdSelect(
 		if (platform() === "windows" && !useDevMain) {
 			const addr = await spawnExtensionFileServer(winLabel)
 			const newUrl = `http://${addr}`
-			url2 = `/extension/ui-iframe?url=${encodeURIComponent(newUrl)}&extPath=${encodeURIComponent(ext.extPath)}`
+			url2 = `/app/extension/ui-iframe?url=${encodeURIComponent(newUrl)}&extPath=${encodeURIComponent(ext.extPath)}`
 		}
 		const window = launchNewExtWindow(winLabel, url2, cmd.window)
 		window.onCloseRequested(async (event) => {
@@ -78,7 +78,7 @@ export async function onCustomUiCmdSelect(
 			const addr = await spawnExtensionFileServer(winLabel) // addr has format "127.0.0.1:<port>"
 			console.log("Extension file server address: ", addr)
 			const newUrl = `http://${addr}`
-			url2 = `/extension/ui-iframe?url=${encodeURIComponent(newUrl)}&extPath=${encodeURIComponent(ext.extPath)}`
+			url2 = `/app/extension/ui-iframe?url=${encodeURIComponent(newUrl)}&extPath=${encodeURIComponent(ext.extPath)}`
 		}
 		goto(url2)
 	}

apps/desktop/src/lib/components/dance/dance.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { cn } from "@/utils"
 	import { GridAnimation } from "@kksh/ui"
 	import { decompressFrame, decompressString, deserializeFrame } from "@kksh/utils"
 	import compressedDance from "$lib/../data/dance.bin?raw"
@@ -7,11 +8,14 @@
 	const { fps, frames: rawFrames }: { fps: number; frames: string[] } = rawData
 	const decodedFrames = rawFrames.map((frame) => deserializeFrame(decompressFrame(frame)))
 
-	let { scale = 1 } = $props()
+	let { scale = 1, class: className }: { scale?: number; class?: string } = $props()
 </script>
 
 <GridAnimation
-	class="pointer-events-none max-h-full max-w-full select-none invert dark:invert-0"
+	class={cn(
+		"pointer-events-none max-h-full max-w-full select-none invert dark:invert-0",
+		className
+	)}
 	{fps}
 	frames={decodedFrames}
 	{scale}

apps/desktop/src/lib/components/standalone/settings/AddDevExtForm.svelte

@@ -87,7 +87,7 @@
 	async function pickExtFiles() {
 		if (!$appConfig.devExtensionPath) {
 			toast.warning("Please set the dev extension path in the settings")
-			return goto("/settings/set-dev-ext-path")
+			return goto("/app/settings/set-dev-ext-path")
 		}
 		const selected = await openFileSelector({
 			directory: false,

apps/desktop/src/lib/components/standalone/settings/install-npm-package-name-form.svelte

@@ -17,7 +17,7 @@
 			toast.warning(
 				"Please set the dev extension path in the settings to install tarball extension"
 			)
-			return goto("/settings/set-dev-ext-path")
+			return goto("/app/settings/set-dev-ext-path")
 		}
 		await extensions
 			.installFromNpmPackageName(data.name, $appConfig.devExtensionPath)

apps/desktop/src/lib/components/standalone/settings/install-tarball-url-form.svelte

@@ -19,7 +19,7 @@
 			toast.warning(
 				"Please set the dev extension path in the settings to install tarball extension"
 			)
-			return goto("/settings/set-dev-ext-path")
+			return goto("/app/settings/set-dev-ext-path")
 		}
 		await extensions
 			.installFromTarballUrl(data.url, $appConfig.devExtensionPath)

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

@@ -59,7 +59,7 @@ export async function handleKunkunProtocol(parsedUrl: URL) {
 		if (parsed.identifier) {
 			goto(`/extension/store/${parsed.identifier}`)
 		} else {
-			goto("/extension/store")
+			goto("/app/extension/store")
 		}
 	} else if (href.startsWith(DEEP_LINK_PATH_REFRESH_DEV_EXTENSION)) {
 		emitRefreshDevExt()

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

@@ -76,7 +76,7 @@ export async function globalKeyDownHandler(e: KeyboardEvent) {
 	if ((_platform === "macos" && e.metaKey) || (_platform === "windows" && e.ctrlKey)) {
 		if (e.key === ",") {
 			e.preventDefault()
-			goto("/settings")
+			goto("/app/settings")
 		}
 	}
 	// Toggle Devtools with control + shift + I

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

@@ -7,7 +7,7 @@ export function goBack() {
 }
 
 export function goHome() {
-	goto("/")
+	goto("/app/")
 }
 
 export function goHomeOrCloseDependingOnWindow() {