custom window frame on windows

Author: vaaski

app/app.vue

@@ -9,17 +9,60 @@ const dir = computed(() => locales[locale.value].dir)
 useHead({
 	htmlAttrs: { lang, dir },
 })
+
+const closeWindow = () => {
+	electrobun.rpc?.send("windowClose", {})
+}
+
+const platform = ref("unknown")
+
+onMounted(async () => {
+	const platformResponse = await electrobun.rpc?.request("getPlatform", {})
+	if (platformResponse?.output) {
+		platform.value = platformResponse.output
+	}
+})
 </script>
 
 <template>
 	<UApp :locale="locales[locale]">
-		<UHeader title="dlpgui" :toggle="false" to="/download">
+		<UHeader
+			title="dlpgui"
+			:toggle="false"
+			to="/download"
+			class="electrobun-webkit-app-region-drag"
+			:ui="{
+				left: 'electrobun-webkit-app-region-no-drag',
+				right: 'electrobun-webkit-app-region-no-drag',
+			}"
+		>
 			<template #right>
 				<UButton
 					to="/settings"
 					color="neutral"
 					variant="ghost"
 					icon="lucide:settings"
+					size="sm"
+					class="opacity-75"
+				/>
+				<!-- <UButton
+					color="neutral"
+					variant="ghost"
+					icon="material-symbols:chrome-minimize-rounded"
+				/>
+				<UButton
+					color="neutral"
+					variant="ghost"
+					icon="material-symbols:chrome-maximize-outline"
+				/> -->
+				<UButton
+					color="neutral"
+					variant="ghost"
+					icon="material-symbols:close-rounded"
+					size="xl"
+					@click="closeWindow"
+					class="ml-4"
+					v-if="platform !== 'darwin'"
 				/>
 			</template>
 		</UHeader>

bun/index.ts

@@ -1,5 +1,7 @@
 import type { MyRPC } from "../shared/types/rpc"
 
+import { platform } from "node:os"
+
 import {
 	BrowserWindow,
 	Updater,
@@ -83,8 +85,23 @@ const rpc = BrowserView.defineRPC<MyRPC>({
 					await Updater.applyUpdate()
 				}
 			},
+			getPlatform: async () => {
+				return {
+					output: platform(),
+				}
+			},
+		},
+		messages: {
+			windowMinimize: () => mainWindow.minimize(),
+			windowMaximize: () => {
+				if (mainWindow.isMaximized()) {
+					mainWindow.unmaximize()
+				} else {
+					mainWindow.maximize()
+				}
+			},
+			windowClose: () => mainWindow.close(),
 		},
-		messages: {},
 	},
 })
 
@@ -113,8 +130,7 @@ const display = Screen.getPrimaryDisplay()
 const windowWidth = 800
 const windowHeight = 600
 
-// const mainWindow =
-new BrowserWindow({
+const mainWindow = new BrowserWindow({
 	title: "dlpgui",
 	url,
 	rpc,
@@ -124,4 +140,8 @@ new BrowserWindow({
 		width: windowWidth,
 		height: windowHeight,
 	},
+	titleBarStyle: platform() === "darwin" ? "default" : "hidden",
+	styleMask: {
+		Resizable: false,
+	},
 })

shared/types/rpc.d.ts

@@ -24,8 +24,16 @@ export type MyRPC = {
 				params: {}
 				response: {}
 			}
+			getPlatform: {
+				params: {}
+				response: { output: string }
+			}
+		}
+		messages: {
+			windowMinimize: {}
+			windowMaximize: {}
+			windowClose: {}
 		}
-		messages: {}
 	}>
 	webview: RPCSchema<{
 		requests: {}