perf(Windows): title bar improvements

src/main/main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, /* session, */ nativeImage, Menu } from 'electron';
+import { app, BrowserWindow, /* session, */ nativeImage, Menu, ipcMain } from 'electron';
 import * as path from 'path';
 import * as Store from 'electron-store';
 import * as windowStateKeeper from 'electron-window-state';
@@ -7,9 +7,13 @@ import * as remoteMain from '@electron/remote/main';
 import ipcHandlers from './ipc-handlers';
 
 Store.initRenderer();
+const persistentStore = new Store({ name: 'settings' });
 
+const appTheme = persistentStore.get('application_theme');
 const isDevelopment = process.env.NODE_ENV !== 'production';
 const isMacOS = process.platform === 'darwin';
+const isLinux = process.platform === 'linux';
+const isWindows = process.platform === 'win32';
 const gotTheLock = app.requestSingleInstanceLock();
 
 process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true';
@@ -28,15 +32,21 @@ async function createMainWindow () {
       minWidth: 900,
       minHeight: 550,
       title: 'Antares SQL',
-      autoHideMenuBar: true,
       icon: nativeImage.createFromDataURL(icon.default),
       webPreferences: {
          nodeIntegration: true,
          contextIsolation: false,
          spellcheck: false
       },
-      frame: false,
-      titleBarStyle: isMacOS ? 'hidden' : 'default',
+      autoHideMenuBar: true,
+      titleBarStyle: isLinux ? 'default' :'hidden',
+      titleBarOverlay: isWindows
+         ? {
+            color: appTheme === 'dark' ? '#3f3f3f' : '#fff',
+            symbolColor: appTheme === 'dark' ? '#fff' : '#000',
+            height: 30
+         }
+         : false,
       trafficLightPosition: isMacOS ? { x: 10, y: 8 } : undefined,
       backgroundColor: '#1d1d1d'
    });
@@ -73,6 +83,14 @@ else {
    // Initialize ipcHandlers
    ipcHandlers();
 
+   ipcMain.on('refresh-theme-settings', () => {
+      const appTheme = persistentStore.get('application_theme');
+      mainWindow.setTitleBarOverlay({
+         color: appTheme === 'dark' ? '#3f3f3f' : '#fff',
+         symbolColor: appTheme === 'dark' ? '#fff' : '#000'
+      });
+   });
+
    // quit application when all windows are closed
    app.on('window-all-closed', () => {
       // on macOS it is common for applications to stay open until the user explicitly quits

src/renderer/components/TheTitleBar.vue

@@ -26,15 +26,16 @@
          >
             <i class="mdi mdi-24px mdi-refresh" />
          </div>
+         <div v-if="isWindows" style="width: 140px;" />
          <div
-            v-if="!isMacOS"
+            v-if="isLinux"
             class="titlebar-element"
             @click="minimizeApp"
          >
             <i class="mdi mdi-24px mdi-minus" />
          </div>
          <div
-            v-if="!isMacOS"
+            v-if="isLinux"
             class="titlebar-element"
             @click="toggleFullScreen"
          >
@@ -42,7 +43,7 @@
             <i v-else class="mdi mdi-24px mdi-fullscreen" />
          </div>
          <div
-            v-if="!isMacOS"
+            v-if="isLinux"
             class="titlebar-element close-button"
             @click="closeApp"
          >
@@ -80,7 +81,9 @@ export default {
          w: getCurrentWindow(),
          isMaximized: getCurrentWindow().isMaximized(),
          isDevelopment: process.env.NODE_ENV === 'development',
-         isMacOS: process.platform === 'darwin'
+         isMacOS: process.platform === 'darwin',
+         isWindows: process.platform === 'win32',
+         isLinux: process.platform === 'linux'
       };
    },
    computed: {
@@ -171,7 +174,7 @@ export default {
         height: $titlebar-height;
         line-height: 0;
         padding: 0 0.7rem;
-        opacity: 0.7;
+        opacity: 0.9;
         transition: opacity 0.2s;
         -webkit-app-region: no-drag;
 

src/renderer/scss/themes/dark-theme.scss

@@ -361,7 +361,7 @@
       .titlebar-element {
         &:hover {
           opacity: 1;
-          background: rgba($color: #fff, $alpha: 0.2);
+          background: rgba($color: #fff, $alpha: 0.1);
         }
 
         &.close-button:hover {

src/renderer/scss/themes/light-theme.scss

@@ -132,7 +132,7 @@
       .titlebar-element {
         &:hover {
           opacity: 1;
-          background: rgba($color: rgb(172, 172, 172), $alpha: 0.2);
+          background: rgba($color: rgb(172, 172, 172), $alpha: 0.3);
         }
 
         &.close-button:hover {

src/renderer/stores/settings.js

@@ -1,4 +1,5 @@
 import { defineStore, acceptHMRUpdate } from 'pinia';
+import { ipcRenderer } from 'electron';
 import i18n from '@/i18n';
 import Store from 'electron-store';
 const persistentStore = new Store({ name: 'settings' });
@@ -54,6 +55,7 @@ export const useSettingsStore = defineStore('settings', {
       changeApplicationTheme (theme) {
          this.applicationTheme = theme;
          persistentStore.set('application_theme', this.applicationTheme);
+         ipcRenderer.send('refresh-theme-settings');
       },
       changeEditorTheme (theme) {
          this.editorTheme = theme;