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>

15 files changed, 304 insertions, 39 deletions

diff --git a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
index 6ff8e21..e5fdf11 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
@@ -105,6 +105,18 @@ export default class ElectronServiceView implements ServiceView {
     this.browserView.webContents.goForward();
   }
 
+  reload(ignoreCache: boolean): void {
+    if (ignoreCache) {
+      this.browserView.webContents.reloadIgnoringCache();
+    } else {
+      this.browserView.webContents.reload();
+    }
+  }
+
+  stop(): void {
+    this.browserView.webContents.stop();
+  }
+
   setBounds(bounds: BrowserViewBounds): void {
     this.browserView.setBounds(bounds);
   }
diff --git a/packages/main/src/infrastructure/electron/types.ts b/packages/main/src/infrastructure/electron/types.ts
index 9f03214..63974ce 100644
--- a/packages/main/src/infrastructure/electron/types.ts
+++ b/packages/main/src/infrastructure/electron/types.ts
@@ -61,6 +61,10 @@ export interface ServiceView {
 
   goForward(): void;
 
+  reload(ignoreCache: boolean): void;
+
+  stop(): void;
+
   setBounds(bounds: BrowserViewBounds): void;
 
   dispose(): void;
diff --git a/packages/main/src/stores/MainStore.ts b/packages/main/src/stores/MainStore.ts
index cb4f4c9..bf351d7 100644
--- a/packages/main/src/stores/MainStore.ts
+++ b/packages/main/src/stores/MainStore.ts
@@ -74,9 +74,6 @@ const MainStore = types
     },
     dispatch(action: Action): void {
       switch (action.action) {
-        case 'reload-all-services':
-          // TODO
-          break;
         case 'set-browser-view-bounds':
           this.setBrowserViewBounds(action.browserViewBounds);
           break;
@@ -89,6 +86,24 @@ const MainStore = types
         case 'set-show-location-bar':
           self.settings.setShowLocationBar(action.showLocationBar);
           break;
+        case 'reload-all-services':
+          // TODO
+          break;
+        case 'dispatch-service-action': {
+          const { serviceId, serviceAction } = action;
+          const service = self.shared.servicesById.get(serviceId);
+          if (service === undefined) {
+            log.error(
+              'No such service',
+              serviceId,
+              'to dispatch action',
+              serviceAction,
+            );
+          } else {
+            service.dispatch(serviceAction);
+          }
+          break;
+        }
         default:
           log.error('Unknown action to dispatch', action);
           break;
diff --git a/packages/main/src/stores/Service.ts b/packages/main/src/stores/Service.ts
index abef7c2..cbd8662 100644
--- a/packages/main/src/stores/Service.ts
+++ b/packages/main/src/stores/Service.ts
@@ -19,14 +19,17 @@
  */
 
 import type { UnreadCount } from '@sophie/service-shared';
-import { defineServiceModel } from '@sophie/shared';
+import { defineServiceModel, ServiceAction } from '@sophie/shared';
 import { Instance, getSnapshot } from 'mobx-state-tree';
 
 import type { ServiceView } from '../infrastructure/electron/types';
+import { getLogger } from '../utils/log';
 
 import ServiceSettings from './ServiceSettings';
 import type ServiceConfig from './config/ServiceConfig';
 
+const log = getLogger('Service');
+
 const Service = defineServiceModel(ServiceSettings)
   .views((self) => ({
     get config(): ServiceConfig {
@@ -87,6 +90,61 @@ const Service = defineServiceModel(ServiceSettings)
     setServiceView(serviceView: ServiceView | undefined): void {
       self.serviceView = serviceView;
     },
+    goBack(): void {
+      self.serviceView?.goBack();
+    },
+    goForward(): void {
+      self.serviceView?.goForward();
+    },
+    reload(ignoreCache = false): void {
+      if (self.serviceView === undefined) {
+        this.startedLoading();
+      } else {
+        self.serviceView?.reload(ignoreCache);
+      }
+    },
+    stop(): void {
+      self.serviceView?.stop();
+    },
+    go(url: string): void {
+      if (self.serviceView === undefined) {
+        self.currentUrl = url;
+        this.startedLoading();
+      } else {
+        self.serviceView?.loadURL(url).catch((error) => {
+          log.warn('Error while loading', url, error);
+          this.crashed();
+        });
+      }
+    },
+    goHome(): void {
+      this.go(self.settings.url);
+    },
+    dispatch(action: ServiceAction): void {
+      switch (action.action) {
+        case 'back':
+          this.goBack();
+          break;
+        case 'forward':
+          this.goForward();
+          break;
+        case 'reload':
+          this.reload(action.ignoreCache);
+          break;
+        case 'stop':
+          this.stop();
+          break;
+        case 'go-home':
+          this.goHome();
+          break;
+        case 'go':
+          this.go(action.url);
+          break;
+        default:
+          log.error('Unknown action to dispatch', action);
+          break;
+      }
+    },
   }));
 
 /*
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 --
diff --git a/packages/shared/src/contextBridge/SophieRenderer.ts b/packages/shared/src/contextBridge/SophieRenderer.ts
index 9e087da..dc77c97 100644
--- a/packages/shared/src/contextBridge/SophieRenderer.ts
+++ b/packages/shared/src/contextBridge/SophieRenderer.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Action } from '../schemas';
+import { Action } from '../schemas/Action';
 import { SharedStoreListener } from '../stores/SharedStoreBase';
 
 export default interface SophieRenderer {
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 66debf7..fa3fbfd 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -22,7 +22,13 @@ export type { default as SophieRenderer } from './contextBridge/SophieRenderer';
 
 export { MainToRendererIpcMessage, RendererToMainIpcMessage } from './ipc';
 
-export { Action, BrowserViewBounds, ThemeSource } from './schemas';
+export { Action } from './schemas/Action';
+
+export { BrowserViewBounds } from './schemas/BrowserViewBounds';
+
+export { ServiceAction } from './schemas/ServiceAction';
+
+export { ThemeSource } from './schemas/ThemeSource';
 
 export type {
   GlobalSettingsSnapshotIn,
diff --git a/packages/shared/src/schemas.ts b/packages/shared/src/schemas/Action.ts
index 9d87d10..d5d0a8d 100644
--- a/packages/shared/src/schemas.ts
+++ b/packages/shared/src/schemas/Action.ts
@@ -20,27 +20,9 @@
 
 import { z } from 'zod';
 
-export const BrowserViewBounds = /* @__PURE__ */ (() =>
-  z.object({
-    x: z.number().int().nonnegative(),
-    y: z.number().int().nonnegative(),
-    width: z.number().int().nonnegative(),
-    height: z.number().int().nonnegative(),
-  }))();
-
-/*
-  eslint-disable-next-line @typescript-eslint/no-redeclare --
-  Intentionally naming the type the same as the schema definition.
-*/
-export type BrowserViewBounds = z.infer<typeof BrowserViewBounds>;
-
-export const ThemeSource = /* @__PURE__ */ z.enum(['system', 'light', 'dark']);
-
-/*
-  eslint-disable-next-line @typescript-eslint/no-redeclare --
-  Intentionally naming the type the same as the schema definition.
-*/
-export type ThemeSource = z.infer<typeof ThemeSource>;
+import { BrowserViewBounds } from './BrowserViewBounds';
+import { ServiceAction } from './ServiceAction';
+import { ThemeSource } from './ThemeSource';
 
 export const Action = /* @__PURE__ */ (() =>
   z.union([
@@ -63,6 +45,11 @@ export const Action = /* @__PURE__ */ (() =>
     z.object({
       action: z.literal('reload-all-services'),
     }),
+    z.object({
+      action: z.literal('dispatch-service-action'),
+      serviceId: z.string(),
+      serviceAction: ServiceAction,
+    }),
   ]))();
 
 /*
diff --git a/packages/shared/src/schemas/BrowserViewBounds.ts b/packages/shared/src/schemas/BrowserViewBounds.ts
new file mode 100644
index 0000000..e668a4a
--- /dev/null
+++ b/packages/shared/src/schemas/BrowserViewBounds.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { z } from 'zod';
+
+export const BrowserViewBounds = /* @__PURE__ */ (() =>
+  z.object({
+    x: z.number().int().nonnegative(),
+    y: z.number().int().nonnegative(),
+    width: z.number().int().nonnegative(),
+    height: z.number().int().nonnegative(),
+  }))();
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the schema definition.
+*/
+export type BrowserViewBounds = z.infer<typeof BrowserViewBounds>;
diff --git a/packages/shared/src/schemas/ServiceAction.ts b/packages/shared/src/schemas/ServiceAction.ts
new file mode 100644
index 0000000..a4a7049
--- /dev/null
+++ b/packages/shared/src/schemas/ServiceAction.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { z } from 'zod';
+
+export const ServiceAction = /* @__PURE__ */ (() =>
+  z.union([
+    z.object({
+      action: z.literal('back'),
+    }),
+    z.object({
+      action: z.literal('forward'),
+    }),
+    z.object({
+      action: z.literal('reload'),
+      ignoreCache: z.boolean(),
+    }),
+    z.object({
+      action: z.literal('stop'),
+    }),
+    z.object({
+      action: z.literal('go-home'),
+    }),
+    z.object({
+      action: z.literal('go'),
+      url: z.string(),
+    }),
+  ]))();
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the schema definition.
+*/
+export type ServiceAction = z.infer<typeof ServiceAction>;
diff --git a/packages/shared/src/schemas/ThemeSource.ts b/packages/shared/src/schemas/ThemeSource.ts
new file mode 100644
index 0000000..6db5788
--- /dev/null
+++ b/packages/shared/src/schemas/ThemeSource.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { z } from 'zod';
+
+export const ThemeSource = /* @__PURE__ */ z.enum(['system', 'light', 'dark']);
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the schema definition.
+*/
+export type ThemeSource = z.infer<typeof ThemeSource>;
diff --git a/packages/shared/src/stores/GlobalSettingsBase.ts b/packages/shared/src/stores/GlobalSettingsBase.ts
index 48092fd..1bd0628 100644
--- a/packages/shared/src/stores/GlobalSettingsBase.ts
+++ b/packages/shared/src/stores/GlobalSettingsBase.ts
@@ -26,7 +26,7 @@ import {
   IAnyModelType,
 } from 'mobx-state-tree';
 
-import { ThemeSource } from '../schemas';
+import { ThemeSource } from '../schemas/ThemeSource';
 
 import ServiceBase from './ServiceBase';