feat: Add BrowserView and synchronize its position

5 files changed, 254 insertions, 2 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
new file mode 100644
index 0000000..b627fa7
--- /dev/null
+++ b/packages/renderer/src/components/App.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C)  2021-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 Box from '@mui/material/Box';
+import React from 'react';
+
+import { BrowserViewPlaceholder } from './BrowserViewPlaceholder';
+import { Sidebar } from './Sidebar';
+
+export function App(): JSX.Element {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        height: '100vh',
+        width: '100vw',
+      }}
+    >
+      <Sidebar />
+      <BrowserViewPlaceholder />
+    </Box>
+  )
+}
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
new file mode 100644
index 0000000..06dc7fe
--- /dev/null
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -0,0 +1,128 @@
+/*
+ * Copyright (C)  2021-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 { throttle } from 'lodash';
+import { observer } from 'mobx-react-lite';
+import Box from '@mui/material/Box';
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import type { BrowserViewBounds } from '@sophie/shared';
+
+import { useStore } from './StoreProvider';
+
+export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder() {
+  const {
+    shared: {
+      browserViewBounds: {
+        x: storeX,
+        y: storeY,
+        width: storeWidth,
+        height: storeHeight,
+      },
+    },
+    setBrowserViewBounds,
+  } = useStore();
+
+  const [
+    {
+      x: currentX,
+      y: currentY,
+      width: currentWidth,
+      height: currentHeight,
+    },
+    setBounds,
+  ] = useState<BrowserViewBounds>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (storeX !== currentX
+        || storeY !== currentY
+        || storeWidth !== currentWidth
+        || storeHeight !== currentHeight) {
+      setBrowserViewBounds({
+        x: currentX,
+        y: currentY,
+        width: currentWidth,
+        height: currentHeight,
+      });
+    }
+  }, [
+    storeX,
+    storeY,
+    storeWidth,
+    storeHeight,
+    setBrowserViewBounds,
+    currentX,
+    currentY,
+    currentWidth,
+    currentHeight,
+  ]);
+
+  const onResize = useCallback(throttle(([boxEntry]: ResizeObserverEntry[]) => {
+    if (boxEntry) {
+      const {
+        x,
+        y,
+        width,
+        height,
+      } = boxEntry.target.getBoundingClientRect();
+      setBounds({
+        x,
+        y,
+        width,
+        height,
+      });
+    }
+  }, 100), [setBounds]);
+
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+
+  const ref = useCallback((box: HTMLElement | null) => {
+    if (resizeObserverRef.current !== null) {
+      resizeObserverRef.current.disconnect();
+    }
+    if (box === null) {
+      resizeObserverRef.current = null;
+      return;
+    }
+    resizeObserverRef.current = new ResizeObserver(onResize);
+    resizeObserverRef.current.observe(box);
+  }, [onResize, resizeObserverRef]);
+
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        // Workaround: display a plain white background if we fail to set the BrowserView background color.
+        // https://github.com/electron/electron/issues/31019
+        background: '#fff',
+      }}
+      ref={ref}
+    />
+  )
+});
diff --git a/packages/renderer/src/components/Sidebar.tsx b/packages/renderer/src/components/Sidebar.tsx
new file mode 100644
index 0000000..6c79932
--- /dev/null
+++ b/packages/renderer/src/components/Sidebar.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C)  2021-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 Box from '@mui/material/Box';
+import React from 'react';
+
+import { ToggleDarkModeButton } from './ToggleDarkModeButton';
+
+export function Sidebar(): JSX.Element {
+  return (
+    <Box
+      sx={(theme) => ({
+        background: theme.palette.divider,
+        flex: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: 1,
+      })}
+    >
+      <ToggleDarkModeButton />
+    </Box>
+  );
+}
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index 7173a9d..9215f5c 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -27,9 +27,9 @@ import React from 'react';
 
 import { useStore } from './StoreProvider';
 
-export const ThemeProvider = observer(({ children }: {
+export const ThemeProvider = observer(function ThemeProvider({ children }: {
   children: JSX.Element | JSX.Element[],
-}): JSX.Element => {
+}) {
   const { shared: { shouldUseDarkColors } } = useStore();
 
   const theme = createTheme({
diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/ToggleDarkModeButton.tsx
new file mode 100644
index 0000000..1b6757e
--- /dev/null
+++ b/packages/renderer/src/components/ToggleDarkModeButton.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C)  2021-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 { observer } from 'mobx-react-lite';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import IconButton from '@mui/material/IconButton';
+import React from 'react';
+
+import { useStore } from './StoreProvider';
+
+export const ToggleDarkModeButton = observer(function ToggleDarkModeButton() {
+  const { shared: { shouldUseDarkColors }, toggleDarkMode } = useStore();
+
+  return (
+    <IconButton
+      aria-label="Toggle dark mode"
+      onClick={() => toggleDarkMode()}
+    >
+      {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
+    </IconButton>
+  );
+});