Extract user bio into its own component

framework/core/ember/app/components/user/user-bio.js

@@ -0,0 +1,42 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  layoutName: 'components/user/user-bio',
+  classNames: ['user-bio'],
+  classNameBindings: ['isEditable:editable', 'editing'],
+
+  isEditable: Ember.computed.and('user.canEdit', 'editable'),
+  editing: false,
+
+  didInsertElement: function() {
+    this.$().on('click', 'a', function(e) {
+      e.stopPropagation();
+    });
+  },
+
+  click: function() {
+    this.send('edit');
+  },
+
+  actions: {
+    edit: function() {
+      if (!this.get('isEditable')) { return; }
+
+      this.set('editing', true);
+      var component = this;
+      Ember.run.scheduleOnce('afterRender', this, function() {
+        this.$('textarea').focus().blur(function() {
+          component.send('save', $(this).val());
+        });
+      });
+    },
+
+    save: function(value) {
+      this.set('editing', false);
+
+      var user = this.get('user');
+      user.set('bio', value);
+      user.save();
+    }
+  }
+});

framework/core/ember/app/components/user/user-card.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 
 import HasItemLists from 'flarum/mixins/has-item-lists';
+import UserBio from 'flarum/components/user/user-bio';
 
 export default Ember.Component.extend(HasItemLists, {
   layoutName: 'components/user/user-card',
@@ -12,44 +13,20 @@ export default Ember.Component.extend(HasItemLists, {
     return 'background-color: '+this.get('user.color');
   }),
 
-  bioEditable: Ember.computed.and('user.canEdit', 'editable'),
-  showBio: Ember.computed.or('user.bioHtml', 'bioEditable'),
-
-  didInsertElement: function() {
-    this.$().on('click', '.user-bio a', function(e) {
-      e.stopPropagation();
-    });
-  },
-
-  actions: {
-    editBio: function() {
-      if (!this.get('bioEditable')) {
-        return;
-      }
-
-      this.set('editingBio', true);
-      var component = this;
-      Ember.run.scheduleOnce('afterRender', this, function() {
-        this.$('.user-bio textarea').focus().blur(function() {
-          component.send('saveBio', $(this).val());
-        });
-      });
-    },
-
-    saveBio: function(value) {
-      var user = this.get('user');
-      user.set('bio', value);
-      user.save();
-      this.set('editingBio', false);
-    }
-  },
-
   populateControls: function(items) {
     this.addActionItem(items, 'edit', 'Edit', 'pencil');
     this.addActionItem(items, 'delete', 'Delete', 'times');
   },
 
   populateInfo: function(items) {
+    if (this.get('user.bioHtml') || (this.get('editable') && this.get('user.canEdit'))) {
+      items.pushObjectWithTag(UserBio.extend({
+        user: this.get('user'),
+        editable: this.get('editable'),
+        listItemClass: 'block-item'
+      }), 'bio');
+    }
+
     items.pushObjectWithTag(Ember.Component.extend({
       layout: Ember.Handlebars.compile('{{fa-icon "circle"}} Online')
     }), 'lastActiveTime');

framework/core/ember/app/styles/flarum/user.less

@@ -42,10 +42,23 @@
   & .badges {
     margin-left: 10px;
   }
+  & .user-info {
+    margin: 15px 0 0;
+    padding: 0;
+    list-style: none;
+    font-size: 12px;
+
+    & > li {
+      display: inline-block;
+      margin-right: 15px;
+    }
+    & .block-item {
+      display: block;
+    }
+  }
   & .user-bio {
-    margin-top: 15px;
     padding: 10px 10px 1px;
-    margin: 5px -10px -5px;
+    margin: -10px -10px 10px;
 
     &.editable:not(.editing) {
       cursor: text;
@@ -66,15 +79,4 @@
       font-size: 14px;
     }
   }
-  & .user-info {
-    margin: 15px 0 0;
-    padding: 0;
-    list-style: none;
-    font-size: 12px;
-
-    & > li {
-      display: inline-block;
-      margin-right: 15px;
-    }
-  }
 }

framework/core/ember/app/templates/components/user/user-bio.hbs

@@ -0,0 +1,9 @@
+{{#if editing}}
+  {{textarea value=user.bio class="form-control"}}
+{{else}}
+  {{#if user.bioHtml}}
+    {{{user.bioHtml}}}
+  {{else if isEditable}}
+    <p>Write something about yourself...</p>
+  {{/if}}
+{{/if}}

framework/core/ember/app/templates/components/user/user-card.hbs

@@ -10,20 +10,6 @@
 
     {{ui/item-list items=user.badges class="badges user-badges"}}
 
-    {{#if showBio}}
-      <div class="user-bio {{if bioEditable "editable"}} {{if editingBio "editing"}}" {{action "editBio"}}>
-        {{#if editingBio}}
-          {{textarea value=user.bio class="form-control"}}
-        {{else}}
-          {{#if user.bioHtml}}
-            {{{user.bioHtml}}}
-          {{else if bioEditable}}
-            <p>Write something about yourself...</p>
-          {{/if}}
-        {{/if}}
-      </div>
-    {{/if}}
-
     {{ui/item-list items=info class="user-info"}}
   </div>
 </div>