FEATURE: replaces category/tag dropdowns by select-kit

app/assets/javascripts/discourse/components/category-drop.js.es6

@@ -1,152 +0,0 @@
-import { setting } from 'discourse/lib/computed';
-import computed from 'ember-addons/ember-computed-decorators';
-
-var get = Ember.get;
-
-export default Ember.Component.extend({
-  classNameBindings: ['category::no-category', 'categories:has-drop', 'categoryStyle'],
-  categoryStyle: setting('category_style'),
-  expanded: false,
-
-  tagName: 'li',
-
-  @computed('expanded')
-  expandIcon(expanded) {
-    return expanded ? 'd-drop-expanded' : 'd-drop-collapsed';
-  },
-
-  allCategoriesUrl: function() {
-    if (this.get('subCategory')) {
-      return this.get('parentCategory.url') || "/";
-    } else {
-      return "/";
-    }
-  }.property('parentCategory.url', 'subCategory'),
-
-  noCategoriesUrl: function() {
-    return this.get('parentCategory.url') + "/none";
-  }.property('parentCategory.url'),
-
-  allCategoriesLabel: function() {
-    if (this.get('subCategory')) {
-      return I18n.t('categories.all_subcategories', {categoryName: this.get('parentCategory.name')});
-    }
-    return I18n.t('categories.all');
-  }.property('category'),
-
-  dropdownButtonClass: function() {
-    let result = 'dropdown-header category-dropdown-button';
-    if (Em.isNone(this.get('category'))) {
-      result += ' home';
-    }
-    return result;
-  }.property('category'),
-
-  categoryColor: function() {
-    var category = this.get('category');
-
-    if (category) {
-      var color = get(category, 'color');
-
-      if (color) {
-        var style = "";
-        if (color) { style += "background-color: #" + color + ";"; }
-        return style.htmlSafe();
-      }
-    }
-
-    return "background-color: #eee;".htmlSafe();
-  }.property('category'),
-
-  badgeStyle: function() {
-    let category = this.get('category');
-
-    const categoryStyle = this.siteSettings.category_style;
-    if (categoryStyle === 'bullet') {
-      return;
-    }
-
-    if (category) {
-      let color = get(category, 'color');
-      let textColor = get(category, 'text_color');
-
-      if (color || textColor) {
-        let style = "";
-        if (color) {
-          if (categoryStyle === "bar") {
-            style += `border-color: #${color};`;
-          } else if (categoryStyle === "box") {
-            style += `background-color: #${color};`;
-            if (textColor) { style += "color: #" + textColor + "; "; }
-          }
-        }
-
-        return style.htmlSafe();
-      }
-    }
-
-    if (categoryStyle === 'box') {
-      return "background-color: #eee; color: #333".htmlSafe();
-    }
-  }.property('category'),
-
-  clickEventName: function() {
-    return "click.category-drop-" + (this.get('category.id') || "all");
-  }.property('category.id'),
-
-  actions: {
-    expand: function() {
-      var self = this;
-
-      if(!this.get('renderCategories')){
-        this.set('renderCategories',true);
-        Em.run.next(function(){
-          self.send('expand');
-        });
-        return;
-      }
-
-      if (this.get('expanded')) {
-        this.close();
-        return;
-      }
-
-      if (this.get('categories')) {
-        this.set('expanded', true);
-      }
-      var $dropdown = this.$()[0];
-
-      this.$('a[data-drop-close]').on('click.category-drop', function() {
-        self.close();
-      });
-
-      Em.run.next(function(){
-        self.$('.cat a').add('html').on(self.get('clickEventName'), function(e) {
-          var $target = $(e.target),
-              closest = $target.closest($dropdown);
-
-          if ($(e.currentTarget).hasClass('badge-wrapper')){
-            self.close();
-          }
-
-          return ($(e.currentTarget).hasClass('badge-category') || (closest.length && closest[0] === $dropdown)) ? true : self.close();
-        });
-      });
-    }
-  },
-
-  removeEvents: function(){
-    $('html').off(this.get('clickEventName'));
-    this.$('a[data-drop-close]').off('click.category-drop');
-  },
-
-  close: function() {
-    this.removeEvents();
-    this.set('expanded', false);
-  },
-
-  willDestroyElement: function() {
-    this.removeEvents();
-  }
-
-});

app/assets/javascripts/discourse/components/tag-drop.js.es6

@@ -1,139 +0,0 @@
-import { setting } from 'discourse/lib/computed';
-import computed from 'ember-addons/ember-computed-decorators';
-
-export default Ember.Component.extend({
-  classNameBindings: [':tag-drop', 'tag::no-category', 'tags:has-drop','categoryStyle','tagClass'],
-  categoryStyle: setting('category_style'), // match the category-drop style
-  currentCategory: Em.computed.or('secondCategory', 'firstCategory'),
-  showFilterByTag: setting('show_filter_by_tag'),
-  showTagDropdown: Em.computed.and('showFilterByTag', 'tags'),
-  tagId: null,
-
-  tagName: 'li',
-
-  @computed('site.top_tags')
-  tags(topTags) {
-    if (this.siteSettings.tags_sort_alphabetically && topTags) {
-      return topTags.sort();
-    } else {
-      return topTags;
-    }
-  },
-
-  @computed('expanded')
-  expandedIcon(expanded) {
-    return expanded ? 'd-drop-expanded' : 'd-drop-collapsed';
-  },
-
-  @computed('tagId')
-  tagClass() {
-    if (this.get('tagId')) {
-      return "tag-" + this.get('tagId');
-    } else {
-      return "tag_all";
-    }
-  },
-
-  @computed('firstCategory', 'secondCategory')
-  allTagsUrl() {
-    if (this.get('currentCategory')) {
-      return this.get('currentCategory.url') + "?allTags=1";
-    } else {
-      return "/";
-    }
-  },
-
-  @computed('tag')
-  allTagsLabel() {
-    return I18n.t("tagging.selector_all_tags");
-  },
-
-  @computed('tagId')
-  noTagsSelected() {
-    return this.get('tagId') === 'none';
-  },
-
-  @computed('firstCategory', 'secondCategory')
-  noTagsUrl() {
-    var url = '/tags';
-    if (this.get('currentCategory')) {
-      url += this.get('currentCategory.url');
-    }
-    return url + '/none';
-  },
-
-  @computed('tag')
-  noTagsLabel() {
-    return I18n.t("tagging.selector_no_tags");
-  },
-
-  @computed('tag')
-  dropdownButtonClass() {
-    let result = 'dropdown-header category-dropdown-button';
-    if (Em.isNone(this.get('tag'))) {
-      result += ' home';
-    }
-    return result;
-  },
-
-  @computed('tag')
-  clickEventName() {
-    return "click.tag-drop-" + (this.get('tag') || "all");
-  },
-
-  actions: {
-    expand: function() {
-      var self = this;
-
-      if(!this.get('renderTags')){
-        this.set('renderTags',true);
-        Em.run.next(function(){
-          self.send('expand');
-        });
-        return;
-      }
-
-      if (this.get('expanded')) {
-        this.close();
-        return;
-      }
-
-      if (this.get('tags')) {
-        this.set('expanded', true);
-      }
-      var $dropdown = this.$()[0];
-
-      this.$('a[data-drop-close]').on('click.tag-drop', function() {
-        self.close();
-      });
-
-      Em.run.next(function(){
-        self.$('.cat a').add('html').on(self.get('clickEventName'), function(e) {
-          var $target = $(e.target),
-              closest = $target.closest($dropdown);
-
-          if ($(e.currentTarget).hasClass('badge-wrapper')){
-            self.close();
-          }
-
-          return ($(e.currentTarget).hasClass('badge-category') || (closest.length && closest[0] === $dropdown)) ? true : self.close();
-        });
-      });
-    }
-  },
-
-  removeEvents: function(){
-    $('html').off(this.get('clickEventName'));
-    this.$('a[data-drop-close]').off('click.tag-drop');
-  },
-
-  close: function() {
-    this.removeEvents();
-    this.set('expanded', false);
-  },
-
-  willDestroyElement: function() {
-    this.removeEvents();
-  }
-
-});

app/assets/javascripts/discourse/templates/components/bread-crumbs.hbs

@@ -1,7 +1,14 @@
-{{category-drop category=firstCategory categories=parentCategories}}
+{{category-drop
+  category=firstCategory
+  categories=parentCategories}}
 
 {{#if childCategories}}
-  {{category-drop category=secondCategory parentCategory=firstCategory categories=childCategories subCategory="true" noSubcategories=noSubcategories}}
+  {{category-drop
+    category=secondCategory
+    parentCategory=firstCategory
+    categories=childCategories
+    subCategory="true"
+    noSubcategories=noSubcategories}}
 {{/if}}
 
 {{#if siteSettings.tagging_enabled}}

app/assets/javascripts/discourse/templates/components/category-drop.hbs

@@ -1,30 +0,0 @@
-{{#if category}}
-  <a href {{action "expand"}} class="dropdown-header" style={{badgeStyle}} aria-label={{i18n 'categories.category_list'}} aria-expanded={{expanded}}>
-    <span class="badge-category-bg" style={{categoryColor}}></span>
-    {{#if category.read_restricted}}
-      {{d-icon "lock"}}
-    {{/if}}
-    <span class='d-label'>{{category.name}}</span>
-  </a>
-{{else}}
-  {{#if noSubcategories}}
-    <a href {{action "expand"}} class='dropdown-header home' style={{badgeStyle}} aria-label={{i18n 'categories.category_list'}} aria-expanded={{expanded}}>{{i18n 'categories.no_subcategory'}}</a>
-  {{else}}
-    <a href {{action "expand"}} class='dropdown-header home' style={{badgeStyle}} aria-label={{i18n 'categories.category_list'}} aria-expanded={{expanded}}>{{allCategoriesLabel}}</a>
-  {{/if}}
-{{/if}}
-
-{{#if categories}}
-  <a href {{action "expand"}} class={{dropdownButtonClass}} style={{badgeStyle}}>
-    {{d-icon expandIcon}}
-  </a>
-  <section class="{{unless expanded 'hidden'}} category-dropdown-menu chooser">
-    <div class='cat'><a href={{allCategoriesUrl}} data-drop-close="true" class='badge-category home'>{{allCategoriesLabel}}</a></div>
-    {{#if subCategory}}
-      <div class='cat'><a href={{noCategoriesUrl}} data-drop-close="true" class='badge-category home'>{{i18n 'categories.no_subcategory'}}</a></div>
-    {{/if}}
-    {{#if renderCategories}}
-      {{#each categories as |c|}}<div class='cat'>{{category-link c allowUncategorized=true hideParent=subCategory}}</div>{{/each}}
-    {{/if}}
-  </section>
-{{/if}}

app/assets/javascripts/discourse/templates/components/tag-drop.hbs

@@ -1,28 +0,0 @@
-{{#if showTagDropdown}}
-  {{#if tagId}}
-    {{#if noTagsSelected}}
-      <a href {{action "expand"}} class="dropdown-header {{tagClass}} home">{{noTagsLabel}}</a>
-    {{else}}
-      <a href {{action "expand"}} class="dropdown-header {{tagClass}}">{{tagId}}</a>
-    {{/if}}
-  {{else}}
-    <a href {{action "expand"}} class="dropdown-header {{tagClass}} home">{{allTagsLabel}}</a>
-  {{/if}}
-
-  {{#if tags}}
-    <a href {{action "expand"}} class={{dropdownButtonClass}}>
-      {{d-icon expandedIcon}}
-    </a>
-    <section class="{{unless expanded 'hidden'}} category-dropdown-menu chooser">
-      <div class='cat'><a href={{allTagsUrl}} data-drop-close="true" class='dropdown-header home'>{{allTagsLabel}}</a></div>
-      <div class='cat'><a href={{noTagsUrl}}  data-drop-close="true" class='dropdown-header home'>{{noTagsLabel}}</a></div>
-      {{#if renderTags}}
-        {{#each tags as |t|}}
-          <div class='cat'>
-            {{tag-drop-link tagId=t category=currentCategory}}
-          </div>
-        {{/each}}
-      {{/if}}
-    </section>
-  {{/if}}
-{{/if}}

app/assets/javascripts/select-kit/components/category-drop.js.es6

@@ -0,0 +1,106 @@
+import ComboBoxComponent from "select-kit/components/combo-box";
+import DiscourseURL from "discourse/lib/url";
+import { default as computed } from "ember-addons/ember-computed-decorators";
+import Category from "discourse/models/category";
+import { categoryBadgeHTML } from "discourse/helpers/category-link";
+
+export default ComboBoxComponent.extend({
+  pluginApiIdentifiers: ["category-drop"],
+  classNameBindings: ["categoryStyle"],
+  classNames: "category-drop",
+  verticalOffset: 3,
+  collectionHeight: "200",
+  content: Ember.computed.alias("categories"),
+  rowComponent: "category-row",
+  headerComponent: "category-drop/category-drop-header",
+  allowAutoSelectFirst: false,
+  tagName: "li",
+  categoryStyle: Ember.computed.alias("siteSettings.category_style"),
+  noCategoriesLabel: I18n.t("categories.no_subcategory"),
+  mutateAttributes() {},
+
+  init() {
+    this._super();
+
+    if (this.get("category")) {
+      this.set("value", this.get("category.id"));
+    } else {
+      this.set("value", null);
+    }
+    if (!this.get("categories")) this.set("categories", []);
+
+    this.get("rowComponentOptions").setProperties({
+      hideParentCategory: this.get("subCategory"),
+      allowUncategorized: true,
+      displayCategoryDescription: true
+    });
+  },
+
+  @computed("allCategoriesUrl", "allCategoriesLabel", "noCategoriesUrl", "noCategoriesLabel")
+  collectionHeader(allCategoriesUrl, allCategoriesLabel, noCategoriesUrl, noCategoriesLabel) {
+    let shortcuts = "";
+
+    shortcuts += `
+      <a href="${allCategoriesUrl}" class="category-filter">
+        ${allCategoriesLabel}
+      </a>
+    `;
+
+    if (this.get("subCategory")) {
+      shortcuts += `
+        <a href="${noCategoriesUrl}" class="category-filter">
+          ${noCategoriesLabel}
+        </a>
+      `;
+    }
+
+    return shortcuts.htmlSafe();
+  },
+
+  computeHeaderContent() {
+    let content = this.baseHeaderComputedContent();
+
+    if (this.get("hasSelection")) {
+      const category = Category.findById(content.value);
+      content.label = categoryBadgeHTML(category, {
+        link: false,
+        allowUncategorized: true,
+        hideParent: true
+      }).htmlSafe();
+    } else {
+      if (this.get("noSubcategories")) {
+        content.label = this.get("noCategoriesLabel");
+      } else {
+        content.label = this.get("allCategoriesLabel");
+      }
+    }
+
+    return content;
+  },
+
+  @computed("parentCategory.name", "subCategory")
+  allCategoriesLabel(categoryName, subCategory) {
+    if (subCategory) {
+      return I18n.t("categories.all_subcategories", { categoryName });
+    }
+    return I18n.t("categories.all");
+  },
+
+  @computed("parentCategory.url", "subCategory")
+  allCategoriesUrl(parentCategoryUrl, subCategory) {
+    return subCategory ? ( parentCategoryUrl || "/" ) : "/";
+  },
+
+  @computed("parentCategory.url")
+  noCategoriesUrl(parentCategoryUrl) {
+    return `${parentCategoryUrl}/none`;
+  },
+
+  actions: {
+    onSelect(categoryId) {
+      const category = Category.findById(parseInt(categoryId, 10));
+      const categoryURL = Discourse.getURL("/c/") + Discourse.Category.slugFor(category);
+      DiscourseURL.routeTo(categoryURL);
+    }
+  }
+});

app/assets/javascripts/select-kit/components/category-drop/category-drop-header.js.es6

@@ -0,0 +1,67 @@
+import ComboBoxSelectBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header";
+import computed from "ember-addons/ember-computed-decorators";
+import Category from "discourse/models/category";
+
+export default ComboBoxSelectBoxHeaderComponent.extend({
+  layoutName: "select-kit/templates/components/category-drop/category-drop-header",
+  classNames: "category-drop-header",
+
+  classNameBindings: ['categoryStyleClass'],
+  categoryStyleClass: Ember.computed.alias('site.category_style'),
+
+  @computed("computedContent.value", "computedContent.name")
+  category(value, name) {
+    if (Ember.isEmpty(value)) {
+      const uncat = Category.findUncategorized();
+      if (uncat && uncat.get("name") === name) {
+        return uncat;
+      }
+    } else {
+      return Category.findById(parseInt(value, 10));
+    }
+  },
+
+  @computed("category.color")
+  categoryBackgroundColor(categoryColor) {
+    return categoryColor || "#e9e9e9";
+  },
+
+  @computed("category.text_color")
+  categoryTextColor(categoryTextColor) {
+    return categoryTextColor || "#333";
+  },
+
+  @computed("category", "categoryBackgroundColor", "categoryTextColor")
+  categoryStyle(category, categoryBackgroundColor, categoryTextColor) {
+    const categoryStyle = this.siteSettings.category_style;
+
+    if (categoryStyle === "bullet") return;
+
+    if (category) {
+      if (categoryBackgroundColor || categoryTextColor) {
+        let style = "";
+        if (categoryBackgroundColor) {
+          if (categoryStyle === "bar") {
+            style += `border-color: #${categoryBackgroundColor};`;
+          } else if (categoryStyle === "box") {
+            style += `background-color: #${categoryBackgroundColor};`;
+            if (categoryTextColor) { style += `color: #${categoryTextColor};`; }
+          }
+        }
+
+        return style.htmlSafe();
+      }
+    }
+
+    if (categoryStyle === "box") {
+      return `background-color: ${categoryBackgroundColor}; color: ${categoryTextColor}`.htmlSafe();
+    }
+  },
+
+  didRender() {
+    this._super();
+
+    this.$().attr("style", this.get("categoryStyle"));
+    this.$(".caret-icon").attr("style", this.get("categoryStyle"));
+  },
+});

app/assets/javascripts/select-kit/components/category-row.js.es6

@@ -7,6 +7,10 @@ export default SelectKitRowComponent.extend({
   layoutName: "select-kit/templates/components/category-row",
   classNames: "category-row",
 
+  hideParentCategory: Ember.computed.bool("options.hideParentCategory"),
+  allowUncategorized: Ember.computed.bool("options.allowUncategorized"),
+  categoryLink: Ember.computed.bool("options.categoryLink"),
+
   @computed("options.displayCategoryDescription")
   displayCategoryDescription(displayCategoryDescription) {
     if (Ember.isNone(displayCategoryDescription)) {
@@ -31,9 +35,9 @@ export default SelectKitRowComponent.extend({
   @computed("category")
   badgeForCategory(category) {
     return categoryBadgeHTML(category, {
-      link: false,
-      allowUncategorized: true,
-      hideParent: true
+      link: this.get("categoryLink"),
+      allowUncategorized: this.get("allowUncategorized"),
+      hideParent: this.get("hideParentCategory")
     }).htmlSafe();
   },
 
@@ -57,7 +61,10 @@ export default SelectKitRowComponent.extend({
     return category.get("parent_category_id");
   },
 
-  topicCount: Ember.computed.alias("category.topic_count"),
+  @computed("category.topic_count")
+  topicCount(topicCount) {
+    return `× ${topicCount}`.htmlSafe();
+  },
 
   @computed("displayCategoryDescription", "category.description")
   shouldDisplayDescription(displayCategoryDescription, description) {

app/assets/javascripts/select-kit/components/select-kit.js.es6

@@ -22,7 +22,8 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
     "isAbove",
     "isBelow",
     "isLeftAligned",
-    "isRightAligned"
+    "isRightAligned",
+    "hasSelection",
   ],
   isDisabled: false,
   isExpanded: false,
@@ -64,6 +65,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
   nameChanges: false,
   allowContentReplacement: false,
   collectionHeader: null,
+  allowAutoSelectFirst: true,
 
   init() {
     this._super();

app/assets/javascripts/select-kit/components/single-select.js.es6

@@ -1,6 +1,5 @@
 import SelectKitComponent from "select-kit/components/select-kit";
-import { on } from "ember-addons/ember-computed-decorators";
-import computed from "ember-addons/ember-computed-decorators";
+import { default as computed, on } from 'ember-addons/ember-computed-decorators';
 const { get, isNone, isEmpty, isPresent, run } = Ember;
 
 export default SelectKitComponent.extend({
@@ -46,8 +45,11 @@ export default SelectKitComponent.extend({
   },
 
   _beforeWillComputeValue(value) {
-    if (!isEmpty(this.get("content")) && isEmpty(value) && isNone(this.get("none"))) {
-      value = this.valueForContentItem(get(this.get("content"), "firstObject"));
+    if (!isEmpty(this.get("content")) &&
+      isEmpty(value) &&
+      isNone(this.get("none")) &&
+      this.get("allowAutoSelectFirst")) {
+        value = this.valueForContentItem(get(this.get("content"), "firstObject"));
     }
 
     switch (typeof value) {
@@ -84,7 +86,7 @@ export default SelectKitComponent.extend({
 
   @computed("computedContent.[]", "computedValue", "filter", "shouldFilter")
   filteredComputedContent(computedContent, computedValue, filter, shouldFilter) {
-    if (shouldFilter === true) {
+    if (shouldFilter) {
       computedContent = this.filterComputedContent(computedContent, computedValue, filter);
     }
 
@@ -113,7 +115,7 @@ export default SelectKitComponent.extend({
 
   autoHighlight() {
     run.schedule("afterRender", () => {
-      if (!isNone(this.get("highlightedValue"))) { return; }
+      if (!isNone(this.get("highlightedValue"))) return;
 
       const filteredComputedContent = this.get("filteredComputedContent");
       const displayCreateRow = this.get("shouldDisplayCreateRow");
@@ -129,13 +131,13 @@ export default SelectKitComponent.extend({
         return;
       }
 
-      if (displayCreateRow === true && isEmpty(filteredComputedContent)) {
+      if (displayCreateRow && isEmpty(filteredComputedContent)) {
         this.send("highlight", this.get("createRowComputedContent"));
       }
       else if (!isEmpty(filteredComputedContent)) {
         this.send("highlight", get(filteredComputedContent, "firstObject"));
       }
-      else if (isEmpty(filteredComputedContent) && isPresent(none) && displayCreateRow === false) {
+      else if (isEmpty(filteredComputedContent) && isPresent(none) && !displayCreateRow) {
         this.send("highlight", none);
       }
     });

app/assets/javascripts/select-kit/components/tag-drop.js.es6

@@ -0,0 +1,112 @@
+import ComboBoxComponent from "select-kit/components/combo-box";
+import DiscourseURL from "discourse/lib/url";
+import { default as computed } from "ember-addons/ember-computed-decorators";
+const { isEmpty } = Ember;
+
+export default ComboBoxComponent.extend({
+  pluginApiIdentifiers: ["tag-drop"],
+  classNameBindings: ["categoryStyle", "tagClass"],
+  classNames: "tag-drop",
+  verticalOffset: 3,
+  collectionHeight: "200",
+  value: Ember.computed.alias("tagId"),
+  headerComponent: "tag-drop/tag-drop-header",
+  rowComponent: "tag-drop/tag-drop-row",
+  allowAutoSelectFirst: false,
+  tagName: "li",
+  showFilterByTag: Ember.computed.alias("siteSettings.show_filter_by_tag"),
+  currentCategory: Ember.computed.or("secondCategory", "firstCategory"),
+  tagId: null,
+  categoryStyle: Ember.computed.alias("siteSettings.category_style"),
+  mutateAttributes() {},
+
+  @computed("tagId")
+  noTagsSelected() {
+    return this.get("tagId") === "none";
+  },
+
+  @computed("showFilterByTag", "content")
+  isHidden(showFilterByTag, content) {
+    if (showFilterByTag && !isEmpty(content)) return false;
+    return true;
+  },
+
+  computeHeaderContent() {
+    let content = this.baseHeaderComputedContent();
+
+    if (!content.value) {
+      if (this.get("noTagsSelected")) {
+        content.label = this.get("noTagsLabel");
+      } else {
+        content.label = this.get("allTagsLabel");
+      }
+    }
+
+    return content;
+  },
+
+  @computed("tagId")
+  tagClass(tagId) {
+    return tagId ? `tag-${tagId}` : "tag_all";
+  },
+
+  @computed("firstCategory", "secondCategory")
+  allTagsUrl() {
+    if (this.get("currentCategory")) {
+      return this.get("currentCategory.url") + "?allTags=1";
+    } else {
+      return "/";
+    }
+  },
+
+  @computed("firstCategory", "secondCategory")
+  noTagsUrl() {
+    var url = "/tags";
+    if (this.get("currentCategory")) {
+      url += this.get("currentCategory.url");
+    }
+    return `${url}/none`;
+  },
+
+  @computed("allTagsUrl", "allTagsLabel", "noTagsUrl", "noTagsLabel")
+  collectionHeader(allTagsUrl, allTagsLabel, noTagsUrl, noTagsLabel) {
+    return `
+      <a href="${allTagsUrl}" class="tag-filter">
+        ${allTagsLabel}
+      </a>
+      <a href="${noTagsUrl}" class="tag-filter">
+        ${noTagsLabel}
+      </a>
+    `;
+  },
+
+  @computed("tag")
+  allTagsLabel() {
+    return I18n.t("tagging.selector_all_tags");
+  },
+
+  @computed("tag")
+  noTagsLabel() {
+    return I18n.t("tagging.selector_no_tags");
+  },
+
+  @computed("site.top_tags")
+  content(topTags) {
+    if (this.siteSettings.tags_sort_alphabetically && topTags) {
+      return topTags.sort();
+    } else {
+      return topTags;
+    }
+  },
+
+  actions: {
+    onSelect(tagId) {
+      let url = "/tags";
+      if (this.get("currentCategory")) {
+        url += this.get("currentCategory.url");
+      }
+      url = `${url}/${tagId}`;
+      DiscourseURL.routeTo(url);
+    }
+  }
+});

app/assets/javascripts/select-kit/components/tag-drop/tag-drop-header.js.es6

@@ -0,0 +1,6 @@
+import ComboBoxSelectBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header";
+
+export default ComboBoxSelectBoxHeaderComponent.extend({
+  layoutName: "select-kit/templates/components/tag-drop/tag-drop-header",
+  classNames: "tag-drop-header",
+});

app/assets/javascripts/select-kit/components/tag-drop/tag-drop-row.js.es6

@@ -0,0 +1,8 @@
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+export default SelectKitRowComponent.extend({
+  layoutName: "select-kit/templates/components/tag-drop/tag-drop-row",
+  classNames: "tag-drop-row",
+
+  tagId: Ember.computed.alias("computedContent.value")
+});

app/assets/javascripts/select-kit/templates/components/category-drop/category-drop-header.hbs

@@ -0,0 +1,5 @@
+<span class="selected-name">
+  {{{label}}}
+</span>
+
+{{d-icon caretIcon class="caret-icon"}}

app/assets/javascripts/select-kit/templates/components/category-row.hbs

@@ -7,7 +7,7 @@
     {{else}}
       <div class="category-status">
         {{badgeForCategory}}
-        <span class="topic-count">&times; {{topicCount}}</span>
+        <span class="topic-count">{{topicCount}}</span>
       </div>
     {{/if}}
 

app/assets/javascripts/select-kit/templates/components/tag-drop/tag-drop-header.hbs

@@ -0,0 +1,5 @@
+<span class="selected-name">
+  {{{label}}}
+</span>
+
+{{d-icon caretIcon class="caret-icon"}}

app/assets/javascripts/select-kit/templates/components/tag-drop/tag-drop-row.hbs

@@ -0,0 +1 @@
+{{tagId}}

app/assets/stylesheets/common/base/_topic-list.scss

@@ -199,11 +199,6 @@
 }
 
 .list-controls {
-  .category-dropdown-menu .home {
-    color: $primary;
-    margin-left: 8px;
-  }
-
   clear: both;
 }
 
@@ -253,29 +248,6 @@ ol.category-breadcrumb {
   }
 }
 
-.list-controls .category-dropdown-menu {
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: absolute;
-  border: 1px solid $primary-low;
-  background-color: $secondary;
-  z-index: z("dropdown");
-
-  a.badge-category, a.badge-category-parent {
-    line-height: $line-height-large;
-    overflow:hidden;
-    margin-bottom: 0;
-  }
-  a.badge-category, .dropdown-header {
-    font-size: $font-down-1;
-    font-weight: bold;
-    float: none;
-    text-transform: none;
-    max-width:200px;
-    text-overflow:ellipsis;
-  }
-}
-
 .d-icon-thumb-tack.unpinned {
   @include fa-icon-rotate(180deg, 1);
   color: $primary;

app/assets/stylesheets/common/components/badges.scss

@@ -68,9 +68,9 @@
     margin-right: 12px;
 
     .extra-info-wrapper & {
-      margin-top: .25em;                      
+      margin-top: .25em;
     }
-    
+
     span.badge-category {
       color: $primary;
       overflow: hidden;
@@ -158,103 +158,21 @@
 
 .list-controls {
   .category-breadcrumb {
-    a.badge-category, .dropdown-header {
+    a.badge-category {
       display: inline-block;
       padding: 6px 8px;
       line-height: $line-height-medium;
-
-      &.category-dropdown-button {
-        margin-left: -.3em;
-        padding: 6px;
-        width: 13px;
-
-        .d-icon-caret-right {
-          margin-left: 2px;
-        }
-      }
-    }
-
-    li.bar>.dropdown-header:not(.home):first-child {
-      border-left: 5px solid;
-      font-size: $font-0;
-    }
-
-    li.bar>.dropdown-header {
-      background: $primary-low;
-      color: $primary;
-    }
-
-    li.bullet>.dropdown-header {
-      background: $primary-low;
-      color: $primary;
-
-      .badge-category-bg {
-        width: 10px;
-        height: 10px;
-        display: inline-block;
-        margin: 0 2px;
-      }
     }
   }
-
-  .category-dropdown-menu {
-    .dropdown-header {
-      &.home {
-        margin-left: 4px;
-        padding-left: 0;
-      }
-    }
-    .cat {
-        line-height: $line-height-large;
-      }
-    .badge-wrapper {
-      box-sizing: border-box;
-
-      &.bar {
-        padding: 5px 0;
-        width: 100%;
-        .badge-category {
-          max-width: 100px;
-        }
-      }
-      &.none {
-        padding: 5px;
-      }
-      &.bullet {
-        padding: 5px;
-        width: 100%;
-        .badge-category {
-          max-width: 100px;
-        }
-      }
-      &.box {
-        margin-top: 0;
-        width: 100%;
-        line-height: $line-height-small;
-        vertical-align: text-top;
-        padding: 0;
-        span.badge-category {
-          max-width: 100px;
-          padding: 5px;
-        }
-      }
-
-    }
-
-  }
-
 }
 
-
-
-
 // Notification badge
 // --------------------------------------------------
 
 .badge-notification {
   @extend %badge;
   padding: 3px 5px;
-  min-width: 8px; 
+  min-width: 8px;
   vertical-align: middle;
   color: $secondary;
   font-size: $font-down-2;

app/assets/stylesheets/common/select-kit/category-chooser.scss

@@ -23,11 +23,12 @@
         .topic-count {
           font-size: $font-down-2;
           color: $primary;
+          white-space: nowrap;
         }
 
         .category-status {
           color: $primary;
-          line-height: $line-height-large;          
+          line-height: $line-height-large;
           -webkit-box-flex: 0;
               -ms-flex: 1 1 auto;
                   flex: 1 1 auto;

app/assets/stylesheets/common/select-kit/category-drop.scss

@@ -0,0 +1,149 @@
+.select-kit {
+  &.combo-box {
+    &.category-drop {
+      min-width: auto;
+
+      .badge-wrapper {
+        font-size: $font-0;
+        font-weight: normal;
+        line-height: $line-height-large;
+
+        &.box {
+          margin: 0;
+
+          span.badge-category {
+            margin: 0;
+          }
+        }
+      }
+
+      .category-drop-header {
+        padding: 6px 10px;
+      }
+
+      &.bar.has-selection .category-drop-header {
+        padding: 1.5px 10px;
+      }
+
+      &.bullet.has-selection .category-drop-header {
+        padding: 5.25px 10px;
+      }
+
+      &.box.has-selection .category-drop-header {
+        padding: 4.5px 10px;
+      }
+
+      &.none.has-selection .category-drop-header {
+        padding: 4.5px 10px;
+      }
+
+      .category-drop-header {
+        background: $primary-low;
+        color: $primary;
+        border: none;
+        padding: 6px 10px;
+        font-size: $font-up-1;
+        line-height: $line-height-medium;
+        transition: none;
+
+        .badge-category {
+          display: flex;
+          align-items: center;
+        }
+
+        .badge-wrapper {
+          margin-right: 0;
+        }
+
+        .fa {
+          font-size: $font-up-1;
+        }
+
+        .caret-icon {
+          opacity: 1;
+        }
+      }
+
+      .select-kit-collection {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        min-width: 100px;
+
+        .collection-header {
+          .category-filter {
+            white-space: nowrap;
+            color: $primary;
+            font-size: $font-down-1;
+            line-height: $line-height-medium;
+            font-weight: bold;
+            display: block;
+            padding: 10px 5px;
+
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+
+      .select-kit-body {
+        width: auto;
+        min-width: 300px;
+        border-radius: 0;
+        -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
+                box-shadow: 0 2px 2px rgba(0,0,0,0.4);
+      }
+
+      .select-kit-row {
+        margin: 0;
+        font-size: $font-down-1;
+        font-weight: bold;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 5px;
+
+        .category-desc {
+          font-weight: normal;
+          margin-top: 3px;
+          color: $primary-medium;
+        }
+
+        .category-status {
+          align-items: center;
+        }
+
+        &.no-content {
+          font-weight: normal;
+        }
+
+        &:not(.no-content) {
+          padding: 5px;
+        }
+
+        .topic-count {
+          margin-left: 5px;
+          font-weight: normal;
+        }
+
+        .badge-wrapper {
+          margin: 0;
+          display: flex;
+          flex: 1;
+        }
+      }
+
+      .select-kit-row .badge-wrapper.box {
+        padding: 2.5px 0;
+      }
+
+      .select-kit-row .badge-wrapper.bullet, .select-kit-row .badge-wrapper.none {
+        margin: 2.5px;
+      }
+
+      .select-kit-wrapper {
+        display: none;
+      }
+    }
+  }
+}

app/assets/stylesheets/common/select-kit/category-row.scss

@@ -13,5 +13,9 @@
         margin-top: 1px;
       }
     }
+
+    .topic-count {
+      white-space: nowrap;
+    }
   }
 }

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -161,6 +161,10 @@
         -ms-flex-pack: start;
             justify-content: flex-start;
 
+    &.no-content {
+      white-space: nowrap;
+    }
+
     .name {
       margin: 0;
       overflow: hidden;

app/assets/stylesheets/common/select-kit/tag-drop.scss

@@ -0,0 +1,66 @@
+.select-kit {
+  &.combo-box {
+    &.tag-drop {
+      min-width: auto;
+
+      .tag-drop-header {
+        background: $primary-low;
+        color: $primary;
+        border: none;
+        padding: 4.5px 10px;
+        font-size: $font-up-1;
+        line-height: $line-height-large;
+
+        .d-icon {
+          opacity: 1;
+          font-size: $font-0;
+        }
+      }
+
+      .select-kit-collection {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+
+        .collection-header {
+          .tag-filter {
+            white-space: nowrap;
+            color: $primary;
+            font-size: $font-down-1;
+            line-height: $line-height-medium;
+            font-weight: bold;
+            display: block;
+            padding: 5px;
+
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+
+      .select-kit-body {
+        width: auto;
+        min-width: 100px;
+        border-radius: 0;
+        -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
+                box-shadow: 0 2px 2px rgba(0,0,0,0.4);
+      }
+
+      .select-kit-row {
+        margin: 0;
+        font-size: $font-down-1;
+        font-weight: bold;
+        color: $tertiary;
+
+        &.no-content {
+          font-weight: normal;
+        }
+      }
+
+      .select-kit-wrapper {
+        display: none;
+      }
+    }
+  }
+}

app/assets/stylesheets/desktop/topic-list.scss

@@ -23,7 +23,7 @@
       float: none;
     }
 
-    a.badge-category, .dropdown-header {
+    a.badge-category {
       padding: 3px 12px;
       font-size: $font-up-1;
     }
@@ -257,11 +257,6 @@
     }
   }
 
-  .category-dropdown-menu {
-    max-height: 350px;
-    min-width: 134px;
-  }
-
   #bulk-select {
     position: fixed;
     right: 20px;

app/assets/stylesheets/mobile.scss

@@ -27,6 +27,8 @@
 // Import all component-specific files
 @import "mobile/components/*";
 
+@import "mobile/select-kit/*";
+
 /* These files doesn't actually exist, they are injected by Stylesheet::Compiler. */
 
 @import "plugins";

app/assets/stylesheets/mobile/select-kit/category-drop.scss

@@ -0,0 +1,17 @@
+.select-kit {
+  &.combo-box {
+    &.category-drop {
+      .category-drop-header {
+        font-size: $font-0;
+
+        .d-icon {
+          font-size: $font-0;
+        }
+      }
+
+      .select-kit-row {
+        font-weight: normal;
+      }
+    }
+  }
+}

app/assets/stylesheets/mobile/select-kit/tag-drop.scss

@@ -0,0 +1,17 @@
+.select-kit {
+  &.combo-box {
+    &.tag-drop {
+      .tag-drop-header {
+        font-size: $font-0;
+
+        .d-icon {
+          font-size: $font-0;
+        }
+      }
+
+      .select-kit-row {
+        font-weight: normal;
+      }
+    }
+  }
+}

app/assets/stylesheets/mobile/topic-list.scss

@@ -309,12 +309,6 @@ tr.category-topic-link {
 
 // Misc. stuff
 // --------------------------------------------------
-.list-controls {
-  .category-dropdown-button {
-    padding: 4px 10px 4px 8px;
-  }
-}
-
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {
   outline: 0;
@@ -387,14 +381,6 @@ ol.category-breadcrumb {
   margin: 5px 10px 0 0;
 }
 
-.category-dropdown-menu {
-  height: 200px;
-
-  a.badge-category {
-    line-height: $line-height-large;
-  }
-}
-
 .top-lists {
   h2 { margin-left: 10px; }
   .topic-list { padding-bottom: 10px; }