From eeced5b1c42aca3b7832dbb0af590acccec18f4d Mon Sep 17 00:00:00 2001
From: Renato Atilio <renatoat@gmail.com>
Date: Mon, 30 Nov 2020 11:46:44 -0300
Subject: [PATCH] Setting to show category icon from discourse-category-icons
 theme component (#7)

---
 common/common.scss                                   | 12 ++++++++++++
 .../discourse/widgets/category-header-widget.js.es6  | 12 ++++++++++--
 settings.yml                                         |  4 ++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index 9984d70..ad6fc87 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -17,6 +17,18 @@ div[class^="category-title-header"] {
     .category-title {
       display: inline;
     }
+
+    .category-icon-widget {
+      display: inline;
+
+      .category-icon {
+        .d-icon {
+          height: 1.5em;
+          width: 1.5em;
+          margin-right: 0.75em;
+        }
+      }
+    }
   }
 
   .category-title-description {
diff --git a/javascripts/discourse/widgets/category-header-widget.js.es6 b/javascripts/discourse/widgets/category-header-widget.js.es6
index 3099ebc..2998b8e 100644
--- a/javascripts/discourse/widgets/category-header-widget.js.es6
+++ b/javascripts/discourse/widgets/category-header-widget.js.es6
@@ -2,13 +2,21 @@ import { h } from "virtual-dom";
 import { iconNode } from "discourse-common/lib/icon-library";
 import { createWidget } from "discourse/widgets/widget";
 
-function buildCategory(category) {
+function buildCategory(category, widget) {
   const content = [];
 
   if (category.read_restricted) {
     content.push(iconNode("lock"));
   }
 
+  if (settings.show_category_icon) {
+    try {
+      content.push(widget.attach("category-icon", { category }));
+    } catch {
+      // if widget attaching fails, ignore it as it's probably the missing component
+    }
+  }
+
   content.push(h("h1.category-title", category.name));
 
   if (settings.show_description) {
@@ -63,7 +71,7 @@ export default createWidget("category-header-widget", {
               style: `background-color: #${category.color}; color: #${category.text_color};`,
             },
           },
-          h("div.category-title-contents", buildCategory(category))
+          h("div.category-title-contents", buildCategory(category, this))
         );
       }
     } else {
diff --git a/settings.yml b/settings.yml
index 0d6bc77..aefa943 100644
--- a/settings.yml
+++ b/settings.yml
@@ -29,3 +29,7 @@ show_below_site_header:
   default: true
   type: bool
   description: "Display the banner in the below site header connector."
+
+show_category_icon:
+  default: false
+  description: "Show category icon from Discourse Category Icons component"