UX: Improve the interface for selecting a subcategory in a dropdown

app/assets/javascripts/discourse/models/site.js

@@ -22,10 +22,38 @@ Discourse.Site = Discourse.Model.extend({
     return postActionTypes.filterProperty('is_flag', true);
   }.property('post_action_types.@each'),
 
-  sortedCategories: Em.computed.sort('categories', function(a, b) {
+  categoriesByCount: Em.computed.sort('categories', function(a, b) {
     return (b.get('topic_count') || 0) - (a.get('topic_count') || 0);
   }),
 
+  // Sort subcategories under parents
+  sortedCategories: function() {
+    var cats = this.get('categoriesByCount'),
+        result = [],
+        remaining = {};
+
+    cats.forEach(function(c) {
+      var parentCategoryId = parseInt(c.get('parent_category_id'), 10);
+      if (!parentCategoryId) {
+        result.pushObject(c);
+      } else {
+        remaining[parentCategoryId] = remaining[parentCategoryId] || [];
+        remaining[parentCategoryId].pushObject(c);
+      }
+    });
+
+    Ember.keys(remaining).forEach(function(parentCategoryId) {
+      var category = result.findBy('id', parseInt(parentCategoryId, 10)),
+          index = result.indexOf(category);
+
+      if (index !== -1) {
+        result.replace(index+1, 0, remaining[parentCategoryId]);
+      }
+    });
+
+    return result;
+  }.property(),
+
   postActionTypeById: function(id) {
     return this.get("postActionByIdLookup.action" + id);
   },

app/assets/javascripts/discourse/views/category-chooser.js.es6

@@ -1,13 +1,7 @@
-/**
-  This view handles rendering of a combobox that can view a category
-
-  @class CategoryChooserView
-  @extends Discourse.ComboboxView
-  @namespace Discourse
-  @module Discourse
-**/
 import ComboboxView from 'discourse/views/combo-box';
 
+var badgeHtml = Discourse.HTML.categoryBadge;
+
 export default ComboboxView.extend({
   classNames: ['combobox category-combobox'],
   overrideWidths: true,
@@ -19,12 +13,11 @@ export default ComboboxView.extend({
     return c.get('permission') === Discourse.PermissionType.FULL && c.get('id') !== uncategorized_id;
   }),
 
-  init: function() {
+  _setCategories: function() {
-    this._super();
     if (!this.get('categories')) {
       this.set('categories', Discourse.Category.list());
     }
-  },
+  }.on('init'),
 
   none: function() {
     if (Discourse.User.currentProp('staff') || Discourse.SiteSettings.allow_uncategorized_topics) {
@@ -42,7 +35,11 @@ export default ComboboxView.extend({
     var category = Discourse.Category.findById(parseInt(item.id,10));
     if (!category) return item.text;
 
-    var result = Discourse.HTML.categoryBadge(category, {showParent: true, link: false, allowUncategorized: true});
+    var result = badgeHtml(category, {showParent: false, link: false, allowUncategorized: true}),
+        parentCategoryId = category.get('parent_category_id');
+    if (parentCategoryId) {
+      result = badgeHtml(Discourse.Category.findById(parentCategoryId), {link: false}) + " " + result;
+    }
 
     result += " <span class='topic-count'>&times; " + category.get('topic_count') + "</span>";