Add support for mouse back nav button to Settings screen (#3195)

ui/desktop/src/components/ui/BackButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { ArrowLeft } from 'lucide-react';
 import { Button } from './button';
 import type { VariantProps } from 'class-variance-authority';
@@ -21,7 +21,7 @@ const BackButton: React.FC<BackButtonProps> = ({
   showText = true,
   ...props
 }) => {
-  const handleExit = () => {
+  const handleExit = useCallback(() => {
     if (onClick) {
       onClick(); // Custom onClick handler passed via props
     } else if (window.history.length > 1) {
@@ -29,7 +29,38 @@ const BackButton: React.FC<BackButtonProps> = ({
     } else {
       console.warn('No history to go back to');
     }
-  };
+  }, [onClick]);
+
+  // Set up mouse back button event listener.
+  useEffect(() => {
+    const handleMouseBack = () => {
+      handleExit();
+    };
+
+    if (window.electron) {
+      const mouseBackHandler = (e: MouseEvent) => {
+        // MouseButton 3 or 4 is typically back button.
+        if (e.button === 3 || e.button === 4) {
+          handleExit();
+          e.preventDefault();
+        }
+      };
+
+      window.electron.on('mouse-back-button-clicked', handleMouseBack);
+
+      // Also listen for mouseup events directly, for better OS compatibility.
+      document.addEventListener('mouseup', mouseBackHandler);
+
+      return () => {
+        if (window.electron) {
+          window.electron.off('mouse-back-button-clicked', handleMouseBack);
+        }
+        document.removeEventListener('mouseup', mouseBackHandler);
+      };
+    }
+
+    return undefined;
+  }, [handleExit]);
 
   return (
     <Button

ui/desktop/src/main.ts

@@ -16,6 +16,7 @@ import {
   Tray,
 } from 'electron';
 import { Buffer } from 'node:buffer';
+import { MouseUpEvent } from './types/electron';
 import fs from 'node:fs/promises';
 import fsSync from 'node:fs';
 import started from 'electron-squirrel-startup';
@@ -762,6 +763,20 @@ const createChat = async (
     }
   });
 
+  mainWindow.on('app-command', (e, cmd) => {
+    if (cmd === 'browser-backward') {
+      mainWindow.webContents.send('mouse-back-button-clicked');
+      e.preventDefault();
+    }
+  });
+
+  mainWindow.webContents.on('mouse-up', (_event: MouseUpEvent, mouseButton: number) => {
+    // MouseButton 3 is the back button.
+    if (mouseButton === 3) {
+      mainWindow.webContents.send('mouse-back-button-clicked');
+    }
+  });
+
   windowMap.set(windowId, mainWindow);
 
   // Handle recipe decoding in the background after window is created

ui/desktop/src/preload.ts

@@ -83,6 +83,8 @@ type ElectronAPI = {
   setWakelock: (enable: boolean) => Promise<boolean>;
   getWakelockState: () => Promise<boolean>;
   openNotificationsSettings: () => Promise<boolean>;
+  onMouseBackButtonClicked: (callback: () => void) => void;
+  offMouseBackButtonClicked: (callback: () => void) => void;
   on: (
     channel: string,
     callback: (event: Electron.IpcRendererEvent, ...args: unknown[]) => void
@@ -175,6 +177,15 @@ const electronAPI: ElectronAPI = {
   setWakelock: (enable: boolean) => ipcRenderer.invoke('set-wakelock', enable),
   getWakelockState: () => ipcRenderer.invoke('get-wakelock-state'),
   openNotificationsSettings: () => ipcRenderer.invoke('open-notifications-settings'),
+  onMouseBackButtonClicked: (callback: () => void) => {
+    // Wrapper that ignores the event parameter.
+    const wrappedCallback = (_event: Electron.IpcRendererEvent) => callback();
+    ipcRenderer.on('mouse-back-button-clicked', wrappedCallback);
+    return wrappedCallback;
+  },
+  offMouseBackButtonClicked: (callback: () => void) => {
+    ipcRenderer.removeListener('mouse-back-button-clicked', callback);
+  },
   on: (
     channel: string,
     callback: (event: Electron.IpcRendererEvent, ...args: unknown[]) => void

ui/desktop/src/types/electron.d.ts

@@ -0,0 +1,14 @@
+declare namespace ElectronTypes {
+  interface Event {
+    preventDefault: () => void;
+    sender: unknown;
+  }
+
+  interface IpcRendererEvent extends Event {
+    senderId: number;
+  }
+
+  interface MouseUpEvent extends Event {
+    button: number;
+  }
+}

ui/desktop/src/types/electron.ts

@@ -0,0 +1,13 @@
+export interface ElectronEvent {
+  preventDefault: () => void;
+  sender: unknown;
+}
+
+export interface IpcRendererEvent extends ElectronEvent {
+  senderId: number;
+}
+
+// Mouse event
+export interface MouseUpEvent extends ElectronEvent {
+  button: number;
+}

ui/desktop/src/types/index.ts

@@ -0,0 +1 @@
+export * from './electron';