feat: Added custom titleBarverlay with close,minimize and maximize styles

Author: pu-raihan

main.ts

@@ -102,13 +102,6 @@ export class Main {
       resizable: true,
     };
 
-    if (!this.isMac) {
-      options.titleBarOverlay = {
-        color: '#FFFFFF',
-        height: 26,
-      };
-    }
-
     if (this.isDevelopment || this.isLinux) {
       Object.assign(options, { icon: this.icon });
     }

main/preload.ts

@@ -27,6 +27,42 @@ const ipc = {
     return ipcRenderer.send(IPC_MESSAGES.RELOAD_MAIN_WINDOW);
   },
 
+  minimizeWindow() {
+    return ipcRenderer.send(IPC_MESSAGES.MINIMIZE_MAIN_WINDOW);
+  },
+
+  toggleMaximize() {
+    return ipcRenderer.send(IPC_MESSAGES.MAXIMIZE_MAIN_WINDOW);
+  },
+
+  isMaximized() {
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send(IPC_MESSAGES.ISMAXIMIZED_MAIN_WINDOW);
+      ipcRenderer.once(
+        IPC_MESSAGES.ISMAXIMIZED_RESULT,
+        (_event, isMaximized) => {
+          resolve(isMaximized);
+        }
+      );
+    });
+  },
+
+  isFullscreen() {
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send(IPC_MESSAGES.ISFULLSCREEN_MAIN_WINDOW);
+      ipcRenderer.once(
+        IPC_MESSAGES.ISFULLSCREEN_RESULT,
+        (_event, isFullscreen) => {
+          resolve(isFullscreen);
+        }
+      );
+    });
+  },
+
+  closeWindow() {
+    return ipcRenderer.send(IPC_MESSAGES.CLOSE_MAIN_WINDOW);
+  },
+
   async getCreds() {
     return (await ipcRenderer.invoke(IPC_ACTIONS.GET_CREDS)) as Creds;
   },

main/registerIpcMainMessageListeners.ts

@@ -20,6 +20,28 @@ export default function registerIpcMainMessageListeners(main: Main) {
   ipcMain.on(IPC_MESSAGES.RELOAD_MAIN_WINDOW, () => {
     main.mainWindow!.reload();
   });
+  
+  ipcMain.on(IPC_MESSAGES.MINIMIZE_MAIN_WINDOW, () => {
+    main.mainWindow!.minimize();
+  });
+
+  ipcMain.on(IPC_MESSAGES.MAXIMIZE_MAIN_WINDOW, () => {
+    main.mainWindow!.isMaximized()?main.mainWindow!.unmaximize():main.mainWindow!.maximize()
+  });
+
+  ipcMain.on(IPC_MESSAGES.ISMAXIMIZED_MAIN_WINDOW, (event) => {
+    const isMaximized = main.mainWindow?.isMaximized() ?? false;
+  event.sender.send(IPC_MESSAGES.ISMAXIMIZED_RESULT, isMaximized);
+  });
+
+  ipcMain.on(IPC_MESSAGES.ISFULLSCREEN_MAIN_WINDOW, (event) => {
+    const isFullscreen = main.mainWindow?.isFullScreen() ?? false;
+  event.sender.send(IPC_MESSAGES.ISFULLSCREEN_RESULT, isFullscreen);
+  });
+
+  ipcMain.on(IPC_MESSAGES.CLOSE_MAIN_WINDOW, () => {
+    main.mainWindow!.close();
+  });
 
   ipcMain.on(IPC_MESSAGES.OPEN_EXTERNAL, (_, link: string) => {
     shell.openExternal(link).catch((err) => emitMainProcessError(err));

src/components/WindowsTitleBar.vue

@@ -1,12 +1,61 @@
 <template>
   <div
-    class="window-drag flex items-center border-b dark:bg-gray-900 text-gray-900 dark:text-gray-100 border-gray-100 dark:border-gray-800"
+    class="
+      window-drag
+      flex
+      items-center
+      border-b
+      dark:bg-gray-900
+      text-gray-900
+      dark:text-gray-100
+      border-gray-100
+      dark:border-gray-800
+    "
     style="height: 28px"
   >
     <Fb class="ms-2" />
     <p v-if="companyName && dbPath" class="mx-auto text-sm">
       {{ companyName }} - {{ dbPath }}
     </p>
+    <div v-if="!isFullscreen" class="window-no-drag flex h-full items-center justify-end">
+      <div
+        class="
+          flex
+          items-center
+          px-4
+          h-full
+          hover:bg-gray-300
+          dark:hover:bg-gray-875
+        "
+        @click="minimizeWindow"
+      >
+        <feather-icon name="minus" class="h-4 w-4 flex-shrink-0" />
+      </div>
+      <div
+        class="
+          flex
+          items-center
+          px-4
+          h-full
+          hover:bg-gray-300
+          dark:hover:bg-gray-875
+        "
+        @click="toggleMaximize"
+      >
+        <feather-icon
+          v-if="isMax"
+          name="minimize"
+          class="h-3 w-3 flex-shrink-0"
+        />
+        <feather-icon v-else name="square" class="h-3 w-3 flex-shrink-0" />
+      </div>
+      <div
+        class="flex items-center px-4 h-full hover:bg-red-600 hover:text-white"
+        @click="closeWindow"
+      >
+        <feather-icon name="x" class="h-4 w-4 flex-shrink-0" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -20,5 +69,59 @@ export default {
     dbPath: String,
     companyName: String,
   },
+  data() {
+    return {
+      isMax: Boolean,
+      isFullscreen: Boolean,
+    };
+  },
+  mounted() {
+    this.getIsMaximized();
+    this.getIsFullscreen();
+    window.addEventListener('resize', this.getIsFullscreen);
+    document.addEventListener('webkitfullscreenchange', this.getIsFullscreen);
+    document.addEventListener('mozfullscreenchange', this.getIsFullscreen);
+    document.addEventListener('fullscreenchange', this.getIsFullscreen);
+    document.addEventListener('MSFullscreenChange', this.getIsFullscreen);
+  },
+  destroyed() {
+    window.removeEventListener('resize', this.getIsFullscreen);
+    document.removeEventListener('webkitfullscreenchange', this.getIsFullscreen);
+    document.removeEventListener('mozfullscreenchange', this.getIsFullscreen);
+    document.removeEventListener('fullscreenchange', this.getIsFullscreen);
+    document.removeEventListener('MSFullscreenChange', this.getIsFullscreen);
+  },
+  methods: {
+    minimizeWindow() {
+      ipc.minimizeWindow();
+    },
+    toggleMaximize() {
+      ipc.toggleMaximize();
+      this.getIsMaximized();
+    },
+    closeWindow() {
+      ipc.closeWindow();
+    },
+    getIsMaximized() {
+      ipc
+        .isMaximized()
+        .then((result) => {
+          this.isMax =  result;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+    getIsFullscreen() {
+      ipc
+        .isFullscreen()
+        .then((result) => {
+          this.isFullscreen =  result;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+  },
 };
 </script>

utils/messages.ts

@@ -5,6 +5,13 @@ export enum IPC_MESSAGES {
   OPEN_EXTERNAL = 'open-external',
   SHOW_ITEM_IN_FOLDER = 'show-item-in-folder',
   RELOAD_MAIN_WINDOW = 'reload-main-window',
+  MINIMIZE_MAIN_WINDOW = 'minimize-main-window',
+  MAXIMIZE_MAIN_WINDOW = 'maximize-main-window',
+  ISMAXIMIZED_MAIN_WINDOW = 'ismaximized-main-window',
+  ISMAXIMIZED_RESULT = 'ismaximized-result',
+  ISFULLSCREEN_MAIN_WINDOW = 'isfullscreen-main-window',
+  ISFULLSCREEN_RESULT = 'isfullscreen-result',
+  CLOSE_MAIN_WINDOW = 'close-main-window',
 }
 
 // ipcRenderer.invoke(...)