refactor: Shared model type factories

Allows customization of stores both in the renderer and in the main
process. Instead of exposing a basic model type from the shared module
(which was be overwritted with more specific props in the main package),
we expose factory function that can create specific model types in
both the renderer and the main process.

Using these package-specific customization to stores, the renderer
package can attach IPC calls directly to store objects, which the main
package can attach the handlers for IPC calls and other internal
actions.

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

25 files changed, 348 insertions, 230 deletions

diff --git a/packages/main/src/stores/GlobalSettings.ts b/packages/main/src/stores/GlobalSettings.ts
index 2af9da2..31b7e12 100644
--- a/packages/main/src/stores/GlobalSettings.ts
+++ b/packages/main/src/stores/GlobalSettings.ts
@@ -18,22 +18,16 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import {
-  GlobalSettings as GlobalSettingsBase,
-  ThemeSource,
-} from '@sophie/shared';
-import { Instance, resolveIdentifier, types } from 'mobx-state-tree';
+import { defineGlobalSettingsModel, ThemeSource } from '@sophie/shared';
+import { Instance, resolveIdentifier } from 'mobx-state-tree';
 
 import { getLogger } from '../utils/log';
-import overrideProps from '../utils/overrideProps';
 
 import Service from './Service';
 
 const log = getLogger('sharedStore');
 
-const GlobalSettings = overrideProps(GlobalSettingsBase, {
-  selectedService: types.safeReference(Service),
-}).actions((self) => ({
+const GlobalSettings = defineGlobalSettingsModel(Service).actions((self) => ({
   setThemeSource(mode: ThemeSource): void {
     self.themeSource = mode;
   },
diff --git a/packages/main/src/stores/Profile.ts b/packages/main/src/stores/Profile.ts
index 0fd486e..836f4a8 100644
--- a/packages/main/src/stores/Profile.ts
+++ b/packages/main/src/stores/Profile.ts
@@ -21,14 +21,9 @@
 import { Profile as ProfileBase } from '@sophie/shared';
 import { getSnapshot, Instance } from 'mobx-state-tree';
 
-import overrideProps from '../utils/overrideProps';
-
-import ProfileSettings from './ProfileSettings';
 import type ProfileConfig from './config/ProfileConfig';
 
-const Profile = overrideProps(ProfileBase, {
-  settings: ProfileSettings,
-}).views((self) => ({
+const Profile = ProfileBase.views((self) => ({
   get config(): ProfileConfig {
     const { id, settings } = self;
     return { ...getSnapshot(settings), id };
diff --git a/packages/main/src/stores/Service.ts b/packages/main/src/stores/Service.ts
index 5302dd4..abef7c2 100644
--- a/packages/main/src/stores/Service.ts
+++ b/packages/main/src/stores/Service.ts
@@ -19,18 +19,15 @@
  */
 
 import type { UnreadCount } from '@sophie/service-shared';
-import { Service as ServiceBase } from '@sophie/shared';
+import { defineServiceModel } from '@sophie/shared';
 import { Instance, getSnapshot } from 'mobx-state-tree';
 
 import type { ServiceView } from '../infrastructure/electron/types';
-import overrideProps from '../utils/overrideProps';
 
 import ServiceSettings from './ServiceSettings';
 import type ServiceConfig from './config/ServiceConfig';
 
-const Service = overrideProps(ServiceBase, {
-  settings: ServiceSettings,
-})
+const Service = defineServiceModel(ServiceSettings)
   .views((self) => ({
     get config(): ServiceConfig {
       const { id, settings } = self;
diff --git a/packages/main/src/stores/ServiceSettings.ts b/packages/main/src/stores/ServiceSettings.ts
index e6f48c6..5d37347 100644
--- a/packages/main/src/stores/ServiceSettings.ts
+++ b/packages/main/src/stores/ServiceSettings.ts
@@ -18,16 +18,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { ServiceSettings as ServiceSettingsBase } from '@sophie/shared';
-import { Instance, types } from 'mobx-state-tree';
-
-import overrideProps from '../utils/overrideProps';
+import { defineServiceSettingsModel } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
 
 import Profile from './Profile';
 
-const ServiceSettings = overrideProps(ServiceSettingsBase, {
-  profile: types.reference(Profile),
-});
+const ServiceSettings = defineServiceSettingsModel(Profile);
 
 /*
   eslint-disable-next-line @typescript-eslint/no-redeclare --
diff --git a/packages/main/src/stores/SharedStore.ts b/packages/main/src/stores/SharedStore.ts
index 182b693..d72c532 100644
--- a/packages/main/src/stores/SharedStore.ts
+++ b/packages/main/src/stores/SharedStore.ts
@@ -18,10 +18,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { SharedStore as SharedStoreBase } from '@sophie/shared';
-import { getSnapshot, Instance, types } from 'mobx-state-tree';
-
-import overrideProps from '../utils/overrideProps';
+import { defineSharedStoreModel } from '@sophie/shared';
+import { getSnapshot, Instance } from 'mobx-state-tree';
 
 import GlobalSettings from './GlobalSettings';
 import Profile from './Profile';
@@ -33,13 +31,7 @@ function getConfigs<T>(models: { config: T }[]): T[] | undefined {
   return models.length === 0 ? undefined : models.map((model) => model.config);
 }
 
-const SharedStore = overrideProps(SharedStoreBase, {
-  settings: types.optional(GlobalSettings, {}),
-  profilesById: types.map(Profile),
-  profiles: types.array(types.reference(Profile)),
-  servicesById: types.map(Service),
-  services: types.array(types.reference(Service)),
-})
+const SharedStore = defineSharedStoreModel(GlobalSettings, Profile, Service)
   .views((self) => ({
     get config(): Config {
       const { settings, profiles, services } = self;
diff --git a/packages/main/src/stores/config/loadConfig.ts b/packages/main/src/stores/config/loadConfig.ts
index 55d15c8..2463084 100644
--- a/packages/main/src/stores/config/loadConfig.ts
+++ b/packages/main/src/stores/config/loadConfig.ts
@@ -18,6 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { ProfileSettingsSnapshotIn } from '@sophie/shared';
 import {
   applySnapshot,
   IMSTArray,
@@ -31,7 +32,6 @@ import slug from 'slug';
 
 import GlobalSettings from '../GlobalSettings';
 import type Profile from '../Profile';
-import type { ProfileSettingsSnapshotIn } from '../ProfileSettings';
 import type Service from '../Service';
 import type { ServiceSettingsSnapshotIn } from '../ServiceSettings';
 
diff --git a/packages/main/src/utils/overrideProps.ts b/packages/main/src/utils/overrideProps.ts
deleted file mode 100644
index c626408..0000000
--- a/packages/main/src/utils/overrideProps.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * 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
- */
-
-/**
- * @file This file implements a technique to force-override properties of a model.
- *
- * The overridden properties must conform to the SnapshotIt and SnapshotOut format
- * of the original model. Essentially, this means that only views and actions can
- * be added safely.
- *
- * @see https://github.com/mobxjs/mobx-state-tree/issues/1403#issuecomment-940843087
- */
-
-import {
-  IAnyModelType,
-  IModelType,
-  ModelProperties,
-  SnapshotIn,
-  SnapshotOut,
-} from 'mobx-state-tree';
-
-export type IUnsafeOverriddenModelType<
-  BASE extends IAnyModelType,
-  PROPS extends ModelProperties,
-> = BASE extends IModelType<infer P, infer O, infer CC, infer CS>
-  ? IModelType<Omit<P, keyof PROPS> & PROPS, O, CC, CS>
-  : never;
-
-export type IOverriddenModelType<
-  BASE extends IAnyModelType,
-  PROPS extends ModelProperties,
-> = SnapshotIn<BASE> extends SnapshotIn<IUnsafeOverriddenModelType<BASE, PROPS>>
-  ? SnapshotOut<
-      IUnsafeOverriddenModelType<BASE, PROPS>
-    > extends SnapshotOut<BASE>
-    ? IUnsafeOverriddenModelType<BASE, PROPS>
-    : never
-  : never;
-
-export default function overrideProps<
-  BASE extends IAnyModelType,
-  PROPS extends ModelProperties,
->(base: BASE, props: PROPS): IOverriddenModelType<BASE, PROPS> {
-  return base.props(props) as IOverriddenModelType<BASE, PROPS>;
-}
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/main/src/stores/ProfileSettings.ts b/packages/renderer/src/stores/Profile.ts
index eed51e3..20a3a17 100644
--- a/packages/main/src/stores/ProfileSettings.ts
+++ b/packages/renderer/src/stores/Profile.ts
@@ -18,13 +18,15 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { ProfileSettings } from '@sophie/shared';
+import { Profile as ProfileBase } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
 
-// TODO Export a modified ProfileSettings once we need to add actions to it.
-// eslint-disable-next-line unicorn/prefer-export-from -- Can't export from default.
-export default ProfileSettings;
+const Profile = ProfileBase;
 
-export type {
-  ProfileSettingsSnapshotIn,
-  ProfileSettingsSnapshotOut,
-} from '@sophie/shared';
+/*
+  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/shared/src/stores/ServiceSettings.ts b/packages/renderer/src/stores/ServiceSettings.ts
index a5811f5..5d37347 100644
--- a/packages/shared/src/stores/ServiceSettings.ts
+++ b/packages/renderer/src/stores/ServiceSettings.ts
@@ -18,17 +18,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Instance, types, SnapshotIn, SnapshotOut } from 'mobx-state-tree';
+import { defineServiceSettingsModel } from '@sophie/shared';
+import { Instance } from 'mobx-state-tree';
 
 import Profile from './Profile';
 
-const ServiceSettings = /* @__PURE__ */ (() =>
-  types.model('ServiceSettings', {
-    name: types.string,
-    profile: types.reference(Profile),
-    // TODO: Remove this once recipes are added.
-    url: types.string,
-  }))();
+const ServiceSettings = defineServiceSettingsModel(Profile);
 
 /*
   eslint-disable-next-line @typescript-eslint/no-redeclare --
@@ -38,8 +33,7 @@ interface ServiceSettings extends Instance<typeof ServiceSettings> {}
 
 export default ServiceSettings;
 
-export interface ServiceSettingsSnapshotIn
-  extends SnapshotIn<typeof ServiceSettings> {}
-
-export interface ServiceSettingsSnapshotOut
-  extends SnapshotOut<typeof ServiceSettings> {}
+export type {
+  ServiceSettingsSnapshotIn,
+  ServiceSettingsSnapshotOut,
+} from '@sophie/shared';
diff --git a/packages/shared/src/stores/SharedStore.ts b/packages/renderer/src/stores/SharedStore.ts
index d81a3d3..062479d 100644
--- a/packages/shared/src/stores/SharedStore.ts
+++ b/packages/renderer/src/stores/SharedStore.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
  *
  * This file is part of Sophie.
  *
@@ -18,27 +18,26 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import {
-  IJsonPatch,
-  Instance,
-  types,
-  SnapshotIn,
-  SnapshotOut,
-} from 'mobx-state-tree';
+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 = /* @__PURE__ */ (() =>
-  types.model('SharedStore', {
-    settings: types.optional(GlobalSettings, {}),
-    profilesById: types.map(Profile),
-    profiles: types.array(types.reference(Profile)),
-    servicesById: types.map(Service),
-    services: types.array(types.reference(Service)),
-    shouldUseDarkColors: false,
-  }))();
+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 --
@@ -48,13 +47,7 @@ interface SharedStore extends Instance<typeof SharedStore> {}
 
 export default SharedStore;
 
-export interface SharedStoreSnapshotIn extends SnapshotIn<typeof SharedStore> {}
-
-export interface SharedStoreSnapshotOut
-  extends SnapshotOut<typeof SharedStore> {}
-
-export interface SharedStoreListener {
-  onSnapshot(snapshot: SharedStoreSnapshotIn): void;
-
-  onPatch(patches: IJsonPatch[]): void;
-}
+export type {
+  SharedStoreSnapshotIn,
+  SharedStoreSnapshotOut,
+} from '@sophie/shared';
diff --git a/packages/shared/src/contextBridge/SophieRenderer.ts b/packages/shared/src/contextBridge/SophieRenderer.ts
index 28dc0b7..9e087da 100644
--- a/packages/shared/src/contextBridge/SophieRenderer.ts
+++ b/packages/shared/src/contextBridge/SophieRenderer.ts
@@ -19,7 +19,7 @@
  */
 
 import { Action } from '../schemas';
-import { SharedStoreListener } from '../stores/SharedStore';
+import { SharedStoreListener } from '../stores/SharedStoreBase';
 
 export default interface SophieRenderer {
   onSharedStoreChange(this: void, listener: SharedStoreListener): Promise<void>;
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 3d30488..66debf7 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -27,8 +27,11 @@ export { Action, BrowserViewBounds, ThemeSource } from './schemas';
 export type {
   GlobalSettingsSnapshotIn,
   GlobalSettingsSnapshotOut,
-} from './stores/GlobalSettings';
-export { default as GlobalSettings } from './stores/GlobalSettings';
+} from './stores/GlobalSettingsBase';
+export {
+  default as GlobalSettingsBase,
+  defineGlobalSettingsModel,
+} from './stores/GlobalSettingsBase';
 
 export { default as Profile } from './stores/Profile';
 
@@ -38,17 +41,26 @@ export type {
 } from './stores/ProfileSettings';
 export { default as ProfileSettings } from './stores/ProfileSettings';
 
-export { default as Service } from './stores/Service';
+export {
+  default as ServiceBase,
+  defineServiceModel,
+} from './stores/ServiceBase';
 
 export type {
   ServiceSettingsSnapshotIn,
   ServiceSettingsSnapshotOut,
-} from './stores/ServiceSettings';
-export { default as ServiceSettings } from './stores/ServiceSettings';
+} from './stores/ServiceSettingsBase';
+export {
+  default as ServiceSettingsBase,
+  defineServiceSettingsModel,
+} from './stores/ServiceSettingsBase';
 
 export type {
   SharedStoreListener,
   SharedStoreSnapshotIn,
   SharedStoreSnapshotOut,
-} from './stores/SharedStore';
-export { default as SharedStore } from './stores/SharedStore';
+} from './stores/SharedStoreBase';
+export {
+  default as SharedStoreBase,
+  defineSharedStoreModel,
+} from './stores/SharedStoreBase';
diff --git a/packages/shared/src/stores/GlobalSettings.ts b/packages/shared/src/stores/GlobalSettingsBase.ts
index f316af9..48092fd 100644
--- a/packages/shared/src/stores/GlobalSettings.ts
+++ b/packages/shared/src/stores/GlobalSettingsBase.ts
@@ -18,32 +18,44 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Instance, types, SnapshotIn, SnapshotOut } from 'mobx-state-tree';
+import {
+  Instance,
+  types,
+  SnapshotIn,
+  SnapshotOut,
+  IAnyModelType,
+} from 'mobx-state-tree';
 
 import { ThemeSource } from '../schemas';
 
-import Service from './Service';
+import ServiceBase from './ServiceBase';
 
-const GlobalSettings = /* @__PURE__ */ (() =>
-  types.model('GlobalSettings', {
+export function defineGlobalSettingsModel<TS extends IAnyModelType>(
+  service: TS,
+) {
+  return types.model('GlobalSettings', {
     themeSource: types.optional(
       types.enumeration(ThemeSource.options),
       'system',
     ),
     showLocationBar: false,
-    selectedService: types.safeReference(Service),
-  }))();
+    selectedService: types.safeReference(service),
+  });
+}
+
+const GlobalSettingsBase = /* @__PURE__ */ (() =>
+  defineGlobalSettingsModel(ServiceBase))();
 
 /*
   eslint-disable-next-line @typescript-eslint/no-redeclare --
   Intentionally naming the type the same as the store definition.
 */
-interface GlobalSettings extends Instance<typeof GlobalSettings> {}
+interface GlobalSettingsBase extends Instance<typeof GlobalSettingsBase> {}
 
-export default GlobalSettings;
+export default GlobalSettingsBase;
 
 export interface GlobalSettingsSnapshotIn
-  extends SnapshotIn<typeof GlobalSettings> {}
+  extends SnapshotIn<typeof GlobalSettingsBase> {}
 
 export interface GlobalSettingsSnapshotOut
-  extends SnapshotOut<typeof GlobalSettings> {}
+  extends SnapshotOut<typeof GlobalSettingsBase> {}
diff --git a/packages/shared/src/stores/Service.ts b/packages/shared/src/stores/ServiceBase.ts
index a4e3c92..cde403b 100644
--- a/packages/shared/src/stores/Service.ts
+++ b/packages/shared/src/stores/ServiceBase.ts
@@ -18,14 +18,14 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Instance, types } from 'mobx-state-tree';
+import { IAnyModelType, Instance, types } from 'mobx-state-tree';
 
-import ServiceSettings from './ServiceSettings';
+import ServiceSettingsBase from './ServiceSettingsBase';
 
-const Service = /* @__PURE__ */ (() =>
-  types.model('Service', {
+export function defineServiceModel<TS extends IAnyModelType>(settings: TS) {
+  return types.model('Service', {
     id: types.identifier,
-    settings: ServiceSettings,
+    settings,
     currentUrl: types.maybe(types.string),
     canGoBack: false,
     canGoForward: false,
@@ -36,12 +36,16 @@ const Service = /* @__PURE__ */ (() =>
     ),
     directMessageCount: 0,
     indirectMessageCount: 0,
-  }))();
+  });
+}
+
+const ServiceBase = /* @__PURE__ */ (() =>
+  defineServiceModel(ServiceSettingsBase))();
 
 /*
   eslint-disable-next-line @typescript-eslint/no-redeclare --
   Intentionally naming the type the same as the store definition.
 */
-interface Service extends Instance<typeof Service> {}
+interface ServiceBase extends Instance<typeof ServiceBase> {}
 
-export default Service;
+export default ServiceBase;
diff --git a/packages/shared/src/stores/ServiceSettingsBase.ts b/packages/shared/src/stores/ServiceSettingsBase.ts
new file mode 100644
index 0000000..45eb15d
--- /dev/null
+++ b/packages/shared/src/stores/ServiceSettingsBase.ts
@@ -0,0 +1,57 @@
+/*
+ * 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 {
+  Instance,
+  types,
+  SnapshotIn,
+  SnapshotOut,
+  IAnyModelType,
+} from 'mobx-state-tree';
+
+import ProfileBase from './Profile';
+
+export function defineServiceSettingsModel<TP extends IAnyModelType>(
+  profile: TP,
+) {
+  return types.model('ServiceSettings', {
+    name: types.string,
+    profile: types.reference(profile),
+    // TODO: Remove this once recipes are added.
+    url: types.string,
+  });
+}
+
+const ServiceSettingsBase = /* @__PURE__ */ (() =>
+  defineServiceSettingsModel(ProfileBase))();
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface ServiceSettingsBase extends Instance<typeof ServiceSettingsBase> {}
+
+export default ServiceSettingsBase;
+
+export interface ServiceSettingsSnapshotIn
+  extends SnapshotIn<typeof ServiceSettingsBase> {}
+
+export interface ServiceSettingsSnapshotOut
+  extends SnapshotOut<typeof ServiceSettingsBase> {}
diff --git a/packages/shared/src/stores/SharedStoreBase.ts b/packages/shared/src/stores/SharedStoreBase.ts
new file mode 100644
index 0000000..8d6624b
--- /dev/null
+++ b/packages/shared/src/stores/SharedStoreBase.ts
@@ -0,0 +1,70 @@
+/*
+ * 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 {
+  IJsonPatch,
+  Instance,
+  types,
+  SnapshotIn,
+  SnapshotOut,
+  IAnyModelType,
+} from 'mobx-state-tree';
+
+import GlobalSettingsBase from './GlobalSettingsBase';
+import ProfileBase from './Profile';
+import ServiceBase from './ServiceBase';
+
+export function defineSharedStoreModel<
+  TG extends IAnyModelType,
+  TP extends IAnyModelType,
+  TS extends IAnyModelType,
+>(globalSettings: TG, profile: TP, service: TS) {
+  return types.model('SharedStore', {
+    settings: types.optional(globalSettings, {}),
+    profilesById: types.map(profile),
+    profiles: types.array(types.reference(profile)),
+    servicesById: types.map(service),
+    services: types.array(types.reference(service)),
+    shouldUseDarkColors: false,
+  });
+}
+
+const SharedStoreBase = /* @__PURE__ */ (() =>
+  defineSharedStoreModel(GlobalSettingsBase, ProfileBase, ServiceBase))();
+
+/*
+  eslint-disable-next-line @typescript-eslint/no-redeclare --
+  Intentionally naming the type the same as the store definition.
+*/
+interface SharedStoreBase extends Instance<typeof SharedStoreBase> {}
+
+export default SharedStoreBase;
+
+export interface SharedStoreSnapshotIn
+  extends SnapshotIn<typeof SharedStoreBase> {}
+
+export interface SharedStoreSnapshotOut
+  extends SnapshotOut<typeof SharedStoreBase> {}
+
+export interface SharedStoreListener {
+  onSnapshot(snapshot: SharedStoreSnapshotIn): void;
+
+  onPatch(patches: IJsonPatch[]): void;
+}