4 files changed, 36 insertions, 46 deletions

diff --git a/packages/renderer/src/components/locationBar/ExtraButtons.tsx b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
index ef90199..4d4c3c4 100644
--- a/packages/renderer/src/components/locationBar/ExtraButtons.tsx
+++ b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
@@ -27,11 +27,7 @@ import { useTranslation } from 'react-i18next';
 
 import type Service from '../../stores/Service';
 
-function ExtraButtons({
-  service,
-}: {
-  service: Service | undefined;
-}): JSX.Element {
+function ExtraButtons({ service }: { service: Service }): JSX.Element {
   const { t } = useTranslation(undefined, {
     keyPrefix: 'toolbar',
   });
@@ -40,8 +36,8 @@ function ExtraButtons({
     <Box display="flex">
       <IconButton
         aria-label={t('openInBrowser')}
-        disabled={service?.currentUrl === undefined}
-        onClick={() => service?.openCurrentURLInExternalBrowser()}
+        disabled={service.currentUrl === undefined}
+        onClick={() => service.openCurrentURLInExternalBrowser()}
       >
         <IconOpenInBrowser />
       </IconButton>
diff --git a/packages/renderer/src/components/locationBar/LocationBar.tsx b/packages/renderer/src/components/locationBar/LocationBar.tsx
index 54ead8e..c290722 100644
--- a/packages/renderer/src/components/locationBar/LocationBar.tsx
+++ b/packages/renderer/src/components/locationBar/LocationBar.tsx
@@ -22,13 +22,16 @@ import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
+import type Service from '../../stores/Service';
 import { useStore } from '../StoreProvider';
 
 import ExtraButtons from './ExtraButtons';
 import LocationTextField from './LocationTextField';
 import NavigationButtons from './NavigationButtons';
 
-export const LOCATION_BAR_ID = 'Sophie-LocationBar';
+export function getLocaltionBarID(service: Service): string {
+  return `Sophie-${service.id}-LocationBar`;
+}
 
 const LocationBarRoot = styled('header', {
   name: 'LocationBar',
@@ -41,17 +44,22 @@ const LocationBarRoot = styled('header', {
   borderBottom: `1px solid ${theme.palette.divider}`,
 }));
 
-function LocationBar(): JSX.Element {
+function LocationBar({ service }: { service: Service }): JSX.Element {
   const {
-    shared: { locationBarVisible },
-    settings: { selectedService },
+    settings: { showLocationBar },
   } = useStore();
 
+  const { alwaysShowLocationBar } = service;
+  const locationBarVisible = showLocationBar || alwaysShowLocationBar;
+
   return (
-    <LocationBarRoot id={LOCATION_BAR_ID} hidden={!locationBarVisible}>
-      <NavigationButtons service={selectedService} />
-      <LocationTextField service={selectedService} />
-      <ExtraButtons service={selectedService} />
+    <LocationBarRoot
+      id={getLocaltionBarID(service)}
+      hidden={!locationBarVisible}
+    >
+      <NavigationButtons service={service} />
+      <LocationTextField service={service} />
+      <ExtraButtons service={service} />
     </LocationBarRoot>
   );
 }
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index 85cf794..1d6b561 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -20,7 +20,6 @@
 
 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';
@@ -44,19 +43,15 @@ const LocationTextFieldRoot = styled(FilledInput, {
   },
 }));
 
-function LocationTextField({
-  service,
-}: {
-  service: Service | undefined;
-}): JSX.Element {
+function LocationTextField({ service }: { service: Service }): JSX.Element {
   const [inputFocused, setInputFocused] = useState(false);
   const [changed, setChanged] = useState(false);
   const [value, setValue] = useState('');
 
   const resetValue = useCallback(() => {
-    setValue(service?.currentUrl ?? '');
+    setValue(service.currentUrl ?? '');
     setChanged(false);
-  }, [service, setChanged, setValue]);
+  }, [service]);
 
   useEffect(
     () =>
@@ -84,8 +79,8 @@ function LocationTextField({
         overlayVisible: !inputFocused && !changed,
         overlay: (
           <UrlOverlay
-            url={service?.currentUrl ?? ''}
-            alert={service?.hasSecurityLabelWarning ?? false}
+            url={service.currentUrl ?? ''}
+            alert={service.hasSecurityLabelWarning ?? false}
           />
         ),
       }}
@@ -102,7 +97,7 @@ function LocationTextField({
             resetValue();
             break;
           case 'Enter':
-            service?.go(value);
+            service.go(value);
             break;
           default:
             // Nothing to do, let the key event through.
@@ -117,14 +112,14 @@ function LocationTextField({
       disableUnderline
       startAdornment={
         <SecurityLabel
-          kind={service?.securityLabel ?? SecurityLabelKind.Empty}
+          kind={service.securityLabel}
           changed={changed}
           position="start"
         />
       }
       endAdornment={
         changed ? (
-          <GoButton onClick={() => service?.go(value)} position="end" />
+          <GoButton onClick={() => service.go(value)} position="end" />
         ) : undefined
       }
       value={value}
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 9c4ebdb..96e40e7 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -32,11 +32,7 @@ import { useTranslation } from 'react-i18next';
 
 import type Service from '../../stores/Service';
 
-function NavigationButtons({
-  service,
-}: {
-  service: Service | undefined;
-}): JSX.Element {
+function NavigationButtons({ service }: { service: Service }): JSX.Element {
   const { t } = useTranslation(undefined, {
     keyPrefix: 'toolbar',
   });
@@ -46,36 +42,31 @@ function NavigationButtons({
     <Box display="flex">
       <IconButton
         aria-label={t('back')}
-        disabled={service === undefined || !service.canGoBack}
-        onClick={() => service?.goBack()}
+        disabled={!service.canGoBack}
+        onClick={() => service.goBack()}
       >
         {direction === 'ltr' ? <IconArrowBack /> : <IconArrowForward />}
       </IconButton>
       <IconButton
         aria-label={t('forward')}
-        disabled={service === undefined || !service.canGoForward}
-        onClick={() => service?.goForward()}
+        disabled={!service.canGoForward}
+        onClick={() => service.goForward()}
       >
         {direction === 'ltr' ? <IconArrowForward /> : <IconArrowBack />}
       </IconButton>
-      {service?.loading ?? false ? (
-        <IconButton aria-label={t('stop')} onClick={() => service?.stop()}>
+      {service.loading ? (
+        <IconButton aria-label={t('stop')} onClick={() => service.stop()}>
           <IconStop />
         </IconButton>
       ) : (
         <IconButton
           aria-label={t('reload')}
-          disabled={service === undefined}
-          onClick={(event) => service?.reload(event.shiftKey)}
+          onClick={(event) => service.reload(event.shiftKey)}
         >
           <IconRefresh />
         </IconButton>
       )}
-      <IconButton
-        aria-label={t('home')}
-        disabled={service === undefined}
-        onClick={() => service?.goHome()}
-      >
+      <IconButton aria-label={t('home')} onClick={() => service.goHome()}>
         <IconHome />
       </IconButton>
     </Box>