fix(*) Minor friday fixes - see description

- Delete should archive selection in split pane mode
- Thread list "quick actions" should be inverted when row is dark blue
- New star "action hover" state
- Multiselect list state is based on WorkspaceStore.layoutMode so add it to state

internal_packages/thread-list/lib/thread-list.cjsx

@@ -182,7 +182,7 @@ class ThreadList extends React.Component
   # Additional Commands
 
   _onArchive: =>
-    if @_viewingFocusedThread() or ThreadListStore.view().selection.count() is 0
+    if ThreadListStore.view().selection.count() is 0
       Actions.archive()
     else
       Actions.archiveSelection()

internal_packages/thread-list/stylesheets/thread-list.less

@@ -4,7 +4,7 @@
 // MIXINS
 
 .inverseContent() {
-  // Note: these styles are also applied below 
+  // Note: these styles are also applied below
   // subpixel antialiasing looks awful against dark background colors
   -webkit-font-smoothing: antialiased;
 
@@ -230,16 +230,19 @@
 
 .thread-list .list-item.focused:hover .list-column-HoverActions .inner {
   background-image: -webkit-linear-gradient(left, fade(@list-focused-bg, 0%) 0%, @list-focused-bg 50%, @list-focused-bg 100%);
+  .action {
+    -webkit-filter: invert(100%) brightness(300%);
+  }
 }
 
 
 // stars
 
-.thread-icon-star-on-hover:hover,
 .thread-list .list-item:hover .thread-icon-star-on-hover:hover {
-  background-image:url(../static/images/thread-list/icon-star-@2x.png);
+  background-image:url(../static/images/thread-list/icon-star-action-hover-@2x.png);
   background-size: 16px;
 }
+.thread-icon-star-on-hover:hover,
 .thread-list .list-item:hover .thread-icon-star-on-hover {
   background-image:url(../static/images/thread-list/icon-star-hover-@2x.png);
   background-size: 16px;
@@ -275,6 +278,8 @@
   }
 }
 
+// selection looks like focus in split mode
+
 .thread-list.handler-split {
   .list-item {
     &.selected {
@@ -283,4 +288,10 @@
       .inverseContent;
     }
   }
+  .list-item.selected:hover .list-column-HoverActions .inner {
+    background-image: -webkit-linear-gradient(left, fade(@list-focused-bg, 0%) 0%, @list-focused-bg 50%, @list-focused-bg 100%);
+    .action {
+      -webkit-filter: invert(100%) brightness(300%);
+    }
+  }
 }

src/components/multiselect-list.cjsx

@@ -97,24 +97,25 @@ class MultiselectList extends React.Component
     #
     className = @props.className
     className += " ready" if @state.ready
-    className += " " + @state.handler.cssClass()
 
-    @itemPropsProvider ?= (item) =>
-      props = @props.itemPropsProvider(item)
-      props.className ?= ''
-      props.className += " " + classNames
-        'selected': item.id in @state.selectedIds
-        'focused': @state.handler.shouldShowFocus() and item.id is @state.focusedId
-        'keyboard-cursor': @state.handler.shouldShowKeyboardCursor() and item.id is @state.keyboardCursorId
-      props
+    if @state.dataView and @state.handler
+      className += " " + @state.handler.cssClass()
 
-    emptyElement = []
-    if @props.emptyComponent
-      emptyElement = <@props.emptyComponent
-        visible={@state.ready && @state.dataView.count() is 0}
-        dataView={@state.dataView} />
+      @itemPropsProvider ?= (item) =>
+        props = @props.itemPropsProvider(item)
+        props.className ?= ''
+        props.className += " " + classNames
+          'selected': item.id in @state.selectedIds
+          'focused': @state.handler.shouldShowFocus() and item.id is @state.focusedId
+          'keyboard-cursor': @state.handler.shouldShowKeyboardCursor() and item.id is @state.keyboardCursorId
+        props
+
+      emptyElement = []
+      if @props.emptyComponent
+        emptyElement = <@props.emptyComponent
+          visible={@state.ready && @state.dataView.count() is 0}
+          dataView={@state.dataView} />
 
-    if @state.dataView
       <div className={className}>
         <ListTabular
           ref="list"
@@ -158,7 +159,7 @@ class MultiselectList extends React.Component
     @setState(@_getStateFromStores())
 
   _visible: =>
-    if WorkspaceStore.layoutMode() is "list"
+    if @state.layoutMode
       WorkspaceStore.topSheet().root
     else
       true
@@ -179,6 +180,7 @@ class MultiselectList extends React.Component
     props ?= @props
     state = @state ? {}
 
+    layoutMode = WorkspaceStore.layoutMode()
     view = props.dataStore?.view()
     return {} unless view
 
@@ -186,14 +188,14 @@ class MultiselectList extends React.Component
     # it will cause a re-render of the entire ListTabular. To know whether our
     # computed columns are still valid, we store the original columns in our state
     # along with the computed ones.
-    if props.columns isnt state.columns
+    if props.columns isnt state.columns or layoutMode isnt state.layoutMode
       computedColumns = [].concat(props.columns)
-      if WorkspaceStore.layoutMode() is 'list'
+      if layoutMode is 'list'
         computedColumns.splice(0, 0, @_getCheckmarkColumn())
     else
       computedColumns = state.computedColumns
 
-    if WorkspaceStore.layoutMode() is 'list'
+    if layoutMode is 'list'
       handler = new MultiselectListInteractionHandler(view, props.collection)
     else
       handler = new MultiselectSplitInteractionHandler(view, props.collection)
@@ -203,6 +205,7 @@ class MultiselectList extends React.Component
     ready: view.loaded()
     columns: props.columns
     computedColumns: computedColumns
+    layoutMode: layoutMode
     selectedIds: view.selection.ids()
     focusedId: FocusedContentStore.focusedId(props.collection)
     keyboardCursorId: FocusedContentStore.keyboardCursorId(props.collection)