Add version information to update notification

package-lock.json

@@ -1,17 +1,18 @@
 {
   "name": "electron-vite-app",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "electron-vite-app",
-      "version": "1.0.3",
+      "version": "1.0.5",
       "hasInstallScript": true,
       "dependencies": {
         "@electron-toolkit/preload": "^3.0.2",
         "@electron-toolkit/utils": "^4.0.0",
-        "electron-updater": "^6.3.9"
+        "electron-updater": "^6.3.9",
+        "sonner": "^2.0.7"
       },
       "devDependencies": {
         "@electron-toolkit/eslint-config-prettier": "^3.0.0",
@@ -7845,7 +7846,6 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -7855,7 +7855,6 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
@@ -8235,7 +8234,6 @@
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/semver": {
@@ -8508,6 +8506,16 @@
         "node": ">= 14"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-vite-app",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "An Electron application with React and TypeScript",
   "main": "./out/main/index.js",
   "author": "example.com",
@@ -24,7 +24,8 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.2",
     "@electron-toolkit/utils": "^4.0.0",
-    "electron-updater": "^6.3.9"
+    "electron-updater": "^6.3.9",
+    "sonner": "^2.0.7"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config-prettier": "^3.0.0",

src/main/index.ts

@@ -2,13 +2,54 @@ import { app, shell, BrowserWindow, ipcMain, Notification } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
-import { autoUpdater } from 'electron-updater'
+import { autoUpdater, UpdateInfo } from 'electron-updater'
+import Store from './lib/Store'
+import { registerToastTarget, showErrorToast, showSuccessToast, showToast } from './lib/Toast'
 
 autoUpdater.autoDownload = false;
 autoUpdater.autoInstallOnAppQuit = true;
 
-let mainWindow;
+const store = new Store({
-function createWindow(): void {
+  configName: 'user-preferences',
+  defaults: {
+    showSetupWindow: true
+  }
+});
+
+let mainWindow: BrowserWindow;
+let splashWindow: BrowserWindow;
+let setupWindow: BrowserWindow;
+
+function createSplashWindow(): void {
+  splashWindow = new BrowserWindow({
+    width: 350, 
+    height: 350, 
+    transparent: true, 
+    frame: false, 
+    alwaysOnTop: true 
+  });
+  splashWindow.loadFile('src/renderer/splash.html');
+  splashWindow.center();
+  splashWindow.setSkipTaskbar(true);
+  splashWindow.show();
+}
+
+function createSetupWindow(): void {
+  setupWindow = new BrowserWindow({
+    width: 380, 
+    height: 390,
+    show: false,
+    autoHideMenuBar: true,
+    ...(process.platform === 'linux' ? { icon } : {}),
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false
+    },
+  });
+  setupWindow.loadFile('src/renderer/setup.html');
+}
+
+function createMainWindow(): void {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 900,
@@ -22,10 +63,6 @@ function createWindow(): void {
     }
   })
 
-  mainWindow.on('ready-to-show', () => {
-    mainWindow.show()
-  })
-
   mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url)
     return { action: 'deny' }
@@ -40,6 +77,38 @@ function createWindow(): void {
   }
 }
 
+function finishSetup(): void {
+  store.set('showSetupWindow', false);
+  createMainWindow();
+  mainWindow.on('ready-to-show', () => {
+    registerToastTarget(mainWindow);
+    mainWindow.show();
+    setupWindow.close();
+  })
+}
+
+function createWindow(): void {
+  createSplashWindow();
+  
+  let showSetupWindow = store.get('showSetupWindow');
+  if (showSetupWindow) {
+    createSetupWindow();
+    setupWindow.on('ready-to-show', () => {
+      splashWindow.close();
+      setupWindow.show();
+    })
+  } else {
+    createMainWindow();
+    mainWindow.on('ready-to-show', () => {
+      registerToastTarget(mainWindow);
+      checkForUpdates();
+      splashWindow.close();
+      mainWindow.show();
+    })
+  }
+  
+}
+
 // 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.
@@ -55,7 +124,11 @@ app.whenReady().then(() => {
   })
 
   // IPC test
-  ipcMain.on('ping', () => console.log('pong'))
+  ipcMain.on('ping', () => {
+    console.log('pong');
+    showToast('pong');
+  });
+  ipcMain.on('finish-setup', () => finishSetup())
 
   ipcMain.handle('get-version', () => app.getVersion())
 
@@ -66,8 +139,6 @@ app.whenReady().then(() => {
     // dock icon is clicked and there are no other windows open.
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
   })
-
-  checkForUpdates();
 })
 
 // Quit when all windows are closed, except on macOS. There, it's common
@@ -90,30 +161,36 @@ function showNotification(value: any) {
 function checkForUpdates() {
   autoUpdater.checkForUpdates();
   console.log(`Checking for updates. Current version ${app.getVersion()}`);
+  showToast(`Checking for updates. Current version ${app.getVersion()}`);
   showNotification(`Checking for updates. Current version ${app.getVersion()}`);
 }
 
 /*New Update Available*/
-autoUpdater.on("update-available", () => {
+autoUpdater.on("update-available", (info: UpdateInfo) => {
-  console.log(`Update available. Current version ${app.getVersion()}`);
+  console.log(`Update available. Current version ${app.getVersion()}`, info.version);
+  showToast(`Update available. Current version ${app.getVersion()}`);
   showNotification(`Update available. Current version ${app.getVersion()}`);
   let pth = autoUpdater.downloadUpdate();
   console.log(pth);
+  showToast(`Download update path : ${pth}`);
   showNotification(`Download update path : ${pth}`);
 });
 
-autoUpdater.on("update-not-available", () => {
+autoUpdater.on("update-not-available", (info: UpdateInfo) => {
-  console.log(`No update available. Current version ${app.getVersion()}`);
+  console.log(`No update available. Current version ${app.getVersion()}`, info.version);
-  showNotification(`No update available. Current version ${app.getVersion()}`);
+  showToast(`No update available. Current version ${app.getVersion()}, ${info.version}`);
+  showNotification(`No update available. Current version ${app.getVersion()}, ${info.version}`);
 });
 
 /*Download Completion Message*/
 autoUpdater.on("update-downloaded", () => {
   console.log(`Update downloaded. Current version ${app.getVersion()}`);
+  showSuccessToast(`Update downloaded. Current version ${app.getVersion()}`);
   showNotification(`Update downloaded. Current version ${app.getVersion()}`);
 });
 
 autoUpdater.on("error", (info) => {
   console.log(info);
+  showErrorToast(`Error: ${info}`);
   showNotification(`Error: ${info}`);
 });

src/main/lib/Store.ts

@@ -0,0 +1,47 @@
+// Source - https://stackoverflow.com/a/55203597
+// Posted by Herman Andres Figueroa, modified by community. See post 'Timeline' for change history
+// Retrieved 2026-01-26, License - CC BY-SA 4.0
+import { app } from 'electron'
+import path from 'path';
+import fs from 'fs';
+
+export default class Store {
+    constructor(opts) {
+        // Renderer process has to get `app` module via `remote`, whereas the main process can get it directly
+        // app.getPath('userData') will return a string of the user's app data directory path.
+        const userDataPath = app.getPath('userData');
+        // We'll use the `configName` property to set the file name and path.join to bring it all together as a string
+        this.path = path.join(userDataPath, opts.configName + '.json');
+
+        this.data = parseDataFile(this.path, opts.defaults);
+    }
+    
+    path; data;
+
+    // This will just return the property on the `data` object
+    get(key) {
+        return this.data[key];
+    }
+
+    // ...and this will set it
+    set(key, val) {
+        this.data[key] = val;
+        // Wait, I thought using the node.js' synchronous APIs was bad form?
+        // We're not writing a server so there's not nearly the same IO demand on the process
+        // Also if we used an async API and our app was quit before the asynchronous write had a chance to complete,
+        // we might lose that data. Note that in a real app, we would try/catch this.
+        fs.writeFileSync(this.path, JSON.stringify(this.data));
+    }
+}
+
+function parseDataFile(filePath, defaults) {
+    // We'll try/catch it in case the file doesn't exist yet, which will be the case on the first application run.
+    // `fs.readFileSync` will return a JSON string which we then parse into a Javascript object
+    try {
+        // @ts-ignore
+        return JSON.parse(fs.readFileSync(filePath));
+    } catch(error) {
+        // if there was some kind of error, return the passed in defaults instead.
+        return defaults;
+    }
+}

src/main/lib/Toast.ts

@@ -0,0 +1,51 @@
+import { BrowserWindow } from 'electron';
+
+export type ToastType = 'default' | 'info' | 'success' | 'warning' | 'error';
+export interface Toast {
+    type: 'toast';
+    payload: {
+      toastType: ToastType;
+      message: string;
+      options?: {
+        duration?: number;
+        [key: string]: any;
+      };
+    };
+}
+
+let toastTarget: BrowserWindow | null = null;
+export function registerToastTarget(win: BrowserWindow) {
+  toastTarget = win;
+}
+
+function sendToast(toastType: ToastType, message: string, options?: object): void {
+    if (!toastTarget) {
+      console.warn('No target window registered for toasts.');
+      return;
+    }
+
+    let optionsJSON;
+    if (options) {
+        optionsJSON = JSON.stringify(options);
+    }
+    toastTarget.webContents.send('toast', {
+      type: 'toast',
+      payload: { toastType, message, optionsJSON },
+    });
+}
+
+export function showToast(message: string, options?: object): void {
+  return sendToast('default', message, options)
+}
+export function showInformationToast(message: string, options?: object): void {
+  return sendToast('info', message, options)
+}
+export function showSuccessToast(message: string, options?: object): void {
+  return sendToast('success', message, options)
+}
+export function showWarningToast(message: string, options?: object): void {
+  return sendToast('warning', message, options)
+}
+export function showErrorToast(message: string, options?: object): void {
+  return sendToast('error', message, options)
+}

src/renderer/setup.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Splash</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />
+  </head>
+
+  <body id="root">
+    <h2>First Launch</h2>
+    <img alt="logo" class="logo" src='./src/assets/electron.svg' height="256px" width="256px" />
+    <button type="button" id="button">Finish setup</button>
+
+    <style>
+        #root {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            margin: 0;
+            height: 350px;
+            width: 350px;
+        }
+        .logo {
+            -webkit-user-drag: none;
+            filter: drop-shadow(0 0 1.6em #6988e6aa);
+        }
+    </style>
+
+    <script>
+      document.getElementById("button").addEventListener("click", () => {
+        window.electron.ipcRenderer.send('finish-setup')
+      })
+    </script>
+  </body>
+</html>

src/renderer/splash.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Splash</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />
+  </head>
+
+  <body id="root">
+    
+    <img alt="logo" class="logo" src='./src/assets/electron.svg' height="256px" width="256px" />
+
+    <style>
+        #root {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            margin: 0;
+            height: 350px;
+            width: 350px;
+        }
+        .logo {
+            -webkit-user-drag: none;
+            filter: drop-shadow(0 0 1.6em #6988e6aa);
+        }
+    </style>
+  </body>
+</html>

src/renderer/src/App.tsx

@@ -1,5 +1,6 @@
 import Versions from './components/Versions'
 import electronLogo from './assets/electron.svg'
+import ToastHandler from './components/ToastHandler'
 
 function App(): React.JSX.Element {
   const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')
@@ -28,6 +29,8 @@ function App(): React.JSX.Element {
         </div>
       </div>
       <Versions></Versions>
+
+      <ToastHandler></ToastHandler>
     </>
   )
 }

src/renderer/src/components/ToastHandler.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { handleToast, Toast } from "./handleToasts";
+import { Toaster } from 'sonner';
+
+function ToastHandler(): React.JSX.Element {
+  useEffect(() => {
+    const listener = (_: any, toast: Toast) => {
+      handleToast(toast);
+    };
+
+    // @ts-ignore (define in dts)
+    window.electron.ipcRenderer.on('toast', listener);
+
+    return () => {
+      // @ts-ignore (define in dts)
+      window.electron.ipcRenderer.removeAllListeners('toast');
+    };
+  }, []);
+
+  return (
+    <Toaster 
+        expand={true} 
+        visibleToasts={9} 
+        theme={"dark"} 
+        toastOptions={{
+            style: {
+            background: 'var(--color-background)',
+            },
+        }} />
+  )
+
+}
+
+export default ToastHandler

src/renderer/src/components/handleToasts.ts

@@ -0,0 +1,31 @@
+import { toast as sonnerToast } from 'sonner';
+
+export type Toast = {
+  type: 'toast';
+  payload: {
+    toastType: 'default' | 'info' | 'success' | 'warning' | 'error';
+    message: string;
+    optionsJSON?: string;
+    options?: object;
+  };
+};
+
+export function handleToast(toast: Toast) {
+  if (toast.type === 'toast') {
+    const { toastType, message, optionsJSON } = toast.payload;
+    // @ts-ignore
+    let options;
+    if (optionsJSON) {
+      options = JSON.parse(optionsJSON);
+    }
+    if (toastType == 'default') {
+      sonnerToast(message, options);
+    } else if (['info', 'success', 'warning', 'error'].includes(toastType)) {
+      sonnerToast[toastType](message, options);
+    } else {
+      console.warn('Type de toast invalide :', toastType);
+    }
+  } else {
+    console.warn('toast inconnue :', toast);
+  }
+}