From 2efa902d42733abafcfcacd6ae8efcea4afe59ae Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Thu, 17 Feb 2022 03:17:49 +0100
Subject: design: Location bar and other UI styling

InputBase paddings are idiosyncratic if there is both a start and an end
adornment. To simplify the styles, we override the styling from InputBase
and compute our own paddings.

The animated color change when switching from a secure site to an
insecure one was distracting, so we disable color animations in the
location bar.
---
 packages/renderer/src/components/ThemeProvider.tsx |  12 +++
 .../src/components/locationBar/ButtonAdornment.tsx |  69 +++++++++++++
 .../src/components/locationBar/GoAdornment.tsx     |  38 +++++++
 .../src/components/locationBar/IconAdornment.tsx   |  41 ++++++++
 .../src/components/locationBar/LocationBar.tsx     |   6 +-
 .../locationBar/LocationOverlayInput.tsx           | 110 +++++++++++++++++++++
 .../components/locationBar/LocationTextField.tsx   |  85 +++++++++++++---
 .../components/locationBar/NavigationButtons.tsx   |  16 +--
 .../src/components/locationBar/UrlAdornment.tsx    |  91 +++++++++++++++++
 .../src/components/locationBar/UrlOverlay.tsx      |  70 +++++++++++++
 .../src/components/locationBar/splitUrl.ts         |  62 ++++++++++++
 .../src/components/sidebar/ServiceSwitcher.tsx     |   5 +-
 .../renderer/src/components/sidebar/Sidebar.tsx    |  19 ++--
 .../components/sidebar/ToggleLocationBarButton.tsx |  31 ++++--
 14 files changed, 615 insertions(+), 40 deletions(-)
 create mode 100644 packages/renderer/src/components/locationBar/ButtonAdornment.tsx
 create mode 100644 packages/renderer/src/components/locationBar/GoAdornment.tsx
 create mode 100644 packages/renderer/src/components/locationBar/IconAdornment.tsx
 create mode 100644 packages/renderer/src/components/locationBar/LocationOverlayInput.tsx
 create mode 100644 packages/renderer/src/components/locationBar/UrlAdornment.tsx
 create mode 100644 packages/renderer/src/components/locationBar/UrlOverlay.tsx
 create mode 100644 packages/renderer/src/components/locationBar/splitUrl.ts

(limited to 'packages/renderer/src')

diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index 3943371..5fc1f33 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -37,6 +37,18 @@ export default observer(
       palette: {
         mode: shouldUseDarkColors ? 'dark' : 'light',
       },
+      components: {
+        MuiBadge: {
+          styleOverrides: {
+            standard: {
+              // Reduce badge with to make the unread message badge with "99+" unread messages
+              // fit within the sidebar. Applied for all badges for consistency.
+              paddingLeft: 4,
+              paddingRight: 4,
+            },
+          },
+        },
+      },
     });
 
     return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
diff --git a/packages/renderer/src/components/locationBar/ButtonAdornment.tsx b/packages/renderer/src/components/locationBar/ButtonAdornment.tsx
new file mode 100644
index 0000000..2cf230b
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/ButtonAdornment.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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 InputAdornment from '@mui/material/InputAdornment';
+import { styled } from '@mui/material/styles';
+
+export const NO_LABEL_BUTTON_CLASS_NAME = 'ButtonAdornment-NoLabel';
+
+const ButtonAdornment = styled(InputAdornment, {
+  name: 'ButtonAdornment',
+})(({ theme, position }) => {
+  const { direction } = theme;
+  const left = direction === 'ltr' ? 'start' : 'end';
+  return {
+    ...(position === left
+      ? {
+          marginRight: 2,
+          marginLeft: -8,
+        }
+      : {
+          marginLeft: 2,
+          marginRight: -8,
+        }),
+    '.MuiButton-root': {
+      minWidth: 32,
+      height: 32,
+      paddingLeft: 6,
+      paddingRight: 6,
+      borderRadius: 16,
+    },
+    ...(direction === 'ltr'
+      ? {
+          '.MuiButton-startIcon': {
+            marginLeft: 0,
+          },
+          [`.${NO_LABEL_BUTTON_CLASS_NAME} .MuiButton-startIcon`]: {
+            marginRight: 0,
+          },
+        }
+      : {
+          '.MuiButton-startIcon': {
+            marginRight: 0,
+            marginLeft: theme.spacing(1),
+          },
+          [`.${NO_LABEL_BUTTON_CLASS_NAME} .MuiButton-startIcon`]: {
+            marginLeft: 0,
+          },
+        }),
+  };
+});
+
+export default ButtonAdornment;
diff --git a/packages/renderer/src/components/locationBar/GoAdornment.tsx b/packages/renderer/src/components/locationBar/GoAdornment.tsx
new file mode 100644
index 0000000..43c8b7b
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/GoAdornment.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 IconGo from '@mui/icons-material/Send';
+import Button from '@mui/material/Button';
+import React from 'react';
+
+import ButtonAdornment, { NO_LABEL_BUTTON_CLASS_NAME } from './ButtonAdornment';
+
+export default function GoAdornment(): JSX.Element {
+  return (
+    <ButtonAdornment position="end">
+      <Button
+        aria-label="Go"
+        color="inherit"
+        startIcon={<IconGo />}
+        className={NO_LABEL_BUTTON_CLASS_NAME}
+      />
+    </ButtonAdornment>
+  );
+}
diff --git a/packages/renderer/src/components/locationBar/IconAdornment.tsx b/packages/renderer/src/components/locationBar/IconAdornment.tsx
new file mode 100644
index 0000000..1a2fa83
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/IconAdornment.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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 InputAdornment from '@mui/material/InputAdornment';
+import { styled } from '@mui/material/styles';
+
+const IconAdornment = styled(InputAdornment, {
+  name: 'IconAdornment',
+})(({ theme: { direction }, position }) => {
+  const left = direction === 'ltr' ? 'start' : 'end';
+  return {
+    ...(position === left
+      ? {
+          marginLeft: -2,
+          marginRight: 8,
+        }
+      : {
+          marginLeft: 8,
+          marginRight: -2,
+        }),
+  };
+});
+
+export default IconAdornment;
diff --git a/packages/renderer/src/components/locationBar/LocationBar.tsx b/packages/renderer/src/components/locationBar/LocationBar.tsx
index e1f470d..8b079f0 100644
--- a/packages/renderer/src/components/locationBar/LocationBar.tsx
+++ b/packages/renderer/src/components/locationBar/LocationBar.tsx
@@ -27,6 +27,8 @@ import { useStore } from '../StoreProvider';
 import LocationTextField from './LocationTextField';
 import NavigationButtons from './NavigationButtons';
 
+export const LOCATION_BAR_ID = 'Sophie-LocationBar';
+
 const LocationBarRoot = styled('header', {
   name: 'LocationBar',
   slot: 'Root',
@@ -34,6 +36,8 @@ const LocationBarRoot = styled('header', {
   display: hidden ? 'none' : 'flex',
   flexDirection: 'row',
   padding: theme.spacing(1),
+  // Align the bottom border with the service switcher in the sidebar.
+  paddingBottom: `calc(${theme.spacing(1)} - 1px)`,
   gap: theme.spacing(1),
   borderBottom: `1px solid ${theme.palette.divider}`,
 }));
@@ -44,7 +48,7 @@ function LocationBar(): JSX.Element {
   } = useStore();
 
   return (
-    <LocationBarRoot id="locationBar" hidden={!showLocationBar}>
+    <LocationBarRoot id={LOCATION_BAR_ID} hidden={!showLocationBar}>
       <NavigationButtons service={selectedService} />
       <LocationTextField service={selectedService} />
     </LocationBarRoot>
diff --git a/packages/renderer/src/components/locationBar/LocationOverlayInput.tsx b/packages/renderer/src/components/locationBar/LocationOverlayInput.tsx
new file mode 100644
index 0000000..55c1fb8
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/LocationOverlayInput.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 { styled } from '@mui/material/styles';
+import React, { forwardRef, ForwardedRef } from 'react';
+
+const inputClassName = 'LocationOverlayInput-Input';
+
+const overlayClassName = 'LocationOverlayInput-Overlay';
+
+const clipClassName = 'LocationOverlayInput-Clip';
+
+const LocationOverlayInputRoot = styled('div', {
+  name: 'LocationOverlayInput',
+  slot: 'Root',
+  shouldForwardProp: (prop) => prop !== 'overlayVisible',
+})<{ overlayVisible: boolean }>(({ theme, overlayVisible }) => {
+  const itemStyle = {
+    paddingLeft: 0,
+    paddingRight: 0,
+  };
+  return {
+    display: 'flex',
+    position: 'relative',
+    flex: 1,
+    [`.${inputClassName}`]: {
+      ...itemStyle,
+      color: overlayVisible ? 'transparent' : 'inherit',
+    },
+    [`.${overlayClassName}`]: {
+      ...itemStyle,
+      display: 'flex',
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      // Text rendering with selected transparent text works better on the bottom in light mode.
+      zIndex: theme.palette.mode === 'dark' ? 999 : -999,
+      pointerEvents: 'none',
+      width: 'auto',
+    },
+    [`.${clipClassName}`]: {
+      flex: 1,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'clip',
+    },
+  };
+});
+
+export interface LocationOverlayInputProps
+  extends React.HTMLProps<HTMLInputElement> {
+  className?: string | undefined;
+
+  overlayVisible?: boolean;
+
+  overlay?: JSX.Element | undefined;
+}
+
+const LocationOverlayInput = forwardRef(
+  (
+    { overlayVisible, overlay, className, ...props }: LocationOverlayInputProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => (
+    <LocationOverlayInputRoot overlayVisible={overlayVisible ?? false}>
+      {/* eslint-disable react/jsx-props-no-spreading --
+        Deliberately passing props through to the actual input element.
+      */}
+      <input
+        ref={ref}
+        className={`${className ?? ''} ${inputClassName}`}
+        {...props}
+      />
+      {/* eslint-enable react/jsx-props-no-spreading */}
+      {overlayVisible && (
+        <div aria-hidden className={`${className ?? ''} ${overlayClassName}`}>
+          <div className={clipClassName}>{overlay}</div>
+        </div>
+      )}
+    </LocationOverlayInputRoot>
+  ),
+);
+
+LocationOverlayInput.displayName = 'LocationOverlayInput';
+
+LocationOverlayInput.defaultProps = {
+  className: undefined,
+  overlayVisible: false,
+  overlay: undefined,
+};
+
+export default LocationOverlayInput;
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index a618bf6..f436bf0 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -18,40 +18,95 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import IconGlobe from '@mui/icons-material/Public';
 import FilledInput from '@mui/material/FilledInput';
-import InputAdornment from '@mui/material/InputAdornment';
+import { styled } from '@mui/material/styles';
 import { Service } from '@sophie/shared';
+import { autorun } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import GoAdornment from './GoAdornment';
+import LocationOverlayInput from './LocationOverlayInput';
+import UrlAdornment from './UrlAdornment';
+import UrlOverlay from './UrlOverlay';
+import splitUrl from './splitUrl';
+
+const LocationTextFieldRoot = styled(FilledInput, {
+  name: 'LocationTextField',
+  slot: 'Root',
+})(({ theme }) => ({
+  paddingLeft: 12,
+  paddingRight: 12,
+  borderRadius: 20,
+  '&.Mui-focused': {
+    outline: `2px solid ${theme.palette.primary.main}`,
+  },
+}));
 
 function LocationTextField({
   service,
 }: {
   service: Service | undefined;
 }): JSX.Element {
+  const [inputFocused, setInputFocused] = useState(false);
+  const [changed, setChanged] = useState(false);
+  const [value, setValue] = useState('');
+
+  const resetValue = useCallback(() => {
+    setValue(service?.currentUrl ?? '');
+    setChanged(false);
+  }, [service, setChanged, setValue]);
+
+  useEffect(
+    () =>
+      autorun(() => {
+        resetValue();
+      }),
+    [resetValue],
+  );
+
+  const inputRefCallback = useCallback(
+    (input: HTMLInputElement) => {
+      setInputFocused(
+        document.activeElement !== null && document.activeElement === input,
+      );
+    },
+    [setInputFocused],
+  );
+
+  const splitResult = splitUrl(service?.currentUrl);
+
   return (
-    <FilledInput
-      aria-label="Location"
+    <LocationTextFieldRoot
+      inputComponent={LocationOverlayInput}
       inputProps={{
+        'aria-label': 'Location',
         spellCheck: false,
+        overlayVisible: !inputFocused && !changed,
+        overlay: <UrlOverlay splitResult={splitResult} />,
+      }}
+      inputRef={inputRefCallback}
+      onFocus={() => setInputFocused(true)}
+      onBlur={() => setInputFocused(false)}
+      onChange={({ target: { value: newValue } }) => {
+        setValue(newValue);
+        setChanged(true);
+      }}
+      onKeyUp={(event) => {
+        if (event.key === 'Escape') {
+          resetValue();
+          event.preventDefault();
+        }
       }}
       size="small"
       fullWidth
       hiddenLabel
       disableUnderline
-      sx={(theme) => ({
-        borderRadius: 1,
-        '&.Mui-focused': {
-          outline: `2px solid ${theme.palette.primary.main}`,
-        },
-      })}
       startAdornment={
-        <InputAdornment position="start">
-          <IconGlobe fontSize="small" />
-        </InputAdornment>
+        <UrlAdornment changed={changed} splitResult={splitResult} />
       }
-      value={service?.currentUrl ?? ''}
+      endAdornment={changed ? <GoAdornment /> : undefined}
+      value={value}
     />
   );
 }
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 82ed657..77b02b6 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -23,6 +23,7 @@ import IconArrowForward from '@mui/icons-material/ArrowForward';
 import IconStop from '@mui/icons-material/Close';
 import IconHome from '@mui/icons-material/HomeOutlined';
 import IconRefresh from '@mui/icons-material/Refresh';
+import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import { Service } from '@sophie/shared';
@@ -34,6 +35,8 @@ function NavigationButtons({
 }: {
   service: Service | undefined;
 }): JSX.Element {
+  const { direction } = useTheme();
+
   return (
     <Box
       sx={{
@@ -42,16 +45,16 @@ function NavigationButtons({
       }}
     >
       <IconButton
-        aria-label="Go back"
+        aria-label="Back"
         disabled={service === undefined || !service.canGoBack}
       >
-        <IconArrowBack />
+        {direction === 'ltr' ? <IconArrowBack /> : <IconArrowForward />}
       </IconButton>
       <IconButton
-        aria-label="Go forward"
+        aria-label="Forward"
         disabled={service === undefined || !service.canGoForward}
       >
-        <IconArrowForward />
+        {direction === 'ltr' ? <IconArrowForward /> : <IconArrowBack />}
       </IconButton>
       {service?.state === 'loading' ? (
         <IconButton aria-label="Stop">
@@ -62,10 +65,7 @@ function NavigationButtons({
           <IconRefresh />
         </IconButton>
       )}
-      <IconButton
-        aria-label="Go to service homepage"
-        disabled={service === undefined}
-      >
+      <IconButton aria-label="Home" disabled={service === undefined}>
         <IconHome />
       </IconButton>
     </Box>
diff --git a/packages/renderer/src/components/locationBar/UrlAdornment.tsx b/packages/renderer/src/components/locationBar/UrlAdornment.tsx
new file mode 100644
index 0000000..6ede378
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/UrlAdornment.tsx
@@ -0,0 +1,91 @@
+/*
+ * 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 IconHttps from '@mui/icons-material/HttpsOutlined';
+import IconGlobe from '@mui/icons-material/Public';
+import IconWarning from '@mui/icons-material/Warning';
+import { styled } from '@mui/material';
+import Button from '@mui/material/Button';
+import React from 'react';
+
+import ButtonAdornment, { NO_LABEL_BUTTON_CLASS_NAME } from './ButtonAdornment';
+import IconAdornment from './IconAdornment';
+import type { SplitResult } from './splitUrl';
+
+const FastColorChangingButton = styled(Button)(({ theme }) => ({
+  transition: theme.transitions.create(
+    ['background-color', 'box-shadow', 'border-color'],
+    {
+      duration: theme.transitions.duration.short,
+      easing: theme.transitions.easing.easeInOut,
+    },
+  ),
+}));
+
+export default function UrlAdornment({
+  splitResult,
+  changed,
+}: {
+  splitResult: SplitResult;
+  changed: boolean;
+}): JSX.Element {
+  const { type } = splitResult;
+  if (changed || type === 'empty') {
+    return (
+      <IconAdornment position="start">
+        <IconGlobe fontSize="small" />
+      </IconAdornment>
+    );
+  }
+  switch (type) {
+    case 'valid': {
+      const { secure } = splitResult;
+      return secure ? (
+        <ButtonAdornment position="start">
+          <FastColorChangingButton
+            aria-label="Show certificate"
+            color="inherit"
+            className={NO_LABEL_BUTTON_CLASS_NAME}
+            startIcon={<IconHttps />}
+          />
+        </ButtonAdornment>
+      ) : (
+        <ButtonAdornment position="start">
+          <FastColorChangingButton color="error" startIcon={<IconWarning />}>
+            Not secure
+          </FastColorChangingButton>
+        </ButtonAdornment>
+      );
+    }
+    case 'invalid':
+      return (
+        <ButtonAdornment position="start">
+          <FastColorChangingButton color="error" startIcon={<IconWarning />}>
+            Unknown site
+          </FastColorChangingButton>
+        </ButtonAdornment>
+      );
+    default:
+      /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions --
+        Error handling for impossible case.
+      */
+      throw new Error(`Unexpected SplitResult: ${type}`);
+  }
+}
diff --git a/packages/renderer/src/components/locationBar/UrlOverlay.tsx b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
new file mode 100644
index 0000000..f7a3c4c
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 { styled } from '@mui/material/styles';
+import React from 'react';
+
+import type { SplitResult } from './splitUrl';
+
+const PrimaryFragment = styled('span', {
+  name: 'LocationOverlayInput',
+  slot: 'PrimaryFragment',
+  shouldForwardProp: (prop) => prop !== 'alert',
+})<{ alert: boolean }>(({ theme, alert }) => ({
+  color: alert ? theme.palette.error.main : theme.palette.text.primary,
+}));
+
+const SecondaryFragment = styled('span', {
+  name: 'LocationOverlayInput',
+  slot: 'SecondaryFragment',
+})(({ theme }) => ({
+  color: theme.palette.text.secondary,
+}));
+
+export default function UrlOverlay({
+  splitResult,
+}: {
+  splitResult: SplitResult;
+}): JSX.Element {
+  const { type } = splitResult;
+  switch (type) {
+    case 'valid': {
+      const { secure, prefix, host, suffix } = splitResult;
+      return (
+        <>
+          <SecondaryFragment>{prefix}</SecondaryFragment>
+          <PrimaryFragment alert={!secure}>{host}</PrimaryFragment>
+          <SecondaryFragment>{suffix}</SecondaryFragment>
+        </>
+      );
+    }
+    case 'invalid': {
+      const { value } = splitResult;
+      return <PrimaryFragment alert>{value}</PrimaryFragment>;
+    }
+    case 'empty':
+      return <PrimaryFragment alert={false} />;
+    default:
+      /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions --
+        Error handling for impossible case.
+      */
+      throw new Error(`Unexpected SplitResult: ${type}`);
+  }
+}
diff --git a/packages/renderer/src/components/locationBar/splitUrl.ts b/packages/renderer/src/components/locationBar/splitUrl.ts
new file mode 100644
index 0000000..6e95472
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/splitUrl.ts
@@ -0,0 +1,62 @@
+/*
+ * 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/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 3b47990..2241476 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -32,6 +32,7 @@ const ServiceSwitcherRoot = styled(Tabs, {
   name: 'ServiceSwitcher',
   slot: 'Root',
 })(({ theme }) => ({
+  // Move the indicator to the outer side of the window.
   '.MuiTabs-indicator': {
     ...(theme.direction === 'ltr'
       ? {
@@ -50,13 +51,15 @@ const ServiceSwitcherTab = styled(Tab, {
   slot: 'Tab',
 })(({ theme }) => ({
   minWidth: 0,
+  paddingInlineStart: theme.spacing(2),
+  paddingInlineEnd: `calc(${theme.spacing(2)} - 1px)`,
   transition: theme.transitions.create('background-color', {
     duration: theme.transitions.duration.shortest,
   }),
   '&.Mui-selected': {
     backgroundColor:
       theme.palette.mode === 'dark'
-        ? alpha(theme.palette.text.primary, 0.12)
+        ? alpha(theme.palette.text.primary, 0.13)
         : alpha(theme.palette.primary.light, 0.24),
   },
 }));
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx
index 80826ca..4f27d68 100644
--- a/packages/renderer/src/components/sidebar/Sidebar.tsx
+++ b/packages/renderer/src/components/sidebar/Sidebar.tsx
@@ -19,7 +19,6 @@
  */
 
 import Box from '@mui/material/Box';
-import { alpha } from '@mui/material/styles';
 import React from 'react';
 
 import ServiceSwitcher from './ServiceSwitcher';
@@ -36,21 +35,29 @@ export default function Sidebar(): JSX.Element {
         flexDirection: 'column',
         alignItems: 'center',
         paddingY: 1,
+        paddingInlineStart: '1px',
         gap: 1,
-        background: alpha(theme.palette.text.primary, 0.09),
+        backgroundColor:
+          theme.palette.mode === 'dark'
+            ? 'rgba(255, 255, 255, 0.09)'
+            : 'rgba(0, 0, 0, 0.06)',
         backgroundClip: 'padding-box',
         borderInlineEnd: `1px solid ${theme.palette.divider}`,
-        minWidth: 69,
+        minWidth: `calc(${theme.spacing(4)} + 36px)`,
       })}
     >
       <ToggleLocationBarButton />
-      <ServiceSwitcher />
       <Box
         sx={{
           flex: 1,
-          WebkitAppRegion: 'drag',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-start',
+          marginInlineStart: '-1px',
         }}
-      />
+      >
+        <ServiceSwitcher />
+      </Box>
       <ToggleDarkModeButton />
     </Box>
   );
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index 7e20598..60033b0 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -20,12 +20,29 @@
 
 import IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight';
+import { useTheme } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useStore } from '../StoreProvider';
+import { LOCATION_BAR_ID } from '../locationBar/LocationBar';
+
+function ToggleLocationBarIcon({
+  loading,
+  show,
+}: {
+  loading: boolean;
+  show: boolean;
+}): JSX.Element {
+  const { direction } = useTheme();
+  if (loading) {
+    return <CircularProgress color="inherit" size="1.5rem" />;
+  }
+  const left = direction === 'ltr' ? show : !show;
+  return left ? <IconChevronLeft /> : <IconChevronRight />;
+}
 
 function ToggleLocationBarButton(): JSX.Element {
   const store = useStore();
@@ -33,21 +50,17 @@ function ToggleLocationBarButton(): JSX.Element {
     settings: { selectedService, showLocationBar },
   } = store;
 
-  let icon: JSX.Element;
-  if (selectedService?.state === 'loading') {
-    icon = <CircularProgress color="inherit" size="1.5rem" />;
-  } else {
-    icon = showLocationBar ? <IconChevronLeft /> : <IconChevronRight />;
-  }
-
   return (
     <IconButton
       aria-pressed={showLocationBar}
-      aria-controls="locationBar"
+      aria-controls={LOCATION_BAR_ID}
       aria-label="Show location bar"
       onClick={() => store.toggleLocationBar()}
     >
-      {icon}
+      <ToggleLocationBarIcon
+        loading={selectedService?.state === 'loading'}
+        show={showLocationBar}
+      />
     </IconButton>
   );
 }
-- 
cgit v1.2.3-70-g09d2