DEV: Refactor UnreadIndicator (#28969)

Moves related code from topic-cell to the component. Also fixes a couple autotracking cases in topic-cell.

app/assets/javascripts/discourse/app/components/topic-list/topic-cell.gjs

@@ -15,48 +15,12 @@ import categoryLink from "discourse/helpers/category-link";
 import discourseTags from "discourse/helpers/discourse-tags";
 import topicFeaturedLink from "discourse/helpers/topic-featured-link";
 import { groupPath } from "discourse/lib/url";
-import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
 
 export default class TopicCell extends Component {
   @service currentUser;
   @service messageBus;
 
-  constructor() {
-    super(...arguments);
-
-    if (this.includeUnreadIndicator) {
-      this.messageBus.subscribe(this.unreadIndicatorChannel, this.onMessage);
-    }
-  }
-
-  willDestroy() {
-    super.willDestroy(...arguments);
-
-    this.messageBus.unsubscribe(this.unreadIndicatorChannel, this.onMessage);
-  }
-
-  @bind
-  onMessage(data) {
-    const nodeClassList = document.querySelector(
-      `.indicator-topic-${data.topic_id}`
-    ).classList;
-
-    nodeClassList.toggle("read", !data.show_indicator);
-  }
-
-  get unreadIndicatorChannel() {
-    return `/private-messages/unread-indicator/${this.args.topic.id}`;
-  }
-
-  get includeUnreadIndicator() {
-    return typeof this.args.topic.unread_by_group_member !== "undefined";
-  }
-
-  get unreadClass() {
-    return this.args.topic.unread_by_group_member ? "" : "read";
-  }
-
   get newDotText() {
     return this.currentUser?.trust_level > 0
       ? ""
@@ -64,11 +28,11 @@ export default class TopicCell extends Component {
   }
 
   get participantGroups() {
-    if (!this.args.topic.participant_groups) {
+    if (!this.args.topic.get("participant_groups")) {
       return [];
     }
 
-    return this.args.topic.participant_groups.map((name) => ({
+    return this.args.topic.get("participant_groups").map((name) => ({
       name,
       url: groupPath(name),
     }));
@@ -115,11 +79,7 @@ export default class TopicCell extends Component {
           @outletArgs={{hash topic=@topic}}
         />
         {{~! no whitespace ~}}
-        <UnreadIndicator
+        <UnreadIndicator @topic={{@topic}} />
-          @includeUnreadIndicator={{this.includeUnreadIndicator}}
-          @topicId={{@topic.id}}
-          class={{this.unreadClass}}
-        />
         {{~#if @showTopicPostBadges~}}
           <TopicPostBadges
             @unreadPosts={{@topic.unread_posts}}

app/assets/javascripts/discourse/app/components/topic-list/unread-indicator.gjs

@@ -1,21 +1,43 @@
-import { concat } from "@ember/helper";
+import Component from "@glimmer/component";
-import concatClass from "discourse/helpers/concat-class";
+import { service } from "@ember/service";
 import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
+import { bind } from "discourse-common/utils/decorators";
 
-const UnreadIndicator = <template>
+export default class UnreadIndicator extends Component {
-  {{~#if @includeUnreadIndicator~}}
+  @service messageBus;
-    &nbsp;<span
-      title={{i18n "topic.unread_indicator"}}
-      class={{concatClass
-        "badge badge-notification unread-indicator"
-        (concat "indicator-topic-" @topicId)
-      }}
-      ...attributes
-    >
-      {{~icon "asterisk"~}}
-    </span>
-  {{~/if~}}
-</template>;
 
-export default UnreadIndicator;
+  constructor() {
+    super(...arguments);
+    this.messageBus.subscribe(this.unreadIndicatorChannel, this.onMessage);
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.messageBus.unsubscribe(this.unreadIndicatorChannel, this.onMessage);
+  }
+
+  @bind
+  onMessage(data) {
+    this.args.topic.set("unread_by_group_member", data.show_indicator);
+  }
+
+  get unreadIndicatorChannel() {
+    return `/private-messages/unread-indicator/${this.args.topic.id}`;
+  }
+
+  get isUnread() {
+    return typeof this.args.topic.get("unread_by_group_member") !== "undefined";
+  }
+
+  <template>
+    {{~#if this.isUnread~}}
+      &nbsp;<span
+        title={{i18n "topic.unread_indicator"}}
+        class="badge badge-notification unread-indicator"
+      >
+        {{~icon "asterisk"~}}
+      </span>
+    {{~/if~}}
+  </template>
+}