Decorate incoming group messages

with numbers and image placeholders, so you know who's saying what.

index.html

@@ -52,6 +52,8 @@
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='message'>
+            <div class='sender'>{{ sender }}</div>
+            <img class='avatar' src='{{ contact_avatar }}'>
             <div class='bubble bubble_context {{ bubble_class }}'>
             <ul class='volley'>
                 <li class='message'>

js/views/message_view.js

@@ -24,7 +24,8 @@ var Whisper = Whisper || {};
           message: this.model.get('body'),
           date: this.formatTimestamp(),
           attachments: this.model.get('attachments'),
-          bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming'
+          bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
+          sender: this.model.thread().get('type') === 'group' ? this.model.get('person') : ''
         })
       );
 

stylesheets/index.css

@@ -36,3 +36,23 @@ ul.discussion {
 .conversation .bootstrap-tagsinput {
   max-width: 40%;
 }
+
+li.entry .sender {
+  font-size: 0.75em;
+  opacity: 0.54;
+}
+
+li.entry .avatar {
+  height:32px;
+  width:32px;
+  border-radius:32px;
+  cursor:pointer;
+  display:inline-block;
+  float:left;
+  clear:both;
+  background-color:whitesmoke;
+}
+
+li.entry.outgoing .avatar {
+  display: none;
+}