feat(sidebar): add timestamps to related messages

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

@@ -19,11 +19,12 @@ class MessageTimestamp extends React.Component
     nowDate = @_today()
     formattedDate = @_formattedDate(msgDate, nowDate, @props.isDetailed)
     <div className={@props.className}
+         title={Utils.fullTimeString(@props.date)}
          onClick={@props.onClick}>{formattedDate}</div>
 
   _formattedDate: (msgDate, now, isDetailed) =>
     if isDetailed
-      return msgDate.format "MMMM D, YYYY [at] h:mm A"
+      return msgDate.format "MMMM D, YYYY [at] h:mm A z"
     else
       diff = now.diff(msgDate, 'days', true)
       isSameDay = now.isSame(msgDate, 'days')

internal_packages/participant-profile/lib/sidebar-related-threads.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Actions} from 'nylas-exports'
+import {Utils, Actions} from 'nylas-exports'
 
 export default class RelatedThreads extends React.Component {
   static displayName = "RelatedThreads";
@@ -53,7 +53,8 @@ export default class RelatedThreads extends React.Component {
       const onClick = () => { this._onClick(thread) }
       return (
         <div key={thread.id} className="related-thread" onClick={onClick} >
-          {thread.subject}
+          <span className="subject" title={thread.subject}>{thread.subject}</span>
+          <span className="timestamp" title={Utils.fullTimeString(thread.lastMessageReceivedTimestamp)}>{Utils.shortTimeString(thread.lastMessageReceivedTimestamp)}</span>
         </div>
       )
     })

internal_packages/participant-profile/stylesheets/participant-profile.less

@@ -13,14 +13,20 @@
   border-radius: 0 0 @border-radius-large @border-radius-large;
 
   .related-thread {
+    display: flex;
     font-size: 12px;
     color: #566f86;
     width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     padding: 0.5em 15px;
     border-top: 1px solid rgba(0,0,0,0.08);
+
+    .subject {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-right: 1em;
+    }
   }
 
   .toggle {

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

@@ -1,16 +1,9 @@
-moment = require "moment"
+{Utils} = require 'nylas-exports'
 React = require 'react'
 
 module.exports =
   timestamp: (time) ->
-    diff = moment().diff(time, 'days', true)
+    Utils.shortTimeString(time)
-    if diff <= 1
-      format = "h:mm a"
-    else if diff > 1 and diff <= 365
-      format = "MMM D"
-    else
-      format = "MMM D YYYY"
-    moment(time).format(format)
 
   subject: (subj) ->
     if (subj ? "").trim().length is 0

src/flux/models/utils.coffee

@@ -1,6 +1,7 @@
 _ = require 'underscore'
 fs = require('fs-plus')
 path = require('path')
+moment = require('moment-timezone')
 tz = Intl.DateTimeFormat().resolvedOptions().timeZone
 
 TaskRegistry = null
@@ -37,6 +38,19 @@ Utils =
 
   timeZone: tz
 
+  shortTimeString: (time) ->
+    diff = moment().diff(time, 'days', true)
+    if diff <= 1
+      format = "h:mm a"
+    else if diff > 1 and diff <= 365
+      format = "MMM D"
+    else
+      format = "MMM D YYYY"
+    moment(time).format(format)
+
+  fullTimeString: (time) ->
+    moment(time).tz(Utils.timeZone).format("dddd, MMMM Do YYYY, h:mm:ss a z")
+
   isHash: (object) ->
     _.isObject(object) and not _.isFunction(object) and not _.isArray(object)