Move identity conflicts to top of message detail

Also restyle them as with network errors

// FREEBIE

_locales/en/messages.json

@@ -17,6 +17,9 @@
     "verify": {
       "message": "Verify"
     },
+    "newIdentity": {
+      "message": "New Identity"
+    },
     "outgoingKeyConflict": {
       "message": "This contact's identity key has changed. Click to process and display."
     },

background.html

@@ -173,10 +173,17 @@
     <div class='container'>
       {{ #hasRetry }}
         <div class='hasRetry clearfix'>
-          <div class='retryMessage'>{{ failedToSend }}</div>
+          <h3 class='retryMessage'>{{ failedToSend }}</h3>
           <button class='retry'>{{ resend }}</button>
         </div>
       {{ /hasRetry }}
+      {{ #hasConflict }}
+        <div class='hasConflict clearfix'>
+          <h3>{{ hasConflict }}</h3>
+          <div class='conflicts'>
+          </div>
+        </div>
+      {{ /hasConflict }}
       <div class='message-container'></div>
       <div class='info'>
         <table>

js/views/message_detail_view.js

@@ -101,7 +101,11 @@
                 conflict: conflict,
                 errors: this.errors[contact.id]
             }).render();
-            this.$('.contacts').append(v.el);
+            if (conflict) {
+                this.$('.conflicts').append(v.el);
+            } else {
+                this.$('.contacts').append(v.el);
+            }
         },
         render: function() {
             this.errors = _.groupBy(this.model.get('errors'), 'number');
@@ -110,6 +114,10 @@
                         e.name === 'OutgoingMessageError' ||
                         e.name === 'SendMessageNetworkError');
             });
+            var hasConflict = false;
+            if (this.model.hasKeyConflicts()) {
+                hasConflict = i18n('newIdentity');
+            }
             this.$el.html(Mustache.render(_.result(this, 'template', ''), {
                 sent_at     : moment(this.model.get('sent_at')).toString(),
                 received_at : this.model.isIncoming() ? moment(this.model.get('received_at')).toString() : null,
@@ -121,7 +129,8 @@
                 resend      : i18n('resend'),
                 failedToSend: i18n('failedToSend'),
                 errorLabel  : i18n('error'),
-                hasRetry    : hasRetry
+                hasRetry    : hasRetry,
+                hasConflict : hasConflict
             }));
             this.view.$el.prependTo(this.$('.message-container'));
 

stylesheets/_conversation.scss

@@ -94,16 +94,13 @@
     height: calc(100% - (#{$header-height} + 4px));
   }
 
+  .hasConflict,
   .hasRetry {
     background: #F3F3A7;
     padding: 10px 20px;
     margin: 0 5px;
     border-radius: 5px;
 
-    .retryMessage {
-      font-weight: bold;
-    }
-
     button {
       margin: 5px;
       background: $blue;

stylesheets/manifest.css

@@ -649,13 +649,13 @@ input.search {
 
 .message-detail .container {
   height: calc(100% - (36px + 4px)); }
+.message-detail .hasConflict,
 .message-detail .hasRetry {
   background: #F3F3A7;
   padding: 10px 20px;
   margin: 0 5px;
   border-radius: 5px; }
-  .message-detail .hasRetry .retryMessage {
+  .message-detail .hasConflict button,
-    font-weight: bold; }
   .message-detail .hasRetry button {
     margin: 5px;
     background: #2090ea;
@@ -665,8 +665,10 @@ input.search {
     color: white;
     padding: 0.5em;
     font-weight: bold; }
+    .message-detail .hasConflict button span,
     .message-detail .hasRetry button span {
       vertical-align: middle; }
+    .message-detail .hasConflict button:before,
     .message-detail .hasRetry button:before {
       content: '';
       display: inline-block;