diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline.gjs b/app/assets/javascripts/discourse/app/components/topic-timeline.gjs
new file mode 100644
index 00000000000..a01572d65cd
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/topic-timeline.gjs
@@ -0,0 +1,76 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { modifier } from "ember-modifier";
+import Container from "discourse/components/topic-timeline/container";
+import concatClass from "discourse/helpers/concat-class";
+
+export default class TopicTimeline extends Component {
+  @tracked docked = false;
+  @tracked dockedBottom = false;
+  enteredIndex = this.args.prevEvent
+    ? this.args.prevEvent.postIndex - 1
+    : this.args.enteredIndex;
+
+  addShowClass = modifier((el) => {
+    if (this.args.fullscreen) {
+      el.classList.add("show");
+    }
+  });
+
+  @action
+  setDocked(value) {
+    if (this.docked !== value) {
+      this.docked = value;
+    }
+  }
+
+  @action
+  setDockedBottom(value) {
+    if (this.dockedBottom !== value) {
+      this.dockedBottom = value;
+    }
+  }
+
+  <template>
+    <div
+      {{this.addShowClass}}
+      class={{concatClass
+        "timeline-container"
+        (if @fullscreen "timeline-fullscreen")
+        (if this.docked "timeline-docked")
+        (if this.dockedBottom "timeline-docked-bottom")
+      }}
+    >
+      <div class="topic-timeline">
+        <Container
+          @model={{@model}}
+          @enteredIndex={{this.enteredIndex}}
+          @jumpTop={{@jumpTop}}
+          @jumpBottom={{@jumpBottom}}
+          @jumpEnd={{@jumpEnd}}
+          @jumpToIndex={{@jumpToIndex}}
+          @jumpToPostPrompt={{@jumpToPostPrompt}}
+          @fullscreen={{@fullscreen}}
+          @toggleMultiSelect={{@toggleMultiSelect}}
+          @showTopicSlowModeUpdate={{@showTopicSlowModeUpdate}}
+          @showTopReplies={{@showTopReplies}}
+          @deleteTopic={{@deleteTopic}}
+          @recoverTopic={{@recoverTopic}}
+          @toggleClosed={{@toggleClosed}}
+          @toggleArchived={{@toggleArchived}}
+          @toggleVisibility={{@toggleVisibility}}
+          @showTopicTimerModal={{@showTopicTimerModal}}
+          @showFeatureTopic={{@showFeatureTopic}}
+          @showChangeTimestamp={{@showChangeTimestamp}}
+          @resetBumpDate={{@resetBumpDate}}
+          @convertToPublicTopic={{@convertToPublicTopic}}
+          @convertToPrivateMessage={{@convertToPrivateMessage}}
+          @replyToPost={{@replyToPost}}
+          @setDocked={{this.setDocked}}
+          @setDockedBottom={{this.setDockedBottom}}
+        />
+      </div>
+    </div>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline.hbs b/app/assets/javascripts/discourse/app/components/topic-timeline.hbs
deleted file mode 100644
index 4d2ea493b1a..00000000000
--- a/app/assets/javascripts/discourse/app/components/topic-timeline.hbs
+++ /dev/null
@@ -1,34 +0,0 @@
-<div
-  class={{concat-class "timeline-container" this.classes}}
-  {{did-insert this.addShowClass}}
->
-  <div class="topic-timeline">
-    <TopicTimeline::Container
-      @model={{@model}}
-      @enteredIndex={{this.enteredIndex}}
-      @jumpTop={{@jumpTop}}
-      @jumpBottom={{@jumpBottom}}
-      @jumpEnd={{@jumpEnd}}
-      @jumpToIndex={{@jumpToIndex}}
-      @jumpToPostPrompt={{@jumpToPostPrompt}}
-      @fullscreen={{@fullscreen}}
-      @toggleMultiSelect={{@toggleMultiSelect}}
-      @showTopicSlowModeUpdate={{@showTopicSlowModeUpdate}}
-      @showTopReplies={{@showTopReplies}}
-      @deleteTopic={{@deleteTopic}}
-      @recoverTopic={{@recoverTopic}}
-      @toggleClosed={{@toggleClosed}}
-      @toggleArchived={{@toggleArchived}}
-      @toggleVisibility={{@toggleVisibility}}
-      @showTopicTimerModal={{@showTopicTimerModal}}
-      @showFeatureTopic={{@showFeatureTopic}}
-      @showChangeTimestamp={{@showChangeTimestamp}}
-      @resetBumpDate={{@resetBumpDate}}
-      @convertToPublicTopic={{@convertToPublicTopic}}
-      @convertToPrivateMessage={{@convertToPrivateMessage}}
-      @replyToPost={{@replyToPost}}
-      @setDocked={{this.setDocked}}
-      @setDockedBottom={{this.setDockedBottom}}
-    />
-  </div>
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline.js b/app/assets/javascripts/discourse/app/components/topic-timeline.js
deleted file mode 100644
index c654e6ef7c9..00000000000
--- a/app/assets/javascripts/discourse/app/components/topic-timeline.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import { bind } from "discourse-common/utils/decorators";
-
-export default class TopicTimeline extends Component {
-  @service siteSettings;
-  @service currentUser;
-
-  @tracked enteredIndex = this.args.enteredIndex;
-  @tracked docked = false;
-  @tracked dockedBottom = false;
-
-  constructor() {
-    super(...arguments);
-
-    if (this.args.prevEvent) {
-      this.enteredIndex = this.args.prevEvent.postIndex - 1;
-    }
-  }
-
-  get createdAt() {
-    return new Date(this.args.model.created_at);
-  }
-
-  get classes() {
-    const classes = [];
-    if (this.args.fullscreen) {
-      classes.push("timeline-fullscreen");
-    }
-
-    if (this.docked) {
-      classes.push("timeline-docked");
-      if (this.dockedBottom) {
-        classes.push("timeline-docked-bottom");
-      }
-    }
-
-    return classes.join(" ");
-  }
-
-  @bind
-  addShowClass(element) {
-    if (this.args.fullscreen && !this.args.addShowClass) {
-      element.classList.add("show");
-    }
-  }
-
-  @action
-  setDocked(value) {
-    if (this.docked !== value) {
-      this.docked = value;
-    }
-  }
-
-  @action
-  setDockedBottom(value) {
-    if (this.dockedBottom !== value) {
-      this.dockedBottom = value;
-    }
-  }
-}