Render group members in the message detail view

This requires that we fetch contact info when opening a conversation
so that's available for rendering contact names and avatars.

conversation.html

@@ -102,11 +102,13 @@
                 <td>
                   <div class='contacts'>
                   {{ #contacts }}
-                    <img class='avatar' src='{{ avatar }}'>
-                    <span class='name'>{{ name }}</div>
-                    {{ #conflict }}
-                      <button class='resolve'>Key Conflict</button>
-                    {{ /conflict }}
+                    <div>
+                      <img class='avatar' src='{{ avatar }}'>
+                      <span class='name'>{{ name }}</div>
+                      {{ #conflict }}
+                        <button class='resolve'>Key Conflict</button>
+                      {{ /conflict }}
+                    </div>
                   {{ /contacts }}
                   </div>
                 </td>

js/models/conversations.js

@@ -34,6 +34,7 @@
 
     initialize: function() {
         this.messageCollection = new Whisper.MessageCollection();
+        this.contactCollection = new Whisper.ConversationCollection();
     },
 
     validate: function(attributes, options) {
@@ -143,6 +144,20 @@
         return this.messageCollection.fetchConversation(this.id, options);
     },
 
+    fetchContacts: function(options) {
+        if (this.isPrivate()) {
+            this.contactCollection.reset([this]);
+        } else {
+            this.contactCollection.reset(
+                this.get('members').map(function(number) {
+                    var c = this.collection.add({id: number, type: 'private'});
+                    c.fetch();
+                    return c;
+                }.bind(this))
+            );
+        }
+    },
+
     archive: function() {
         this.unset('active_at');
     },
@@ -165,6 +180,9 @@
         } else {
             return '';
         }
+    },
+    isPrivate: function() {
+        return this.get('type') === 'private';
     }
   });
 

js/models/messages.js

@@ -40,6 +40,9 @@
         },
         isGroupUpdate: function() {
             return !!(this.get('group_update'));
+        },
+        isIncoming: function() {
+            return this.get('type') === 'incoming';
         }
     });
 

js/panel_controller.js

@@ -43,7 +43,9 @@
 
     window.openConversation = function openConversation (modelId) {
         var conversation = conversations.add({id: modelId});
-        conversation.fetch();
+        conversation.fetch().then(function() {
+            conversation.fetchContacts();
+        });
         conversation.fetchMessages();
 
         var windowId = windowMap.windowIdFrom(modelId);

js/views/message_detail_view.js

@@ -37,10 +37,12 @@
                 sent_at: moment(this.model.get('sent_at')).toString(),
                 received_at: moment(this.model.get('received_at')).toString(),
                 tofrom: this.model.isIncoming() ? 'From' : 'To',
-                contacts: {
-                    name     : this.conversation.getTitle(),
-                    avatar   : this.conversation.get('avatar')
-                }
+                contacts: this.conversation.contactCollection.map(function(contact) {
+                    return {
+                        name     : contact.getTitle(),
+                        avatar   : contact.get('avatar'),
+                    };
+                }.bind(this))
             }));
             this.view.render().$el.prependTo(this.$el.find('.message-container'));
         }