feat: Add BrowserView and synchronize its position

21 files changed, 427 insertions, 63 deletions

diff --git a/packages/main/package.json b/packages/main/package.json
index 509acdc..014c511 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@sophie/shared": "workspace:*",
-    "electron": "^16.0.5",
+    "electron": "16.0.5",
     "mobx": "^6.3.10",
     "mobx-state-tree": "^5.1.0"
   },
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 90102a7..59b9ecb 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -18,11 +18,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserView, BrowserWindow } from 'electron';
+import { autorun } from 'mobx';
 import { getSnapshot, onPatch } from 'mobx-state-tree';
 import { join } from 'path';
 import {
+  browserViewBounds,
   MainToRendererIpcMessage,
+  paletteMode,
   RendererToMainIpcMessage,
 } from '@sophie/shared';
 import { URL } from 'url';
@@ -31,7 +34,7 @@ import {
   installDevToolsExtensions,
   openDevToolsWhenReady,
 } from './devTools';
-import { rootStore } from './stores/RootStore';
+import { createRootStore } from './stores/RootStore';
 
 const isSingleInstance = app.requestSingleInstanceLock();
 const isDevelopment = import.meta.env.MODE === 'development';
@@ -49,19 +52,13 @@ if (isDevelopment) {
 
 let mainWindow: BrowserWindow | null = null;
 
-const store = rootStore.create({
-  shared: {
-    clickCount: 1,
-  },
-});
+const store = createRootStore();
 
-function createWindow(): Promise<void> {
+async function createWindow(): Promise<void> {
   mainWindow = new BrowserWindow({
     show: false,
     autoHideMenuBar: true,
     webPreferences: {
-      nativeWindowOpen: true,
-      webviewTag: false,
       sandbox: true,
       preload: join(__dirname, '../../preload/dist/index.cjs'),
     },
@@ -78,16 +75,23 @@ function createWindow(): Promise<void> {
   const { webContents } = mainWindow;
 
   webContents.on('ipc-message', (_event, channel, ...args) => {
-    switch (channel) {
-      case RendererToMainIpcMessage.SharedStoreSnapshotRequest:
-        webContents.send(MainToRendererIpcMessage.SharedStoreSnapshot, getSnapshot(store.shared));
-        break;
-      case RendererToMainIpcMessage.ButtonClick:
-        store.buttonClick();
-        break;
-      default:
-        console.warn('Unknown IPC message:', channel, args);
-        break;
+    try {
+      switch (channel) {
+        case RendererToMainIpcMessage.SharedStoreSnapshotRequest:
+          webContents.send(MainToRendererIpcMessage.SharedStoreSnapshot, getSnapshot(store.shared));
+          break;
+        case RendererToMainIpcMessage.SetBrowserViewBounds:
+          store.setBrowserViewBounds(browserViewBounds.parse(args[0]));
+          break;
+        case RendererToMainIpcMessage.SetPaletteMode:
+          store.setPaletteMode(paletteMode.parse(args[0]))
+          break;
+        default:
+          console.warn('Unknown IPC message:', channel, args);
+          break;
+      }
+    } catch (err) {
+      console.error('Error while processing IPC message:', channel, args, err);
     }
   });
 
@@ -99,7 +103,24 @@ function createWindow(): Promise<void> {
     ? import.meta.env.VITE_DEV_SERVER_URL
     : new URL('../renderer/dist/index.html', `file://${__dirname}`).toString();
 
-  return mainWindow.loadURL(pageUrl);
+  const browserView = new BrowserView({
+    webPreferences: {
+      sandbox: true,
+      partition: 'service',
+    },
+  });
+
+  browserView.setBackgroundColor('#fff');
+
+  autorun(() => {
+    browserView.setBounds(store.shared.browserViewBounds);
+  });
+
+  await mainWindow.loadURL(pageUrl);
+
+  mainWindow.addBrowserView(browserView);
+
+  return browserView.webContents.loadURL('https://git.marussy.com/sophie/about');
 }
 
 app.on('second-instance', () => {
diff --git a/packages/main/src/stores/RootStore.ts b/packages/main/src/stores/RootStore.ts
index edc740c..9d138ce 100644
--- a/packages/main/src/stores/RootStore.ts
+++ b/packages/main/src/stores/RootStore.ts
@@ -18,15 +18,29 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Instance, types } from 'mobx-state-tree';
-import { sharedStore } from '@sophie/shared';
+import { applySnapshot, Instance, types } from 'mobx-state-tree';
+import {
+  BrowserViewBounds,
+  emptySharedStore,
+  PaletteMode,
+  sharedStore,
+} from '@sophie/shared';
 
 export const rootStore = types.model('RootStore', {
   shared: sharedStore,
 }).actions((self) => ({
-  buttonClick() {
-    self.shared.clickCount += 1;
+  setBrowserViewBounds(bounds: BrowserViewBounds) {
+    applySnapshot(self.shared.browserViewBounds, bounds);
+  },
+  setPaletteMode(mode: PaletteMode) {
+    self.shared.shouldUseDarkColors = mode === 'dark';
   },
 }));
 
 export interface RootStore extends Instance<typeof rootStore> {}
+
+export function createRootStore(): RootStore {
+  return rootStore.create({
+    shared: emptySharedStore,
+  });
+}
diff --git a/packages/preload/package.json b/packages/preload/package.json
index e050b9a..bd2b412 100644
--- a/packages/preload/package.json
+++ b/packages/preload/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@sophie/shared": "workspace:*",
-    "electron": "^16.0.5",
+    "electron": "16.0.5",
     "mobx": "^6.3.10",
     "mobx-state-tree": "^5.1.0"
   },
diff --git a/packages/preload/src/SophieRendererImpl.ts b/packages/preload/src/SophieRendererImpl.ts
index 1ac8b65..6bffeae 100644
--- a/packages/preload/src/SophieRendererImpl.ts
+++ b/packages/preload/src/SophieRendererImpl.ts
@@ -21,12 +21,16 @@
 import { ipcRenderer } from 'electron';
 import type { IJsonPatch } from 'mobx-state-tree';
 import {
+  BrowserViewBounds,
+  browserViewBounds,
   MainToRendererIpcMessage,
+  PaletteMode,
+  paletteMode,
   RendererToMainIpcMessage,
   sharedStore,
   SharedStoreListener,
   SharedStoreSnapshotIn,
-  SophieRenderer
+  SophieRenderer,
 } from '@sophie/shared';
 
 export type MessageSender = (channel: RendererToMainIpcMessage, ...args: unknown[]) => void;
@@ -71,8 +75,16 @@ export class SophieRendererImpl implements SophieRenderer {
     this.#send(RendererToMainIpcMessage.SharedStoreSnapshotRequest);
   }
 
-  buttonClick(): void {
-    this.#send(RendererToMainIpcMessage.ButtonClick);
+  setBrowserViewBounds(bounds: BrowserViewBounds): void {
+    if (browserViewBounds.safeParse(bounds).success) {
+      this.#send(RendererToMainIpcMessage.SetBrowserViewBounds, bounds);
+    }
+  }
+
+  setPaletteMode(mode: PaletteMode): void {
+    if (paletteMode.safeParse(mode).success) {
+      this.#send(RendererToMainIpcMessage.SetPaletteMode, mode);
+    }
   }
 }
 
@@ -89,6 +101,7 @@ export function createSophieRenderer(): SophieRenderer {
 
   return {
     setSharedStoreListener: impl.setSharedStoreListener.bind(impl),
-    buttonClick: impl.buttonClick.bind(impl),
+    setBrowserViewBounds: impl.setBrowserViewBounds.bind(impl),
+    setPaletteMode: impl.setPaletteMode.bind(impl),
   };
 }
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 5f9bd57..4948f2b 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -16,6 +16,7 @@
     "@mui/icons-material": "^5.2.5",
     "@mui/material": "^5.2.5",
     "@sophie/shared": "workspace:*",
+    "lodash": "^4.17.21",
     "mobx": "^6.3.10",
     "mobx-react-lite": "^3.2.2",
     "mobx-state-tree": "^5.1.0",
@@ -23,6 +24,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.178",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@vitejs/plugin-react": "^1.1.3",
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>
+  );
+});
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 901d137..90cba2c 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -22,13 +22,12 @@ import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
-import { observer } from 'mobx-react-lite';
-import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
 import React from 'react';
 import { render } from 'react-dom';
 
-import { StoreProvider, useStore } from './components/StoreProvider';
+import { App } from './components/App';
+import { StoreProvider } from './components/StoreProvider';
 import { ThemeProvider } from './components/ThemeProvider';
 import { exposeToReduxDevtools } from './devTools';
 import { createAndConnectRootStore } from './stores/RootStore';
@@ -41,26 +40,13 @@ if (isDevelopment) {
   exposeToReduxDevtools(store);
 }
 
-const Example = observer(() => {
-  const { shared: { clickCount } } = useStore();
-
-  return (
-    <Button
-      variant="contained"
-      onClick={() => store.buttonClick()}
-    >
-      Hello Sophie! {clickCount}
-    </Button>
-  );
-});
-
 function Root(): JSX.Element {
   return (
     <React.StrictMode>
       <StoreProvider store={store}>
         <ThemeProvider>
           <CssBaseline enableColorScheme />
-          <Example />
+          <App />
         </ThemeProvider>
       </StoreProvider>
     </React.StrictMode>
diff --git a/packages/renderer/src/stores/RootStore.ts b/packages/renderer/src/stores/RootStore.ts
index f24ea4d..c6533ba 100644
--- a/packages/renderer/src/stores/RootStore.ts
+++ b/packages/renderer/src/stores/RootStore.ts
@@ -26,10 +26,16 @@ import {
   Instance,
   types
 } from 'mobx-state-tree';
-import { sharedStore, SophieRenderer } from '@sophie/shared';
+import {
+  BrowserViewBounds,
+  emptySharedStore,
+  PaletteMode,
+  sharedStore,
+  SophieRenderer,
+} from '@sophie/shared';
 
 export interface RootEnv {
-  ipc: SophieRenderer;
+  ipc: Omit<SophieRenderer, 'setSharedStoreListener'>;
 }
 
 /**
@@ -46,8 +52,18 @@ export function getEnv(model: IAnyStateTreeNode): RootEnv {
 export const rootStore = types.model('RootStore', {
   shared: sharedStore,
 }).actions((self) => ({
-  buttonClick() {
-    getEnv(self).ipc.buttonClick();
+  setBrowserViewBounds(bounds: BrowserViewBounds) {
+    getEnv(self).ipc.setBrowserViewBounds(bounds);
+  },
+  setPaletteMode(mode: PaletteMode) {
+    getEnv(self).ipc.setPaletteMode(mode);
+  },
+  toggleDarkMode() {
+    if (self.shared.shouldUseDarkColors) {
+      this.setPaletteMode('light');
+    } else {
+      this.setPaletteMode('dark');
+    }
   },
 }));
 
@@ -63,7 +79,7 @@ export interface RootStore extends Instance<typeof rootStore> {}
  */
 export function createAndConnectRootStore(ipc: SophieRenderer): RootStore {
   const store = rootStore.create({
-    shared: {},
+    shared: emptySharedStore,
   }, {
     ipc,
   });
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 83aec54..f5d4f90 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "mobx": "^6.3.10",
-    "mobx-state-tree": "^5.1.0"
+    "mobx-state-tree": "^5.1.0",
+    "zod": "^3.11.6"
   }
 }
diff --git a/packages/shared/src/contextBridge/SophieRenderer.ts b/packages/shared/src/contextBridge/SophieRenderer.ts
index 0d82d56..f2e2180 100644
--- a/packages/shared/src/contextBridge/SophieRenderer.ts
+++ b/packages/shared/src/contextBridge/SophieRenderer.ts
@@ -20,8 +20,12 @@
 
 import { SharedStoreListener } from '../stores/SharedStore';
 
+import { BrowserViewBounds, PaletteMode } from '../schemas';
+
 export interface SophieRenderer {
   setSharedStoreListener(listener: SharedStoreListener): void;
 
-  buttonClick(): void;
+  setBrowserViewBounds(bounds: BrowserViewBounds): void;
+
+  setPaletteMode(mode: PaletteMode): void;
 }
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 250700f..0a1ec40 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -24,9 +24,18 @@ export { MainToRendererIpcMessage } from './ipc/MainToRendererIpcMessage';
 export { RendererToMainIpcMessage } from './ipc/RendererToMainIpcMessage';
 
 export type {
+  BrowserViewBounds,
+  PaletteMode,
+} from './schemas';
+export {
+  browserViewBounds,
+  paletteMode
+} from './schemas';
+
+export type {
   SharedStore,
   SharedStoreListener,
   SharedStoreSnapshotIn,
   SharedStoreSnapshotOut,
 } from './stores/SharedStore';
-export { sharedStore } from './stores/SharedStore';
+export { emptySharedStore, sharedStore } from './stores/SharedStore';
diff --git a/packages/shared/src/ipc/MainToRendererIpcMessage.ts b/packages/shared/src/ipc/MainToRendererIpcMessage.ts
index e68d676..92da489 100644
--- a/packages/shared/src/ipc/MainToRendererIpcMessage.ts
+++ b/packages/shared/src/ipc/MainToRendererIpcMessage.ts
@@ -19,6 +19,6 @@
  */
 
 export enum MainToRendererIpcMessage {
-  SharedStoreSnapshot = "sophie-shared-store-snapshot",
-  SharedStorePatch = "sophie-shared-store-patch",
+  SharedStoreSnapshot = 'sophie-shared-store-snapshot',
+  SharedStorePatch = 'sophie-shared-store-patch',
 }
diff --git a/packages/shared/src/ipc/RendererToMainIpcMessage.ts b/packages/shared/src/ipc/RendererToMainIpcMessage.ts
index a7aa664..ba354d1 100644
--- a/packages/shared/src/ipc/RendererToMainIpcMessage.ts
+++ b/packages/shared/src/ipc/RendererToMainIpcMessage.ts
@@ -19,6 +19,7 @@
  */
 
 export enum RendererToMainIpcMessage {
-  SharedStoreSnapshotRequest = "sophie-shared-store-snapshot-request",
-  ButtonClick = "sophie-button-click"
+  SharedStoreSnapshotRequest = 'sophie-shared-store-snapshot-request',
+  SetBrowserViewBounds = 'sophie-set-browser-view-bounds',
+  SetPaletteMode = 'sophie-set-palette-mode',
 }
diff --git a/packages/shared/src/schemas.ts b/packages/shared/src/schemas.ts
new file mode 100644
index 0000000..8827467
--- /dev/null
+++ b/packages/shared/src/schemas.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 { z } from 'zod';
+
+export const browserViewBounds = z.object({
+  x: z.number().nonnegative(),
+  y: z.number().nonnegative(),
+  width: z.number().nonnegative(),
+  height: z.number().nonnegative(),
+});
+
+export type BrowserViewBounds = z.infer<typeof browserViewBounds>;
+
+export const paletteMode = z.enum(['light', 'dark']);
+
+export type PaletteMode = z.infer<typeof paletteMode>;
diff --git a/packages/shared/src/stores/SharedStore.ts b/packages/shared/src/stores/SharedStore.ts
index 7fd65b7..7c2b742 100644
--- a/packages/shared/src/stores/SharedStore.ts
+++ b/packages/shared/src/stores/SharedStore.ts
@@ -27,10 +27,20 @@ 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,
-  clickCount: 0
 });
 
+export const emptySharedStore: SharedStoreSnapshotIn = {
+  browserViewBounds: {
+  },
+};
+
 export interface SharedStore extends Instance<typeof sharedStore> {}
 
 export interface SharedStoreSnapshotIn extends SnapshotIn<typeof sharedStore> {}
diff --git a/packages/shared/vite.config.js b/packages/shared/vite.config.js
index 76bd965..2867541 100644
--- a/packages/shared/vite.config.js
+++ b/packages/shared/vite.config.js
@@ -29,6 +29,7 @@ const config = makeConfig({
       external: [
         'mobx',
         'mobx-state-tree',
+        'zod',
         ...builtinModules,
       ],
     },