feat: semi transparent window background effect, but incompatible wit…

…h current UI lib
kunkunsh · Oct 26, 2024 · 59c83bb · 59c83bb
1 parent b212b22
commit 59c83bb
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 20 deletions.
diff --git a/apps/desktop/assets/css/app.css b/apps/desktop/assets/css/app.css
@@ -1,3 +1,7 @@
 html.dark {
 	color-scheme: dark;
 }
+
+body {
+	background-color: transparent;
+}
diff --git a/apps/desktop/components/cmd-palette/Command.vue b/apps/desktop/components/cmd-palette/Command.vue
@@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 		:resetSearchTermOnBlur="false"
 		:class="
 			cn(
-				'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+				'text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
 				props.class
 			)
 		"

diff --git a/apps/desktop/layouts/default.vue b/apps/desktop/layouts/default.vue
@@ -73,7 +73,7 @@ onMounted(async () => {
 </script>
 
 <template>
-	<main class="z-10 flex h-screen flex-col">
+	<main class="z-10 flex h-screen flex-col rounded-md">
 		<Toaster :rich-colors="true" :expand="true" />
 		<Toaster2 />
 		<slot />

diff --git a/apps/desktop/pages/index.vue b/apps/desktop/pages/index.vue
@@ -25,6 +25,7 @@ import { useRemoteCmdStore } from "~/stores/remoteCmds"
 import { useSystemCmdsStore } from "~/stores/systemCmds"
 import { useAppUiStore } from "~/stores/ui"
 import { ComboboxInput } from "radix-vue"
+import { Button } from "@kksh/vue/button"
 import { Command } from "tauri-plugin-shellx-api"
 import type { EventEmitter, IOPayload, OutputEvents } from "tauri-plugin-shellx-api"
 import { flatten, parse, safeParse } from "valibot"
@@ -63,18 +64,18 @@ const appWindow = getCurrentWindow()
 const runtimeConfig = useRuntimeConfig()
 const cmdInputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
 
-appConfig.$subscribe((mutation, state) => {
-	const mutEvts = Array.isArray(mutation.events) ? mutation.events : [mutation.events]
-	mutEvts.forEach((evt) => {
-		if (evt.key === "devExtensionPath") {
-			if (evt.oldValue !== evt.newValue) {
-				// extsObj.devExt = new Extension("Dev Extensions", state.devExtensionPath, true)
-				// extsObj.devExt.load()
-				// TODO
-			}
-		}
-	})
-})
+// appConfig.$subscribe((mutation, state) => {
+// 	const mutEvts = Array.isArray(mutation.events) ? mutation.events : [mutation.events]
+// 	mutEvts.forEach((evt) => {
+// 		if (evt.key === "devExtensionPath") {
+// 			if (evt.oldValue !== evt.newValue) {
+// 				// extsObj.devExt = new Extension("Dev Extensions", state.devExtensionPath, true)
+// 				// extsObj.devExt.load()
+// 				// TODO
+// 			}
+// 		}
+// 	})
+// })
 
 useListenToWindowBlur(() => {
 	const win = getCurrentWebviewWindow()
@@ -94,8 +95,8 @@ useListenToWindowFocus(() => {
 })
 
 onMounted(async () => {
-	console.log("session", session.value);
-	
+	console.log("session", session.value)
+
 	appUiStore.setDefaultAction("Open")
 	if (appWindow.label !== "main") {
 		setTimeout(() => {

diff --git a/apps/desktop/src-tauri/src/main.rs b/apps/desktop/src-tauri/src/main.rs
@@ -125,9 +125,9 @@ fn main() {
             // }
         })
         .setup(|app| {
-            setup::window::setup_window(app.handle());
+            // setup::window::setup_window(app.handle());
             setup::tray::create_tray(app.handle())?;
-            #[cfg(debug_assertions)] // only include this code on debug builds
+            #[cfg(all(not(target_os = "macos"), debug_assertions))]
             {
                 app.deep_link().register("kunkun")?;
             }

diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
@@ -20,9 +20,13 @@
 				"resizable": true,
 				"fullscreen": false,
 				"titleBarStyle": "Transparent",
-				"transparent": false,
+				"transparent": true,
 				"hiddenTitle": true,
-				"visible": false
+				"visible": false,
+				"windowEffects": {
+					"effects": ["sidebar"],
+					"state": "active"
+				}
 			}
 		],
 		"security": {

diff --git a/apps/desktop/stores/builtinCmdLoader.ts b/apps/desktop/stores/builtinCmdLoader.ts
@@ -203,6 +203,8 @@ if (rtConfig.public.isDev) {
 		iconifyIcon: "fa6-brands:dev",
 		description: "Open Dev Page",
 		function: async () => {
+			navigateTo("/dev")
+			return
 			const windows = await getAllWebviewWindows()
 			const found = windows.find((w) => w.label === DevWindowLabel)
 			if (found) {