DEV: Option to add extra topic status icons in its widget and component

and did some refactoring

app/assets/javascripts/discourse/components/topic-status.js.es6

@@ -1,6 +1,7 @@
 import { iconHTML } from "discourse-common/lib/icon-library";
 import { bufferedRender } from "discourse-common/lib/buffered-render";
 import { escapeExpression } from "discourse/lib/utilities";
+import TopicStatusIcons from "discourse/helpers/topic-status-icons";
 
 export default Ember.Component.extend(
   bufferedRender({
@@ -30,7 +31,10 @@ export default Ember.Component.extend(
     }.property("disableActions"),
 
     buildBuffer(buffer) {
-      const renderIcon = function(name, key, actionable) {
+      const canAct = this.get("canAct");
+
+      TopicStatusIcons.render(this.get("topic"), function(name, key) {
+        const actionable = ["pinned", "unpinned"].includes(key) && canAct;
         const title = escapeExpression(I18n.t(`topic_statuses.${key}.help`)),
           startTag = actionable ? "a href" : "span",
           endTag = actionable ? "a" : "span",
@@ -40,32 +44,7 @@ export default Ember.Component.extend(
         buffer.push(
           `<${startTag} title='${title}' class='topic-status'>${icon}</${endTag}>`
         );
-      };
+      });
-
-      const renderIconIf = (conditionProp, name, key, actionable) => {
-        if (!this.get(conditionProp)) {
-          return;
-        }
-        renderIcon(name, key, actionable);
-      };
-
-      renderIconIf("topic.is_warning", "envelope", "warning");
-
-      if (this.get("topic.closed") && this.get("topic.archived")) {
-        renderIcon("lock", "locked_and_archived");
-      } else {
-        renderIconIf("topic.closed", "lock", "locked");
-        renderIconIf("topic.archived", "lock", "archived");
-      }
-
-      renderIconIf("topic.pinned", "thumbtack", "pinned", this.get("canAct"));
-      renderIconIf(
-        "topic.unpinned",
-        "thumbtack",
-        "unpinned",
-        this.get("canAct")
-      );
-      renderIconIf("topic.invisible", "far-eye-slash", "unlisted");
     }
   })
 );

app/assets/javascripts/discourse/helpers/topic-status-icons.js.es6

@@ -0,0 +1,28 @@
+export default Ember.ArrayProxy.extend({
+  render(topic, renderIcon) {
+    const renderIconIf = (conditionProp, name, key) => {
+      if (!topic.get(conditionProp)) {
+        return;
+      }
+      renderIcon(name, key);
+    };
+
+    if (topic.get("closed") && topic.get("archived")) {
+      renderIcon("lock", "locked_and_archived");
+    } else {
+      renderIconIf("closed", "lock", "locked");
+      renderIconIf("archived", "lock", "archived");
+    }
+
+    this.forEach(args => {
+      renderIconIf(...args);
+    });
+  }
+}).create({
+  content: [
+    ["is_warning", "envelope", "warning"],
+    ["pinned", "thumbtack", "pinned"],
+    ["unpinned", "thumbtack", "unpinned"],
+    ["invisible", "far-eye-slash", "unlisted"]
+  ]
+});

app/assets/javascripts/discourse/widgets/topic-status.js.es6

@@ -2,16 +2,7 @@ import { createWidget } from "discourse/widgets/widget";
 import { iconNode } from "discourse-common/lib/icon-library";
 import { h } from "virtual-dom";
 import { escapeExpression } from "discourse/lib/utilities";
-
+import TopicStatusIcons from "discourse/helpers/topic-status-icons";
-function renderIcon(name, key, canAct) {
-  const iconArgs = key === "unpinned" ? { class: "unpinned" } : null,
-    icon = iconNode(name, iconArgs);
-
-  const attributes = {
-    title: escapeExpression(I18n.t(`topic_statuses.${key}.help`))
-  };
-  return h(`${canAct ? "a" : "span"}.topic-status`, attributes, icon);
-}
 
 export default createWidget("topic-status", {
   tagName: "div.topic-statuses",
@@ -21,25 +12,16 @@ export default createWidget("topic-status", {
     const canAct = this.currentUser && !attrs.disableActions;
 
     const result = [];
-    const renderIconIf = (conditionProp, name, key) => {
+
-      if (!topic.get(conditionProp)) {
+    TopicStatusIcons.render(topic, function(name, key) {
-        return;
+      const iconArgs = key === "unpinned" ? { class: "unpinned" } : null,
-      }
+        icon = iconNode(name, iconArgs);
-      result.push(renderIcon(name, key, canAct));
+
+      const attributes = {
+        title: escapeExpression(I18n.t(`topic_statuses.${key}.help`))
       };
-
+      result.push(h(`${canAct ? "a" : "span"}.topic-status`, attributes, icon));
-    renderIconIf("is_warning", "envelope", "warning");
+    });
-
-    if (topic.get("closed") && topic.get("archived")) {
-      renderIcon("lock", "locked_and_archived");
-    } else {
-      renderIconIf("closed", "lock", "locked");
-      renderIconIf("archived", "lock", "archived");
-    }
-
-    renderIconIf("pinned", "thumbtack", "pinned");
-    renderIconIf("unpinned", "thumbtack", "unpinned");
-    renderIconIf("invisible", "far-eye-slash", "unlisted");
 
     return result;
   }