UX: Show proper HTML for category preview in site settings

app/assets/javascripts/admin/components/site-setting.js.es6

@@ -2,6 +2,7 @@ import BufferedContent from 'discourse/mixins/buffered-content';
 import SiteSetting from 'admin/models/site-setting';
 import { propertyNotEqual } from 'discourse/lib/computed';
 import computed from 'ember-addons/ember-computed-decorators';
+import { categoryLinkHTML } from 'discourse/helpers/category-link';
 
 const CustomTypes = ['bool', 'enum', 'list', 'url_list', 'host_list', 'category_list', 'value_list'];
 
@@ -11,8 +12,19 @@ export default Ember.Component.extend(BufferedContent, {
   dirty: propertyNotEqual('buffered.value', 'setting.value'),
   validationMessage: null,
 
-  @computed("setting.preview", "buffered.value")
-  preview(preview, value) {
+  @computed("setting", "buffered.value")
+  preview(setting, value) {
+    // A bit hacky, but allows us to use helpers
+    if (setting.get('setting') === 'category_style') {
+      let category = this.site.get('categories.firstObject');
+      if (category) {
+        return categoryLinkHTML(category, {
+          categoryStyle: value
+        });
+      }
+    }
+
+    let preview = setting.get('preview');
     if (preview) {
       return new Handlebars.SafeString("<div class='preview'>" + preview.replace(/\{\{value\}\}/g, value) + "</div>");
     }

config/site_settings.yml

@@ -182,7 +182,6 @@ basic:
       - bar
       - box
       - bullet
-    preview: '<span class="badge-wrapper {{value}}"><span class="badge-category-parent-bg" style="background-color: #aaa;"></span><span class="badge-category-bg" style="background-color: #777;"></span><span style="color: #fff;" data-drop-close="true" class="badge-category clear-badge">Category</span></span>'
   enable_mobile_theme:
     client: true
     default: true