10 files changed, 92 insertions, 23 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 9e8fb3cf5..589bb4538 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -17,6 +17,8 @@ import {
   DEFAULT_APP_SETTINGS,
   FRANZ_TRANSLATION,
   GITHUB_FRANZ_URL,
+  SPLIT_COLUMNS_MAX,
+  SPLIT_COLUMNS_MIN,
 } from '../../../config';
 import { isMac, isWindows, lockFerdiShortcutKey } from '../../../environment';
 import {
@@ -178,6 +180,10 @@ const messages = defineMessages({
     defaultMessage:
       'Official translations are English & German. All other languages are community based translations.',
   },
+  numberOfColumns: {
+    id: 'settings.app.form.splitColumns',
+    defaultMessage: 'Number of columns',
+  },
 });
 
 const Hr = () => <hr style={{ marginBottom: 20 }} />;
@@ -200,6 +206,7 @@ class EditSettingsForm extends Component {
     automaticUpdates: PropTypes.bool.isRequired,
     isDarkmodeEnabled: PropTypes.bool.isRequired,
     isAdaptableDarkModeEnabled: PropTypes.bool.isRequired,
+    isSplitModeEnabled: PropTypes.bool.isRequired,
     isNightlyEnabled: PropTypes.bool.isRequired,
     hasAddedTodosAsService: PropTypes.bool.isRequired,
     isOnline: PropTypes.bool.isRequired,
@@ -246,6 +253,7 @@ class EditSettingsForm extends Component {
       getCacheSize,
       automaticUpdates,
       isDarkmodeEnabled,
+      isSplitModeEnabled,
       isTodosActivated,
       isNightlyEnabled,
       hasAddedTodosAsService,
@@ -538,6 +546,16 @@ class EditSettingsForm extends Component {
                 <Hr />
 
                 <Toggle field={form.$('splitMode')} />
+                {isSplitModeEnabled && (
+                  <Input
+                    type="number"
+                    min={SPLIT_COLUMNS_MIN}
+                    max={SPLIT_COLUMNS_MAX}
+                    placeholder={intl.formatMessage(messages.numberOfColumns)}
+                    onChange={e => this.submit(e)}
+                    field={form.$('splitColumns')}
+                  />
+                )}
 
                 <Hr />
 
diff --git a/src/config.ts b/src/config.ts
index fb073c062..f8659970c 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -172,6 +172,9 @@ export const CUSTOM_WEBSITE_RECIPE_ID = 'franz-custom-website';
 
 export const DEFAULT_SERVICE_ORDER = 99; // something high enough that it gets added to the end of the already-added services on the left sidebar
 
+export const SPLIT_COLUMNS_MIN = 1;
+export const SPLIT_COLUMNS_MAX = 5;
+
 export const DEFAULT_APP_SETTINGS = {
   autoLaunchOnStart: false,
   autoLaunchInBackground: false,
@@ -193,6 +196,7 @@ export const DEFAULT_APP_SETTINGS = {
   spellcheckerLanguage: 'en-us',
   darkMode: false,
   splitMode: false,
+  splitColumns: 3,
   fallbackLocale: 'en-US',
   beta: false,
   isAppMuted: false,
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 64f5b2e01..c34a41039 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -169,6 +169,10 @@ const messages = defineMessages({
     id: 'settings.app.form.splitMode',
     defaultMessage: 'Enable Split View Mode',
   },
+  splitColumns: {
+    id: 'settings.app.form.splitColumns',
+    defaultMessage: 'Number of columns',
+  },
   serviceRibbonWidth: {
     id: 'settings.app.form.serviceRibbonWidth',
     defaultMessage: 'Sidebar width',
@@ -310,6 +314,7 @@ class EditSettingsScreen extends Component {
         adaptableDarkMode: Boolean(settingsData.adaptableDarkMode),
         universalDarkMode: Boolean(settingsData.universalDarkMode),
         splitMode: Boolean(settingsData.splitMode),
+        splitColumns: Number(settingsData.splitColumns),
         serviceRibbonWidth: Number(settingsData.serviceRibbonWidth),
         iconSize: Number(settingsData.iconSize),
         enableLongPressServiceHint: Boolean(
@@ -613,6 +618,11 @@ class EditSettingsScreen extends Component {
           value: settings.all.app.splitMode,
           default: DEFAULT_APP_SETTINGS.splitMode,
         },
+        splitColumns: {
+          label: intl.formatMessage(messages.splitColumns),
+          value: settings.all.app.splitColumns,
+          default: DEFAULT_APP_SETTINGS.splitColumns,
+        },
         serviceRibbonWidth: {
           label: intl.formatMessage(messages.serviceRibbonWidth),
           value: settings.all.app.serviceRibbonWidth,
@@ -725,6 +735,7 @@ class EditSettingsScreen extends Component {
           isAdaptableDarkModeEnabled={
             this.props.stores.settings.app.adaptableDarkMode
           }
+          isSplitModeEnabled={this.props.stores.settings.app.splitMode}
           isTodosActivated={this.props.stores.todos.isFeatureEnabledByUser}
           isUsingCustomTodoService={
             this.props.stores.todos.isUsingCustomTodoService
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 17ec17b3a..d6b790bd3 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -199,7 +199,7 @@ export default class WorkspacesStore extends FeatureStore {
             : 'none';
         }
       }
-    }, 1000);
+    }, 500);
   };
 
   @action _deactivateActiveWorkspace = () => {
@@ -221,7 +221,7 @@ export default class WorkspacesStore extends FeatureStore {
           wrapper.style.display = '';
         }
       }
-    }, 1000);
+    }, 500);
   };
 
   @action _toggleWorkspaceDrawer = () => {
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 2544d2a00..41263b12b 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -242,6 +242,7 @@
   "settings.app.form.showDragArea": "Show draggable area on window",
   "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
   "settings.app.form.showServiceName": "Display service name under the icon",
+  "settings.app.form.splitColumns": "Number of columns",
   "settings.app.form.splitMode": "Enable Split View Mode",
   "settings.app.form.startMinimized": "Start minimized",
   "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
diff --git a/src/i18n/locales/pl.json b/src/i18n/locales/pl.json
index 0accdac07..be9f7ee7a 100644
--- a/src/i18n/locales/pl.json
+++ b/src/i18n/locales/pl.json
@@ -242,7 +242,8 @@
   "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.showServiceName": "Display service name under the icon",
-  "settings.app.form.splitMode": "Enable Split View Mode",
+  "settings.app.form.splitColumns": "Liczba kolumn",
+  "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.types.ts b/src/stores.types.ts
index c63cdd4b8..34922c199 100644
--- a/src/stores.types.ts
+++ b/src/stores.types.ts
@@ -276,6 +276,7 @@ interface UIStore {
   actionStatus: () => void;
   isDarkThemeActive: () => void;
   isSplitModeActive: () => void;
+  splitColumnsNo: () => void;
   showMessageBadgesEvenWhenMuted: () => void;
   theme: () => void;
 }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 926ee36f0..a34390d88 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -171,6 +171,13 @@ export default class ServicesStore extends Store {
     );
 
     reaction(
+      () => this.stores.settings.app.splitColumns,
+      () => {
+        this._shareSettingsWithServiceProcess();
+      },
+    );
+
+    reaction(
       () => this.stores.settings.app.searchEngine,
       () => {
         this._shareSettingsWithServiceProcess();
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index 779f89b9f..9c194aa91 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -54,6 +54,13 @@ export default class UIStore extends Store {
       },
       { fireImmediately: true },
     );
+    reaction(
+      () => this.splitColumnsNo,
+      () => {
+        this._setupColumnsInDOM();
+      },
+      { fireImmediately: true },
+    );
   }
 
   @computed get showMessageBadgesEvenWhenMuted() {
@@ -84,6 +91,10 @@ export default class UIStore extends Store {
     return this.stores.settings.app.splitMode;
   }
 
+  @computed get splitColumnsNo() {
+    return this.stores.settings.app.splitColumns;
+  }
+
   @computed get theme() {
     const themeId =
       this.isDarkThemeActive || this.stores.settings.app.darkMode
@@ -113,22 +124,23 @@ export default class UIStore extends Store {
 
   // Reactions
   _setupThemeInDOM() {
-    const body = document.querySelector('body');
-
     if (!this.isDarkThemeActive) {
-      body?.classList.remove('theme__dark');
+      document.body.classList.remove('theme__dark');
     } else {
-      body?.classList.add('theme__dark');
+      document.body.classList.add('theme__dark');
     }
   }
 
   _setupModeInDOM() {
-    const body = document.querySelector('body');
-
     if (!this.isSplitModeActive) {
-      body?.classList.remove('mode__split');
+      document.body.classList.remove('mode__split');
     } else {
-      body?.classList.add('mode__split');
+      document.body.classList.add('mode__split');
+      document.body.dataset.columns = this.splitColumnsNo;
     }
   }
+
+  _setupColumnsInDOM() {
+    document.body.dataset.columns = this.splitColumnsNo;
+  }
 }
diff --git a/src/styles/services.scss b/src/styles/services.scss
index dd053e93d..cedfcbdd1 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -18,21 +18,35 @@
   }
 }
 
-.mode__split .services {
-  display: flex;
-  overflow: visible;
-
-  .services__webview {
-    position: relative;
-    flex: 1 0 50%;
+.mode__split {
+  .services {
+    display: flex;
+    overflow: visible;
 
-    @media (min-width: 1280px) {
-      flex-basis: 33.33%;
+    .services__webview {
+      position: relative;
+      flex: 1 0 33.33%;
     }
+  }
 
-    @media (min-width: 2048px) {
-      flex-basis: 25%;
-    }
+  &[data-columns="1"] .services .services__webview {
+    flex-basis: 100%;
+  }
+
+  &[data-columns="2"] .services .services__webview {
+    flex-basis: 50%;
+  }
+
+  &[data-columns="3"] .services .services__webview {
+    flex-basis: 33.33%;
+  }
+
+  &[data-columns="4"] .services .services__webview {
+    flex-basis: 25%;
+  }
+
+  &[data-columns="5"] .services .services__webview {
+    flex-basis: 20%;
   }
 }