From b5c07e8117475a4805b5715f89e2551935b941b2 Mon Sep 17 00:00:00 2001 From: Pedro Veloso Date: Tue, 1 Jul 2025 15:39:58 +0200 Subject: [PATCH 1/3] Add support for mouse back nav button to Settings screen --- ui/desktop/src/components/ui/BackButton.tsx | 37 +++++++++++++++++++-- ui/desktop/src/main.ts | 17 ++++++++++ ui/desktop/src/preload.ts | 11 ++++++ ui/desktop/src/types/electron.d.ts | 14 ++++++++ ui/desktop/src/types/electron.ts | 13 ++++++++ ui/desktop/src/types/index.ts | 1 + 6 files changed, 90 insertions(+), 3 deletions(-) create mode 100644 ui/desktop/src/types/electron.d.ts create mode 100644 ui/desktop/src/types/electron.ts create mode 100644 ui/desktop/src/types/index.ts diff --git a/ui/desktop/src/components/ui/BackButton.tsx b/ui/desktop/src/components/ui/BackButton.tsx index 099a2c9face1..ac5eb4893362 100644 --- a/ui/desktop/src/components/ui/BackButton.tsx +++ b/ui/desktop/src/components/ui/BackButton.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useCallback } from 'react'; import Back from '../icons/Back'; interface BackButtonProps { @@ -16,7 +16,7 @@ const BackButton: React.FC = ({ iconSize = 'w-3 h-3', showText = true, }) => { - const handleExit = () => { + const handleExit = useCallback(() => { if (onClick) { onClick(); // Custom onClick handler passed via props } else if (window.history.length > 1) { @@ -24,7 +24,38 @@ const BackButton: React.FC = ({ } 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 ( - - {isCommandVisible && ( - - - {`goose session --with-extension "${server.command}"`} - - - )} - - - )} - - {(!server.is_builtin && server.command === undefined && server.url !== undefined) && ( + {!server.is_builtin && ( <>