From 944eeeb1ccfe08d87cbe70273d2bce33aee914af Mon Sep 17 00:00:00 2001
From: Ben Gotow <ben@foundry376.com>
Date: Tue, 19 Jan 2021 01:25:02 -0600
Subject: [PATCH] Switch from creating a separate column to scoping ThreadList
 to split+list modes

---
 app/internal_packages/thread-list/lib/main.ts |  4 +-
 .../thread-list/lib/thread-list-vertical.tsx  | 42 +++++++++++--------
 app/src/flux/stores/workspace-store.ts        | 15 ++++---
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/app/internal_packages/thread-list/lib/main.ts b/app/internal_packages/thread-list/lib/main.ts
index af6e6f843..2ee94c107 100644
--- a/app/internal_packages/thread-list/lib/main.ts
+++ b/app/internal_packages/thread-list/lib/main.ts
@@ -16,10 +16,12 @@ export function activate() {
 
   ComponentRegistry.register(ThreadList, {
     location: WorkspaceStore.Location.ThreadList,
+    modes: ['split', 'list'],
   });
 
   ComponentRegistry.register(ThreadListVertical, {
-    location: WorkspaceStore.Location.ThreadListVertical,
+    location: WorkspaceStore.Location.ThreadList,
+    modes: ['splitVertical'],
   });
 
   ComponentRegistry.register(SelectedItemsStack, {
diff --git a/app/internal_packages/thread-list/lib/thread-list-vertical.tsx b/app/internal_packages/thread-list/lib/thread-list-vertical.tsx
index 5e0cdb4c4..e9363e389 100644
--- a/app/internal_packages/thread-list/lib/thread-list-vertical.tsx
+++ b/app/internal_packages/thread-list/lib/thread-list-vertical.tsx
@@ -3,24 +3,30 @@ import { InjectedComponentSet } from 'mailspring-component-kit';
 import { WorkspaceStore } from 'mailspring-exports';
 
 class ThreadListVertical extends React.Component<{}, { style: string; syncing: boolean }> {
-    static displayName = 'ThreadListVertical';
-
-    render() {
-
-        return (
-            <>
-                <div style={{ height: '50%', width: '100%', boxShadow: '0 0.5px 0 #dddddd' }}>
-                    <InjectedComponentSet
-                        matching={{ location: WorkspaceStore.Location.ThreadList }} />
-                </div>
-                <div style={{ height: '50%', width: '100%' }}>
-                    <InjectedComponentSet
-                        matching={{ location: WorkspaceStore.Location.MessageList }} />
-                </div>
-            </>
-        );
-    }
+  static displayName = 'ThreadListVertical';
+  static containerRequired = false;
 
+  render() {
+    return (
+      <>
+        <div style={{ height: '50%', width: '100%', boxShadow: '0 0.5px 0 #dddddd' }}>
+          <InjectedComponentSet
+            matching={{ location: WorkspaceStore.Location.ThreadList, modes: ['split'] }}
+          />
+        </div>
+        <div className="sheet-toolbar">
+          <InjectedComponentSet
+            matching={{ location: WorkspaceStore.Location.MessageList.Toolbar, modes: ['split'] }}
+          />
+        </div>
+        <div style={{ height: '50%', width: '100%' }}>
+          <InjectedComponentSet
+            matching={{ location: WorkspaceStore.Location.MessageList, modes: ['split'] }}
+          />
+        </div>
+      </>
+    );
+  }
 }
 
-export default ThreadListVertical;
\ No newline at end of file
+export default ThreadListVertical;
diff --git a/app/src/flux/stores/workspace-store.ts b/app/src/flux/stores/workspace-store.ts
index 57abed19a..c9b05983a 100644
--- a/app/src/flux/stores/workspace-store.ts
+++ b/app/src/flux/stores/workspace-store.ts
@@ -119,7 +119,7 @@ class WorkspaceStore extends MailspringStore {
         {
           list: ['RootSidebar', 'ThreadList'],
           split: ['RootSidebar', 'ThreadList', 'MessageList', 'MessageListSidebar'],
-          splitVertical: ['RootSidebar', 'ThreadListVertical', 'MessageListSidebar'],
+          splitVertical: ['RootSidebar', 'ThreadList', 'MessageListSidebar'],
         }
       );
       this.defineSheet('Thread', {}, { list: ['MessageList', 'MessageListSidebar'] });
@@ -196,7 +196,6 @@ class WorkspaceStore extends MailspringStore {
   };
 
   _onSelectLayoutMode = mode => {
-
     if (mode === this._preferredLayoutMode) {
       return;
     }
@@ -223,9 +222,15 @@ class WorkspaceStore extends MailspringStore {
         {
           'core:pop-sheet': () => this.popSheet(),
         },
-        this._preferredLayoutMode === 'list' ? { 'navigation:list-mode-on': () => this._onSelectLayoutMode('list') } : { 'navigation:list-mode-off': () => this._onSelectLayoutMode('list') },
-        this._preferredLayoutMode === 'split' ? { 'navigation:split-mode-on': () => this._onSelectLayoutMode('split') } : { 'navigation:split-mode-off': () => this._onSelectLayoutMode('split') },
-        this._preferredLayoutMode === 'splitVertical' ? { 'navigation:splitVertical-mode-on': () => this._onSelectLayoutMode('splitVertical') } : { 'navigation:splitVertical-mode-off': () => this._onSelectLayoutMode('splitVertical') },
+        this._preferredLayoutMode === 'list'
+          ? { 'navigation:list-mode-on': () => this._onSelectLayoutMode('list') }
+          : { 'navigation:list-mode-off': () => this._onSelectLayoutMode('list') },
+        this._preferredLayoutMode === 'split'
+          ? { 'navigation:split-mode-on': () => this._onSelectLayoutMode('split') }
+          : { 'navigation:split-mode-off': () => this._onSelectLayoutMode('split') },
+        this._preferredLayoutMode === 'splitVertical'
+          ? { 'navigation:splitVertical-mode-on': () => this._onSelectLayoutMode('splitVertical') }
+          : { 'navigation:splitVertical-mode-off': () => this._onSelectLayoutMode('splitVertical') }
       )
     );
   }