feat: Basic location bar

Still needs adding event handlers to actually navigate the browser.

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

10 files changed, 280 insertions, 7 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index 1174bbb..cf97074 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -22,7 +22,8 @@ import Box from '@mui/material/Box';
 import React from 'react';
 
 import BrowserViewPlaceholder from './BrowserViewPlaceholder';
-import Sidebar from './Sidebar';
+import LocationBar from './locationBar/LocationBar';
+import Sidebar from './sidebar/Sidebar';
 
 export default function App(): JSX.Element {
   return (
@@ -36,7 +37,18 @@ export default function App(): JSX.Element {
       }}
     >
       <Sidebar />
-      <BrowserViewPlaceholder />
+      <Box
+        sx={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'stretch',
+          height: '100%',
+        }}
+      >
+        <LocationBar />
+        <BrowserViewPlaceholder />
+      </Box>
     </Box>
   );
 }
diff --git a/packages/renderer/src/components/locationBar/LocationBar.tsx b/packages/renderer/src/components/locationBar/LocationBar.tsx
new file mode 100644
index 0000000..e1f470d
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/LocationBar.tsx
@@ -0,0 +1,54 @@
+/*
+ * 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 { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { useStore } from '../StoreProvider';
+
+import LocationTextField from './LocationTextField';
+import NavigationButtons from './NavigationButtons';
+
+const LocationBarRoot = styled('header', {
+  name: 'LocationBar',
+  slot: 'Root',
+})(({ theme, hidden }) => ({
+  display: hidden ? 'none' : 'flex',
+  flexDirection: 'row',
+  padding: theme.spacing(1),
+  gap: theme.spacing(1),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+}));
+
+function LocationBar(): JSX.Element {
+  const {
+    settings: { selectedService, showLocationBar },
+  } = useStore();
+
+  return (
+    <LocationBarRoot id="locationBar" hidden={!showLocationBar}>
+      <NavigationButtons service={selectedService} />
+      <LocationTextField service={selectedService} />
+    </LocationBarRoot>
+  );
+}
+
+export default observer(LocationBar);
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
new file mode 100644
index 0000000..a618bf6
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -0,0 +1,59 @@
+/*
+ * 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 IconGlobe from '@mui/icons-material/Public';
+import FilledInput from '@mui/material/FilledInput';
+import InputAdornment from '@mui/material/InputAdornment';
+import { Service } from '@sophie/shared';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+function LocationTextField({
+  service,
+}: {
+  service: Service | undefined;
+}): JSX.Element {
+  return (
+    <FilledInput
+      aria-label="Location"
+      inputProps={{
+        spellCheck: false,
+      }}
+      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>
+      }
+      value={service?.currentUrl ?? ''}
+    />
+  );
+}
+
+export default observer(LocationTextField);
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
new file mode 100644
index 0000000..82ed657
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -0,0 +1,75 @@
+/*
+ * 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 IconArrowBack from '@mui/icons-material/ArrowBack';
+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 Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import { Service } from '@sophie/shared';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+function NavigationButtons({
+  service,
+}: {
+  service: Service | undefined;
+}): JSX.Element {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+      }}
+    >
+      <IconButton
+        aria-label="Go back"
+        disabled={service === undefined || !service.canGoBack}
+      >
+        <IconArrowBack />
+      </IconButton>
+      <IconButton
+        aria-label="Go forward"
+        disabled={service === undefined || !service.canGoForward}
+      >
+        <IconArrowForward />
+      </IconButton>
+      {service?.state === 'loading' ? (
+        <IconButton aria-label="Stop">
+          <IconStop />
+        </IconButton>
+      ) : (
+        <IconButton aria-label="Refresh" disabled={service === undefined}>
+          <IconRefresh />
+        </IconButton>
+      )}
+      <IconButton
+        aria-label="Go to service homepage"
+        disabled={service === undefined}
+      >
+        <IconHome />
+      </IconButton>
+    </Box>
+  );
+}
+
+export default observer(NavigationButtons);
diff --git a/packages/renderer/src/components/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index 83b2a5f..83b2a5f 100644
--- a/packages/renderer/src/components/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
diff --git a/packages/renderer/src/components/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 2cf997e..3b47990 100644
--- a/packages/renderer/src/components/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -24,8 +24,9 @@ import { alpha, styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
+import { useStore } from '../StoreProvider';
+
 import ServiceIcon from './ServiceIcon';
-import { useStore } from './StoreProvider';
 
 const ServiceSwitcherRoot = styled(Tabs, {
   name: 'ServiceSwitcher',
diff --git a/packages/renderer/src/components/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx
index 0eb8f93..80826ca 100644
--- a/packages/renderer/src/components/Sidebar.tsx
+++ b/packages/renderer/src/components/sidebar/Sidebar.tsx
@@ -24,6 +24,7 @@ import React from 'react';
 
 import ServiceSwitcher from './ServiceSwitcher';
 import ToggleDarkModeButton from './ToggleDarkModeButton';
+import ToggleLocationBarButton from './ToggleLocationBarButton';
 
 export default function Sidebar(): JSX.Element {
   return (
@@ -34,15 +35,22 @@ export default function Sidebar(): JSX.Element {
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingBottom: 1,
-        backgroundClip: 'padding-box',
+        paddingY: 1,
+        gap: 1,
         background: alpha(theme.palette.text.primary, 0.09),
+        backgroundClip: 'padding-box',
         borderInlineEnd: `1px solid ${theme.palette.divider}`,
         minWidth: 69,
       })}
     >
+      <ToggleLocationBarButton />
       <ServiceSwitcher />
+      <Box
+        sx={{
+          flex: 1,
+          WebkitAppRegion: 'drag',
+        }}
+      />
       <ToggleDarkModeButton />
     </Box>
   );
diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
index 695756a..164b066 100644
--- a/packages/renderer/src/components/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
@@ -24,7 +24,7 @@ import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-import { useStore } from './StoreProvider';
+import { useStore } from '../StoreProvider';
 
 export default observer(() => {
   const store = useStore();
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
new file mode 100644
index 0000000..7e20598
--- /dev/null
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft';
+import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight';
+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';
+
+function ToggleLocationBarButton(): JSX.Element {
+  const store = useStore();
+  const {
+    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-label="Show location bar"
+      onClick={() => store.toggleLocationBar()}
+    >
+      {icon}
+    </IconButton>
+  );
+}
+
+export default observer(ToggleLocationBarButton);
diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts
index 4d85929..1acc605 100644
--- a/packages/renderer/src/stores/RendererStore.ts
+++ b/packages/renderer/src/stores/RendererStore.ts
@@ -72,6 +72,15 @@ const RendererStore = types
         this.setThemeSource('dark');
       }
     },
+    setShowLocationBar(showLocationBar: boolean): void {
+      getEnv(self).dispatchMainAction({
+        action: 'set-show-location-bar',
+        showLocationBar,
+      });
+    },
+    toggleLocationBar(): void {
+      this.setShowLocationBar(!self.settings.showLocationBar);
+    },
   }));
 
 /*