From 244a28dffabdf8df091d67ba9ad393b06c44f9d4 Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Thu, 14 Apr 2016 17:33:43 -0400
Subject: [PATCH] fix(related-threads): Show snippet in addition to subject
 #1683

---
 .../lib/sidebar-related-threads.jsx                    | 10 ++++++++--
 .../stylesheets/participant-profile.less               |  6 +++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/internal_packages/participant-profile/lib/sidebar-related-threads.jsx b/internal_packages/participant-profile/lib/sidebar-related-threads.jsx
index ce730c70f..f1a25db17 100644
--- a/internal_packages/participant-profile/lib/sidebar-related-threads.jsx
+++ b/internal_packages/participant-profile/lib/sidebar-related-threads.jsx
@@ -50,11 +50,17 @@ export default class RelatedThreads extends React.Component {
     const height = ((limit + (this._hasToggle() ? 1 : 0)) * 31);
     const shownThreads = this.props.contactThreads.slice(0, limit)
     const threads = shownThreads.map((thread) => {
+      const {snippet, subject, lastMessageReceivedTimestamp} = thread;
+      const snippetStyles = (subject && subject.length) ? {marginLeft: '1em'} : {};
       const onClick = () => { this._onClick(thread) }
+
       return (
         <div key={thread.id} className="related-thread" onClick={onClick} >
-          <span className="subject" title={thread.subject}>{thread.subject}</span>
-          <span className="timestamp" title={Utils.fullTimeString(thread.lastMessageReceivedTimestamp)}>{Utils.shortTimeString(thread.lastMessageReceivedTimestamp)}</span>
+          <span className="content" title={subject}>
+            {subject}
+            <span className="snippet" style={snippetStyles}>{snippet}</span>
+          </span>
+          <span className="timestamp" title={Utils.fullTimeString(lastMessageReceivedTimestamp)}>{Utils.shortTimeString(lastMessageReceivedTimestamp)}</span>
         </div>
       )
     })
diff --git a/internal_packages/participant-profile/stylesheets/participant-profile.less b/internal_packages/participant-profile/stylesheets/participant-profile.less
index a566bfc87..42306781a 100644
--- a/internal_packages/participant-profile/stylesheets/participant-profile.less
+++ b/internal_packages/participant-profile/stylesheets/participant-profile.less
@@ -24,12 +24,16 @@
       background: darken(#f9fcfe, 5%);
     }
 
-    .subject {
+    .content {
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       padding-right: 1em;
+
+      .snippet {
+        opacity: 0.5;
+      }
     }
   }