fix(mode-toggle): mode toggler now toggles the sidebar rather than the list/split view. fixes T3462.

Summary:
add functioning toggling

add correct hide/show behavior for toggler

remove old hide/show button

add padding to make buttons prettier

Test Plan: tested manually. all tests remain green.

Reviewers: evan

Reviewed By: evan

Maniphest Tasks: T3462

Differential Revision: https://phab.nylas.com/D1980

internal_packages/message-list/lib/message-list.cjsx

@@ -22,34 +22,6 @@ MessageItemContainer = require './message-item-container'
  MailLabel,
  InjectedComponent} = require('nylas-component-kit')
 
-class HideSidebarButton extends React.Component
-  constructor: (@props) ->
-    @column = WorkspaceStore.Location.MessageListSidebar
-    @state = @getStateFromStores()
-
-  componentDidMount: =>
-    @unlisten = WorkspaceStore.listen => @setState(@getStateFromStores())
-
-  componentWillUnmount: =>
-    @unlisten()
-
-  render: =>
-    if @state.hidden
-      contents = {label: 'Show Sidebar', name: 'icon-thread-showsidebar.png'}
-    else
-      contents = {label: 'Hide Sidebar', name: 'icon-thread-hidesidebar.png'}
-
-    <div className="hide-sidebar-button" style={@props.style} onClick={@_onClick}>
-      <span className="img-wrap"><RetinaImg name={contents.name} mode={RetinaImg.Mode.ContentIsMask}/></span>
-      {contents.label}
-    </div>
-
-  _onClick: =>
-    Actions.toggleWorkspaceLocationHidden(@column)
-
-  getStateFromStores: =>
-    {hidden: WorkspaceStore.isLocationHidden(@column)}
-
 class MessageListScrollTooltip extends React.Component
   @displayName: 'MessageListScrollTooltip'
   @propTypes:
@@ -247,7 +219,6 @@ class MessageList extends React.Component
 
   _renderSubject: ->
     <div className="message-subject-wrap">
-      <HideSidebarButton style={float:'right'}/>
       <span className="message-subject">{@state.currentThread?.subject}</span>
       {@_renderLabels()}
     </div>

internal_packages/message-list/stylesheets/message-list.less

@@ -31,6 +31,7 @@
     order:201;
     margin-right: 0;
     padding-top:6px;
+    margin-left: @spacing-standard * 1.5;
   }
   .message-toolbar-arrow.up {
     order:202;

internal_packages/mode-switch/lib/main.coffee

@@ -1,7 +1,19 @@
 {ComponentRegistry, WorkspaceStore} = require 'nylas-exports'
 ModeToggle = require './mode-toggle'
 
+# NOTE: this is a hack to allow ComponentRegistry
+# to register the same component multiple times in
+# different areas. if we do this more than once, let's
+# dry this out.
+class ModeToggleList extends ModeToggle
+  @displayName: 'ModeToggleList'
+
 module.exports =
   activate: (state) ->
+    ComponentRegistry.register ModeToggleList,
+      location: WorkspaceStore.Sheet.Thread.Toolbar.Right
+      modes: ['list']
+
     ComponentRegistry.register ModeToggle,
-      location: WorkspaceStore.Sheet.Global.Toolbar.Right
+      location: WorkspaceStore.Sheet.Threads.Toolbar.Right
+      modes: ['split']

internal_packages/mode-switch/lib/mode-toggle.cjsx

@@ -9,6 +9,7 @@ class ModeToggle extends React.Component
   @displayName: 'ModeToggle'
 
   constructor: (@props) ->
+    @column = WorkspaceStore.Location.MessageListSidebar
     @state = @_getStateFromStores()
 
   componentDidMount: =>
@@ -20,15 +21,12 @@ class ModeToggle extends React.Component
     @_unsubscriber?()
 
   render: =>
-    return <div></div> unless @state.visible
-
-    <button className="btn btn-toolbar mode-toggle mode-#{@state.mode}"
+    <button className="btn btn-toolbar mode-toggle mode-#{@state.hidden}"
          style={order:500}
          onClick={@_onToggleMode}>
       <RetinaImg
         name="toolbar-icon-toggle-pane.png"
-        mode={RetinaImg.Mode.ContentIsMask}
-        onClick={@_onToggleMode}  />
+        mode={RetinaImg.Mode.ContentIsMask} />
     </button>
 
   _onStateChanged: =>
@@ -43,18 +41,10 @@ class ModeToggle extends React.Component
     @setState(@_getStateFromStores())
 
   _getStateFromStores: =>
-    rootModes = WorkspaceStore.rootSheet().supportedModes
-    rootVisible = WorkspaceStore.rootSheet() is WorkspaceStore.topSheet()
-
-    mode: WorkspaceStore.preferredLayoutMode()
-    visible: rootVisible and rootModes and rootModes.length > 1
+    {hidden: WorkspaceStore.isLocationHidden(@column)}
 
   _onToggleMode: =>
-    if @state.mode is 'list'
-      atom.config.set('core.workspace.mode', 'split')
-    else
-      atom.config.set('core.workspace.mode', 'list')
-    return
+    Actions.toggleWorkspaceLocationHidden(@column)
 
 
 module.exports = ModeToggle

internal_packages/mode-switch/stylesheets/mode-switch.less

@@ -8,7 +8,7 @@
       background-color: @text-color-subtle;
     }
 }
-.mode-toggle.mode-split {
+.mode-toggle.mode-false {
   .content-mask {
     background-color: @component-active-color;
   }

src/flux/stores/workspace-store.coffee

@@ -134,7 +134,7 @@ class WorkspaceStore extends NylasStore
   # You should provide one of the WorkspaceStore.Location constant values.
   isLocationHidden: (loc) =>
     return false unless loc
-    @_hiddenLocations[loc.id]
+    @_hiddenLocations[loc.id]?
 
   ###
   Managing Sheets