feat: Always show location bar on error

The location bar should be visible on error page to let people see and
change the URL if needed.

Additionally, it must be visible on insecure connections to show people
that the connection if not secure.

In the future, the location bar should also be shown if the loaded
website is uncommon in the context of the current service, i.e., it is
not explcitly allowlisted by the recipe.

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

10 files changed, 190 insertions, 141 deletions

diff --git a/locales/en/translation.json b/locales/en/translation.json
index d04f1f3..74320f3 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -31,9 +31,11 @@
     }
   },
   "securityLabel": {
+    "unspecific": "Unknown error",
     "notSecureConnection": "Not secure",
     "secureConnection": "Secure connection",
-    "unknownSite": "Unknown site"
+    "certificateError": "Certificate error",
+    "invalidURL": "Invalid URL"
   },
   "service": {
     "title": {
diff --git a/packages/renderer/src/components/locationBar/LocationBar.tsx b/packages/renderer/src/components/locationBar/LocationBar.tsx
index fc9c147..54ead8e 100644
--- a/packages/renderer/src/components/locationBar/LocationBar.tsx
+++ b/packages/renderer/src/components/locationBar/LocationBar.tsx
@@ -43,11 +43,12 @@ const LocationBarRoot = styled('header', {
 
 function LocationBar(): JSX.Element {
   const {
-    settings: { selectedService, showLocationBar },
+    shared: { locationBarVisible },
+    settings: { selectedService },
   } = useStore();
 
   return (
-    <LocationBarRoot id={LOCATION_BAR_ID} hidden={!showLocationBar}>
+    <LocationBarRoot id={LOCATION_BAR_ID} hidden={!locationBarVisible}>
       <NavigationButtons service={selectedService} />
       <LocationTextField service={selectedService} />
       <ExtraButtons service={selectedService} />
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index 30953de..85cf794 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -20,6 +20,7 @@
 
 import FilledInput from '@mui/material/FilledInput';
 import { styled } from '@mui/material/styles';
+import { SecurityLabelKind } from '@sophie/shared';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -30,7 +31,6 @@ import GoButton from './GoButton';
 import LocationOverlayInput from './LocationOverlayInput';
 import SecurityLabel from './SecurityLabel';
 import UrlOverlay from './UrlOverlay';
-import splitUrl from './splitUrl';
 
 const LocationTextFieldRoot = styled(FilledInput, {
   name: 'LocationTextField',
@@ -75,8 +75,6 @@ function LocationTextField({
     [setInputFocused],
   );
 
-  const splitResult = splitUrl(service?.currentUrl);
-
   return (
     <LocationTextFieldRoot
       inputComponent={LocationOverlayInput}
@@ -84,7 +82,12 @@ function LocationTextField({
         'aria-label': 'Location',
         spellCheck: false,
         overlayVisible: !inputFocused && !changed,
-        overlay: <UrlOverlay splitResult={splitResult} />,
+        overlay: (
+          <UrlOverlay
+            url={service?.currentUrl ?? ''}
+            alert={service?.hasSecurityLabelWarning ?? false}
+          />
+        ),
       }}
       inputRef={inputRefCallback}
       onFocus={() => setInputFocused(true)}
@@ -114,8 +117,8 @@ function LocationTextField({
       disableUnderline
       startAdornment={
         <SecurityLabel
+          kind={service?.securityLabel ?? SecurityLabelKind.Empty}
           changed={changed}
-          splitResult={splitResult}
           position="start"
         />
       }
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
index 0017f89..ac51cff 100644
--- a/packages/renderer/src/components/locationBar/SecurityLabel.tsx
+++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
@@ -18,17 +18,17 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import IconHttps from '@mui/icons-material/HttpsOutlined';
-import IconHttp from '@mui/icons-material/NoEncryption';
-import IconGlobe from '@mui/icons-material/Public';
-import IconWarning from '@mui/icons-material/Warning';
+import HttpsOutliedIcon from '@mui/icons-material/HttpsOutlined';
+import NoEncrpytionIcon from '@mui/icons-material/NoEncryption';
+import PublicIcon from '@mui/icons-material/Public';
+import WarningIcon from '@mui/icons-material/Warning';
 import { styled } from '@mui/material/styles';
+import { SecurityLabelKind } from '@sophie/shared';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import LocationInputAdornment from './LocationInputAdornment';
 import getAlertColor from './getAlertColor';
-import type { SplitResult } from './splitUrl';
 
 const SecurityLabelRoot = styled(LocationInputAdornment, {
   name: 'SecurityLabel',
@@ -53,55 +53,48 @@ const SecurityLabelText = styled('span', {
 }));
 
 export default function SecurityLabel({
-  splitResult,
+  kind,
   changed,
   position,
 }: {
-  splitResult: SplitResult;
+  kind: SecurityLabelKind;
   changed: boolean;
   position: 'start' | 'end';
 }): JSX.Element {
-  const { t } = useTranslation(undefined, {
-    keyPrefix: 'securityLabel',
-  });
+  const { t } = useTranslation();
 
-  const { type } = splitResult;
-  if (changed || type === 'empty') {
+  if (changed || kind === SecurityLabelKind.Empty) {
     return (
       <SecurityLabelRoot alert={false} position={position} aria-hidden>
-        <IconGlobe fontSize="small" />
+        <PublicIcon fontSize="small" />
       </SecurityLabelRoot>
     );
   }
-  switch (type) {
-    case 'valid': {
-      const { secure } = splitResult;
-      return secure ? (
-        <SecurityLabelRoot
-          alert={false}
-          position={position}
-          aria-label={t('secureConnection')}
-        >
-          <IconHttps fontSize="small" />
-        </SecurityLabelRoot>
-      ) : (
-        <SecurityLabelRoot alert position={position}>
-          <IconHttp fontSize="small" />
-          <SecurityLabelText>{t('notSecureConnection')}</SecurityLabelText>
-        </SecurityLabelRoot>
-      );
-    }
-    case 'invalid':
-      return (
-        <SecurityLabelRoot alert position={position}>
-          <IconWarning fontSize="small" />
-          <SecurityLabelText>{t('unknownSite')}</SecurityLabelText>
-        </SecurityLabelRoot>
-      );
-    default:
-      /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions --
-        Error handling for impossible case.
-      */
-      throw new Error(`Unexpected SplitResult: ${type}`);
+  if (kind === SecurityLabelKind.SecureConnection) {
+    return (
+      <SecurityLabelRoot
+        alert={false}
+        position={position}
+        aria-label={t('securityLabel.secureConnection')}
+      >
+        <HttpsOutliedIcon fontSize="small" />
+      </SecurityLabelRoot>
+    );
   }
+  const tslError =
+    kind === SecurityLabelKind.NotSecureConnection ||
+    kind === SecurityLabelKind.CertificateError;
+  const icon = tslError ? (
+    <NoEncrpytionIcon fontSize="small" />
+  ) : (
+    <WarningIcon fontSize="small" />
+  );
+  return (
+    <SecurityLabelRoot alert position={position}>
+      {icon}
+      <SecurityLabelText>
+        {t([`securityLabel.${kind}`, 'securityLabel.unspecific'])}
+      </SecurityLabelText>
+    </SecurityLabelRoot>
+  );
 }
diff --git a/packages/renderer/src/components/locationBar/UrlOverlay.tsx b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
index d590709..a71fa4e 100644
--- a/packages/renderer/src/components/locationBar/UrlOverlay.tsx
+++ b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
@@ -22,7 +22,47 @@ import { styled } from '@mui/material/styles';
 import React from 'react';
 
 import getAlertColor from './getAlertColor';
-import type { SplitResult } from './splitUrl';
+
+export type SplitResult =
+  | {
+      type: 'hostOnly';
+      prefix: string;
+      host: string;
+      suffix: string;
+    }
+  | {
+      type: 'wholeString';
+      value: string;
+    }
+  | {
+      type: 'empty';
+    };
+
+function splitUrl(urlString: string | undefined): SplitResult {
+  if (urlString === undefined || urlString === '') {
+    return { type: 'empty' };
+  }
+  let url: URL;
+  try {
+    url = new URL(urlString);
+  } catch {
+    return { type: 'wholeString', value: urlString };
+  }
+  const { protocol, host, username, password, pathname, search, hash } = url;
+  if (host !== '') {
+    return {
+      type: 'hostOnly',
+      prefix: `${protocol}//${
+        username === ''
+          ? ''
+          : `${username}${password === '' ? '' : `:${password}`}@`
+      }`,
+      host,
+      suffix: `${pathname}${search}${hash}`,
+    };
+  }
+  return { type: 'wholeString', value: urlString };
+}
 
 const PrimaryFragment = styled('span', {
   name: 'LocationOverlayInput',
@@ -40,28 +80,31 @@ const SecondaryFragment = styled('span', {
 }));
 
 export default function UrlOverlay({
-  splitResult,
+  url,
+  alert,
 }: {
-  splitResult: SplitResult;
+  url: string | undefined;
+  alert: boolean;
 }): JSX.Element {
+  const splitResult = splitUrl(url);
   const { type } = splitResult;
   switch (type) {
-    case 'valid': {
-      const { secure, prefix, host, suffix } = splitResult;
+    case 'hostOnly': {
+      const { prefix, host, suffix } = splitResult;
       return (
         <>
           <SecondaryFragment>{prefix}</SecondaryFragment>
-          <PrimaryFragment alert={!secure}>{host}</PrimaryFragment>
+          <PrimaryFragment alert={alert}>{host}</PrimaryFragment>
           <SecondaryFragment>{suffix}</SecondaryFragment>
         </>
       );
     }
-    case 'invalid': {
+    case 'wholeString': {
       const { value } = splitResult;
-      return <PrimaryFragment alert>{value}</PrimaryFragment>;
+      return <PrimaryFragment alert={alert}>{value}</PrimaryFragment>;
     }
     case 'empty':
-      return <PrimaryFragment alert={false} />;
+      return <PrimaryFragment alert={alert} />;
     default:
       /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions --
         Error handling for impossible case.
diff --git a/packages/renderer/src/components/locationBar/splitUrl.ts b/packages/renderer/src/components/locationBar/splitUrl.ts
deleted file mode 100644
index 6e95472..0000000
--- a/packages/renderer/src/components/locationBar/splitUrl.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * 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
- */
-
-export type SplitResult =
-  | {
-      type: 'valid';
-      secure: boolean;
-      prefix: string;
-      host: string;
-      suffix: string;
-    }
-  | {
-      type: 'invalid';
-      value: string;
-    }
-  | {
-      type: 'empty';
-    };
-
-export default function splitUrl(urlString: string | undefined): SplitResult {
-  if (urlString === undefined || urlString === '') {
-    return { type: 'empty' };
-  }
-  let url: URL;
-  try {
-    url = new URL(urlString);
-  } catch {
-    return { type: 'invalid', value: urlString };
-  }
-  const { protocol, host, username, password, pathname, search, hash } = url;
-  if (protocol === 'http:' || protocol === 'https:') {
-    return {
-      type: 'valid',
-      secure: protocol === 'https:',
-      prefix: `${protocol}//${
-        username === ''
-          ? ''
-          : `${username}${password === '' ? '' : `:${password}`}@`
-      }`,
-      host,
-      suffix: `${pathname}${search}${hash}`,
-    };
-  }
-  return { type: 'invalid', value: urlString };
-}
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index 325160e..7fc559d 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -47,19 +47,23 @@ function ToggleLocationBarIcon({
 
 function ToggleLocationBarButton(): JSX.Element {
   const { t } = useTranslation();
-  const { settings } = useStore();
-  const { selectedService, showLocationBar } = settings;
+  const {
+    shared: { locationBarVisible, canToggleLocationBar },
+    settings,
+  } = useStore();
+  const { selectedService } = settings;
 
   return (
     <IconButton
-      aria-pressed={showLocationBar}
+      disabled={!canToggleLocationBar}
+      aria-pressed={locationBarVisible}
       aria-controls={LOCATION_BAR_ID}
       aria-label={t('toolbar.toggleLocationBar')}
       onClick={() => settings.toggleLocationBar()}
     >
       <ToggleLocationBarIcon
         loading={selectedService?.loading ?? false}
-        show={showLocationBar}
+        show={locationBarVisible}
       />
     </IconButton>
   );
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 95af73a..e3da192 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -56,6 +56,7 @@ export { default as ProfileSettings } from './stores/ProfileSettings';
 export {
   default as ServiceBase,
   defineServiceModel,
+  SecurityLabelKind,
 } from './stores/ServiceBase';
 
 export type {
diff --git a/packages/shared/src/stores/ServiceBase.ts b/packages/shared/src/stores/ServiceBase.ts
index a19f59e..0e4be97 100644
--- a/packages/shared/src/stores/ServiceBase.ts
+++ b/packages/shared/src/stores/ServiceBase.ts
@@ -25,6 +25,14 @@ import type Profile from './Profile';
 import ServiceSettingsBase from './ServiceSettingsBase';
 import ServiceState from './ServiceState';
 
+export enum SecurityLabelKind {
+  Empty = 'empty',
+  SecureConnection = 'secureConnection',
+  NotSecureConnection = 'notSecureConnection',
+  CertificateError = 'certificateError',
+  InvalidURL = 'invalidURL',
+}
+
 export function defineServiceModel<TS extends IAnyModelType>(settings: TS) {
   return types
     .model('Service', {
@@ -48,6 +56,38 @@ export function defineServiceModel<TS extends IAnyModelType>(settings: TS) {
       get crashed(): boolean {
         return self.state.type === 'crashed';
       },
+      isCertificateTemporarilyTrusted(
+        certificate: CertificateSnapshotIn,
+      ): boolean {
+        return (
+          self.settings.profile as Profile
+        ).isCertificateTemporarilyTrusted(certificate);
+      },
+      get securityLabel(): SecurityLabelKind {
+        const {
+          state: { type: stateType },
+          currentUrl,
+        } = self;
+        if (stateType === 'certificateError') {
+          return SecurityLabelKind.CertificateError;
+        }
+        if (currentUrl === undefined || currentUrl === '') {
+          return SecurityLabelKind.Empty;
+        }
+        try {
+          const parsedUrl = new URL(currentUrl);
+          switch (parsedUrl.protocol) {
+            case 'https:':
+              return SecurityLabelKind.SecureConnection;
+            case 'http:':
+              return SecurityLabelKind.NotSecureConnection;
+            default:
+              return SecurityLabelKind.InvalidURL;
+          }
+        } catch {
+          return SecurityLabelKind.InvalidURL;
+        }
+      },
     }))
     .views((self) => ({
       get hasError(): boolean {
@@ -57,12 +97,17 @@ export function defineServiceModel<TS extends IAnyModelType>(settings: TS) {
           self.state.type === 'certificateError'
         );
       },
-      isCertificateTemporarilyTrusted(
-        certificate: CertificateSnapshotIn,
-      ): boolean {
+      get hasSecurityLabelWarning(): boolean {
+        const { securityLabel } = self;
         return (
-          self.settings.profile as Profile
-        ).isCertificateTemporarilyTrusted(certificate);
+          securityLabel !== SecurityLabelKind.Empty &&
+          securityLabel !== SecurityLabelKind.SecureConnection
+        );
+      },
+    }))
+    .views((self) => ({
+      get alwaysShowLocationBar(): boolean {
+        return self.hasError || self.hasSecurityLabelWarning;
       },
     }));
 }
diff --git a/packages/shared/src/stores/SharedStoreBase.ts b/packages/shared/src/stores/SharedStoreBase.ts
index bd71cea..e4b3a38 100644
--- a/packages/shared/src/stores/SharedStoreBase.ts
+++ b/packages/shared/src/stores/SharedStoreBase.ts
@@ -39,16 +39,35 @@ export function defineSharedStoreModel<
   TP extends IAnyModelType,
   TS extends IAnyModelType,
 >(globalSettings: TG, profile: TP, service: TS) {
-  return types.model('SharedStore', {
-    settings: types.optional(globalSettings, {}),
-    profilesById: types.map(profile),
-    profiles: types.array(types.reference(profile)),
-    servicesById: types.map(service),
-    services: types.array(types.reference(service)),
-    shouldUseDarkColors: false,
-    language: FALLBACK_LOCALE,
-    writingDirection: types.optional(WritingDirection, 'ltr'),
-  });
+  return types
+    .model('SharedStore', {
+      settings: types.optional(globalSettings, {}),
+      profilesById: types.map(profile),
+      profiles: types.array(types.reference(profile)),
+      servicesById: types.map(service),
+      services: types.array(types.reference(service)),
+      shouldUseDarkColors: false,
+      language: FALLBACK_LOCALE,
+      writingDirection: types.optional(WritingDirection, 'ltr'),
+    })
+    .views((self) => ({
+      get alwaysShowLocationBar(): boolean {
+        const settings = self.settings as GlobalSettingsBase;
+        const selectedService = settings.selectedService as
+          | ServiceBase
+          | undefined;
+        return selectedService?.alwaysShowLocationBar ?? false;
+      },
+    }))
+    .views((self) => ({
+      get locationBarVisible(): boolean {
+        const settings = self.settings as GlobalSettingsBase;
+        return settings.showLocationBar || self.alwaysShowLocationBar;
+      },
+      get canToggleLocationBar(): boolean {
+        return !self.alwaysShowLocationBar;
+      },
+    }));
 }
 
 const SharedStoreBase = /* @__PURE__ */ (() =>