Transfer electron settings from previous dashboard version

Dashboard/src/electron.js

@@ -2,11 +2,13 @@
 const path = require("path");
 const { BrowserWindow } = require("electron-acrylic-window");
 
-const { app, Tray } = require("electron");
+const { app, Tray, Menu } = require("electron");
 const isDev = require("electron-is-dev");
 const screenz = require("screenz");
 
 let tray = null;
+let mainWindow = null;
+const gotTheLock = app.requestSingleInstanceLock();
 
 // Conditionally include the dev tools installer to load React Dev Tools
 let installExtension;
@@ -31,7 +33,7 @@ const getAssetPath = (...paths) => path.join(RESOURCES_PATH, ...paths);
 
 function createWindow() {
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
+  const win = new BrowserWindow({
     width: 620,
     height: 350,
     x: screenz.width - 620,
@@ -42,7 +44,12 @@ function createWindow() {
       contextIsolation: false,
     },
     transparent: true,
+    movable: false,
+    resizable: false,
     frame: false,
+    show: false,
+    skipTaskbar: true,
+    alwaysOnTop: true,
     vibrancy: {
       effect: "acrylic",
       useCustomWindowRefreshMethod: true,
@@ -50,11 +57,8 @@ function createWindow() {
     },
   });
 
-  tray = new Tray(getAssetPath("tray.png"));
-  tray.setTitle("hello world");
-
   // and load the index.html of the app.
-  mainWindow.loadURL(
+  win.loadURL(
     isDev
       ? "http://localhost:8080"
       : `file://${path.join(__dirname, "../build/index.html")}`,
@@ -62,24 +66,11 @@ function createWindow() {
 
   // Open the DevTools.
   if (isDev) {
-    mainWindow.webContents.openDevTools({ mode: "detach" });
+    win.webContents.openDevTools({ mode: "detach" });
   }
+  return win;
 }
 
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.whenReady().then(() => {
-  app.allowRendererProcessReuse = false;
-  createWindow();
-
-  if (isDev) {
-    installExtension(REACT_DEVELOPER_TOOLS)
-      .then((name) => console.log(`Added Extension:  ${name}`))
-      .catch((error) => console.log(`An error occurred: , ${error}`));
-  }
-});
-
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
@@ -97,5 +88,64 @@ app.on("activate", () => {
   }
 });
 
+// Hide window when out of focus
+app.on("browser-window-blur", () => {
+  mainWindow.hide();
+});
+
 // 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.
+
+function createTray() {
+  const trayIcon = new Tray(getAssetPath("tray.png"));
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: "Show",
+      click: () => {
+        mainWindow.show();
+      },
+    },
+    {
+      label: "Exit",
+      click: () => {
+        app.quit();
+      },
+    },
+  ]);
+
+  trayIcon.setToolTip("Light Control");
+  trayIcon.setContextMenu(contextMenu);
+  return trayIcon;
+}
+
+// Force single app instance
+if (!gotTheLock) {
+  app.quit();
+} else {
+  app.on("second-instance", () => {
+    mainWindow.show();
+  });
+
+  app.on("ready", async () => {
+    app.allowRendererProcessReuse = false;
+    mainWindow = createWindow();
+
+    if (isDev) {
+      installExtension(REACT_DEVELOPER_TOOLS)
+        .then((name) => console.log(`Added Extension:  ${name}`))
+        .catch((error) => console.log(`An error occurred: , ${error}`));
+    }
+
+    mainWindow.setMenu(null);
+
+    mainWindow.webContents.on("did-frame-finish-load", () => {
+      // Create tray icon with context menu
+      tray = createTray();
+
+      // Listen to tray icon onclick event
+      tray.on("click", () => {
+        mainWindow.show();
+      });
+    });
+  });
+}