Add split mode toggle to side bar and hide collapse buttonv6.0.0-nightly-alphrag.57.7

8 files changed, 96 insertions, 2 deletions

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 0d3a7c20c..1d3c81dcd 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -14,6 +14,7 @@ import {
   mdiMenu,
   mdiChevronDown,
   mdiChevronRight,
+  mdiViewSplitVertical,
 } from '@mdi/js';
 
 import Tabbar from '../services/tabs/Tabbar';
@@ -23,6 +24,7 @@ import {
   todosToggleShortcutKey,
   workspaceToggleShortcutKey,
   addNewServiceShortcutKey,
+  splitModeToggleShortcutKey,
   muteFerdiumShortcutKey,
 } from '../../environment';
 import { todosStore } from '../../features/todos';
@@ -37,6 +39,10 @@ const messages = defineMessages({
     id: 'sidebar.addNewService',
     defaultMessage: 'Add new service',
   },
+  splitModeToggle: {
+    id: 'sidebar.splitModeToggle',
+    defaultMessage: 'Split Mode Toggle',
+  },
   mute: {
     id: 'sidebar.muteApp',
     defaultMessage: 'Disable notifications & audio',
@@ -137,11 +143,14 @@ class Sidebar extends Component {
       isTodosServiceActive,
     } = this.props;
     const {
+      hideCollapseButton,
       hideRecipesButton,
       hideWorkspacesButton,
       hideNotificationsButton,
       hideSettingsButton,
-      useVerticalStyle
+      hideSplitModeButton,
+      useVerticalStyle,
+      splitMode,
     } = stores.settings.app;
     const { intl } = this.props;
     const todosToggleMessage = todosStore.isTodosPanelVisible
@@ -157,6 +166,7 @@ class Sidebar extends Component {
       !hideWorkspacesButton,
       !hideNotificationsButton,
       !hideSettingsButton,
+      !hideSplitModeButton,
       todosStore.isFeatureEnabledByUser
     ].filter(Boolean).length;
 
@@ -169,7 +179,7 @@ class Sidebar extends Component {
           useVerticalStyle={stores.settings.all.app.useVerticalStyle}
         />
         <>
-          {numberActiveButtons <= 1 ? (
+          {numberActiveButtons <= 1 || hideCollapseButton ? (
             null
           ) :
             <button
@@ -199,6 +209,25 @@ class Sidebar extends Component {
               <Icon icon={mdiPlusBox} size={1.5} />
             </button>
           ) : null}
+          {!hideSplitModeButton && !this.state.isCollapsed ? (
+            <button
+              type="button"
+              onClick={() => {
+                actions.settings.update({
+                  type: 'app',
+                  data: {
+                    splitMode: !splitMode,
+                  },
+                });
+              }}
+              className="sidebar__button sidebar__button--split-mode-toggle"
+              data-tip={`${intl.formatMessage(
+                messages.splitModeToggle,
+              )} (${splitModeToggleShortcutKey(false)})`}
+            >
+              <Icon icon={mdiViewSplitVertical} size={1.5} />
+            </button>
+          ) : null}
           {!hideWorkspacesButton && !this.state.isCollapsed ? (
             <button
               type="button"
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 3d46fd376..ce090ea99 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -679,8 +679,12 @@ class EditSettingsForm extends Component {
 
                 <Toggle field={form.$('useVerticalStyle')} />
 
+                <Toggle field={form.$('hideCollapseButton')} />
+
                 <Toggle field={form.$('hideRecipesButton')} />
 
+                <Toggle field={form.$('hideSplitModeButton')} />
+
                 <Toggle field={form.$('hideWorkspacesButton')} />
 
                 <Toggle field={form.$('hideNotificationsButton')} />
diff --git a/src/config.ts b/src/config.ts
index 9791d27a6..9a459f338 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -262,7 +262,9 @@ export const DEFAULT_APP_SETTINGS = {
   navigationBarBehaviour: 'custom',
   searchEngine: SEARCH_ENGINE_STARTPAGE,
   useVerticalStyle: false,
+  hideCollapseButton: false,
   hideRecipesButton: false,
+  hideSplitModeButton: true,
   useGrayscaleServices: false,
   grayscaleServicesDim: 50,
   hideWorkspacesButton: false,
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 898a2f482..867db6f08 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -206,10 +206,18 @@ const messages = defineMessages({
     id: 'settings.app.form.useVerticalStyle',
     defaultMessage: 'Use horizontal style',
   },
+  hideCollapseButton: {
+    id: 'settings.app.form.hideCollapseButton',
+    defaultMessage: 'Hide Collapse button',
+  },
   hideRecipesButton: {
     id: 'settings.app.form.hideRecipesButton',
     defaultMessage: 'Hide Recipes button',
   },
+  hideSplitModeButton: {
+    id: 'settings.app.form.hideSplitModeButton',
+    defaultMessage: 'Hide Split Mode button',
+  },
   useGrayscaleServices: {
     id: 'settings.app.form.useGrayscaleServices',
     defaultMessage: 'Use grayscale services',
@@ -369,7 +377,9 @@ class EditSettingsScreen extends Component {
           settingsData.enableLongPressServiceHint,
         ),
         useVerticalStyle: Boolean(settingsData.useVerticalStyle),
+        hideCollapseButton: Boolean(settingsData.hideCollapseButton),
         hideRecipesButton: Boolean(settingsData.hideRecipesButton),
+        hideSplitModeButton: Boolean(settingsData.hideSplitModeButton),
         useGrayscaleServices: Boolean(settingsData.useGrayscaleServices),
         grayscaleServicesDim: Number(settingsData.grayscaleServicesDim),
         hideWorkspacesButton: Boolean(settingsData.hideWorkspacesButton),
@@ -733,11 +743,21 @@ class EditSettingsScreen extends Component {
           value: settings.all.app.useVerticalStyle,
           default: DEFAULT_APP_SETTINGS.useVerticalStyle,
         },
+        hideCollapseButton: {
+          label: intl.formatMessage(messages.hideCollapseButton),
+          value: settings.all.app.hideCollapseButton,
+          default: DEFAULT_APP_SETTINGS.hideCollapseButton,
+        },
         hideRecipesButton: {
           label: intl.formatMessage(messages.hideRecipesButton),
           value: settings.all.app.hideRecipesButton,
           default: DEFAULT_APP_SETTINGS.hideRecipesButton,
         },
+        hideSplitModeButton: {
+          label: intl.formatMessage(messages.hideSplitModeButton),
+          value: settings.all.app.hideSplitModeButton,
+          default: DEFAULT_APP_SETTINGS.hideSplitModeButton,
+        },
         useGrayscaleServices: {
           label: intl.formatMessage(messages.useGrayscaleServices),
           value: settings.all.app.useGrayscaleServices,
diff --git a/src/environment.ts b/src/environment.ts
index 631a4343c..7208b16b6 100644
--- a/src/environment.ts
+++ b/src/environment.ts
@@ -37,5 +37,7 @@ export const muteFerdiumShortcutKey = (isAccelerator = true) =>
   `${cmdOrCtrlShortcutKey(isAccelerator)}+${shiftKey(isAccelerator)}+M`;
 export const addNewServiceShortcutKey = (isAccelerator = true) =>
   `${cmdOrCtrlShortcutKey(isAccelerator)}+N`;
+export const splitModeToggleShortcutKey = (isAccelerator = true) =>
+  `${cmdOrCtrlShortcutKey(isAccelerator)}+${altKey(isAccelerator)}+S`;
 export const settingsShortcutKey = (isAccelerator = true) =>
   `${cmdOrCtrlShortcutKey(isAccelerator)}+${isMac ? ',' : 'P'}`;
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 09c793bfe..412b2cadc 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1115,6 +1115,19 @@
         }
       },
       {
+        "defaultMessage": "!!!Split Mode Toggle",
+        "end": {
+          "column": 3,
+          "line": 27
+        },
+        "file": "src/components/layout/Sidebar.js",
+        "id": "sidebar.splitModeToggle",
+        "start": {
+          "column": 17,
+          "line": 24
+        }
+      },
+      {
         "defaultMessage": "!!!Disable notifications & audio",
         "end": {
           "column": 3,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index f51c798ac..ccb21a39a 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -132,6 +132,7 @@
   "menu.view.toggleDevTools": "Toggle Developer Tools",
   "menu.view.toggleFullScreen": "Toggle Full Screen",
   "menu.view.toggleNavigationBar": "Toggle Navigation Bar",
+  "menu.view.splitModeToggle": "Toggle Split Mode",
   "menu.view.toggleServiceDevTools": "Toggle Service Developer Tools",
   "menu.view.toggleTodosDevTools": "Toggle Todos Developer Tools",
   "menu.view.zoomIn": "Zoom In",
@@ -218,7 +219,9 @@
   "settings.app.form.hibernateOnStartup": "Keep services in hibernation on startup",
   "settings.app.form.hibernationStrategy": "Hibernation strategy",
   "settings.app.form.hideNotificationsButton": "Hide Notifications & Sound button",
+  "settings.app.form.hideCollapseButton": "Hide Collapse button",
   "settings.app.form.hideRecipesButton": "Hide Recipes button",
+  "settings.app.form.hideSplitModeButton": "Hide Split Mode button",
   "settings.app.form.hideSettingsButton": "Hide Settings button",
   "settings.app.form.hideWorkspacesButton": "Hide Workspace Drawer button",
   "settings.app.form.iconSize": "Service icon size",
@@ -419,6 +422,7 @@
   "setupAssistant.subheadline": "Choose from our most used services and get back on top of your messaging now.",
   "setupAssistant.submit.label": "Let's go",
   "sidebar.addNewService": "Add new service",
+  "sidebar.splitModeToggle": "Split Mode Toggle",
   "sidebar.closeTodosDrawer": "Close Ferdium Todos",
   "sidebar.closeWorkspaceDrawer": "Close workspace drawer",
   "sidebar.lockFerdium": "Lock Ferdium",
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 900375c2f..54c8c0b77 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -25,6 +25,7 @@ import {
   todosToggleShortcutKey,
   workspaceToggleShortcutKey,
   addNewServiceShortcutKey,
+  splitModeToggleShortcutKey,
   muteFerdiumShortcutKey,
 } from '../environment';
 import { aboutAppDetails, ferdiumVersion } from '../environment-remote';
@@ -128,6 +129,10 @@ const menuItems = defineMessages({
     id: 'menu.view.toggleNavigationBar',
     defaultMessage: 'Toggle Navigation Bar',
   },
+  splitModeToggle: {
+    id: 'menu.view.splitModeToggle',
+    defaultMessage: 'Toggle Split Mode',
+  },
   toggleDarkMode: {
     id: 'menu.view.toggleDarkMode',
     defaultMessage: 'Toggle Dark Mode',
@@ -479,6 +484,21 @@ const _titleBarTemplateFactory = (intl, locked) => [
         }
       },
       {
+        label: intl.formatMessage(menuItems.splitModeToggle),
+        accelerator: `${splitModeToggleShortcutKey()}`,
+        role: 'splitModeToggle',
+        type: 'checkbox',
+        checked: window['ferdium'].stores.settings.app.splitMode,
+        click: () => {
+          window['ferdium'].actions.settings.update({
+            type: 'app',
+            data: {
+              splitMode: !window['ferdium'].stores.settings.app.splitMode,
+            }
+          });
+        }
+      },
+      {
         label: intl.formatMessage(menuItems.toggleDarkMode),
         type: 'checkbox',
         accelerator: `${cmdOrCtrlShortcutKey()}+${shiftKey()}+D`,