Render conversation titles

background.html

@@ -32,6 +32,7 @@
                 <li><a class='destroy'>Delete messages</a></li>
             </ul>
           </div>
+        <span class='conversation-title'>{{ title }}</span>
       </div>
 
       <div class='discussion-container'></div>

js/views/conversation_view.js

@@ -24,7 +24,10 @@
         },
         template: $('#conversation').html(),
         render_attributes: function() {
-            return { group: this.model.get('type') === 'group' };
+            return {
+                group: this.model.get('type') === 'group',
+                title: this.model.getTitle()
+            };
         },
         initialize: function(options) {
             this.listenTo(this.model, 'destroy', this.stopListening);
@@ -34,7 +37,7 @@
             this.appWindow = options.appWindow;
             new Whisper.WindowControlsView({
                 appWindow: this.appWindow
-            }).$el.appendTo(this.$('#header'));
+            }).$el.insertAfter(this.$('.menu'));
 
             this.fileInput = new Whisper.FileInputView({
                 el: this.$('.attachments'),

js/views/window_controls_view.js

@@ -18,6 +18,7 @@
     window.Whisper = window.Whisper || {};
 
     Whisper.WindowControlsView = Whisper.View.extend({
+        tagName: 'span',
         className: 'window-controls',
         template: $('#window-controls').html(),
         initialize: function(options) {

stylesheets/_conversation.scss

@@ -4,6 +4,10 @@
   .file-input .close {
     top: -10px;
   }
+
+  .conversation-title {
+    line-height: $header-height;
+  }
 }
 
 .conversation + .new-group-update-form,

stylesheets/_global.scss

@@ -52,6 +52,10 @@ body {
   }
 }
 
+.window-controls {
+  float: right;
+}
+
 .title-text {
   display: block;
   text-align: center;

stylesheets/_index.scss

@@ -1,7 +1,3 @@
-.window-controls {
-  text-align: right;
-}
-
 .gutter {
   padding: $header-height 0 0;
 }

stylesheets/manifest.css

@@ -56,6 +56,9 @@ body {
     #header button:hover {
       background-color: rgba(19, 117, 196, 0.8); }
 
+.window-controls {
+  float: right; }
+
 .title-text {
   display: block;
   text-align: center;
@@ -260,9 +263,6 @@ img.emoji {
   .attachment-preview img {
     width: 100%; }
 
-.window-controls {
-  text-align: right; }
-
 .gutter {
   padding: 36px 0 0; }
 
@@ -367,6 +367,8 @@ input.search {
   padding: 36px 0; }
   .conversation .file-input .close {
     top: -10px; }
+  .conversation .conversation-title {
+    line-height: 36px; }
 
 .conversation + .new-group-update-form,
 .conversation, .discussion-container, .message-list, .message-detail, .key-verification {