diff --git a/app/assets/javascripts/discourse/app/components/modal/discard-draft.gjs b/app/assets/javascripts/discourse/app/components/modal/discard-draft.gjs
new file mode 100644
index 00000000000..54432c86a7c
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/discard-draft.gjs
@@ -0,0 +1,54 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import DButton from "discourse/components/d-button";
+import DModal from "discourse/components/d-modal";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class DiscardDraftModal extends Component {
+  @action
+  async discardDraft() {
+    await this.args.model.onDestroyDraft();
+    this.args.closeModal();
+  }
+
+  @action
+  async saveDraftAndClose() {
+    await this.args.model.onSaveDraft();
+    this.args.closeModal();
+  }
+
+  <template>
+    <DModal
+      @closeModal={{@closeModal}}
+      class="discard-draft-modal"
+      @dismissable={{false}}
+    >
+      <:body>
+        <div class="instructions">
+          {{i18n "post.cancel_composer.confirm"}}
+        </div>
+      </:body>
+
+      <:footer>
+        <DButton
+          @icon="far-trash-alt"
+          @label="post.cancel_composer.discard"
+          @action={{this.discardDraft}}
+          class="btn-danger discard-draft"
+        />
+        {{#if @model.showSaveDraftButton}}
+          <DButton
+            @label="post.cancel_composer.save_draft"
+            @action={{this.saveDraftAndClose}}
+            class="save-draft"
+          />
+        {{/if}}
+        <DButton
+          @label="post.cancel_composer.keep_editing"
+          @action={{@closeModal}}
+          class="keep-editing"
+        />
+      </:footer>
+    </DModal>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/modal/discard-draft.hbs b/app/assets/javascripts/discourse/app/components/modal/discard-draft.hbs
deleted file mode 100644
index fd966f5b665..00000000000
--- a/app/assets/javascripts/discourse/app/components/modal/discard-draft.hbs
+++ /dev/null
@@ -1,32 +0,0 @@
-<DModal
-  @closeModal={{@closeModal}}
-  class="discard-draft-modal"
-  @dismissable={{false}}
->
-  <:body>
-    <div class="instructions">
-      {{i18n "post.cancel_composer.confirm"}}
-    </div>
-  </:body>
-
-  <:footer>
-    <DButton
-      @icon="far-trash-alt"
-      @label="post.cancel_composer.discard"
-      @action={{this.discardDraft}}
-      class="btn-danger discard-draft"
-    />
-    {{#if @model.showSaveDraftButton}}
-      <DButton
-        @label="post.cancel_composer.save_draft"
-        @action={{this.saveDraftAndClose}}
-        class="save-draft"
-      />
-    {{/if}}
-    <DButton
-      @label="post.cancel_composer.keep_editing"
-      @action={{@closeModal}}
-      class="keep-editing"
-    />
-  </:footer>
-</DModal>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/modal/discard-draft.js b/app/assets/javascripts/discourse/app/components/modal/discard-draft.js
deleted file mode 100644
index d113e5af19b..00000000000
--- a/app/assets/javascripts/discourse/app/components/modal/discard-draft.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-
-export default class DiscardDraftModal extends Component {
-  @action
-  async discardDraft() {
-    await this.args.model.onDestroyDraft();
-    this.args.closeModal();
-  }
-
-  @action
-  async saveDraftAndClose() {
-    await this.args.model.onSaveDraft();
-    this.args.closeModal();
-  }
-}