From fb0e5761c99c9a668de8c33e4da21c066302bf31 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Tue, 12 Nov 2024 14:06:44 -0500
Subject: [PATCH] style: UI style updates

---
 apps/desktop/src-tauri/tauri.conf.json        |  9 -----
 apps/desktop/src-tauri/tauri.linux.conf.json  | 14 ++++++++
 apps/desktop/src-tauri/tauri.macos.conf.json  | 13 +++++++
 .../desktop/src-tauri/tauri.windows.conf.json | 14 ++++++++
 apps/desktop/src/lib/utils/style.ts           | 23 ++++++++++--
 apps/desktop/src/routes/+page.svelte          | 11 ++++--
 .../routes/extension/ui-iframe/+page.svelte   | 36 +++++--------------
 7 files changed, 80 insertions(+), 40 deletions(-)
 create mode 100644 apps/desktop/src-tauri/tauri.linux.conf.json
 create mode 100644 apps/desktop/src-tauri/tauri.macos.conf.json
 create mode 100644 apps/desktop/src-tauri/tauri.windows.conf.json

diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
index 8d2caba..6d03a5d 100644
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/apps/desktop/src-tauri/tauri.conf.json
@@ -11,15 +11,6 @@
 	},
 	"app": {
 		"macOSPrivateApi": true,
-		"windows": [
-			{
-				"hiddenTitle": true,
-				"title": "Kunkun",
-				"width": 800,
-				"height": 600,
-				"decorations": false
-			}
-		],
 		"security": {
 			"csp": null
 		}
diff --git a/apps/desktop/src-tauri/tauri.linux.conf.json b/apps/desktop/src-tauri/tauri.linux.conf.json
new file mode 100644
index 0000000..d230edf
--- /dev/null
+++ b/apps/desktop/src-tauri/tauri.linux.conf.json
@@ -0,0 +1,14 @@
+{
+	"identifier": "sh.kunkun.desktop",
+	"app": {
+		"windows": [
+			{
+				"hiddenTitle": true,
+				"title": "Kunkun",
+				"width": 800,
+				"height": 600,
+				"decorations": false
+			}
+		]
+	}
+}
diff --git a/apps/desktop/src-tauri/tauri.macos.conf.json b/apps/desktop/src-tauri/tauri.macos.conf.json
new file mode 100644
index 0000000..960e29e
--- /dev/null
+++ b/apps/desktop/src-tauri/tauri.macos.conf.json
@@ -0,0 +1,13 @@
+{
+	"identifier": "sh.kunkun.desktop",
+	"app": {
+		"windows": [
+			{
+				"hiddenTitle": true,
+				"title": "Kunkun",
+				"width": 800,
+				"height": 600
+			}
+		]
+	}
+}
diff --git a/apps/desktop/src-tauri/tauri.windows.conf.json b/apps/desktop/src-tauri/tauri.windows.conf.json
new file mode 100644
index 0000000..d230edf
--- /dev/null
+++ b/apps/desktop/src-tauri/tauri.windows.conf.json
@@ -0,0 +1,14 @@
+{
+	"identifier": "sh.kunkun.desktop",
+	"app": {
+		"windows": [
+			{
+				"hiddenTitle": true,
+				"title": "Kunkun",
+				"width": 800,
+				"height": 600,
+				"decorations": false
+			}
+		]
+	}
+}
diff --git a/apps/desktop/src/lib/utils/style.ts b/apps/desktop/src/lib/utils/style.ts
index 736d2eb..12e3b17 100644
--- a/apps/desktop/src/lib/utils/style.ts
+++ b/apps/desktop/src/lib/utils/style.ts
@@ -1,4 +1,5 @@
-import { type Position } from "@kksh/api/models"
+import { CustomPosition, type Position } from "@kksh/api/models"
+import * as v from "valibot"
 
 export function positionToTailwindClasses(position: Position) {
 	switch (position) {
@@ -11,6 +12,24 @@ export function positionToTailwindClasses(position: Position) {
 		case "bottom-right":
 			return "bottom-2 right-2"
 		default:
-			return ""
+			let className = ""
+			const parseOutput = v.safeParse(CustomPosition, position)
+			if (!parseOutput.success) {
+				return ""
+			}
+			if (parseOutput.output.top) {
+				className += ` top-[${parseOutput.output.top / 4}rem]`
+			}
+			if (parseOutput.output.right) {
+				className += ` right-[${parseOutput.output.right / 4}rem]`
+			}
+			if (parseOutput.output.bottom) {
+				className += ` bottom-[${parseOutput.output.bottom / 4}rem]`
+			}
+			if (parseOutput.output.left) {
+				className += ` left-[${parseOutput.output.left / 4}rem]`
+			}
+			console.log(position, className)
+			return className
 	}
 }
diff --git a/apps/desktop/src/routes/+page.svelte b/apps/desktop/src/routes/+page.svelte
index d64616a..10539a2 100644
--- a/apps/desktop/src/routes/+page.svelte
+++ b/apps/desktop/src/routes/+page.svelte
@@ -25,6 +25,7 @@
 	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
 	import { exit } from "@tauri-apps/plugin-process"
 	import { ArrowBigUpIcon, CircleXIcon, EllipsisVerticalIcon, RefreshCcwIcon } from "lucide-svelte"
+	import { onMount } from "svelte"
 
 	let inputEle: HTMLInputElement | null = null
 	function onKeyDown(event: KeyboardEvent) {
@@ -115,12 +116,18 @@
 						<DropdownMenu.Item onclick={toggleDevTools}>
 							<Icon icon="mingcute:code-fill" class="mr-2 h-5 w-5 text-green-500" />
 							Toggle Devtools
-							<DropdownMenu.Shortcut><span class="flex items-center">⌃+<ArrowBigUpIcon class="w-4 h-4" />+I</span></DropdownMenu.Shortcut>
+							<DropdownMenu.Shortcut
+								><span class="flex items-center">⌃+<ArrowBigUpIcon class="h-4 w-4" />+I</span
+								></DropdownMenu.Shortcut
+							>
 						</DropdownMenu.Item>
 						<DropdownMenu.Item onclick={() => location.reload()}>
 							<RefreshCcwIcon class="mr-2 h-4 w-4 text-green-500" />
 							Reload Window
-							<DropdownMenu.Shortcut><span class="flex items-center">⌃+<ArrowBigUpIcon class="w-4 h-4" />+R</span></DropdownMenu.Shortcut>
+							<DropdownMenu.Shortcut
+								><span class="flex items-center">⌃+<ArrowBigUpIcon class="h-4 w-4" />+R</span
+								></DropdownMenu.Shortcut
+							>
 						</DropdownMenu.Item>
 						<DropdownMenu.Item
 							onclick={() => {
diff --git a/apps/desktop/src/routes/extension/ui-iframe/+page.svelte b/apps/desktop/src/routes/extension/ui-iframe/+page.svelte
index d0665bf..b489a2b 100644
--- a/apps/desktop/src/routes/extension/ui-iframe/+page.svelte
+++ b/apps/desktop/src/routes/extension/ui-iframe/+page.svelte
@@ -1,20 +1,12 @@
 <script lang="ts">
 	import DanceTransition from "@/components/dance/dance-transition.svelte"
-	import Dance from "@/components/dance/dance.svelte"
 	import { appConfig, winExtMap } from "@/stores"
 	import { goBackOnEscape } from "@/utils/key"
 	import { goHome } from "@/utils/route"
 	import { positionToTailwindClasses } from "@/utils/style"
 	import { isInMainWindow } from "@/utils/window"
-	import { db, getExtLabelMap } from "@kksh/api/commands"
-	import {
-		CustomPosition,
-		ExtPackageJsonExtra,
-		LightMode,
-		Radius,
-		ThemeColor,
-		type Position
-	} from "@kksh/api/models"
+	import { db } from "@kksh/api/commands"
+	import { ThemeColor, type Position } from "@kksh/api/models"
 	import {
 		constructJarvisServerAPIWithPermissions,
 		exposeApiToWindow,
@@ -23,16 +15,11 @@
 	} from "@kksh/api/ui"
 	import { toast, type IUiIframeServer2 } from "@kksh/api/ui/iframe"
 	import { Button } from "@kksh/svelte5"
-	import { Layouts } from "@kksh/ui"
 	import { cn } from "@kksh/ui/utils"
-	import { error as svelteError } from "@sveltejs/kit"
 	import { getCurrentWindow } from "@tauri-apps/api/window"
 	import { goto } from "$app/navigation"
-	import { page } from "$app/stores"
 	import { ArrowLeftIcon, MoveIcon, RefreshCcwIcon, XIcon } from "lucide-svelte"
 	import { onDestroy, onMount } from "svelte"
-	import { fade } from "svelte/transition"
-	import Layout from "../../+layout.svelte"
 	import type { PageData } from "./$types"
 
 	let { data }: { data: PageData } = $props()
@@ -60,15 +47,7 @@
 	})
 
 	const iframeUiAPI: IUiIframeServer2 = {
-		// async iframeUiStartDragging() {
-		// 	console.log("start dragging")
-		// 	appWin.startDragging().catch(console.error)
-		// },
-		// iframeUiGoHome: async () => {
-		// 	navigateTo(localePath("/"))
-		// },
 		goBack: async () => {
-			console.log("goBack iframe ui API called")
 			if (isInMainWindow()) {
 				goto("/")
 			} else {
@@ -166,13 +145,16 @@
 	onDestroy(() => {
 		winExtMap.unregisterExtensionFromWindow(appWin.label)
 	})
+
+	const backBtnPositionClass = $derived(positionToTailwindClasses(uiControl.backBtnPosition))
+	const moveBtnPositionClass = $derived(positionToTailwindClasses(uiControl.moveBtnPosition))
+	const refreshBtnPositionClass = $derived(positionToTailwindClasses(uiControl.refreshBtnPosition))
 </script>
 
 <svelte:window on:keydown={goBackOnEscape} />
-
 {#if uiControl.backBtnPosition}
 	<Button
-		class={cn("absolute", positionToTailwindClasses(uiControl.backBtnPosition))}
+		class={cn("absolute", backBtnPositionClass)}
 		size="icon"
 		variant="outline"
 		onclick={onBackBtnClicked}
@@ -186,7 +168,7 @@
 {/if}
 {#if uiControl.moveBtnPosition}
 	<Button
-		class={cn("absolute", positionToTailwindClasses(uiControl.moveBtnPosition))}
+		class={cn("absolute", moveBtnPositionClass)}
 		size="icon"
 		variant="outline"
 		data-tauri-drag-region
@@ -196,7 +178,7 @@
 {/if}
 {#if uiControl.refreshBtnPosition}
 	<Button
-		class={cn("absolute", positionToTailwindClasses(uiControl.refreshBtnPosition))}
+		class={cn("absolute", refreshBtnPositionClass)}
 		size="icon"
 		variant="outline"
 		onclick={iframeUiAPI.reloadPage}