diff --git a/app/assets/javascripts/discourse/app/components/topic-status.gjs b/app/assets/javascripts/discourse/app/components/topic-status.gjs
new file mode 100644
index 00000000000..3eacdd3cd50
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/topic-status.gjs
@@ -0,0 +1,105 @@
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { and } from "truth-helpers";
+import PluginOutlet from "discourse/components/plugin-outlet";
+import icon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class TopicStatus extends Component {
+  @service currentUser;
+
+  get canAct() {
+    return this.currentUser && !this.args.disableActions;
+  }
+
+  @action
+  togglePinned(e) {
+    const { topic } = this.args;
+    topic.pinned ? topic.clearPin() : topic.rePin();
+    e.preventDefault();
+  }
+
+  <template>
+    {{~! no whitespace ~}}
+    <span class="topic-statuses">
+      {{~#if (and @topic.closed @topic.archived)~}}
+        <span
+          title={{i18n "topic_statuses.locked_and_archived.help"}}
+          class="topic-status"
+        >{{icon "lock"}}</span>
+      {{~else if @topic.closed~}}
+        <span
+          title={{i18n "topic_statuses.locked.help"}}
+          class="topic-status"
+        >{{icon "lock"}}</span>
+      {{~else if @topic.archived~}}
+        <span
+          title={{i18n "topic_statuses.archived.help"}}
+          class="topic-status"
+        >{{icon "lock"}}</span>
+      {{~/if~}}
+
+      {{~#if @topic.is_warning~}}
+        <span
+          title={{i18n "topic_statuses.warning.help"}}
+          class="topic-status topic-status-warning"
+        >{{icon "envelope"}}</span>
+      {{~else if (and @showPrivateMessageIcon @topic.isPrivateMessage)~}}
+        <span
+          title={{i18n "topic_statuses.personal_message.help"}}
+          class="topic-status"
+        >{{icon "envelope"}}</span>
+      {{~/if~}}
+
+      {{~#if @topic.pinned~}}
+        {{~#if this.canAct~}}
+          <a
+            {{on "click" this.togglePinned}}
+            href
+            title={{i18n "topic_statuses.pinned.help"}}
+            class="topic-status"
+          >{{icon "thumbtack"}}</a>
+        {{~else~}}
+          <span
+            title={{i18n "topic_statuses.pinned.help"}}
+            class="topic-status"
+          >{{icon "thumbtack"}}</span>
+        {{~/if~}}
+      {{~else if @topic.unpinned~}}
+        {{~#if this.canAct~}}
+          <a
+            {{on "click" this.togglePinned}}
+            href
+            title={{i18n "topic_statuses.unpinned.help"}}
+            class="topic-status"
+          >{{icon "thumbtack" class="unpinned"}}</a>
+        {{~else~}}
+          <span
+            title={{i18n "topic_statuses.unpinned.help"}}
+            class="topic-status"
+          >{{icon "thumbtack" class="unpinned"}}</span>
+        {{~/if~}}
+      {{~/if~}}
+
+      {{~#if @topic.invisible~}}
+        <span
+          title={{i18n
+            "topic_statuses.unlisted.help"
+            unlistedReason=@topic.visibilityReasonTranslated
+          }}
+          class="topic-status"
+        >{{icon "far-eye-slash"}}</span>
+      {{~/if~}}
+
+      <PluginOutlet
+        @name="after-topic-status"
+        @outletArgs={{hash topic=this.topic}}
+      />
+      {{~! no whitespace ~}}
+    </span>
+    {{~! no whitespace ~}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/topic-status.hbs b/app/assets/javascripts/discourse/app/components/topic-status.hbs
deleted file mode 100644
index 377e02f5188..00000000000
--- a/app/assets/javascripts/discourse/app/components/topic-status.hbs
+++ /dev/null
@@ -1,69 +0,0 @@
-{{~#if this.topicClosedArchived~}}
-  <span
-    title={{this.closedArchivedTitle}}
-    class="topic-status"
-  >{{this.closedArchivedIcon}}</span>
-{{~/if~}}
-{{~#if this.closedIcon~}}
-  <span
-    title={{this.closedTitle}}
-    class="topic-status"
-  >{{this.closedIcon}}</span>
-{{~/if~}}
-{{~#if this.archivedIcon~}}
-  <span
-    title={{this.archivedTitle}}
-    class="topic-status"
-  >{{this.archivedIcon}}</span>
-{{~/if~}}
-{{~#if this.topicPrivateMessage~}}
-  <span
-    title={{this.privateMessageTitle}}
-    class="topic-status"
-  >{{this.privateMessageIcon}}</span>
-{{~/if~}}
-{{~#if this.topicWarning~}}
-  <span
-    title={{this.warningTitle}}
-    class="topic-status topic-status-warning"
-  >{{this.warningIcon}}</span>
-{{~/if~}}
-{{~#if this.topicPinned~}}
-  {{~#if this.canAct~}}
-    <a
-      href=""
-      title={{this.pinnedTitle}}
-      class="topic-status"
-    >{{this.pinnedIcon}}</a>
-  {{~else~}}
-    <span
-      title={{this.pinnedTitle}}
-      class="topic-status"
-    >{{this.pinnedIcon}}</span>
-  {{~/if~}}
-{{~/if~}}
-{{~#if this.topicUnpinned~}}
-  {{~#if this.canAct~}}
-    <a
-      href=""
-      title={{this.unpinnedTitle}}
-      class="topic-status"
-    >{{this.unpinnedIcon}}</a>
-  {{~else~}}
-    <span
-      title={{this.unpinnedTitle}}
-      class="topic-status"
-    >{{this.unpinnedIcon}}</span>
-  {{~/if~}}
-{{~/if~}}
-{{~#if this.topicInvisible~}}
-  <span
-    title={{this.invisibleTitle}}
-    class="topic-status"
-  >{{this.invisibleIcon}}</span>
-{{~/if~}}
-<PluginOutlet
-  @name="after-topic-status"
-  @connectorTagName="div"
-  @outletArgs={{hash topic=this.topic}}
-/>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/topic-status.js b/app/assets/javascripts/discourse/app/components/topic-status.js
deleted file mode 100644
index 74438ed5e5f..00000000000
--- a/app/assets/javascripts/discourse/app/components/topic-status.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import Component from "@ember/component";
-import { htmlSafe } from "@ember/template";
-import $ from "jquery";
-import { iconHTML } from "discourse-common/lib/icon-library";
-import discourseComputed from "discourse-common/utils/decorators";
-import I18n from "discourse-i18n";
-
-export default Component.extend({
-  disableActions: false,
-
-  classNames: ["topic-statuses"],
-
-  click(e) {
-    // only pin unpin for now
-    if (this.canAct && $(e.target).hasClass("d-icon-thumbtack")) {
-      const topic = this.topic;
-      topic.get("pinned") ? topic.clearPin() : topic.rePin();
-      return false;
-    }
-  },
-
-  @discourseComputed("disableActions")
-  canAct(disableActions) {
-    return this.currentUser && !disableActions;
-  },
-
-  @discourseComputed("topic.closed", "topic.archived")
-  topicClosedArchived(closed, archived) {
-    if (closed && archived) {
-      this._set("closedArchived", "lock", "locked_and_archived");
-      this._reset("closed");
-      this._reset("archived");
-      return true;
-    } else {
-      this._reset("closedArchived");
-      closed ? this._set("closed", "lock", "locked") : this._reset("closed");
-      archived
-        ? this._set("archived", "lock", "archived")
-        : this._reset("archived");
-      return false;
-    }
-  },
-
-  @discourseComputed("topic.is_warning")
-  topicWarning(warning) {
-    return warning
-      ? this._set("warning", "envelope", "warning")
-      : this._reset("warning");
-  },
-
-  @discourseComputed(
-    "showPrivateMessageIcon",
-    "topic.isPrivateMessage",
-    "topic.is_warning"
-  )
-  topicPrivateMessage(showPrivateMessageIcon, privateMessage, warning) {
-    return showPrivateMessageIcon && privateMessage && !warning
-      ? this._set("privateMessage", "envelope", "personal_message")
-      : this._reset("privateMessage");
-  },
-
-  @discourseComputed("topic.pinned")
-  topicPinned(pinned) {
-    return pinned
-      ? this._set("pinned", "thumbtack", "pinned")
-      : this._reset("pinned");
-  },
-
-  @discourseComputed("topic.unpinned")
-  topicUnpinned(unpinned) {
-    return unpinned
-      ? this._set("unpinned", "thumbtack", "unpinned", { class: "unpinned" })
-      : this._reset("unpinned");
-  },
-
-  @discourseComputed("topic.invisible")
-  topicInvisible(invisible) {
-    return invisible
-      ? this._set("invisible", "far-eye-slash", "unlisted")
-      : this._reset("invisible");
-  },
-
-  _set(name, icon, key, iconArgs) {
-    this.set(`${name}Icon`, htmlSafe(iconHTML(`${icon}`, iconArgs)));
-
-    const translationParams = {};
-
-    if (name === "invisible") {
-      translationParams.unlistedReason = this.topic.visibilityReasonTranslated;
-    }
-
-    this.set(
-      `${name}Title`,
-      I18n.t(`topic_statuses.${key}.help`, translationParams)
-    );
-    return true;
-  },
-
-  _reset(name) {
-    this.set(`${name}Icon`, null);
-    this.set(`${name}Title`, null);
-    return false;
-  },
-});