Make maximize button reflect window state

app/src/electron.js

@@ -166,8 +166,10 @@ ipcMain.on('window-action', async (event, arg) => {
     case 'maximize':
       if (mainWindow.isMaximized()) {
         mainWindow.unmaximize();
+        mainWindow.webContents.send('maximize', false);
       } else {
         mainWindow.maximize();
+        mainWindow.webContents.send('maximize', true);
       }
       break;
     case 'close':

packages/web/src/icons/FontIcon.svelte

@@ -32,6 +32,7 @@
     'icon add-folder': 'mdi mdi-folder-plus-outline',
 
     'icon window-restore': 'mdi mdi-window-restore',
+    'icon window-maximize': 'mdi mdi-window-maximize',
     'icon window-close': 'mdi mdi-window-close',
     'icon window-minimize': 'mdi mdi-window-minimize',
     'img dbgate': 'mdi mdi-database color-icon-gold',

packages/web/src/widgets/TitleBar.svelte

@@ -7,9 +7,18 @@
   import { activeTab, currentDatabase } from '../stores';
   import { isMac } from '../utility/common';
   import getElectron from '../utility/getElectron';
+  import { apiOn } from '../utility/api';
 
   $: title = _.compact([$activeTab?.title, $currentDatabase?.name, 'DbGate']).join(' - ');
   const electron = getElectron();
+
+  let isMaximized = false;
+
+  if (electron) {
+    apiOn('maximize', (maximized: boolean) => {
+      isMaximized = maximized;
+    });
+  }
 </script>
 
 <div class="container" on:dblclick|stopPropagation|preventDefault={() => electron.send('window-action', 'maximize')}>
@@ -27,7 +36,7 @@
         <FontIcon icon="icon window-minimize" />
       </div>
       <div class="button">
-        <FontIcon icon="icon window-restore" on:click={() => electron.send('window-action', 'maximize')} />
+        <FontIcon icon={`icon ${isMaximized ? 'window-restore' : 'window-maximize'}`} on:click={() => electron.send('window-action', 'maximize')} />
       </div>
       <div class="button close-button" on:click={() => electron.send('window-action', 'close')}>
         <FontIcon icon="icon window-close" />