fix(build): icons not displayed properly

.vscode/.debug.script.mjs

@@ -1,8 +1,8 @@
-import fs from 'fs'
-import path from 'path'
-import { fileURLToPath } from 'url'
-import { createRequire } from 'module'
-import { spawn } from 'child_process'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createRequire } from 'node:module'
+import { spawn } from 'node:child_process'
 
 const pkg = createRequire(import.meta.url)('../package.json')
 const __dirname = path.dirname(fileURLToPath(import.meta.url))

.vscode/extensions.json

@@ -1,3 +1,6 @@
 {
-  "recommendations": ["vue.vscode-typescript-vue-plugin", "Vue.volar"]
+	"recommendations": [
+		"Vue.volar",
+		"Vue.vscode-typescript-vue-plugin"
+	]
 }

.vscode/launch.json

@@ -22,7 +22,7 @@
   "configurations": [
     {
       "name": "Debug Main Process",
-      "type": "pwa-node",
+      "type": "node",
       "request": "launch",
       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
       "windows": {
@@ -39,8 +39,15 @@
       "name": "Debug Renderer Process",
       "port": 9229,
       "request": "attach",
-      "type": "pwa-chrome",
-      "timeout": 60000
+      "type": "chrome",
+      "timeout": 60000,
+      "skipFiles": [
+        "<node_internals>/**",
+        "${workspaceRoot}/node_modules/**",
+        "${workspaceRoot}/dist-electron/**",
+        // Skip files in host(VITE_DEV_SERVER_URL)
+        "http://127.0.0.1:3344/**"
+      ]
     },
   ]
 }

.vscode/settings.json

@@ -1,10 +1,11 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.tsc.autoDetect": "off",
   "json.schemas": [
     {
       "fileMatch": [
-        "/*electron-builder.json5"
+        "/*electron-builder.json5",
+        "/*electron-builder.json"
       ],
       "url": "https://json.schemastore.org/electron-builder"
     }

.vscode/tasks.json

@@ -22,7 +22,8 @@
         },
         "background": {
           "activeOnStart": true,
-          "endsPattern": "^.*[startup] Electron App.*$",
+          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
+          "endsPattern": "^.*\\[startup\\] Electron App.*$"
         }
       }
     }

electron-builder.json5

@@ -2,17 +2,33 @@
  * @see https://www.electron.build/configuration/configuration
  */
 {
-    appId: 'Vigad4256',
+    $schema: 'https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json',
+    appId: 'Vigad',
     asar: true,
     directories: {
         output: 'release/${version}',
     },
     files: ['dist-electron', 'dist'],
+    linux: {
+        icon: 'public/icon.png',
+        target: ['AppImage'],
+        category: 'Utility',
+        executableName: 'vigad',
+        desktop: {
+            Name: 'Vigad',
+            Icon: 'public/icon.png',
+            Terminal: 'false',
+            Type: 'Application',
+            Categories: 'Utility;',
+        },
+    },
     mac: {
+        icon: 'public/icon.icns',
         artifactName: '${productName}_${version}.${ext}',
         target: ['dmg'],
     },
     win: {
+        icon: 'public/icon.ico',
         target: [
             {
                 target: 'nsis',

electron/electron-env.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="vite-electron-plugin/electron-env" />
 
 declare namespace NodeJS {
-  interface ProcessEnv {
-    VSCODE_DEBUG?: 'true'
-    DIST_ELECTRON: string
-    DIST: string
-    /** /dist/ or /public/ */
-    PUBLIC: string
-  }
+    interface ProcessEnv {
+        VSCODE_DEBUG?: 'true';
+        DIST_ELECTRON: string;
+        DIST: string;
+        /** /dist/ or /public/ */
+        PUBLIC: string;
+    }
 }

electron/main/index.ts

@@ -1,3 +1,7 @@
+import { app, BrowserWindow, shell, ipcMain } from 'electron';
+import { release } from 'node:os';
+import { join } from 'node:path';
+
 // The built directory structure
 //
 // ├─┬ dist-electron
@@ -10,13 +14,9 @@
 //
 process.env.DIST_ELECTRON = join(__dirname, '..');
 process.env.DIST = join(process.env.DIST_ELECTRON, '../dist');
-process.env.PUBLIC = app.isPackaged
-    ? process.env.DIST
-    : join(process.env.DIST_ELECTRON, '../public');
-
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
-import { release } from 'os';
-import { join } from 'path';
+process.env.PUBLIC = process.env.VITE_DEV_SERVER_URL
+    ? join(process.env.DIST_ELECTRON, '../public')
+    : process.env.DIST;
 
 // Disable GPU Acceleration for Windows 7
 if (release().startsWith('6.1')) app.disableHardwareAcceleration();
@@ -41,13 +41,28 @@ const url = process.env.VITE_DEV_SERVER_URL;
 const indexHtml = join(process.env.DIST, 'index.html');
 
 async function createWindow() {
+    // Determine the icon file based on the current platform
+    let iconFile;
+    switch (process.platform) {
+        case 'win32':
+            iconFile = 'icon.ico';
+            break;
+        case 'darwin':
+            iconFile = 'icon.icns';
+            break;
+        case 'linux':
+            iconFile = 'icon.png';
+            break;
+        default:
+            iconFile = 'icon.png';
+    }
     win = new BrowserWindow({
-        title: 'Main window',
+        title: 'Vigad',
+        icon: join(process.env.PUBLIC, iconFile),
         minWidth: 950,
         minHeight: 750,
         frame: true, // still buggy cant select items from the custom titlebar
         autoHideMenuBar: true,
-        icon: join(process.env.PUBLIC, '../src/assets/images/logo.png'),
         webPreferences: {
             preload,
             // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
@@ -61,12 +76,13 @@ async function createWindow() {
     const remoteMain = require('@electron/remote/main');
     remoteMain.initialize();
 
-    if (app.isPackaged) {
-        win.loadFile(indexHtml);
-    } else {
+    if (process.env.VITE_DEV_SERVER_URL) {
+        // electron-vite-vue#298
         win.loadURL(url);
         // Open devTool if the app is not packaged
         win.webContents.openDevTools();
+    } else {
+        win.loadFile(indexHtml);
     }
 
     // Test actively push message to the Electron-Renderer
@@ -75,7 +91,6 @@ async function createWindow() {
             'main-process-message',
             new Date().toLocaleString()
         );
-        win.setTitle(`Vigad`);
     });
 
     // Make all links open with the browser, not with the application
@@ -99,8 +114,14 @@ async function createWindow() {
     });
 }
 
+// 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(createWindow);
 
+// 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', () => {
     win = null;
     if (process.platform !== 'darwin') app.quit();
@@ -124,18 +145,19 @@ app.on('activate', () => {
 });
 
 // new window example arg: new windows url
-ipcMain.handle('open-win', (event, arg) => {
+ipcMain.handle('open-win', (_, arg) => {
     const childWindow = new BrowserWindow({
         webPreferences: {
             preload,
+            nodeIntegration: true,
+            contextIsolation: true,
         },
     });
 
-    if (app.isPackaged) {
-        childWindow.loadFile(indexHtml, { hash: arg });
+    if (process.env.VITE_DEV_SERVER_URL) {
+        childWindow.loadURL(`${url}#${arg}`);
     } else {
-        childWindow.loadURL(`${url}/#${arg}`);
-        // childWindow.webContents.openDevTools({ mode: "undocked", activate: true })
+        childWindow.loadFile(indexHtml, { hash: arg });
     }
 });
 
@@ -147,15 +169,5 @@ async function getScreen(event, title) {
         types: ['window', 'screen'],
     });
 
-    // const videoOptionsMenu = Menu.buildFromTemplate([
-    //   allSources.map((source) => {
-    //     return {
-    //       label: source.name,
-    //       click: () => selectSource(source),
-    //     }
-    //   }),
-    // ])
-
-    // videoOptionsMenu.popup()
     return allSources;
 }