1 files changed, 70 insertions, 15 deletions

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}
     />
   );
 }