fix(windowManager,assets): fix tray menu icons on windows

electron/windowManager.ts

@@ -1,4 +1,12 @@
-import { app, BrowserWindow, ipcMain, Menu } from 'electron';
+import {
+  app,
+  BrowserWindow,
+  ipcMain,
+  Menu,
+  nativeImage,
+  nativeTheme,
+  Tray,
+} from 'electron';
 import { warn } from 'electron-log';
 import windowState from 'electron-window-state';
 import { join } from 'path';
@@ -10,6 +18,7 @@ import { initTapdProxy } from './tapd/tapdProxyServer';
 
 class WindowManager {
   mainWindow: BrowserWindow | null = null;
+  tray: Tray | null = null;
 
   start() {
     app.on('ready', async () => {
@@ -45,6 +54,12 @@ class WindowManager {
         enableRemoteModule: true,
       },
     });
+
+    // create App system tray icon with context menus
+    if (!this.tray) {
+      this.createAppTray();
+    }
+
     this.mainWindow.setMenuBarVisibility(false);
 
     if (IS_DEV) {
@@ -84,12 +99,13 @@ class WindowManager {
 
   onMainClosed() {
     this.mainWindow = null;
+    this.tray?.destroy();
+    app.quit();
   }
 
   onAllClosed() {
-    if (process.platform !== 'darwin') {
-      app.quit();
-    }
+    this.tray?.destroy();
+    app.quit();
   }
 
   onMainWindowClose() {
@@ -107,6 +123,134 @@ class WindowManager {
       this.createMainWindow();
     }
   }
+
+  TRAY_ICONS_ROOT: string[] = [APP_ROOT, 'assets', 'icons', 'tray'];
+
+  /**
+   * select `light` or `dark` icon based on host OS
+   * system theme
+   * @param path
+   * @returns
+   */
+  iconSelector = (path: 'quit' | 'minimize' | 'show') => {
+    if (nativeTheme.shouldUseDarkColors) {
+      let iconName;
+      switch (process.platform) {
+        case 'darwin':
+          iconName = '16x16Template.png';
+          break;
+        case 'win32':
+          iconName = '16x16icon-dark.png';
+          break;
+        case 'linux':
+          iconName = '96x96icon-dark.png';
+          break;
+        default:
+          iconName = '96x96icon-dark.png';
+          break;
+      }
+      const imagePath = join(...this.TRAY_ICONS_ROOT, path, iconName);
+      const nativeImageFromPath = nativeImage.createFromPath(imagePath);
+      nativeImageFromPath.setTemplateImage(true);
+      return nativeImageFromPath;
+    }
+
+    if (!nativeTheme.shouldUseDarkColors) {
+      let iconName;
+      switch (process.platform) {
+        case 'darwin':
+          iconName = '16x16Template.png';
+          break;
+        case 'win32':
+          iconName = '16x16icon-light.png';
+          break;
+        case 'linux':
+          iconName = '96x96icon-light.png';
+          break;
+        default:
+          iconName = '96x96icon-light.png';
+          break;
+      }
+      const imagePath = join(...this.TRAY_ICONS_ROOT, path, iconName);
+      const nativeImageFromPath = nativeImage.createFromPath(imagePath);
+      nativeImageFromPath.setTemplateImage(true);
+      return nativeImageFromPath;
+    }
+  };
+
+  /**
+   * `hides` polar windows
+   */
+  handleOnHideClick = () => {
+    app.dock?.hide();
+    this.mainWindow?.setSkipTaskbar(true);
+    this.mainWindow?.hide();
+  };
+
+  /**
+   * `shows` polar window
+   */
+  handleOnShowClick = () => {
+    app.dock?.show();
+    this.mainWindow?.setSkipTaskbar(false);
+    this.mainWindow?.show();
+  };
+
+  /**
+   * closes all windows and quits the app
+   */
+  handleQuitClick = () => {
+    app.quit();
+  };
+
+  updateTrayIcons(tray: Tray | null) {
+    const contextMenu = Menu.buildFromTemplate([
+      {
+        label: 'Minimize Window',
+        click: this.handleOnHideClick,
+        icon: this.iconSelector('minimize'),
+      },
+      {
+        label: 'Show Window',
+        click: this.handleOnShowClick,
+        icon: this.iconSelector('show'),
+      },
+      {
+        type: 'separator',
+      },
+      {
+        label: 'Quit Polar',
+        click: this.handleQuitClick,
+        icon: this.iconSelector('quit'),
+      },
+    ]);
+
+    tray?.setContextMenu(contextMenu);
+  }
+
+  /**
+   * Creates App tray icon with a menu of options
+   * to `Hide/Show` the app window
+   * and also `quite` the running app instance
+   * @returns void
+   */
+  createAppTray() {
+    const trayIcon =
+      process.platform === 'darwin'
+        ? join(...this.TRAY_ICONS_ROOT, '16x16Template.png')
+        : join(...this.TRAY_ICONS_ROOT, '1024x1024-white.png');
+    const nativeImageFromPath = nativeImage.createFromPath(trayIcon as string);
+    nativeImageFromPath.setTemplateImage(true);
+    this.tray = new Tray(nativeImageFromPath);
+
+    // initial creation of tray menu
+    this.updateTrayIcons(this.tray);
+
+    nativeTheme.on('updated', () => {
+      // re-create tray context menu when system theme changes
+      this.updateTrayIcons(this?.tray);
+    });
+  }
 }
 
 export default WindowManager;