ADD: Proper window handling (max, min)

src/components/Navbar.vue

@@ -64,18 +64,20 @@
       </MenubarMenu>
       <div class="flex h-full">
         <button
-          v-if="resizeable"
+          v-if="minimizable"
-          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2">
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
+          @click="electron.minimizeWindow">
           <Minus class="h-5 w-5" />
         </button>
         <button
-          v-if="resizeable"
+          v-if="maximizable"
-          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2">
+          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" />
         </button>
         <button
           class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
-          @click="window.close">
+          @click="electron.closeWindow">
           <X class="h-5 w-5 mr-0.5" />
         </button>
       </div>
@@ -100,7 +102,10 @@ import { useStore } from '@/store'
 
 const store = useStore()
 
-const resizeable = ref(false)
+const minimizable = ref(true)
+const maximizable = ref(true)
+
+const { electron } = window
 
 </script>
 <style scoped>

src/components/device/DevicePreview.vue

@@ -30,6 +30,7 @@
         <div v-else class="flex flex-col items-center text-center mix-blend-screen">
           <ScrambleText
             :text="offlineText"
+            character-set="_()*=0011"
             scramble-on-mount
             :fill-interval="50"
             :replace-interval="50"
@@ -93,7 +94,6 @@ const offlineTexts = [
 
 let offlineTextIndex = 0
 const nextOfflineText = () => {
-  console.log(offlineText.value)
   if (offlineText.value === '') {
     offlineText.value = offlineTexts[offlineTextIndex]
     offlineTextIndex = (offlineTextIndex + 1) % offlineTexts.length

src/main.js

@@ -24,7 +24,7 @@ const createWindow = () => {
     resizable: true,
     minWidth: width / 3,
     minHeight: height / 3,
-    maximizable: false,
+    maximizable: true,
     fullscreenable: false,
     center: true,
     backgroundColor: '#000',
@@ -33,6 +33,7 @@ const createWindow = () => {
       devTools: !app.isPackaged,
       preload: path.join(__dirname, 'preload.js'),
       zoomFactor: zoomFactor,
+      enableRemoteModule: true,
     },
   })
 
@@ -64,6 +65,15 @@ app.whenReady().then(() => {
   ipcMain.handle('nano:get', nano.get)
   ipcMain.handle('nano:set', nano.set)
   const mainWindow = createWindow()
+  ipcMain.on('electron:minimizeWindow', () => mainWindow.minimize())
+  ipcMain.on('electron:toggleMaximizeWindow', () => {
+    if (mainWindow.isMaximized()) {
+      mainWindow.unmaximize()
+    } else {
+      mainWindow.maximize()
+    }
+  })
+  ipcMain.on('electron:closeWindow', () => mainWindow.close())
   nanodevices.onAttach((device) => {
     console.log('Attached device', device)
     mainWindow.webContents.send('nanodevice-attached', device)

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 } = require('electron')
+const { contextBridge, ipcRenderer, remote } = require('electron')
 
 
 // expose an API to choose available devices
@@ -36,3 +36,13 @@ contextBridge.exposeInMainWorld('nanodevice', {
     ipcRenderer.on('nano-onvalue', (_event, value) => listener(value))
   },
 })
+
+//window.maximize = () => remote.BrowserWindow.getFocusedWindow().maximize()
+//window.maximize = () => remote.BrowserWindow.getFocusedWindow().minimize()
+window.funnyThing = 'This is a funny thing!'
+
+contextBridge.exposeInMainWorld('electron', {
+  minimizeWindow: () => ipcRenderer.send('electron:minimizeWindow'),
+  toggleMaximizeWindow: () => ipcRenderer.send('electron:toggleMaximizeWindow'),
+  closeWindow: () => ipcRenderer.send('electron:closeWindow'),
+})