DEV: Update chat `addToHeaderIcons` to pass component (#25885)

plugins/chat/assets/javascripts/discourse/components/chat/header/icon.gjs

@@ -80,20 +80,22 @@ export default class ChatHeaderIcon extends Component {
   }
 
   <template>
-    <a
-      href={{this.href}}
-      tabindex="0"
-      class={{concatClass "icon" "btn-flat" (if this.isActive "active")}}
-      title={{this.title}}
-    >
-      {{~icon this.icon~}}
-      {{#if this.showUnreadIndicator}}
-        <ChatHeaderIconUnreadIndicator
-          @urgentCount={{@urgentCount}}
-          @unreadCount={{@unreadCount}}
-          @indicatorPreference={{@indicatorPreference}}
-        />
-      {{/if}}
-    </a>
+    <li class="header-dropdown-toggle chat-header-icon">
+      <a
+        href={{this.href}}
+        tabindex="0"
+        class={{concatClass "icon" "btn-flat" (if this.isActive "active")}}
+        title={{this.title}}
+      >
+        {{~icon this.icon~}}
+        {{#if this.showUnreadIndicator}}
+          <ChatHeaderIconUnreadIndicator
+            @urgentCount={{@urgentCount}}
+            @unreadCount={{@unreadCount}}
+            @indicatorPreference={{@indicatorPreference}}
+          />
+        {{/if}}
+      </a>
+    </li>
   </template>
 }

plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js

@@ -6,6 +6,7 @@ import I18n from "discourse-i18n";
 import { MENTION_KEYWORDS } from "discourse/plugins/chat/discourse/components/chat-message";
 import { clearChatComposerButtons } from "discourse/plugins/chat/discourse/lib/chat-composer-buttons";
 import ChannelHashtagType from "discourse/plugins/chat/discourse/lib/hashtag-types/channel";
+import ChatHeaderIcon from "../components/chat/header/icon";
 import chatStyleguide from "../components/styleguide/organisms/chat";
 
 let _lastForcedRefreshAt;
@@ -167,7 +168,9 @@ export default {
 
       api.addCardClickListenerSelector(".chat-drawer-outlet");
 
-      api.addToHeaderIcons("chat-header-icon");
+      if (this.chatService.userCanChat) {
+        api.addToHeaderIcons(ChatHeaderIcon);
+      }
 
       api.addStyleguideSection?.({
         component: chatStyleguide,

plugins/chat/assets/javascripts/discourse/widgets/chat-header-icon.js

@@ -1,23 +0,0 @@
-import { hbs } from "ember-cli-htmlbars";
-import RenderGlimmer from "discourse/widgets/render-glimmer";
-import { createWidget } from "discourse/widgets/widget";
-
-export default createWidget("chat-header-icon", {
-  tagName: "li.header-dropdown-toggle.chat-header-icon",
-
-  services: ["chat"],
-
-  html() {
-    if (!this.chat.userCanChat) {
-      return;
-    }
-
-    return [
-      new RenderGlimmer(
-        this,
-        "div.widget-component-connector",
-        hbs`<Chat::Header::Icon />`
-      ),
-    ];
-  },
-});