From 94b1999001464f4d3b3126ec7ed284935f9f8cec Mon Sep 17 00:00:00 2001
From: Kevin Vognar <kvognar@gmail.com>
Date: Sun, 10 Mar 2024 15:21:16 -0700
Subject: [PATCH] DEV: Refactor icon links to use Glimmer templates

The site header was refactored to a Glimmer component, which does not support the previous decorateWidget API. Refactor icon links to use Glimmer templates and the headerIcons.add API instead.
---
 ...s => initialize-for-header-icon-links.gjs} | 55 ++++++++-----------
 1 file changed, 24 insertions(+), 31 deletions(-)
 rename javascripts/discourse/initializers/{initialize-for-header-icon-links.js => initialize-for-header-icon-links.gjs} (58%)

diff --git a/javascripts/discourse/initializers/initialize-for-header-icon-links.js b/javascripts/discourse/initializers/initialize-for-header-icon-links.gjs
similarity index 58%
rename from javascripts/discourse/initializers/initialize-for-header-icon-links.js
rename to javascripts/discourse/initializers/initialize-for-header-icon-links.gjs
index fdb20e9..2d209ab 100644
--- a/javascripts/discourse/initializers/initialize-for-header-icon-links.js
+++ b/javascripts/discourse/initializers/initialize-for-header-icon-links.gjs
@@ -1,22 +1,16 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
-import { iconNode } from "discourse-common/lib/icon-library";
+import { iconHTML } from "discourse-common/lib/icon-library";
 import { dasherize } from "@ember/string";
 import isValidUrl from "../lib/isValidUrl";
-import { h } from "virtual-dom";
+import { htmlSafe } from "@ember/template";
 
-function buildIcon(icon) {
-  if (isValidUrl(icon)) {
-    return h(
-      "img",
-      {
-        attributes: {
-          src: icon,
-        },
-      },
-      ""
-    );
+function buildIcon(iconNameOrImageUrl) {
+  if (isValidUrl(iconNameOrImageUrl)) {
+    return <template>
+      <img src="{{iconNameOrImageUrl}}"/>
+    </template>
   } else {
-    return iconNode(icon.toLowerCase());
+    return htmlSafe(iconHTML(iconNameOrImageUrl.toLowerCase()));
   }
 }
 
@@ -38,24 +32,23 @@ export default {
           const rel = target ? "noopener" : "";
           const isLastLink =
             link === links[links.length - 1] ? ".last-custom-icon" : "";
-          const selector = `li.custom-header-icon-link.${className}.${viewClass}${isLastLink}`;
 
-          api.decorateWidget("header-icons:before", (helper) => {
-            return helper.h(selector, [
-              helper.h(
-                "a.icon.btn-flat",
-                {
-                  href,
-                  title,
-                  target,
-                  attributes: {
-                    rel,
-                  },
-                },
-                icon
-              ),
-            ]);
-          });
+          const iconComponent = <template>
+            <li class="custom-header-icon-link {{className}} {{viewClass}} {{isLastLink}}">
+              <a class="icon btn-flat"
+              href="{{href}}"
+              title="{{title}}"
+              target="{{target}}"
+              rel="{{rel}}"
+              >
+                {{icon}}
+              </a>
+            </li>
+          </template>
+
+          const beforeIcon = ['chat', 'search', 'hamburger', 'user-menu']
+
+          api.headerIcons.add(title, iconComponent, { before: beforeIcon })
         });
       } catch (error) {
         // eslint-disable-next-line no-console