ADD: Mac OS titlebar

src/components/Navbar.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="flex app-titlebar">
-    <Menubar class="w-full h-14 rounded-none bg-zinc-900 justify-between text-muted-foreground font-mono">
+    <Menubar class="w-full h-14 rounded-none bg-zinc-900 justify-between text-muted-foreground font-mono px-3">
+      <div v-if="isMacOS" :style="{width: 80 / zoomFactor + 'px'}" />
       <div class="flex items-center">
         <h1
-          class="text-2xl min-w-32 app-titlebar-button ml-3 text-zinc-100"
+          class="text-2xl min-w-32 app-titlebar-button text-zinc-100"
           @click="$refs.zerooneTitle.scramble(1,100,0); $refs.zerooneSubtitle.scramble(1,75,30)">
           <ScrambleText
             ref="zerooneTitle"
@@ -62,7 +63,7 @@
           {{ store.connected ? 'Disconnect' : 'Connect' }}
         </MenubarTrigger>
       </MenubarMenu>
-      <div class="flex h-full">
+      <div v-if="!isMacOS" class="flex h-full">
         <button
           v-if="minimizable"
           class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
@@ -96,7 +97,7 @@ import {
 } from '@/components/ui/menubar/index.js'
 import ScrambleText from '@/components/common/ScrambleText.vue'
 import { X, Square, Minus } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { Separator } from '@/components/ui/separator'
 import { useStore } from '@/store'
 
@@ -107,6 +108,15 @@ const maximizable = ref(true)
 
 const { electron } = window
 
+const isMacOS = electron.platform === 'darwin'
+const zoomFactor = ref(1)
+
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    zoomFactor.value = window.outerWidth / window.innerWidth
+  })
+})
+
 </script>
 <style scoped>
 .app-titlebar {

src/main.js

@@ -20,7 +20,7 @@ const createWindow = () => {
   const mainWindow = new BrowserWindow({
     width: width,
     height: height,
-    titleBarStyle: 'hidden',
+    titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'hidden',
     resizable: true,
     minWidth: width / 3,
     minHeight: height / 3,

src/preload.js

@@ -1,7 +1,7 @@
 // See the Electron documentation for details on how to use preload scripts:
 // https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
 
-const { contextBridge, ipcRenderer, remote } = require('electron')
+const { contextBridge, ipcRenderer } = require('electron')
 
 
 // expose an API to choose available devices
@@ -42,6 +42,7 @@ contextBridge.exposeInMainWorld('nanodevice', {
 window.funnyThing = 'This is a funny thing!'
 
 contextBridge.exposeInMainWorld('electron', {
+  platform: process.platform,
   minimizeWindow: () => ipcRenderer.send('electron:minimizeWindow'),
   toggleMaximizeWindow: () => ipcRenderer.send('electron:toggleMaximizeWindow'),
   closeWindow: () => ipcRenderer.send('electron:closeWindow'),