feat: Location bar actions

The buttons and the text field in the location bar shall now affect the
BrowserView of the loaded service.

Some error handling is still needed, e.g., when loading a web page fails
due to a DNS error.

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

4 files changed, 79 insertions, 11 deletions

diff --git a/packages/renderer/src/components/locationBar/GoAdornment.tsx b/packages/renderer/src/components/locationBar/GoAdornment.tsx
index 43c8b7b..f049b8e 100644
--- a/packages/renderer/src/components/locationBar/GoAdornment.tsx
+++ b/packages/renderer/src/components/locationBar/GoAdornment.tsx
@@ -20,11 +20,15 @@
 
 import IconGo from '@mui/icons-material/Send';
 import Button from '@mui/material/Button';
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 
 import ButtonAdornment, { NO_LABEL_BUTTON_CLASS_NAME } from './ButtonAdornment';
 
-export default function GoAdornment(): JSX.Element {
+export default function GoAdornment({
+  onClick,
+}: {
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}): JSX.Element {
   return (
     <ButtonAdornment position="end">
       <Button
@@ -32,6 +36,7 @@ export default function GoAdornment(): JSX.Element {
         color="inherit"
         startIcon={<IconGo />}
         className={NO_LABEL_BUTTON_CLASS_NAME}
+        onClick={onClick}
       />
     </ButtonAdornment>
   );
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index e6da59f..e711abc 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -94,9 +94,18 @@ function LocationTextField({
         setChanged(true);
       }}
       onKeyUp={(event) => {
-        if (event.key === 'Escape') {
-          resetValue();
-          event.preventDefault();
+        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;
         }
       }}
       size="small"
@@ -106,7 +115,9 @@ function LocationTextField({
       startAdornment={
         <UrlAdornment changed={changed} splitResult={splitResult} />
       }
-      endAdornment={changed ? <GoAdornment /> : undefined}
+      endAdornment={
+        changed ? <GoAdornment onClick={() => service?.go(value)} /> : undefined
+      }
       value={value}
     />
   );
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index ce59692..e71d3d8 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -48,25 +48,35 @@ function NavigationButtons({
       <IconButton
         aria-label="Back"
         disabled={service === undefined || !service.canGoBack}
+        onClick={() => service?.goBack()}
       >
         {direction === 'ltr' ? <IconArrowBack /> : <IconArrowForward />}
       </IconButton>
       <IconButton
         aria-label="Forward"
         disabled={service === undefined || !service.canGoForward}
+        onClick={() => service?.goForward()}
       >
         {direction === 'ltr' ? <IconArrowForward /> : <IconArrowBack />}
       </IconButton>
       {service?.state === 'loading' ? (
-        <IconButton aria-label="Stop">
+        <IconButton aria-label="Stop" onClick={() => service?.stop()}>
           <IconStop />
         </IconButton>
       ) : (
-        <IconButton aria-label="Refresh" disabled={service === undefined}>
+        <IconButton
+          aria-label="Refresh"
+          disabled={service === undefined}
+          onClick={(event) => service?.reload(event.shiftKey)}
+        >
           <IconRefresh />
         </IconButton>
       )}
-      <IconButton aria-label="Home" disabled={service === undefined}>
+      <IconButton
+        aria-label="Home"
+        disabled={service === undefined}
+        onClick={() => service?.goHome()}
+      >
         <IconHome />
       </IconButton>
     </Box>
diff --git a/packages/renderer/src/stores/Service.ts b/packages/renderer/src/stores/Service.ts
index c2c938a..7878ea0 100644
--- a/packages/renderer/src/stores/Service.ts
+++ b/packages/renderer/src/stores/Service.ts
@@ -18,12 +18,54 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { defineServiceModel } from '@sophie/shared';
+import { defineServiceModel, ServiceAction } from '@sophie/shared';
 import { Instance } from 'mobx-state-tree';
 
+import getEnv from '../env/getEnv';
+
 import ServiceSettings from './ServiceSettings';
 
-const Service = defineServiceModel(ServiceSettings);
+const Service = defineServiceModel(ServiceSettings).actions((self) => ({
+  dispatch(serviceAction: ServiceAction): void {
+    getEnv(self).dispatchMainAction({
+      action: 'dispatch-service-action',
+      serviceId: self.id,
+      serviceAction,
+    });
+  },
+  goBack(): void {
+    this.dispatch({
+      action: 'back',
+    });
+  },
+  goForward(): void {
+    this.dispatch({
+      action: 'forward',
+    });
+  },
+  reload(ignoreCache = false): void {
+    this.dispatch({
+      action: 'reload',
+      ignoreCache,
+    });
+  },
+  stop(): void {
+    this.dispatch({
+      action: 'stop',
+    });
+  },
+  go(url: string): void {
+    this.dispatch({
+      action: 'go',
+      url,
+    });
+  },
+  goHome(): void {
+    this.dispatch({
+      action: 'go-home',
+    });
+  },
+}));
 
 /*
   eslint-disable-next-line @typescript-eslint/no-redeclare --