Electron app shows default Dock icon instead of AO app icon

[nikhilachale]

Summary

The Electron app icon handling is inconsistent across runtime and packaged builds. On macOS specifically, the Dock app icon does not reflect the intended application icon during development and at runtime.

Problem Description

Current Behavior

In frontend/src/main.ts, the icon is only passed through:

BrowserWindow({ icon: windowIconPath() })

Root Causes

1. BrowserWindow({ icon }) does not control the macOS Dock icon
   • The BrowserWindow.icon option is only for the window itself, not the app in the Dock
2. Missing macOS-specific runtime handler
   • macOS requires app.dock.setIcon(...) at runtime to display the correct Dock icon during development
   • Without this, the dev/runtime Dock icon cannot use the intended asset

Proposed Solution

Implementation Steps

1. Import nativeImage in frontend/src/main.ts

   import { nativeImage } from 'electron';

2. Create a runtime helper function to load the icon
   • Load frontend/assets/icon.png in dev mode
   • Load process.resourcesPath/icon.png in packaged builds
   • Example:

     function getIconPath(): string {
       if (isDev) {
         return path.join(__dirname, '../assets/icon.png');
       } else {
         return path.join(process.resourcesPath, 'icon.png');
       }
     }

3. Set the macOS Dock icon at runtime
   • Call app.dock.setIcon(nativeImage.createFromPath(iconPath)) after app.whenReady()
   • Execute this before creating the first window
   • Example:

     app.whenReady().then(() => {
       if (process.platform === 'darwin') {
         const iconPath = getIconPath();
         app.dock.setIcon(nativeImage.createFromPath(iconPath));
       }
       createWindow();
     });

4. Update icon asset
   • Ensure frontend/assets/icon.png has proper transparent rounded corners
   • Verify the asset follows macOS app icon design guidelines

Expected Outcomes

• ✅ Consistent icon display across Windows, Linux, and macOS
• ✅ Correct Dock icon on macOS during development and at runtime
• ✅ Proper icon appearance in packaged builds
• ✅ Professional appearance with rounded corners on all platforms