Add basic tray icon

src/main/index.ts

@@ -1,11 +1,14 @@
-import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { app, shell, BrowserWindow, ipcMain, Menu, Tray, nativeImage } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 
+let mainWindow: BrowserWindow;
+let tray: Tray;
+
 function createWindow(): void {
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
+  mainWindow = new BrowserWindow({
     width: 900,
     height: 670,
     show: false,
@@ -17,6 +20,7 @@ function createWindow(): void {
     }
   })
 
+  // TODO show window according to the app settings
   mainWindow.on('ready-to-show', () => {
     mainWindow.show()
   })
@@ -59,6 +63,44 @@ app.whenReady().then(() => {
     // dock icon is clicked and there are no other windows open.
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
   })
+
+  // TODO close/hide window according to the app settings
+  // Prevent window from closing and quitting app
+  // Instead make close simply hide main window
+  // Clicking on tray icon will bring back main window
+  mainWindow.on('close', event => {
+    event.preventDefault()
+    mainWindow.hide()
+  })
+
+  // Creating the tray icon
+  const icon = nativeImage.createFromPath('./resources/icon.png')
+  tray = new Tray(icon.resize({ width: 16, height: 16 }))
+  tray.setIgnoreDoubleClickEvents(true)
+
+  const contextMenu = Menu.buildFromTemplate([
+    { 
+      label: 'Hide',
+      click: _ => {
+        mainWindow.hide()
+      }
+    },
+    { 
+      label: 'Quit', 
+      click: _ => {
+        console.log('Menu/Quit was clicked')
+        app.exit()
+      }
+    },
+  ])
+  tray.setToolTip('Umbra')
+  tray.setContextMenu(contextMenu)
+
+  // Prevent menu from being shown on left click
+  // Instead make main window visible (if it had been invisible)
+  tray.on('click', _ => {
+    mainWindow.show()
+  })
 })
 
 // Quit when all windows are closed, except on macOS. There, it's common
@@ -71,4 +113,4 @@ app.on('window-all-closed', () => {
 })
 
 // In this file you can include the rest of your app"s specific main process
-// code. You can also put them in separate files and require them here.
+// code. You can also put them in separate files and require them here.