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>

2 files changed, 79 insertions, 15 deletions

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__ */ (() =>