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;
+}