App Icons / System Tray (#14)

Set Comfy icons for app and system tray.

Developed System Tray Behavior. App no longer quits if window is closed as the python server will continue to run in the background. Clicking the system tray you can bring comfy back up, quit or hide

forge.config.ts

@@ -32,8 +32,9 @@ const config: ForgeConfig = {
         teamId: process.env.APPLE_TEAM_ID
       },
     },
-    extraResource: ['./assets'],
+    extraResource: ['./assets/UI', './assets/ComfyUI', './assets/python.tgz'],
 
+  icon: process.platform === 'linux' ? 'assets/UI/Comfy_Logo_x128.png' : 'assets/UI/Comfy_Logo',
   },
   rebuildConfig: {},
   hooks: {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "comfyui-electron",
   "productName": "ComfyUI",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "The best modular GUI to run AI diffusion models.",
   "main": ".vite/build/main.js",
   "packageManager": "[email protected]",

src/main.ts

@@ -2,6 +2,7 @@ import { spawn, ChildProcess } from 'node:child_process';
 import * as fs from 'node:fs/promises';
 import net from 'node:net';
 import path from 'node:path';
+import { SetupTray } from './tray';
 
 import dotenv from "dotenv";
 import { app, BrowserWindow, webContents } from 'electron';
@@ -39,6 +40,20 @@ const createWindow = () => {
   //mainWindow.loadURL('http://localhost:8188/');
   mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
 
+  // Set up the System Tray Icon for all platforms
+  // Returns a tray so you can set a global var to access. 
+  SetupTray(mainWindow);
+
+  // Overrides the behavior of closing the window to allow for 
+  // the python server to continue to run in the background
+  mainWindow.on('close' , (e:Electron.Event) => {
+    e.preventDefault();
+    mainWindow.hide();
+    // Mac Only Behavior
+    if (process.platform === 'darwin') {
+      app.dock.hide();
+    }
+  })
   // Open the DevTools.
   // mainWindow.webContents.openDevTools();
 };
@@ -216,27 +231,52 @@ app.on('ready', async () => {
     createWindow();
     await launchPythonServer({userResourcesPath, appResourcesPath});
   } catch (error) {
-
+    console.error(error);
   }
 });
 
 const killPythonServer = () => {
-  if (pythonProcess) {
-    pythonProcess.kill();
-    pythonProcess = null;
-  }
+  console.log('Python server:', pythonProcess);
+  return new Promise<void>(async(resolve, reject) => {
+    if (pythonProcess) {
+      try { 
+        pythonProcess.kill();
+        setTimeout(() => {
+          resolve(); // Force the issue after 5seconds
+        }, 5000);
+        // Make sure exit code was set so we can close gracefully
+        while (pythonProcess.exitCode == null)
+        {}
+        resolve(); 
+      }
+      catch(error)
+      {
+        console.error(error);
+        reject(error);
+      } 
+    }
+    else
+    {
+      resolve();
+    }
+  })
 };
 
-app.on('will-quit', () => {
-  killPythonServer();
-});
+app.on('before-quit', async () => {
+  await killPythonServer();
+  app.exit();
+})
+
+app.on('quit', () => {
+  app.exit();
+})
 
 // 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.
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
-    app.quit();
+    //app.quit();
   }
 });
 

src/tray.ts

@@ -0,0 +1,54 @@
+import { Tray, Menu, BrowserWindow, app } from "electron";
+import path from 'path';
+
+export function SetupTray(mainView: BrowserWindow): Tray {
+
+    // Set icon for the tray 
+    // I think there is a way to packaged the icon in so you don't need to reference resourcesPath
+    const trayImage = path.join(process.resourcesPath, 'UI', process.platform === 'darwin' ? 'Comfy_Logo_x16_BW.png' : 'Comfy_Logo_x32.png');
+    let tray = new Tray(trayImage);
+
+    tray.setTitle('ComfyUI'); // Only Macos, can be blank to JUST show icon 
+    tray.setToolTip('ComfyUI - Server is running');
+
+    // For Mac you can have a separate icon when you press. 
+    // The current design language for Mac Eco System is White or Black icon then when you click it is in color
+    if (process.platform === "darwin")
+    {
+        tray.setPressedImage(path.join(process.resourcesPath, 'UI','Comfy_Logo_x16.png'));
+    }
+
+    const contextMenu = Menu.buildFromTemplate([
+    {
+        label: 'Show Comfy Window',
+        click: function () {
+            mainView.show();
+            // Mac Only
+            if (process.platform === 'darwin') {
+                app.dock.show();
+            }
+        },
+    },
+    {
+        label: 'Quit Comfy',
+        click() {
+            app.quit();
+        },
+    },
+    {
+        label: 'Hide',
+        click() {
+
+            mainView.hide();
+            // Mac Only
+            if (process.platform === 'darwin') {
+                app.dock.hide();
+            }
+        }
+    }]);
+
+    tray.setContextMenu(contextMenu);
+
+    // If we want to make it more dynamic return tray so we can access it later
+    return tray;
+}