feat(renderer): Back and forward mouse buttons

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

2 files changed, 25 insertions, 4 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index 8fab77d..af2e4ec 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -22,12 +22,33 @@ import Box from '@mui/material/Box';
 import React from 'react';
 
 import BrowserViewPlaceholder from './BrowserViewPlaceholder';
+import { useStore } from './StoreProvider';
 import LocationBar from './locationBar/LocationBar';
 import Sidebar from './sidebar/Sidebar';
 
 export default function App(): JSX.Element {
+  const store = useStore();
+
+  function onClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
+    switch (event.button) {
+      case 3:
+        store.settings.selectedService?.goBack();
+        break;
+      case 4:
+        store.settings.selectedService?.goForward();
+        break;
+      default:
+        // Allow the event to propagate.
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
   return (
     <Box
+      onClick={(event) => onClick(event)}
+      onAuxClick={(event) => onClick(event)}
       sx={{
         display: 'flex',
         flexDirection: 'row',
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index 3a4f7f5..057dd69 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -93,20 +93,20 @@ function LocationTextField({
         setValue(newValue);
         setChanged(true);
       }}
-      onKeyUp={(event) => {
+      onKeyDown={(event) => {
         switch (event.key) {
           case 'Escape':
             resetValue();
-            event.preventDefault();
             break;
           case 'Enter':
             service?.go(value);
-            event.preventDefault();
             break;
           default:
             // Nothing to do, let the key event through.
-            break;
+            return;
         }
+        event.preventDefault();
+        event.stopPropagation();
       }}
       size="small"
       fullWidth