feat: New window banner

* Add renderer code for notification banners with buttons
* Handle new window open requests by denying them and displaying
  a notification

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

8 files changed, 319 insertions, 0 deletions

diff --git a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
index edcf758..089e63a 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
@@ -136,6 +136,16 @@ export default class ElectronServiceView implements ServiceView {
       const { reason, exitCode } = details;
       service.setCrashed(reason, exitCode);
     });
+
+    webContents.setWindowOpenHandler(({ url }) => {
+      // TODO Add filtering (allowlist) by URL.
+      // TODO Handle `new-window` disposition where the service wants an object returned by
+      // `window.open`.
+      // TODO Handle downloads with `save-to-disk` disposition.
+      // TODO Handle POST bodies where the window must be allowed to open or the data is lost.
+      service.addBlockedPopup(url);
+      return { action: 'deny' };
+    });
   }
 
   get webContentsId(): number {
diff --git a/packages/main/src/stores/Service.ts b/packages/main/src/stores/Service.ts
index 26e3517..0a35114 100644
--- a/packages/main/src/stores/Service.ts
+++ b/packages/main/src/stores/Service.ts
@@ -105,6 +105,27 @@ const Service = defineServiceModel(ServiceSettings)
       }
       getEnv(self).openURLInExternalBrowser(self.currentUrl);
     },
+    addBlockedPopup(url: string): void {
+      const index = self.popups.indexOf(url);
+      if (index >= 0) {
+        // Move existing popup to the end of the array,
+        // because later popups have precedence over earlier ones.
+        self.popups.splice(index, 1);
+      }
+      self.popups.push(url);
+    },
+    dismissPopup(url: string): boolean {
+      const index = self.popups.indexOf(url);
+      if (index < 0) {
+        log.warn('Service', self.id, 'has no pending popup', url);
+        return false;
+      }
+      self.popups.splice(index, 1);
+      return true;
+    },
+    dismissAllPopups(): void {
+      self.popups.splice(0);
+    },
   }))
   .actions((self) => {
     function setState(state: ServiceStateSnapshotIn): void {
@@ -190,6 +211,21 @@ const Service = defineServiceModel(ServiceSettings)
       self.state.trust = 'accepted';
       self.reload();
     },
+    followPopup(url: string): void {
+      if (self.dismissPopup(url)) {
+        self.go(url);
+      }
+    },
+    openPopupInExternalBrowser(url: string): void {
+      if (self.dismissPopup(url)) {
+        getEnv(self).openURLInExternalBrowser(url);
+      }
+    },
+    openAllPopupsInExternalBrowser(): void {
+      const env = getEnv(self);
+      self.popups.forEach((popup) => env.openURLInExternalBrowser(popup));
+      self.dismissAllPopups();
+    },
   }))
   .actions((self) => ({
     dispatch(action: ServiceAction): void {
@@ -218,6 +254,21 @@ const Service = defineServiceModel(ServiceSettings)
         case 'open-current-url-in-external-browser':
           self.openCurrentURLInExternalBrowser();
           break;
+        case 'follow-popup':
+          self.followPopup(action.url);
+          break;
+        case 'open-popup-in-external-browser':
+          self.openPopupInExternalBrowser(action.url);
+          break;
+        case 'open-all-popups-in-external-browser':
+          self.openAllPopupsInExternalBrowser();
+          break;
+        case 'dismiss-popup':
+          self.dismissPopup(action.url);
+          break;
+        case 'dismiss-all-popups':
+          self.dismissAllPopups();
+          break;
         default:
           log.error('Unknown action to dispatch', action);
           break;
diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index b647a80..49c50af 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -24,6 +24,7 @@ import { observer } from 'mobx-react-lite';
 import React, { useCallback } from 'react';
 
 import BrowserViewPlaceholder from './BrowserViewPlaceholder';
+import NewWindowBanner from './NewWindowBanner';
 import { useStore } from './StoreProvider';
 import LocationBar from './locationBar/LocationBar';
 import Sidebar from './sidebar/Sidebar';
@@ -77,6 +78,7 @@ function App(): JSX.Element {
         }}
       >
         <LocationBar />
+        <NewWindowBanner service={selectedService} />
         <BrowserViewPlaceholder>
           <p>{JSON.stringify(selectedService?.state)}</p>
           {selectedService?.state.type === 'certificateError' && (
diff --git a/packages/renderer/src/components/NewWindowBanner.tsx b/packages/renderer/src/components/NewWindowBanner.tsx
new file mode 100644
index 0000000..a49b4b1
--- /dev/null
+++ b/packages/renderer/src/components/NewWindowBanner.tsx
@@ -0,0 +1,110 @@
+/*
+ * Copyright (C)  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 IconOpenInBrowser from '@mui/icons-material/OpenInBrowser';
+import IconOpenInNew from '@mui/icons-material/OpenInNew';
+import Button from '@mui/material/Button';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import type Service from '../stores/Service';
+
+import NotificationBanner from './NotificationBanner';
+
+function NewWindowBanner({
+  service,
+}: {
+  service: Service | undefined;
+}): JSX.Element | null {
+  if (service === undefined) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  const {
+    popups,
+    settings: { name },
+  } = service;
+  const { length: count } = popups;
+
+  if (count === 0) {
+    // eslint-disable-next-line unicorn/no-null -- React requires `null` to skip rendering.
+    return null;
+  }
+
+  const url = popups[count - 1];
+
+  return (
+    <NotificationBanner
+      severity="warning"
+      icon={<IconOpenInNew fontSize="inherit" />}
+      onClose={() => service.dismissAllPopups()}
+      buttons={
+        <>
+          <Button
+            onClick={() => service.followPopup(url)}
+            color="inherit"
+            size="small"
+          >
+            Follow link in this window
+          </Button>
+          <Button
+            onClick={() => service.openPopupInExternalBrowser(url)}
+            color="inherit"
+            size="small"
+            startIcon={<IconOpenInBrowser />}
+          >
+            Open in browser
+          </Button>
+          {count > 1 && (
+            <>
+              <Button
+                onClick={() => service.openAllPopupsInExternalBrowser()}
+                color="inherit"
+                size="small"
+                startIcon={<IconOpenInBrowser />}
+              >
+                Open all
+              </Button>
+              <Button
+                onClick={() => service.dismissPopup(url)}
+                color="inherit"
+                size="small"
+              >
+                Ignore
+              </Button>
+            </>
+          )}
+        </>
+      }
+    >
+      {name} wants to open <b>{url}</b>{' '}
+      {count === 1 ? (
+        <>in a new window</>
+      ) : (
+        <>
+          and <b>{count}</b> other links in new windows
+        </>
+      )}
+    </NotificationBanner>
+  );
+}
+
+export default observer(NewWindowBanner);
diff --git a/packages/renderer/src/components/NotificationBanner.tsx b/packages/renderer/src/components/NotificationBanner.tsx
new file mode 100644
index 0000000..d591e14
--- /dev/null
+++ b/packages/renderer/src/components/NotificationBanner.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C)  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 { Typography } from '@mui/material';
+import Alert, { AlertColor } from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import React, { ReactNode } from 'react';
+
+const NotificationBannerRoot = styled(Alert)(({ theme }) => ({
+  paddingTop: 7,
+  paddingBottom: 6,
+  // Match the height of the location bar.
+  minHeight: 53,
+  borderRadius: 0,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  '.MuiAlert-message': {
+    flexGrow: 1,
+    paddingTop: 0,
+    paddingBottom: 4,
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  '.MuiAlert-action': {
+    paddingInlineStart: 0,
+  },
+}));
+
+const NotificationBannerText = styled(Typography)(({ theme }) => ({
+  fontSize: 'inherit',
+  paddingTop: theme.spacing(1),
+  paddingInlineEnd: theme.spacing(2),
+  flexGrow: 9999,
+}));
+
+const NotificationBannerButtons = styled(Box)(({ theme }) => ({
+  fontSize: 'inherit',
+  paddingTop: theme.spacing(0.5),
+  paddingInlineEnd: theme.spacing(0.5),
+  display: 'flex',
+  flexWrap: 'wrap',
+  flexGrow: 1,
+  gap: theme.spacing(1),
+  '.MuiButton-root': {
+    flexGrow: 1,
+  },
+}));
+
+export default function NotificationBanner({
+  severity,
+  icon,
+  onClose,
+  buttons,
+  children,
+}: {
+  severity?: AlertColor;
+  icon?: ReactNode;
+  onClose: () => void;
+  buttons?: ReactNode;
+  children?: ReactNode;
+}): JSX.Element {
+  return (
+    <NotificationBannerRoot
+      severity={severity ?? 'success'}
+      icon={icon ?? false}
+      onClose={onClose}
+    >
+      <NotificationBannerText>{children}</NotificationBannerText>
+      {buttons && (
+        <NotificationBannerButtons>{buttons}</NotificationBannerButtons>
+      )}
+    </NotificationBannerRoot>
+  );
+}
+
+NotificationBanner.defaultProps = {
+  severity: 'success',
+  icon: false,
+  buttons: undefined,
+  children: undefined,
+};
diff --git a/packages/renderer/src/stores/Service.ts b/packages/renderer/src/stores/Service.ts
index c50e5bd..e14d80b 100644
--- a/packages/renderer/src/stores/Service.ts
+++ b/packages/renderer/src/stores/Service.ts
@@ -80,6 +80,34 @@ const Service = defineServiceModel(ServiceSettings).actions((self) => {
         action: 'open-current-url-in-external-browser',
       });
     },
+    followPopup(url: string): void {
+      dispatch({
+        action: 'follow-popup',
+        url,
+      });
+    },
+    openPopupInExternalBrowser(url: string): void {
+      dispatch({
+        action: 'open-popup-in-external-browser',
+        url,
+      });
+    },
+    openAllPopupsInExternalBrowser(): void {
+      dispatch({
+        action: 'open-all-popups-in-external-browser',
+      });
+    },
+    dismissPopup(url: string): void {
+      dispatch({
+        action: 'dismiss-popup',
+        url,
+      });
+    },
+    dismissAllPopups(): void {
+      dispatch({
+        action: 'dismiss-all-popups',
+      });
+    },
   };
 });
 
diff --git a/packages/shared/src/schemas/ServiceAction.ts b/packages/shared/src/schemas/ServiceAction.ts
index da0b96b..cfaba08 100644
--- a/packages/shared/src/schemas/ServiceAction.ts
+++ b/packages/shared/src/schemas/ServiceAction.ts
@@ -49,6 +49,24 @@ export const ServiceAction = /* @__PURE__ */ (() =>
     z.object({
       action: z.literal('open-current-url-in-external-browser'),
     }),
+    z.object({
+      action: z.literal('follow-popup'),
+      url: z.string(),
+    }),
+    z.object({
+      action: z.literal('open-popup-in-external-browser'),
+      url: z.string(),
+    }),
+    z.object({
+      action: z.literal('open-all-popups-in-external-browser'),
+    }),
+    z.object({
+      action: z.literal('dismiss-popup'),
+      url: z.string(),
+    }),
+    z.object({
+      action: z.literal('dismiss-all-popups'),
+    }),
   ]))();
 
 /*
diff --git a/packages/shared/src/stores/ServiceBase.ts b/packages/shared/src/stores/ServiceBase.ts
index c69f339..a19f59e 100644
--- a/packages/shared/src/stores/ServiceBase.ts
+++ b/packages/shared/src/stores/ServiceBase.ts
@@ -37,6 +37,7 @@ export function defineServiceModel<TS extends IAnyModelType>(settings: TS) {
       state: ServiceState,
       directMessageCount: 0,
       indirectMessageCount: 0,
+      popups: types.array(types.string),
     })
     .views((self) => ({
       get loading(): boolean {