12 files changed, 241 insertions, 55 deletions

diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index f436bf0..e6da59f 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -20,11 +20,12 @@
 
 import FilledInput from '@mui/material/FilledInput';
 import { styled } from '@mui/material/styles';
-import { Service } from '@sophie/shared';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useState } from 'react';
 
+import Service from '../../stores/Service';
+
 import GoAdornment from './GoAdornment';
 import LocationOverlayInput from './LocationOverlayInput';
 import UrlAdornment from './UrlAdornment';
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 77b02b6..ce59692 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -26,10 +26,11 @@ import IconRefresh from '@mui/icons-material/Refresh';
 import { useTheme } from '@mui/material';
 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';
 
+import Service from '../../stores/Service';
+
 function NavigationButtons({
   service,
 }: {
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index 144f860..5db8a0c 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -20,10 +20,11 @@
 
 import Badge from '@mui/material/Badge';
 import { styled, useTheme } from '@mui/material/styles';
-import { Service } from '@sophie/shared';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 
+import type Service from '../../stores/Service';
+
 const ServiceIconRoot = styled('div', {
   name: 'ServiceIcon',
   slot: 'Root',
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 2241476..eba21b5 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -65,11 +65,8 @@ const ServiceSwitcherTab = styled(Tab, {
 }));
 
 function ServiceSwitcher(): JSX.Element {
-  const store = useStore();
-  const {
-    settings: { selectedService },
-    services,
-  } = store;
+  const { settings, services } = useStore();
+  const { selectedService } = settings;
 
   return (
     <ServiceSwitcherRoot
@@ -77,7 +74,7 @@ function ServiceSwitcher(): JSX.Element {
       orientation="vertical"
       value={selectedService === undefined ? false : selectedService.id}
       onChange={(_event, newValue: string) =>
-        store.setSelectedServiceId(newValue)
+        settings.setSelectedServiceId(newValue)
       }
     >
       {services.map((service) => (
diff --git a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
index 164b066..bacbf07 100644
--- a/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleDarkModeButton.tsx
@@ -27,15 +27,13 @@ import React from 'react';
 import { useStore } from '../StoreProvider';
 
 export default observer(() => {
-  const store = useStore();
-  const {
-    shared: { shouldUseDarkColors },
-  } = store;
+  const { shared } = useStore();
+  const { shouldUseDarkColors } = shared;
 
   return (
     <IconButton
       aria-label="Toggle dark mode"
-      onClick={() => store.toggleDarkMode()}
+      onClick={() => shared.toggleDarkMode()}
     >
       {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
     </IconButton>
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index 60033b0..d2f0745 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -45,17 +45,15 @@ function ToggleLocationBarIcon({
 }
 
 function ToggleLocationBarButton(): JSX.Element {
-  const store = useStore();
-  const {
-    settings: { selectedService, showLocationBar },
-  } = store;
+  const { settings } = useStore();
+  const { selectedService, showLocationBar } = settings;
 
   return (
     <IconButton
       aria-pressed={showLocationBar}
       aria-controls={LOCATION_BAR_ID}
       aria-label="Show location bar"
-      onClick={() => store.toggleLocationBar()}
+      onClick={() => settings.toggleLocationBar()}
     >
       <ToggleLocationBarIcon
         loading={selectedService?.state === 'loading'}
diff --git a/packages/renderer/src/stores/GlobalSettings.ts b/packages/renderer/src/stores/GlobalSettings.ts
new file mode 100644
index 0000000..79815ba
--- /dev/null
+++ b/packages/renderer/src/stores/GlobalSettings.ts
@@ -0,0 +1,63 @@
+/*
+ * 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 { defineGlobalSettingsModel, ThemeSource } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
+
+import getEnv from '../env/getEnv';
+
+import Service from './Service';
+
+const GlobalSettings = defineGlobalSettingsModel(Service).actions((self) => ({
+  setSelectedServiceId(serviceId: string): void {
+    getEnv(self).dispatchMainAction({
+      action: 'set-selected-service-id',
+      serviceId,
+    });
+  },
+  setThemeSource(themeSource: ThemeSource): void {
+    getEnv(self).dispatchMainAction({
+      action: 'set-theme-source',
+      themeSource,
+    });
+  },
+  setShowLocationBar(showLocationBar: boolean): void {
+    getEnv(self).dispatchMainAction({
+      action: 'set-show-location-bar',
+      showLocationBar,
+    });
+  },
+  toggleLocationBar(): void {
+    this.setShowLocationBar(!self.showLocationBar);
+  },
+}));
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface GlobalSettings extends Instance<typeof GlobalSettings> {}
+
+export default GlobalSettings;
+
+export type {
+  GlobalSettingsSnapshotIn,
+  GlobalSettingsSnapshotOut,
+} from '@sophie/shared';
diff --git a/packages/renderer/src/stores/Profile.ts b/packages/renderer/src/stores/Profile.ts
new file mode 100644
index 0000000..20a3a17
--- /dev/null
+++ b/packages/renderer/src/stores/Profile.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 { Profile as ProfileBase } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
+
+const Profile = ProfileBase;
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface Profile extends Instance<typeof Profile> {}
+
+export default Profile;
diff --git a/packages/renderer/src/stores/RendererStore.ts b/packages/renderer/src/stores/RendererStore.ts
index 1acc605..8f424f6 100644
--- a/packages/renderer/src/stores/RendererStore.ts
+++ b/packages/renderer/src/stores/RendererStore.ts
@@ -18,20 +18,17 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import {
-  BrowserViewBounds,
-  SharedStore,
-  Service,
-  SophieRenderer,
-  ThemeSource,
-  GlobalSettings,
-} from '@sophie/shared';
+import { BrowserViewBounds, SophieRenderer } from '@sophie/shared';
 import { applySnapshot, applyPatch, Instance, types } from 'mobx-state-tree';
 
 import RendererEnv from '../env/RendererEnv';
 import getEnv from '../env/getEnv';
 import { getLogger } from '../utils/log';
 
+import GlobalSettings from './GlobalSettings';
+import Service from './Service';
+import SharedStore from './SharedStore';
+
 const log = getLogger('RendererStore');
 
 const RendererStore = types
@@ -47,40 +44,12 @@ const RendererStore = types
     },
   }))
   .actions((self) => ({
-    setSelectedServiceId(serviceId: string): void {
-      getEnv(self).dispatchMainAction({
-        action: 'set-selected-service-id',
-        serviceId,
-      });
-    },
     setBrowserViewBounds(browserViewBounds: BrowserViewBounds): void {
       getEnv(self).dispatchMainAction({
         action: 'set-browser-view-bounds',
         browserViewBounds,
       });
     },
-    setThemeSource(themeSource: ThemeSource): void {
-      getEnv(self).dispatchMainAction({
-        action: 'set-theme-source',
-        themeSource,
-      });
-    },
-    toggleDarkMode(): void {
-      if (self.shared.shouldUseDarkColors) {
-        this.setThemeSource('light');
-      } else {
-        this.setThemeSource('dark');
-      }
-    },
-    setShowLocationBar(showLocationBar: boolean): void {
-      getEnv(self).dispatchMainAction({
-        action: 'set-show-location-bar',
-        showLocationBar,
-      });
-    },
-    toggleLocationBar(): void {
-      this.setShowLocationBar(!self.settings.showLocationBar);
-    },
   }));
 
 /*
diff --git a/packages/renderer/src/stores/Service.ts b/packages/renderer/src/stores/Service.ts
new file mode 100644
index 0000000..c2c938a
--- /dev/null
+++ b/packages/renderer/src/stores/Service.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 { defineServiceModel } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
+
+import ServiceSettings from './ServiceSettings';
+
+const Service = defineServiceModel(ServiceSettings);
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface Service extends Instance<typeof Service> {}
+
+export default Service;
diff --git a/packages/renderer/src/stores/ServiceSettings.ts b/packages/renderer/src/stores/ServiceSettings.ts
new file mode 100644
index 0000000..5d37347
--- /dev/null
+++ b/packages/renderer/src/stores/ServiceSettings.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 { defineServiceSettingsModel } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
+
+import Profile from './Profile';
+
+const ServiceSettings = defineServiceSettingsModel(Profile);
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface ServiceSettings extends Instance<typeof ServiceSettings> {}
+
+export default ServiceSettings;
+
+export type {
+  ServiceSettingsSnapshotIn,
+  ServiceSettingsSnapshotOut,
+} from '@sophie/shared';
diff --git a/packages/renderer/src/stores/SharedStore.ts b/packages/renderer/src/stores/SharedStore.ts
new file mode 100644
index 0000000..062479d
--- /dev/null
+++ b/packages/renderer/src/stores/SharedStore.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 { defineSharedStoreModel } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
+
+import GlobalSettings from './GlobalSettings';
+import Profile from './Profile';
+import Service from './Service';
+
+const SharedStore = defineSharedStoreModel(
+  GlobalSettings,
+  Profile,
+  Service,
+).actions((self) => ({
+  toggleDarkMode(): void {
+    if (self.shouldUseDarkColors) {
+      self.settings.setThemeSource('light');
+    } else {
+      self.settings.setThemeSource('dark');
+    }
+  },
+}));
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface SharedStore extends Instance<typeof SharedStore> {}
+
+export default SharedStore;
+
+export type {
+  SharedStoreSnapshotIn,
+  SharedStoreSnapshotOut,
+} from '@sophie/shared';