diff --git a/ui/desktop/src/components/ui/BackButton.tsx b/ui/desktop/src/components/ui/BackButton.tsx index f927ff67ae53..606e246d9483 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 { ArrowLeft } from 'lucide-react'; import { Button } from './button'; import type { VariantProps } from 'class-variance-authority'; @@ -21,7 +21,7 @@ const BackButton: React.FC = ({ 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 = ({ } 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 (