Notifications bridged.

client/electron/ipc/ipcActions.ts

@@ -4,4 +4,5 @@ export const IPC_ACTIONS = {
   UNMAXIMIZE_WINDOW: 'unmaximize',
   MINIMIZE_WINDOW: 'minimize',
   CLOSE_WINDOW: 'close',
+  HANDLE_NOTIFICATION: 'notification',
 };

client/electron/ipc/ipcHandlers.ts

@@ -1,10 +1,16 @@
 import { BrowserWindow, IpcMainEvent, ipcMain } from 'electron';
 import { IPC_ACTIONS } from './ipcActions';
+import { notification } from '../main';
 
 export const shared = { global_RecvMaximizedEventFlag: false };
 
-const { MAXIMIZE_WINDOW, UNMAXIMIZE_WINDOW, MINIMIZE_WINDOW, CLOSE_WINDOW } =
-  IPC_ACTIONS;
+const {
+  MAXIMIZE_WINDOW,
+  UNMAXIMIZE_WINDOW,
+  MINIMIZE_WINDOW,
+  CLOSE_WINDOW,
+  HANDLE_NOTIFICATION,
+} = IPC_ACTIONS;
 
 const getWindow = (event: IpcMainEvent) => {
   const webContents = event?.sender;
@@ -23,11 +29,21 @@ const handleWindowTitlebarEvent = (event: IpcMainEvent, type: string) => {
   }
 };
 
+const handleNotification = (
+  event: IpcMainEvent,
+  { title, body }: { title: string; body: string },
+) => {
+  notification.title = title;
+  notification.body = body;
+  notification.show();
+};
+
 const eventToCallback = {
   [MAXIMIZE_WINDOW]: handleWindowTitlebarEvent,
   [UNMAXIMIZE_WINDOW]: handleWindowTitlebarEvent,
   [MINIMIZE_WINDOW]: handleWindowTitlebarEvent,
   [CLOSE_WINDOW]: handleWindowTitlebarEvent,
+  [HANDLE_NOTIFICATION]: handleNotification,
 };
 
 export const registerIPCHandlers = () => {

client/electron/main.ts

@@ -5,6 +5,7 @@ import {
   globalShortcut,
   ipcMain,
   Menu,
+  Notification,
   Tray,
 } from 'electron';
 import isDev from 'electron-is-dev';
@@ -25,15 +26,18 @@ process.env.PUBLIC = app.isPackaged
   ? process.env.DIST
   : path.join(process.env.DIST, '../public');
 
+const iconPath = path.join(process.env.PUBLIC ?? './', 'doodles-icon.png');
+
 let win: BrowserWindow | null;
+export let notification: Notification;
 let tray: Tray | null;
 // 🚧 Use ['ENV_NAME'] avoid vite:define plugin - [email protected]
 const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL'];
 
 let isClickThrough = false;
 function createWindow() {
   win = new BrowserWindow({
-    icon: path.join(process.env.PUBLIC ?? './', 'doodles-icon.png'),
+    icon: iconPath,
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       nodeIntegration: true,
@@ -43,7 +47,7 @@ function createWindow() {
     frame: false,
     title: 'Doodles',
   });
-  tray = new Tray(path.join(process.env.PUBLIC ?? './', 'doodles-icon.png'));
+  tray = new Tray(iconPath);
   tray.setIgnoreDoubleClickEvents(true);
   const trayMenu = Menu.buildFromTemplate([
     {
@@ -71,6 +75,13 @@ function createWindow() {
   tray.setContextMenu(trayMenu);
   tray.setToolTip('Doodles');
 
+  notification = new Notification({ icon: iconPath });
+  notification.on('click', () => {
+    if (!win?.isVisible() || win?.isMinimized()) {
+      win?.show();
+    }
+  });
+
   // Test active push message to Renderer-process.
   win.webContents.on('did-finish-load', () => {
     win?.webContents.send('main-process-message', new Date().toLocaleString());

client/src/hooks/useShortcut.tsx

@@ -1,4 +1,5 @@
 import { ZOOM } from '@/constants';
+import { ipcAPI } from '@/data/ipc/ipcMessages';
 import { clamp } from '@/lib/misc';
 import { useAppStore } from '@/stores/AppStore';
 import { useCanvasElementStore } from '@/stores/CanvasElementsStore';
@@ -106,6 +107,11 @@ export const useShortcuts = () => {
           }
           break;
         }
+        case 'KeyR': {
+          if (e.ctrlKey) {
+            ipcAPI.notification({ title: 'Test', body: 'Test Body' });
+          }
+        }
       }
     };
 

client/src/views/SignInPage.tsx

@@ -140,7 +140,7 @@ export default function SignInPage() {
   };
 
   return (
-    <Card>
+    <Card className="rounded-none">
       <CardHeader className="space-y-1">
         <CardTitle className="text-2xl">Log In</CardTitle>
         <CardDescription>

client/src/views/SignUpPage.tsx

@@ -182,7 +182,7 @@ export default function SignUp() {
   >(null);
 
   return (
-    <Card>
+    <Card className="rounded-none">
       <CardHeader className="space-y-1">
         <CardTitle className="text-2xl">Create an account</CardTitle>
         <CardDescription>