From f63b7e66e44baea3c410a651b9f7c5831f07bbdd Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Fri, 19 Feb 2016 18:22:28 -0800
Subject: [PATCH] feat(swipe-to-*): Gesture support and animation in thread
 list

Summary:
This diff does two things:
- It adds a new SwipeContainer that makes it easy to implement swipe gestures. This is built into listTabular, so you can create a list and define onSwipeLeft/Right to enable gestures.

- It adds support for basic add/remove animations to the thread list. This works by adding a CSS transition to `top` and also leaving removed rows around for a specified time. (these times need to match.) Pretty much just cloned the core idea from TimeoutTransitionGroup.

Test Plan: No tests yet

Reviewers: evan, juan

Reviewed By: evan

Differential Revision: https://phab.nylas.com/D2581
---
 .../message-list/lib/thread-trash-button.cjsx |   2 +-
 .../thread-list/lib/thread-buttons.cjsx       |   4 +-
 .../lib/thread-list-quick-actions.cjsx        |   4 +-
 .../thread-list/lib/thread-list.cjsx          |  19 +-
 .../thread-list/stylesheets/thread-list.less  |  74 +++++++
 spec/mailbox-perspective-spec.coffee          |  66 +++---
 src/browser/nylas-window.coffee               |   6 +
 src/components/list-tabular-item.cjsx         |   9 +-
 src/components/list-tabular.cjsx              |  76 ++++++-
 src/components/multiselect-list.cjsx          |   2 +-
 src/components/swipe-container.jsx            | 209 ++++++++++++++++++
 src/global/nylas-component-kit.coffee         |   1 +
 src/mailbox-perspective.coffee                |  41 ++--
 src/window-event-handler.coffee               |   6 +
 static/components/list-tabular.less           |   4 +
 static/components/scroll-region.less          |   1 +
 static/images/swipe/icon-swipe-archive@2x.png | Bin 0 -> 14663 bytes
 static/images/swipe/icon-swipe-snooze@2x.png  | Bin 0 -> 15573 bytes
 static/images/swipe/icon-swipe-trash@2x.png   | Bin 0 -> 15207 bytes
 19 files changed, 453 insertions(+), 71 deletions(-)
 create mode 100644 src/components/swipe-container.jsx
 create mode 100644 static/images/swipe/icon-swipe-archive@2x.png
 create mode 100644 static/images/swipe/icon-swipe-snooze@2x.png
 create mode 100644 static/images/swipe/icon-swipe-trash@2x.png

diff --git a/internal_packages/message-list/lib/thread-trash-button.cjsx b/internal_packages/message-list/lib/thread-trash-button.cjsx
index ca575a9de..22bb56761 100644
--- a/internal_packages/message-list/lib/thread-trash-button.cjsx
+++ b/internal_packages/message-list/lib/thread-trash-button.cjsx
@@ -15,7 +15,7 @@ class ThreadTrashButton extends React.Component
 
   render: =>
     focusedMailboxPerspective = FocusedPerspectiveStore.current()
-    return false unless focusedMailboxPerspective?.canTrashThreads()
+    return false unless focusedMailboxPerspective.canTrashThreads()
 
     <button className="btn btn-toolbar"
             style={order: -106}
diff --git a/internal_packages/thread-list/lib/thread-buttons.cjsx b/internal_packages/thread-list/lib/thread-buttons.cjsx
index 814dcfb8d..ac38d864e 100644
--- a/internal_packages/thread-list/lib/thread-buttons.cjsx
+++ b/internal_packages/thread-list/lib/thread-buttons.cjsx
@@ -18,7 +18,7 @@ class ThreadBulkArchiveButton extends React.Component
 
   render: ->
     mailboxPerspective = FocusedPerspectiveStore.current()
-    return false unless mailboxPerspective?.canArchiveThreads()
+    return false unless mailboxPerspective.canArchiveThreads()
 
     <button style={order:-107}
             className="btn btn-toolbar"
@@ -43,7 +43,7 @@ class ThreadBulkTrashButton extends React.Component
 
   render: ->
     mailboxPerspective = FocusedPerspectiveStore.current()
-    return false unless mailboxPerspective?.canTrashThreads()
+    return false unless mailboxPerspective.canTrashThreads()
 
     <button style={order:-106}
             className="btn btn-toolbar"
diff --git a/internal_packages/thread-list/lib/thread-list-quick-actions.cjsx b/internal_packages/thread-list/lib/thread-list-quick-actions.cjsx
index 4a0045756..17b0c434a 100644
--- a/internal_packages/thread-list/lib/thread-list-quick-actions.cjsx
+++ b/internal_packages/thread-list/lib/thread-list-quick-actions.cjsx
@@ -13,7 +13,7 @@ class ThreadArchiveQuickAction extends React.Component
     mailboxPerspective = FocusedPerspectiveStore.current()
     archive = null
 
-    if mailboxPerspective?.canArchiveThreads()
+    if mailboxPerspective.canArchiveThreads()
       archive = <div key="archive"
                      title="Archive"
                      style={{ order: 100 }}
@@ -42,7 +42,7 @@ class ThreadTrashQuickAction extends React.Component
     mailboxPerspective = FocusedPerspectiveStore.current()
     trash = null
 
-    if mailboxPerspective?.canTrashThreads()
+    if mailboxPerspective.canTrashThreads()
       trash = <div key="remove"
                    title="Trash"
                    style={{ order: 110 }}
diff --git a/internal_packages/thread-list/lib/thread-list.cjsx b/internal_packages/thread-list/lib/thread-list.cjsx
index 8b6179cb3..18cfe2ebc 100644
--- a/internal_packages/thread-list/lib/thread-list.cjsx
+++ b/internal_packages/thread-list/lib/thread-list.cjsx
@@ -98,8 +98,23 @@ class ThreadList extends React.Component
     </FluxContainer>
 
   _threadPropsProvider: (item) ->
-    className: classNames
-      'unread': item.unread
+    props =
+      className: classNames
+        'unread': item.unread
+
+    perspective = FocusedPerspectiveStore.current()
+    account = AccountStore.accountForId(item.accountId)
+    finishedName = account.defaultFinishedCategory()?.name
+
+    if finishedName is 'trash' and perspective.canTrashThreads()
+      props.onSwipeRightClass = 'swipe-trash'
+      props.onSwipeRight = -> perspective.removeThreads([item])
+
+    else if finishedName in ['archive', 'all'] and perspective.canArchiveThreads()
+      props.onSwipeRightClass = 'swipe-archive'
+      props.onSwipeRight = -> perspective.removeThreads([item])
+
+    props
 
   _threadMouseManipulateData: (event) ->
     itemThreadId = @refs.list.itemIdAtPoint(event.clientX, event.clientY)
diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less
index 1f73158f7..cf96b3ba4 100644
--- a/internal_packages/thread-list/stylesheets/thread-list.less
+++ b/internal_packages/thread-list/stylesheets/thread-list.less
@@ -48,6 +48,80 @@
     -webkit-font-smoothing: subpixel-antialiased;
   }
 
+  .swipe-backing {
+    background-color: darken(@background-primary, 10%);
+    &::after {
+      color: fade(white, 90%);
+      padding-top: 45px;
+      text-align: center;
+      font-weight: 400;
+      font-size: @font-size-small;
+      position: absolute;
+      top: 0;
+      transform: translateX(0%);
+      width: 80px;
+      bottom: 0;
+      opacity: 0.8;
+      transition: opacity linear 150ms;
+      background-repeat: no-repeat;
+      background-position: 50% 35%;
+      background-size: 24px 24px;
+    }
+
+    &.swipe-trash {
+      transition: background-color linear 150ms;
+      background-color: mix(#ed304b, @background-primary, 75%);
+      &::after {
+        transition: left linear 150ms, transform linear 150ms;
+        content: "Trash";
+        left: 0;
+        background-image: url(../static/images/swipe/icon-swipe-trash@2x.png);
+      }
+      &.confirmed {
+        background-color: #ed304b;
+        &::after {
+          left: 100%;
+          transform: translateX(-100%);
+          opacity: 1;
+        }
+      }
+    }
+    &.swipe-archive {
+      transition: background-color linear 150ms;
+      background-color: mix(#6cd420, @background-primary, 75%);
+      &::after {
+        transition: left linear 150ms, transform linear 150ms;
+        content: "Archive";
+        left: 0;
+        background-image: url(../static/images/swipe/icon-swipe-archive@2x.png);
+      }
+      &.confirmed {
+        background-color: #6cd420;
+        &::after {
+          left: 100%;
+          transform: translateX(-100%);
+          opacity: 1;
+        }
+      }
+    }
+    &.swipe-snooze {
+      background-color: mix(#8d6be3, @background-primary, 75%);
+      &::after {
+        content: "Snooze";
+        left: 0;
+        background-image: url(../static/images/swipe/icon-swipe-snooze@2x.png);
+      }
+      &.confirmed {
+        background-color: #8d6be3;
+        &::after {
+          left: 100%;
+          transform: translateX(-100%);
+          opacity: 1;
+        }
+      }
+    }
+  }
+
   .list-item {
     background-color: darken(@background-primary, 2%);
     border-bottom: 1px solid fade(@list-border, 60%);
diff --git a/spec/mailbox-perspective-spec.coffee b/spec/mailbox-perspective-spec.coffee
index 6f6aaa66f..0148011a7 100644
--- a/spec/mailbox-perspective-spec.coffee
+++ b/spec/mailbox-perspective-spec.coffee
@@ -1,9 +1,15 @@
-{AccountStore, MailboxPerspective, TaskFactory, Category, Actions, DatabaseStore} = require 'nylas-exports'
+{AccountStore,
+ MailboxPerspective,
+ TaskFactory,
+ Category,
+ Thread,
+ Actions,
+ DatabaseStore} = require 'nylas-exports'
 
 
 describe 'MailboxPerspective', ->
   beforeEach ->
-    spyOn(AccountStore, 'accountForId').andReturn {categoryIcon: -> 'icon'}
+    spyOn(AccountStore, 'accountForId').andReturn(AccountStore.accounts()[0])
     @accountIds = ['a1', 'a2', 'a3']
     @perspective = new MailboxPerspective(@accountIds)
 
@@ -51,40 +57,50 @@ describe 'MailboxPerspective', ->
 
     describe 'removeThreads', ->
       beforeEach ->
-        @threads = ['t1', 't2']
-        @taskArgs = {threads: @threads, categories: @categories}
+        @threads = [new Thread(id:'t1'), new Thread(id: 't2')]
         spyOn(Actions, 'queueTasks')
         spyOn(DatabaseStore, 'modelify').andReturn then: (cb) => cb(@threads)
 
       it 'moves the threads to finished category if in inbox', ->
-        spyOn(@perspective, 'isInbox').andReturn true
-        spyOn(@perspective, 'canTrashThreads').andReturn true
-        spyOn(@perspective, 'canArchiveThreads').andReturn true
         spyOn(TaskFactory, 'tasksForRemovingCategories')
+        @categories = [
+          new Category(name: 'inbox', accountId: 'a1')
+          new Category(name: 'inbox', accountId: 'a2')
+          new Category(name: 'inbox', accountId: 'a2')
+        ]
+        @perspective = MailboxPerspective.forCategories(@categories)
         @perspective.removeThreads(@threads)
-        @taskArgs.moveToFinishedCategory = true
-        expect(TaskFactory.tasksForRemovingCategories).toHaveBeenCalledWith(@taskArgs)
+        expect(TaskFactory.tasksForRemovingCategories).toHaveBeenCalledWith({
+          threads: @threads,
+          moveToFinishedCategory: true,
+          categories: @categories
+        })
 
       it 'moves threads to inbox if in trash', ->
-        spyOn(@perspective, 'isInbox').andReturn false
-        spyOn(@perspective, 'canTrashThreads').andReturn false
-        spyOn(@perspective, 'canArchiveThreads').andReturn true
         spyOn(TaskFactory, 'tasksForMovingToInbox')
+        @categories = [
+          new Category(name: 'trash', accountId: 'a1')
+          new Category(name: 'trash', accountId: 'a2')
+          new Category(name: 'trash', accountId: 'a2')
+        ]
+        @perspective = MailboxPerspective.forCategories(@categories)
         @perspective.removeThreads(@threads)
-        expect(TaskFactory.tasksForMovingToInbox).toHaveBeenCalledWith({threads: @threads, fromPerspective: @perspective})
+        expect(TaskFactory.tasksForMovingToInbox).toHaveBeenCalledWith({
+          threads: @threads,
+          fromPerspective: @perspective
+        })
 
       it 'removes categories if the current perspective does not correspond to archive or sent', ->
-        spyOn(@perspective, 'isInbox').andReturn false
-        spyOn(@perspective, 'canTrashThreads').andReturn true
-        spyOn(@perspective, 'canArchiveThreads').andReturn true
         spyOn(TaskFactory, 'tasksForRemovingCategories')
+        @categories = [
+          new Category(displayName: 'c1', accountId: 'a1')
+          new Category(displayName: 'c2', accountId: 'a2')
+          new Category(displayName: 'c3', accountId: 'a2')
+        ]
+        @perspective = MailboxPerspective.forCategories(@categories)
         @perspective.removeThreads(@threads)
-        @taskArgs.moveToFinishedCategory = false
-        expect(TaskFactory.tasksForRemovingCategories).toHaveBeenCalledWith(@taskArgs)
-
-      it 'does nothing otherwise', ->
-        spyOn(@perspective, 'isInbox').andReturn false
-        spyOn(@perspective, 'canTrashThreads').andReturn true
-        spyOn(@perspective, 'canArchiveThreads').andReturn false
-        @perspective.removeThreads(@threads)
-        expect(Actions.queueTasks).not.toHaveBeenCalled()
+        expect(TaskFactory.tasksForRemovingCategories).toHaveBeenCalledWith({
+          threads: @threads,
+          moveToFinishedCategory: false,
+          categories: @categories
+        })
diff --git a/src/browser/nylas-window.coffee b/src/browser/nylas-window.coffee
index 823ecda1b..21e0085da 100644
--- a/src/browser/nylas-window.coffee
+++ b/src/browser/nylas-window.coffee
@@ -162,6 +162,12 @@ class NylasWindow
     @browserWindow.on 'closed', =>
       global.application.windowManager.removeWindow(this)
 
+    @browserWindow.on 'scroll-touch-begin', =>
+      @browserWindow.webContents.send('scroll-touch-begin')
+
+    @browserWindow.on 'scroll-touch-end', =>
+      @browserWindow.webContents.send('scroll-touch-end')
+
     @browserWindow.on 'focus', =>
       @browserWindow.webContents.send('browser-window-focus')
 
diff --git a/src/components/list-tabular-item.cjsx b/src/components/list-tabular-item.cjsx
index 37b34491d..0aaf8caa6 100644
--- a/src/components/list-tabular-item.cjsx
+++ b/src/components/list-tabular-item.cjsx
@@ -1,5 +1,6 @@
 _ = require 'underscore'
 React = require 'react/addons'
+SwipeContainer = require './swipe-container'
 {Utils} = require 'nylas-exports'
 
 class ListTabularItem extends React.Component
@@ -32,9 +33,11 @@ class ListTabularItem extends React.Component
     # We only do it if the item prop has changed.
     @_columnCache ?= @_columns()
 
-    <div {...props} className={className} onClick={@_onClick} style={position:'absolute', top: @props.metrics.top, width:'100%', height:@props.metrics.height}>
-      {@_columnCache}
-    </div>
+    <SwipeContainer {...props} onClick={@_onClick} style={position:'absolute', top: @props.metrics.top, width:'100%', height:@props.metrics.height}>
+      <div className={className} style={height:@props.metrics.height}>
+        {@_columnCache}
+      </div>
+    </SwipeContainer>
 
   _columns: =>
     names = {}
diff --git a/src/components/list-tabular.cjsx b/src/components/list-tabular.cjsx
index cbfe606b2..6ba52c993 100644
--- a/src/components/list-tabular.cjsx
+++ b/src/components/list-tabular.cjsx
@@ -35,6 +35,7 @@ class ListTabular extends React.Component
 
   componentWillUnmount: =>
     window.removeEventListener('resize', @onWindowResize, true)
+    window.clearTimeout(@_cleanupAnimationTimeout) if @_cleanupAnimationTimeout
     @_unlisten?()
 
   componentWillReceiveProps: (nextProps) =>
@@ -53,15 +54,39 @@ class ListTabular extends React.Component
     dataSource ?= @props.dataSource
 
     items = {}
+    animatingOut = {}
+
     [start..end].forEach (idx) =>
       items[idx] = dataSource.get(idx)
 
+    # If we have a previous state, and the previous range matches the new range,
+    # (eg: we're not scrolling), identify removed items. We'll render them in one
+    # last time but not allocate height to them. This allows us to animate them
+    # being covered by other items, not just disappearing when others start to slide up.
+    if @state and start is @state.renderedRangeStart
+      nextIds = _.pluck(_.values(items), 'id')
+      animatingOut = {}
+
+      # Keep items which are still animating out and are still not in the set
+      for recordIdx, record of @state.animatingOut
+        if Date.now() < record.end and not (record.item.id in nextIds)
+          animatingOut[recordIdx] = record
+
+      # Add items which are no longer found in the set
+      for previousIdx, previousItem of @state.items
+        continue if !previousItem or previousItem.id in nextIds
+        animatingOut[previousIdx] =
+          item: previousItem
+          idx: previousIdx
+          end: Date.now() + 125
+
     renderedRangeStart: start
     renderedRangeEnd: end
     count: dataSource.count()
     loaded: dataSource.loaded()
     empty: dataSource.empty()
     items: items
+    animatingOut: animatingOut
 
   componentDidUpdate: (prevProps, prevState) =>
     # If our view has been swapped out for an entirely different one,
@@ -73,6 +98,23 @@ class ListTabular extends React.Component
       @updateRangeState()
     @updateRangeStateFiring = false
 
+    unless @_cleanupAnimationTimeout
+      @_cleanupAnimationTimeout = window.setTimeout(@onCleanupAnimatingItems, 50)
+
+  onCleanupAnimatingItems: =>
+    @_cleanupAnimationTimeout = null
+
+    nextAnimatingOut = {}
+    for idx, record of @state.animatingOut
+      if Date.now() < record.end
+        nextAnimatingOut[idx] = record
+
+    if Object.keys(nextAnimatingOut).length < Object.keys(@state.animatingOut).length
+      @setState(animatingOut: nextAnimatingOut)
+
+    if Object.keys(nextAnimatingOut).length > 0
+      @_cleanupAnimationTimeout = window.setTimeout(@onCleanupAnimatingItems, 50)
+
   onWindowResize: =>
     @_onWindowResize ?= _.debounce(@updateRangeState, 50)
     @_onWindowResize()
@@ -132,19 +174,29 @@ class ListTabular extends React.Component
     </div>
 
   _rows: =>
-    [@state.renderedRangeStart..@state.renderedRangeEnd-1].map (idx) =>
-      item = @state.items[idx]
-      return false unless item
+    # The ordering of the results array is important. We want current rows to
+    # slide over rows which are animating out, so we need to render them last.
+    results = []
+    for idx, record of @state.animatingOut
+      results.push @_rowForItem(record.item, idx / 1)
 
-      <ListTabularItem key={item.id ? idx}
-                       item={item}
-                       itemProps={@props.itemPropsProvider?(item, idx) ? {}}
-                       metrics={top: idx * @props.itemHeight, height: @props.itemHeight}
-                       columns={@props.columns}
-                       onSelect={@props.onSelect}
-                       onClick={@props.onClick}
-                       onReorder={@props.onReorder}
-                       onDoubleClick={@props.onDoubleClick} />
+    [@state.renderedRangeStart..@state.renderedRangeEnd].forEach (idx) =>
+      if @state.items[idx]
+        results.push @_rowForItem(@state.items[idx], idx)
+
+    results
+
+  _rowForItem: (item, idx) =>
+    return false unless item
+    <ListTabularItem key={item.id ? idx}
+                     item={item}
+                     itemProps={@props.itemPropsProvider?(item, idx) ? {}}
+                     metrics={top: idx * @props.itemHeight, height: @props.itemHeight}
+                     columns={@props.columns}
+                     onSelect={@props.onSelect}
+                     onClick={@props.onClick}
+                     onReorder={@props.onReorder}
+                     onDoubleClick={@props.onDoubleClick} />
 
   # Public: Scroll to the DOM node provided.
   #
diff --git a/src/components/multiselect-list.cjsx b/src/components/multiselect-list.cjsx
index bad5485ef..f82945760 100644
--- a/src/components/multiselect-list.cjsx
+++ b/src/components/multiselect-list.cjsx
@@ -209,7 +209,7 @@ class MultiselectList extends React.Component
   # Public Methods
 
   itemIdAtPoint: (x, y) ->
-    item = document.elementFromPoint(event.clientX, event.clientY).closest('.list-item')
+    item = document.elementFromPoint(event.clientX, event.clientY).closest('[data-item-id]')
     return null unless item
     return item.dataset.itemId
 
diff --git a/src/components/swipe-container.jsx b/src/components/swipe-container.jsx
new file mode 100644
index 000000000..c7f4da680
--- /dev/null
+++ b/src/components/swipe-container.jsx
@@ -0,0 +1,209 @@
+import React, {Component, PropTypes} from 'react';
+import _ from 'underscore';
+
+const Phase = {
+  // No wheel events received yet, container is inactive.
+  None: 'none',
+
+  // Wheel events received
+  GestureStarting: 'gesture-starting',
+
+  // Wheel events received and we are stopping event propagation.
+  GestureConfirmed: 'gesture-confirmed',
+
+  // Fingers lifted, we are animating to a final state.
+  Settling: 'settling',
+}
+
+export default class SwipeContainer extends Component {
+  static displayName = 'SwipeContainer';
+
+  static propTypes = {
+    children: PropTypes.object.isRequired,
+    onSwipeLeft: React.PropTypes.func,
+    onSwipeLeftClass: React.PropTypes.string,
+    onSwipeRight: React.PropTypes.func,
+    onSwipeRightClass: React.PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+    this.tracking = false;
+    this.phase = Phase.None;
+    this.fired = false;
+    this.state = {
+      fullDistance: 'unknown',
+      velocity: 0,
+      currentX: 0,
+      targetX: 0,
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll-touch-begin', this._onScrollTouchBegin);
+    window.addEventListener('scroll-touch-end', this._onScrollTouchEnd);
+  }
+
+  // componentWillReceiveProps(nextProps) {
+  //   if (nextProps.children !== this.props.children) {
+  //     this.setState({currentX: 0, velocity: 0, targetX: 0, settling: false});
+  //   }
+  // }
+  componentDidUpdate() {
+    if (this.phase === Phase.Settling) {
+      window.requestAnimationFrame(()=> {
+        if (this.phase === Phase.Settling) {
+          this._settle();
+        }
+      });
+    }
+  }
+  componentWillUnmount() {
+    this.phase = Phase.None;
+    window.removeEventListener('scroll-touch-begin', this._onScrollTouchBegin);
+    window.removeEventListener('scroll-touch-end', this._onScrollTouchEnd);
+  }
+
+  _isEnabled = ()=> {
+    return (this.props.onSwipeLeft || this.props.onSwipeRight);
+  }
+
+  _onWheel = (e)=> {
+    if ((this.tracking === false) || !this._isEnabled()) {
+      return;
+    }
+
+    const velocity = e.deltaX / 3;
+    const velocityConfirmsGesture = Math.abs(velocity) > 3;
+
+    if (this.phase === Phase.None) {
+      this.phase = Phase.GestureStarting;
+    }
+
+    if (velocityConfirmsGesture || (this.phase === Phase.Settling)) {
+      this.phase = Phase.GestureConfirmed;
+    }
+
+    if (this.phase === Phase.GestureConfirmed) {
+      e.preventDefault();
+    }
+
+    let {fullDistance, thresholdDistance} = this.state;
+
+    if (fullDistance === 'unknown') {
+      fullDistance = React.findDOMNode(this).clientWidth;
+      thresholdDistance = 110;
+    }
+
+    const currentX = Math.max(-fullDistance, Math.min(fullDistance, this.state.currentX + velocity));
+    const estimatedSettleX = currentX + velocity * 8;
+    let targetX = 0;
+
+    if (this.props.onSwipeLeft && (estimatedSettleX > thresholdDistance)) {
+      targetX = fullDistance;
+    }
+    if (this.props.onSwipeRight && (estimatedSettleX < -thresholdDistance)) {
+      targetX = -fullDistance;
+    }
+    this.setState({thresholdDistance, fullDistance, velocity, currentX, targetX})
+  }
+
+  _onScrollTouchBegin = ()=> {
+    this.tracking = true;
+  }
+
+  _onScrollTouchEnd = ()=> {
+    this.tracking = false;
+    if (this.phase !== Phase.None) {
+      this.phase = Phase.Settling;
+      this.fired = false;
+      this._settle();
+    }
+  }
+
+  _settle() {
+    const {currentX, targetX} = this.state;
+    let {velocity} = this.state;
+    let step = 0;
+
+    let shouldFire = false;
+    let shouldFinish = false;
+
+    if (targetX === 0) {
+      // settle
+      step = (targetX - currentX) / 6.0;
+      shouldFinish = (Math.abs(step) < 0.05);
+    } else {
+      // accelerate offscreen
+      if (Math.abs(velocity) < Math.abs((targetX - currentX) / 48.0)) {
+        velocity = (targetX - currentX) / 48.0;
+      } else {
+        velocity = velocity * 1.08;
+      }
+      step = velocity;
+
+      const fraction = Math.abs(currentX) / Math.abs(targetX);
+      shouldFire = ((fraction >= 0.8) && (!this.fired));
+      shouldFinish = (fraction >= 1.0);
+    }
+
+    if (shouldFire) {
+      this.fired = true;
+      if (targetX < 0) {
+        this.props.onSwipeRight();
+      }
+      if (targetX > 0) {
+        this.props.onSwipeLeft();
+      }
+    }
+
+    if (shouldFinish) {
+      this.phase = Phase.None;
+      this.setState({
+        velocity: 0,
+        currentX: targetX,
+        targetX: targetX,
+        thresholdDistance: 'unknown',
+        fullDistance: 'unknown',
+      });
+    } else {
+      this.phase = Phase.Settling;
+      this.setState({
+        velocity: velocity,
+        currentX: currentX + step,
+      });
+    }
+  }
+
+  render() {
+    const {currentX, targetX} = this.state;
+    const otherProps = _.omit(this.props, _.keys(this.constructor.propTypes));
+
+    const backingStyles = {top: 0, bottom: 0, position: 'absolute'};
+    let backingClass = 'swipe-backing';
+
+    if (currentX > 0) {
+      backingClass += ' ' + this.props.onSwipeLeftClass;
+      backingStyles.right = 0;
+      backingStyles.width = currentX + 1;
+      if (targetX > 0) {
+        backingClass += ' confirmed';
+      }
+    } else if (currentX < 0) {
+      backingClass += ' ' + this.props.onSwipeRightClass;
+      backingStyles.left = 0;
+      backingStyles.width = -currentX + 1;
+      if (targetX < 0) {
+        backingClass += ' confirmed';
+      }
+    }
+    return (
+      <div onWheel={this._onWheel} {...otherProps}>
+        <div style={backingStyles} className={backingClass}></div>
+        <div style={{transform: 'translate3d(' + -currentX + 'px, 0, 0)'}}>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/global/nylas-component-kit.coffee b/src/global/nylas-component-kit.coffee
index dd5442d75..82fb22f9a 100644
--- a/src/global/nylas-component-kit.coffee
+++ b/src/global/nylas-component-kit.coffee
@@ -17,6 +17,7 @@ class NylasComponentKit
   @load "Popover", 'popover'
   @load "Flexbox", 'flexbox'
   @load "RetinaImg", 'retina-img'
+  @load "SwipeContainer", 'swipe-container'
   @load "FluxContainer", 'flux-container'
   @load "ListTabular", 'list-tabular'
   @load "DraggableImg", 'draggable-img'
diff --git a/src/mailbox-perspective.coffee b/src/mailbox-perspective.coffee
index 2511e548d..9a6608a97 100644
--- a/src/mailbox-perspective.coffee
+++ b/src/mailbox-perspective.coffee
@@ -210,6 +210,8 @@ class StarredMailboxPerspective extends MailboxPerspective
     Actions.queueTask(task)
 
   removeThreads: (threadsOrIds) =>
+    unless threadsOrIds instanceof Array
+      throw new Error("removeThreads: you must pass an array of threads or thread ids")
     task = TaskFactory.taskForInvertingStarred(threads: threadsOrIds)
     Actions.queueTask(task)
 
@@ -292,7 +294,7 @@ class CategoryMailboxPerspective extends MailboxPerspective
 
   canTrashThreads: =>
     for cat in @_categories
-      return false if cat.name in ["trash"]
+      return false if cat.name in ["trash", "sent"]
     super
 
   receiveThreads: (threadsOrIds) =>
@@ -309,30 +311,23 @@ class CategoryMailboxPerspective extends MailboxPerspective
       Actions.queueTasks(tasks)
 
   removeThreads: (threadsOrIds) =>
+    unless threadsOrIds instanceof Array
+      throw new Error("removeThreads: you must pass an array of threads or thread ids")
+
     DatabaseStore.modelify(Thread, threadsOrIds).then (threads) =>
-      isTrash = not @canTrashThreads()
-      isNotArchiveOrSent = @canArchiveThreads()
+      isFinishedCategory = _.any @_categories, (cat) ->
+        cat.name in ['trash', 'archive', 'all']
 
-      tasks = null
-      categories = @categories()
-
-      if @isInbox()
-        tasks = TaskFactory.tasksForRemovingCategories({
-          threads,
-          categories,
-          moveToFinishedCategory: true
-        })
-      else if isTrash
-        tasks = TaskFactory.tasksForMovingToInbox({threads, fromPerspective: @})
-      else if isNotArchiveOrSent
-        tasks = TaskFactory.tasksForRemovingCategories({
-          threads,
-          categories,
-          moveToFinishedCategory: false
-        })
+      if isFinishedCategory
+        Actions.queueTasks(TaskFactory.tasksForMovingToInbox({
+          threads: threads,
+          fromPerspective: @
+        }))
       else
-        return
-
-      Actions.queueTasks(tasks)
+        Actions.queueTasks(TaskFactory.tasksForRemovingCategories({
+          threads: threads,
+          categories: @categories(),
+          moveToFinishedCategory: @isInbox()
+        }))
 
 module.exports = MailboxPerspective
diff --git a/src/window-event-handler.coffee b/src/window-event-handler.coffee
index 7db11a658..1d1726030 100644
--- a/src/window-event-handler.coffee
+++ b/src/window-event-handler.coffee
@@ -47,6 +47,12 @@ class WindowEventHandler
         activeElement = workspaceElement
       NylasEnv.commands.dispatch(activeElement, command, args[0])
 
+    @subscribe ipcRenderer, 'scroll-touch-begin', ->
+      window.dispatchEvent(new Event('scroll-touch-begin'))
+
+    @subscribe ipcRenderer, 'scroll-touch-end', ->
+      window.dispatchEvent(new Event('scroll-touch-end'))
+
     @subscribe $(window), 'beforeunload', =>
       # Don't hide the window here if we don't want the renderer process to be
       # throttled in case more work needs to be done before closing
diff --git a/static/components/list-tabular.less b/static/components/list-tabular.less
index e03df0f68..c2275846f 100644
--- a/static/components/list-tabular.less
+++ b/static/components/list-tabular.less
@@ -78,6 +78,10 @@
 
 
 .list-container {
+  .list-rows > div {
+    // Note: This allows rows to be animated in and out!
+    transition: top ease-out 120ms;
+  }
   .list-item {
     font-size: @font-size-base;
     color: @text-color;
diff --git a/static/components/scroll-region.less b/static/components/scroll-region.less
index 6355c0597..31a3e9160 100644
--- a/static/components/scroll-region.less
+++ b/static/components/scroll-region.less
@@ -51,6 +51,7 @@
     height: 100%;
     width: 100%;
     overflow-y: scroll;
+    overflow-x: hidden;
     z-index: 1; // Important so that content does not repaint with container
   }
 
diff --git a/static/images/swipe/icon-swipe-archive@2x.png b/static/images/swipe/icon-swipe-archive@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..51d05f68d720cf0594dd7d246a159e66402495fa
GIT binary patch
literal 14663
zcmeI3O=ufO6vxMQD6ZY~14;s=ltoD(E?w=eKCMNPV_Qxvh+JbUM5c#ky*siOOS_xh
zRV4dRM0<#HC~19Ydg%w`;!`MvLLi5lKuhVZ^wdIo=%J;h(9-r|D7dq`vh*ZNnWW@6
z3(`K#{NH=Czj-s-%iLI8xNv;zg)xNC@%(&liQGl+Gx`MizC65to!p+Z=2skqPMq;R
zL;0oCe<C#bvR*8?rNTv7HLGDoGgooAQMHH~q4ZS4Qq&FXa;tbvH!`6=?tLEObS)FQ
z9509kYZkBT^IJAv-dZTCTN`Rh3r%Im(hZpesA5;)8r6#7$c;?Mk1G?~YZgMBFL5_A
zp=mE6S1K%Wv!;!?csRkUVj{^UQ(-BdOvaM0a1l|83u07=ihLw0$3!_6;aXQHJ4URu
zt(E1a-1$~I@+%WscU?;sgnGRmu1CYBy(UPhR7wydLL|Zy1@CMcuF~KQ=Ts2nFis9T
zs;yhDZW^2yS6MY{ZYC7+61A_^b5*T&BExC1BNT;(VhK`M6#6-7YTL)E*%g0inkwK5
zu42P=h@aHg&ssNK(^)qMq-=K&OibpaP-y4wJKk!wZ)(S#yG9VSkoNU-iklV|mat>i
zY!%O4Bad>b-_yH#xidLkk-VOPW5*4BfScD7xcQ|J%ut#<t2}FC#Wn4sX;!j9l`S43
z<Ys66s^ZQT6je7ot`ljY*Qqn(op?B>xHwBHGQo=xUWybYN%o2|#fy`&D1sn?vL{Bt
z)b#RZzZh{jF2Wc<*&BnbAWd<Vhl&EVAdaTWWz()IZdR`<Ygn+1wY1P_1j=?@$+Kp~
zw8^k=HkuatH3Kid*5th5xQe0Td@f5G!n&@>acMO&iOU)vPsEda43{ylBt(^$)TA1T
z;;1Gnst>VHfbK^^=S;Qct(R74?GZx*_amWSwRN)BDHWjcM*pZO`h+=>YF>9pg>Hh%
zCH3p?X3O|$ck5wCMfZ0lOR*j7t+`C-aM885vGy+I`S@#BR#b04%c|azz*<`9YV8cG
z?b&kE|L+6_@qzo`9QAc<JZM1$p?uZgAdXpf>xzx1*GNq~+-eWvc02YaNDJOSKt=DK
zilDW7h7N1?=!~YljZG%iKt`tcvmm8~BW<0`fxhI;YNZzFV=<9jg5-U-d|`jD?+V2i
z_V@aBTrU~An~k*6^)v%7Z~qOphGp`qfU}8sJQ`06z0JKIi+TfBN;#dZVaKb?*ksG6
zx1+D)${<J3(Q*tX3;e13a~ZUfR|fL7BD7yux~I9l7#_3Hd7{T07=~j>APuU`a8VIK
z0mB7pP;G{biU<lAE=YrFGh9?eP{43O8dRI%q9TF<h6~c5+6)&J5fm_7kOtLexTuJr
zfZ>8Ps5ZkzMFa&57o<V887?X!C}6lC4XVv>Q4v7_!v$$jZH9}A2nrZ3NP}uKTvS9*
zz;HntRGZ<VB7y>j3(}z43>Os<6fj(n2GwS`sED9|;es@%Hp4|l1O*Hiq(QYAE-E4@
zV7MR+s?Bgw5kUdN1!+)ihKq^_3K%X(gK9HeR76m~a6uYW`+>N|ItKu;K~DYE$?-mO
z<U*4i4dm4Mr2;}*<S1eDErj+D$o*G@YUIq}Z&whK-$&@Ax%2uL=ZW@KJ~v%#eE<7*
z(pXb`>fARkUOaY_zdO3M{o&8|wztnty6gX({M7yWc7CLa-c8Lkn{xA|Qgi3@dzoKG
z-kI2s{)C?YIJZ-q8GV*J*F;0P`xF04d*43ySt)TVGc<f`^sA?LuYNSXJG6W0#PA#A
zpWOIhgftTE-gUHb`<a!$U)w_$-##-n`~$yt(-<25>q~MZ^59?u-MusZ<79qeiVP9u
M=N58zX0E*XA9b_bpa1{>

literal 0
HcmV?d00001

diff --git a/static/images/swipe/icon-swipe-snooze@2x.png b/static/images/swipe/icon-swipe-snooze@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..93153d6d66543cc595ee31c823d5257f5ded9bf6
GIT binary patch
literal 15573
zcmeI3dt4J&7RLv|f=02*ijRsVM5PLZnLt8FNFtE%(grcW64YvjWJ0p!WhR(_FYvL&
z$Ex*(x-5bZ>SOieZfmPnYkaZRQj2S?wyOmzBD$hfR8+Kfk|10VI_-Y?=gjAm%*nmK
zbIzUbJ@;n*xy#a0lYHrK(jf@)O-Yu@i96!_^z$aZvpk=^N8I|Gle2LM8aB@P@ko)6
zZGoWZ5M74Cs*t@SP?-$jsM?f+h1(5gLJdK}iFPxp%EPRT94uF76fy6AdYsA7sYT2z
zt_+cxC74#1Txh}43sW;xg?TEznmJKS7up3x00U-48Fqu-hzsl@rYo+1u$|2?li`wB
z^F+)zXF`TTmd22nEEt0u9>r22Q9K5ZAI|3TcpP3BBLZP_VI&fcL|74#0uCbJL@+uo
zrkGAxLW^1>kV_Lg(h<KzOs&;w7QnF0W(&7PhMO$8Fq_Zk!$<@i5y2u9EWE&IMeQsj
zKE@s7RU9dXt1LRRRcA6XoN>_{Q@&NiWI7XdULDV6Fn1<0;vMV=im)9u!|ZSb?#)T9
z>hv+^TlB7>sZ}th#|)U!iW7e9Uj58klhuT4O?{;7?Cvu$F()!vXYO9dYcTYh8n-6Q
zArN#R?bQ>{C@^EN9K%id78RB-hj^4Ry*<5Er|FuUZjqcleU2To>-unW_PE_#rQn_+
zA@QsNi3LNgCQF9Nq!+uZEbSFShD743D#myjs?r&qTqg+Oo=#me-W3m%qE<{yRAdwj
ziD0oKGT3Z^vnY8iBwBzVKoGaGM+})st<x0r7K1C`aKIRVvS$op1*uUh`m3UVS|E;E
zCD52G2GlCn8PHq|HXCz=a91Os?5rz+#H2S_h+$#kNFm%?GvMW_H9?9Ix1vTBmLe4s
z4dFVSS`ZnHsB<`oipA4#`792q!C29Jjhe;fu`xb^@Oem7jtinp2D-l%T53||JJ(A`
zX!UOl4Y<D+dWuCy>~*Lf&^Sl`TT}EB=CxGGI-ID`0-$n<`gQGQ>DcV<t*<)tI@hjb
zMlCqzTyrAkt3}tjjdku)P9N9W6`(5TekN8qmjtF3!rfZChSllW;imh4C(s=qaPK>Z
zO^X?SX+gO|xm0}z!A%;g4Ygo#xkOF;y4CKE+ugBe0wL`D2hi)fPlda+`wYFR+1F=O
z=-k)@L^Tj2LtV4L7Q(N!b!B$z70y}J=ezYB4nkZo+xgw$3-<T)%_i{$`+NF!xn>%5
zR&hi}x*pAdmvjGhZw=|hs{$sD;&LOoLbzvhPmeU69n&kMI${mu&dTIOclh+|=+!a1
zFGrxG!_hriz@NHnF5RufD+BSi0(ZWybf4zV#qc{DT~G8o2L{7YNkAH;Hie565h$Q=
zfiy^M3KuCNP(a}VX^`3!E>c9GfWigRAhju6q=-NPg$txXYE!sK5rF~<7f6HDrf`uW
z0tFN<kOrwu;UYx@3MgD44N{xJMT!U%P`E%Eq&9_%6cH$(aDg;PZ3-7DB2Yl#0%?%i
z6fROkpn$>!(jc`dT%?FV0fh^sL26UDND+Yo3KvL&)TVHeA_4^zE|3PPP2nO%1PUlz
zAPrKR!bOS*6i~Q88l*Obixd$kpm2dSNNoxiDI!on;R0!p+7vEQM4*7e1=1k3e-RhG
z>i{5TBu@R=h~s@C(Y%|)(LjbOSuTU1LgFZ4(P9XC`jWWchM;`n%;6m+1PL}l&~Ve*
zS!WU<$ZK4RG%mybUCriZQ%2_C>QCUIB_ADCe44RKx~(P7mz{IQOA-{@e!@Ft@scfr
z$NH!2-Y`D?G%S<)Dy9ylbJqKnq{aPh%_4YBn*aLh;rhMt_h+@Xeu39CG|v1_v&d%S
z6|B96-xEgSZDo916R~+oV1<|6?@IrNo)bOd2L9x|AG+oUR>oDO1=a`E%aqa8wP<|^
z(r*UMcqaN0x0YU0Q+k~nI~*~t9O3nt<{R5QU;P1XHEmS!YRUPR-ghC*4$MCCfbSvI
z`nNpFC!cL+*5*dPSA6NSzb+gx0+}SHZM1)L0V<0Uh@q->#!T<4!){~B`R67-<kkm%
z$jMu~W}jDL!ec%XI;H*Y)cUpA^8ECm>`JX4<TGIKO-*Q+&+?pBe8_@<Pb4P;hankX
zaoTgV^2$HO*G<|LQ|a-gqb*kDxhkao=v_W%WHGJqNkH0`T94sxwFNh1_j^8We`CAo
zP{5|z#VbT%9&L?Bgl5B#%l(kI?^T-SO&D5Nw0fuZN#W^F;6Gb7d?6DWPX^6?Z2w_;
z@Mlw%M*D-Z;8|@=4*%JY=Qap~&!@&Ha=%%yISC8T9@TR8aC{lB$d7lWyt)_*81bOy
ze~V68c;+}-s3`Q=wVkx`f;zwZMw|J?-eO(3|KW?zKhFLB*~`-4mX!-;BnSB)y0tBl
zJ|PiWi4~PTx)DnsbY-t9<<0ic?Q;##M;|=g7!V?A-I_n>Zt0?|OtfX`o;9>qQEQ-W
z(4htc-c&3{LmGDOnWpgh9y%u}n_aj4$w}4LXrCiHDlUy^rVU_D8b3U9L(7SUr}+nx
z8e%dFT9$^?f7S2p>f$KnwD_OW&lg9PUcU{ml4RE?vTJ7W(*_9l#j^b@4WZYbTQ20X
zn*tPLPOd8q)u9_V-hQKc89S?Hi)Y>FTMp*?@A`y1C>rSytb5_@_%48dXKdStD|R2(
zD&If1@M-+9ZOY757S_Mo4&W8jX$C>j^3nHF4}8n7)rLPfW1M$Te{4WTj890$=t0EE
z(u$IQPM-7lFZhaMTcWE<rvBs5_?WCDZdf(vsW2^jiI$hpxOUe-)7H0|($(XG!@L%(
zpP%=G{Od{eReP81aZC$qS~jD7Na|5#$WUL$Ri-1UDx~!9HQ04S|EqEz%S?|8Vbg<)
zG7mpIwQ6!pO#OuV6P^{H?-&(RWf}Keev)@--|q8cJ|1<WZS3L8<%rbB-*{2FZ%aw)
zt?<C+OSUho?_JityUugkJ4@#cwSS)LuVl64?Mj;QhT69*=-ZMX_1g0bO!P;~;r6B}
zrw`6OvOf6_jkR+Vd}L8RLJ#XEL2iY-VNQjxx$(ba9PL#rZktoucSuqX?)u~L{#WQn
zY4a-2YHlVLr7GtHO{?7J7<sX*JS?$j%7$}UYWj-{nLlP9d)iiXN-+6Z@pea$l6SyE
facA$>PwJo>|3+@AWYe|IgU2ZesnY%N%0)i|21u8_

literal 0
HcmV?d00001

diff --git a/static/images/swipe/icon-swipe-trash@2x.png b/static/images/swipe/icon-swipe-trash@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..debbad4eb06bb2a9d4e402bdd424303fa349d734
GIT binary patch
literal 15207
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
Q;V5iLajEg>J+(Xk2OqWOz5oCK

literal 0
HcmV?d00001