Enable Split View Mode (#1926)

2 files changed, 38 insertions, 1 deletions

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