Add version information to update notification

package-lock.json

@@ -11,7 +11,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",
@@ -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

@@ -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,8 +2,9 @@ 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;
@@ -80,6 +81,7 @@ function finishSetup(): void {
   store.set('showSetupWindow', false);
   createMainWindow();
   mainWindow.on('ready-to-show', () => {
+    registerToastTarget(mainWindow);
     mainWindow.show();
     setupWindow.close();
   })
@@ -98,6 +100,8 @@ function createWindow(): void {
   } else {
     createMainWindow();
     mainWindow.on('ready-to-show', () => {
+      registerToastTarget(mainWindow);
+      checkForUpdates();
       splashWindow.close();
       mainWindow.show();
     })
@@ -120,7 +124,10 @@ 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())
@@ -132,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
@@ -156,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/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/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);
+  }
+}