Move error messages to message detail view

Change how message errors are rendered. Errors associated with a number
will be shown under that number in the detail view rather than piling up
in the message bubble.

// FREEBIE

js/models/messages.js

@@ -58,6 +58,9 @@
             if (this.isIncoming() && this.hasKeyConflicts()) {
                 return 'Received message with unknown identity key.';
             }
+            if (this.isIncoming() && this.hasErrors()) {
+                return 'Error decrypting incoming message.';
+            }
 
             return this.get('body');
         },
@@ -111,6 +114,9 @@
         isOutgoing: function() {
             return this.get('type') === 'outgoing';
         },
+        hasErrors: function() {
+            return _.size(this.get('errors')) > 0;
+        },
         hasKeyConflicts: function() {
             return _.any(this.get('errors'), function(e) {
                 return (e.name === 'IncomingIdentityKeyError' ||

js/views/message_detail_view.js

@@ -10,6 +10,7 @@
         templateName: 'contact-detail',
         initialize: function(options) {
             this.conflict = options.conflict;
+            this.errors = options.errors;
         },
         events: {
             'click .conflict': 'triggerConflict'
@@ -21,7 +22,8 @@
             return {
                 name     : this.model.getTitle(),
                 avatar   : this.model.getAvatar(),
-                conflict : this.conflict
+                conflict : this.conflict,
+                errors   : this.errors
             };
         }
     });
@@ -32,6 +34,7 @@
         initialize: function(options) {
             this.view = new Whisper.MessageView({model: this.model});
             this.conversation = options.conversation;
+            this.errors = _.groupBy(this.model.get('errors'), 'number');
 
             this.listenTo(this.model, 'change', this.render);
         },
@@ -79,7 +82,8 @@
         renderContact: function(contact) {
             var v = new ContactView({
                 model: contact,
-                conflict: this.model.getKeyConflict(contact.id)
+                conflict: this.model.getKeyConflict(contact.id),
+                errors: this.errors[contact.id]
             }).render().$el.appendTo(this.$('.contacts'));
         },
         render: function() {
@@ -87,6 +91,7 @@
                 sent_at     : moment(this.model.get('sent_at')).toString(),
                 received_at : moment(this.model.get('received_at')).toString(),
                 tofrom      : this.model.isIncoming() ? 'From' : 'To',
+                errors      : this.errors['undefined']
             }));
             this.view.render().$el.prependTo(this.$('.message-container'));
 

js/views/message_view.js

@@ -32,6 +32,10 @@
         renderDelivered: function() {
             if (this.model.get('delivered')) { this.$el.addClass('delivered'); }
         },
+        renderErrors: function() {
+            var errors = this.model.get('errors');
+            if (_.size(errors) > 0) { this.$el.addClass('error'); }
+        },
         renderControl: function() {
             if (this.model.isEndSession() || this.model.isGroupUpdate()) {
                 this.$el.addClass('control');
@@ -59,6 +63,7 @@
 
             this.renderSent();
             this.renderDelivered();
+            this.renderErrors();
             this.renderControl();
 
             this.$('.attachments').append(
@@ -69,17 +74,6 @@
                 })
             );
 
-            var errors = this.model.get('errors');
-            if (errors && errors.length) {
-                this.$('.bubble').prepend(
-                    errors.map(function(error) {
-                        return new Whisper.MessageErrorView({
-                            model: error,
-                            message: this.model
-                        }).render().el;
-                    }.bind(this))
-                );
-            }
             return this;
         }
     });