UPD: Proper maximize handling

src/components/common/PaletteInput.vue

@@ -7,7 +7,7 @@
       <button
         v-for="(option, key) in options" :key="key"
         class="flex-1 py-2 items-center text-center rounded-t-lg min-w-0 transition-colors"
-        :class="currentOption!==key ? 'hover:bg-zinc-800 text-muted-foreground' : 'text-black bg-zinc-300 hover:bg-zinc-200'"
+        :class="currentOption!==key ? 'hover:bg-zinc-800 text-muted-foreground mx-[1px]' : 'text-black bg-zinc-300 hover:bg-zinc-200 border-x border-t border-zinc-100'"
         @click="currentOption = key">
         {{ $t(option.titleKey) }}
       </button>

src/components/device/DevicePreview.vue

@@ -105,7 +105,6 @@ const offlineTexts = [
 
 let offlineTextIndex = 0
 const nextOfflineText = () => {
-  console.log('nextOfflineText', offlineText.value)
   if (offlineText.value === '') {
     offlineText.value = offlineTexts[offlineTextIndex]
     offlineTextIndex = (offlineTextIndex + 1) % offlineTexts.length

src/components/navbar/Navbar.vue

@@ -93,7 +93,8 @@
           v-if="maximizable"
           class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
           @click="electron?.toggleMaximizeWindow">
-          <Square class="h-3.5 w-3.5 mr-0.5" />
+          <Copy v-if="isMaximized" class="h-4 w-4" />
+          <Square v-else class="h-3.5 w-3.5 mr-0.5" />
         </button>
         <button
           class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
@@ -115,7 +116,7 @@ import {
   MenubarTrigger,
 } from '@/components/ui/menubar'
 import ScrambleText from '@/components/common/ScrambleText.vue'
-import { Minus, Square, X } from 'lucide-vue-next'
+import { Minus, Square, Copy, X } from 'lucide-vue-next'
 import { onMounted, ref } from 'vue'
 import { Separator } from '@/components/ui/separator'
 import { useStore } from '@/store'
@@ -124,7 +125,9 @@ import MenubarButton from '@/components/navbar/MenubarButton.vue'
 const store = useStore()
 
 const minimizable = ref(true)
-const maximizable = ref(false)
+const maximizable = ref(true)
+
+const isMaximized = ref(false)
 
 const { electron } = window
 
@@ -135,6 +138,14 @@ onMounted(() => {
   window.addEventListener('resize', () => {
     zoomFactor.value = window.outerWidth / window.innerWidth
   })
+  electron.onMaximized((maximized) => {
+    console.log(maximized)
+    isMaximized.value = true
+  })
+
+  electron.onUnmaximized(() => {
+    isMaximized.value = false
+  })
 })
 
 </script>

src/main.js

@@ -25,7 +25,7 @@ const createWindow = () => {
     resizable: true,
     minWidth: width / 3,
     minHeight: height / 3,
-    maximizable: false,
+    maximizable: true,
     fullscreenable: false,
     center: true,
     backgroundColor: '#000',
@@ -45,6 +45,12 @@ const createWindow = () => {
   mainWindow.on('resize', () => {
     mainWindow.webContents.setZoomFactor(zoomFactor * mainWindow.getSize()[0] / width)
   })
+  mainWindow.on('maximize', () => {
+    mainWindow.webContents.send('electron:maximized')
+  })
+  mainWindow.on('unmaximize', () => {
+    mainWindow.webContents.send('electron:unmaximized')
+  })
 
   // and load the index.html of the app.
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {

src/preload.js

@@ -37,14 +37,12 @@ contextBridge.exposeInMainWorld('nanodevice', {
   },
 })
 
-//window.maximize = () => remote.BrowserWindow.getFocusedWindow().maximize()
-//window.maximize = () => remote.BrowserWindow.getFocusedWindow().minimize()
-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'),
   openExternal: (url) => ipcRenderer.send('electron:openExternal', url),
+  onMaximized: (callback) => ipcRenderer.on('electron:maximized', callback),
+  onUnmaximized: (callback) => ipcRenderer.on('electron:unmaximized', callback),
 })