Create toast system

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/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);
+  }
+}