refactor: Simplify browserViewBounds handling

4 files changed, 18 insertions, 72 deletions

diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 22ae8e2..a135902 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -178,7 +178,7 @@ function createWindow(): Promise<unknown> {
 
   browserView.webContents.userAgent = userAgent;
   autorun(() => {
-    browserView.setBounds(store.shared.browserViewBounds);
+    browserView.setBounds(store.browserViewBounds);
   });
   mainWindow.setBrowserView(browserView);
 
diff --git a/packages/main/src/stores/RootStore.ts b/packages/main/src/stores/RootStore.ts
index 9d138ce..c09cd4a 100644
--- a/packages/main/src/stores/RootStore.ts
+++ b/packages/main/src/stores/RootStore.ts
@@ -27,10 +27,16 @@ import {
 } from '@sophie/shared';
 
 export const rootStore = types.model('RootStore', {
+  browserViewBounds: types.model("BrowserViewBoundsStore", {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  }),
   shared: sharedStore,
 }).actions((self) => ({
   setBrowserViewBounds(bounds: BrowserViewBounds) {
-    applySnapshot(self.shared.browserViewBounds, bounds);
+    applySnapshot(self.browserViewBounds, bounds);
   },
   setPaletteMode(mode: PaletteMode) {
     self.shared.shouldUseDarkColors = mode === 'dark';
@@ -41,6 +47,7 @@ export interface RootStore extends Instance<typeof rootStore> {}
 
 export function createRootStore(): RootStore {
   return rootStore.create({
+    browserViewBounds: {},
     shared: emptySharedStore,
   });
 }
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 0187fee..1ea03c8 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -21,97 +21,44 @@
 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 React, { useCallback, useRef } from 'react';
 
 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 onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => {
+    if (entry) {
       const {
         x,
         y,
         width,
         height,
-      } = boxEntry.target.getBoundingClientRect();
-      setBounds({
+      } = entry.target.getBoundingClientRect();
+      setBrowserViewBounds({
         x,
         y,
         width,
         height,
       });
     }
-  }, 100), [setBounds]);
+  }, 100), [setBrowserViewBounds]);
 
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
-  const ref = useCallback((box: HTMLElement | null) => {
+  const ref = useCallback((element: HTMLElement | null) => {
     if (resizeObserverRef.current !== null) {
       resizeObserverRef.current.disconnect();
     }
-    if (box === null) {
+    if (element === null) {
       resizeObserverRef.current = null;
       return;
     }
     resizeObserverRef.current = new ResizeObserver(onResize);
-    resizeObserverRef.current.observe(box);
+    resizeObserverRef.current.observe(element);
   }, [onResize, resizeObserverRef]);
 
   return (
diff --git a/packages/shared/src/stores/SharedStore.ts b/packages/shared/src/stores/SharedStore.ts
index 7c2b742..9c7d5ad 100644
--- a/packages/shared/src/stores/SharedStore.ts
+++ b/packages/shared/src/stores/SharedStore.ts
@@ -27,18 +27,10 @@ import {
 } from 'mobx-state-tree';
 
 export const sharedStore = types.model("SharedStore", {
-  browserViewBounds: types.model("BrowserViewBoundsStore", {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-  }),
   shouldUseDarkColors: true,
 });
 
 export const emptySharedStore: SharedStoreSnapshotIn = {
-  browserViewBounds: {
-  },
 };
 
 export interface SharedStore extends Instance<typeof sharedStore> {}