11 files changed, 90 insertions, 3 deletions

diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index fa866e153..81401b1d2 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -108,7 +108,7 @@ class ServiceView extends Component {
     }
 
     return (
-      <div className={webviewClasses}>
+      <div className={webviewClasses} data-name={service.name}>
         {service.isActive && service.isEnabled && (
           <>
             {service.hasCrashed && (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index f7e0fdd6f..f5a29ff82 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -537,6 +537,10 @@ class EditSettingsForm extends Component {
 
                 <Hr />
 
+                <Toggle field={form.$('splitMode')} />
+
+                <Hr />
+
                 <Select field={form.$('serviceRibbonWidth')} />
 
                 <Toggle field={form.$('useVerticalStyle')} />
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 92985b68c..36b9e949b 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -164,6 +164,10 @@ const messages = defineMessages({
     id: 'settings.app.form.universalDarkMode',
     defaultMessage: 'Enable universal Dark Mode',
   },
+  splitMode: {
+    id: 'settings.app.form.splitMode',
+    defaultMessage: 'Enable Split View Mode',
+  },
   serviceRibbonWidth: {
     id: 'settings.app.form.serviceRibbonWidth',
     defaultMessage: 'Sidebar width',
@@ -288,6 +292,7 @@ class EditSettingsScreen extends Component {
         darkMode: Boolean(settingsData.darkMode),
         adaptableDarkMode: Boolean(settingsData.adaptableDarkMode),
         universalDarkMode: Boolean(settingsData.universalDarkMode),
+        splitMode: Boolean(settingsData.splitMode),
         serviceRibbonWidth: Number(settingsData.serviceRibbonWidth),
         iconSize: Number(settingsData.iconSize),
         useVerticalStyle: Boolean(settingsData.useVerticalStyle),
@@ -580,6 +585,11 @@ class EditSettingsScreen extends Component {
           value: settings.all.app.universalDarkMode,
           default: DEFAULT_APP_SETTINGS.universalDarkMode,
         },
+        splitMode: {
+          label: intl.formatMessage(messages.splitMode),
+          value: settings.all.app.splitMode,
+          default: DEFAULT_APP_SETTINGS.splitMode,
+        },
         serviceRibbonWidth: {
           label: intl.formatMessage(messages.serviceRibbonWidth),
           value: settings.all.app.serviceRibbonWidth,
diff --git a/src/environment.js b/src/environment.js
index b30e3778d..b315466fc 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -136,6 +136,7 @@ export const DEFAULT_APP_SETTINGS = {
   enableSpellchecking: true,
   spellcheckerLanguage: 'en-us',
   darkMode: isMac && electronApi.nativeTheme.shouldUseDarkColors,
+  splitMode: false,
   locale: '',
   fallbackLocale: 'en-US',
   beta: false,
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 73e882990..db2b69f99 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -190,6 +190,12 @@ export default class WorkspacesStore extends FeatureStore {
     setTimeout(() => {
       this.isSwitchingWorkspace = false;
       this.nextWorkspace = null;
+      if (this.stores.settings.app.splitMode) {
+        const serviceNames = new Set(this.getWorkspaceServices(workspace).map(service => service.name));
+        for (const wrapper of document.querySelectorAll('.services__webview-wrapper')) {
+          wrapper.style.display = serviceNames.has(wrapper.dataset.name) ? '' : 'none';
+        }
+      }
     }, 1000);
   };
 
@@ -205,6 +211,11 @@ export default class WorkspacesStore extends FeatureStore {
     // Indicate that we are done switching to the default workspace
     setTimeout(() => {
       this.isSwitchingWorkspace = false;
+      if (this.stores.settings.app.splitMode) {
+        for (const wrapper of document.querySelectorAll('.services__webview-wrapper')) {
+          wrapper.style.display = '';
+        }
+      }
     }, 1000);
   };
 
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index e2e0cdc83..25eedb456 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -239,6 +239,7 @@
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
   "settings.app.form.showDragArea": "Show draggable area on window",
   "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
+  "settings.app.form.splitMode": "Enable Split View Mode",
   "settings.app.form.startMinimized": "Start minimized",
   "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
   "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi",
diff --git a/src/i18n/locales/pl.json b/src/i18n/locales/pl.json
index d0bbe725d..2d79744a6 100644
--- a/src/i18n/locales/pl.json
+++ b/src/i18n/locales/pl.json
@@ -239,6 +239,7 @@
   "settings.app.form.showDisabledServices": "Wyświetlaj karty wyłączonych usług",
   "settings.app.form.showDragArea": "Show draggable area on window",
   "settings.app.form.showMessagesBadgesWhenMuted": "Pokaż licznik nieprzeczytanych wiadomości gdy powiadomienia są wyłączone",
+  "settings.app.form.splitMode": "Włącz tryb podzielony",
   "settings.app.form.startMinimized": "Uruchom zminimalizowany",
   "settings.app.form.universalDarkMode": "Włącz uniwersalny tryb ciemny",
   "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi",
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 67fd4103f..16defb327 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -163,6 +163,13 @@ export default class ServicesStore extends Store {
     );
 
     reaction(
+      () => this.stores.settings.app.splitMode,
+      () => {
+        this._shareSettingsWithServiceProcess();
+      },
+    );
+
+    reaction(
       () => this.stores.settings.app.searchEngine,
       () => {
         this._shareSettingsWithServiceProcess();
@@ -667,12 +674,21 @@ export default class ServicesStore extends Store {
     }
   }
 
-  @action _focusActiveService() {
+  @action _focusActiveService(focusEvent = null) {
     if (this.stores.user.isLoggedIn) {
       // TODO: add checks to not focus service when router path is /settings or /auth
       const service = this.active;
       if (service) {
         this._focusService({ serviceId: service.id });
+        if (this.stores.settings.app.splitMode && !focusEvent) {
+          setTimeout(() => {
+            document.querySelector('.services__webview-wrapper.is-active').scrollIntoView({
+              behavior: 'smooth',
+              block: 'end',
+              inline: 'nearest',
+            });
+          }, 10);
+        }
       } else {
         debug('No service is active');
       }
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
index ec48eeb40..6ab63c2ee 100644
--- a/src/stores/UIStore.ts
+++ b/src/stores/UIStore.ts
@@ -51,6 +51,13 @@ export default class UIStore extends Store {
       },
       { fireImmediately: true },
     );
+    reaction(
+      () => this.isSplitModeActive,
+      () => {
+        this._setupModeInDOM();
+      },
+      { fireImmediately: true },
+    );
   }
 
   @computed get showMessageBadgesEvenWhenMuted() {
@@ -77,6 +84,10 @@ export default class UIStore extends Store {
     );
   }
 
+  @computed get isSplitModeActive() {
+    return this.stores.settings.app.splitMode;
+  }
+
   @computed get theme() {
     const themeId =
       this.isDarkThemeActive || this.stores.settings.app.darkMode
@@ -114,4 +125,14 @@ export default class UIStore extends Store {
       body?.classList.add('theme__dark');
     }
   }
+
+  _setupModeInDOM() {
+    const body = document.querySelector('body');
+
+    if (!this.isSplitModeActive) {
+      body?.classList.remove('mode__split');
+    } else {
+      body?.classList.add('mode__split');
+    }
+  }
 }
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 49e041022..b5d4d86d0 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -82,6 +82,10 @@ body.win32:not(.isFullScreen) .app .app__content {
   height: calc(100% - 28px);
 }
 
+.mode__split .app .app__service {
+  overflow-x: auto;
+}
+
 .app {
   .app__content {
     display: flex;
diff --git a/src/styles/services.scss b/src/styles/services.scss
index 8b8c27e10..dd053e93d 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -18,6 +18,24 @@
   }
 }
 
+.mode__split .services {
+  display: flex;
+  overflow: visible;
+
+  .services__webview {
+    position: relative;
+    flex: 1 0 50%;
+
+    @media (min-width: 1280px) {
+      flex-basis: 33.33%;
+    }
+
+    @media (min-width: 2048px) {
+      flex-basis: 25%;
+    }
+  }
+}
+
 .services {
   background: #FFF;
   flex: 1;
@@ -71,7 +89,7 @@
   }
 
   .services__info-layer {
-    position: absolut;
+    position: absolute;
     z-index: 110;
   }