diff --git a/app/assets/javascripts/discourse/app/components/reviewable-bundled-action.gjs b/app/assets/javascripts/discourse/app/components/reviewable-bundled-action.gjs
new file mode 100644
index 00000000000..21d74a3bfc7
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/reviewable-bundled-action.gjs
@@ -0,0 +1,71 @@
+import Component from "@glimmer/component";
+import DropdownSelectBox from "select-kit/components/dropdown-select-box";
+import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
+import { dasherize } from "@ember/string";
+import { hash } from "@ember/helper";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+import { isRTL } from "discourse/lib/text-direction";
+
+export default class ReviewableBundledAction extends Component {
+  <template>
+    {{#if this.multiple}}
+      <DropdownSelectBox
+        @nameProperty="label"
+        @content={{@bundle.actions}}
+        @onChange={{this.perform}}
+        @options={{hash
+          showCaret=true
+          disabled=@reviewableUpdating
+          placement=this.placement
+          translatedNone=@bundle.label
+        }}
+        @class={{concatClass
+          "reviewable-action-dropdown"
+          "btn-icon-text"
+          (dasherize this.first.id)
+          this.first.button_class
+        }}
+      />
+    {{else}}
+      <DButton
+        @action={{this.perform}}
+        @translatedLabel={{this.first.label}}
+        @disabled={{@reviewableUpdating}}
+        class={{concatClass
+          "reviewable-action"
+          (dasherize this.first.id)
+          this.first.button_class
+        }}
+      />
+    {{/if}}
+  </template>
+
+  @service site;
+
+  get multiple() {
+    return this.args.bundle.actions.length > 1;
+  }
+
+  get first() {
+    return this.args.bundle.actions[0];
+  }
+
+  get placement() {
+    const vertical = this.site.mobileView ? "top" : "bottom";
+    const horizontal = isRTL() ? "end" : "start";
+
+    return `${vertical}-${horizontal}`;
+  }
+
+  @action
+  perform(id) {
+    if (id) {
+      const _action = this.args.bundle.actions.find((a) => a.id === id);
+      this.args.performAction(_action);
+    } else {
+      this.args.performAction(this.first);
+    }
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/reviewable-bundled-action.hbs b/app/assets/javascripts/discourse/app/components/reviewable-bundled-action.hbs
deleted file mode 100644
index d4566708028..00000000000
--- a/app/assets/javascripts/discourse/app/components/reviewable-bundled-action.hbs
+++ /dev/null
@@ -1,29 +0,0 @@
-{{#if this.multiple}}
-  <DropdownSelectBox
-    @class={{concat-class
-      "reviewable-action-dropdown btn-icon-text"
-      (dasherize this.first.id)
-      this.first.button_class
-    }}
-    @nameProperty="label"
-    @content={{this.bundle.actions}}
-    @onChange={{action "performById"}}
-    @options={{hash
-      showCaret=true
-      disabled=this.reviewableUpdating
-      placement=this.placement
-      translatedNone=this.bundle.label
-    }}
-  />
-{{else}}
-  <DButton
-    @class={{concat-class
-      "reviewable-action"
-      (dasherize this.first.id)
-      this.first.button_class
-    }}
-    @action={{action "performFirst"}}
-    @translatedLabel={{this.first.label}}
-    @disabled={{this.reviewableUpdating}}
-  />
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/reviewable-bundled-action.js b/app/assets/javascripts/discourse/app/components/reviewable-bundled-action.js
deleted file mode 100644
index bc892b078db..00000000000
--- a/app/assets/javascripts/discourse/app/components/reviewable-bundled-action.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { alias, gt } from "@ember/object/computed";
-import Component from "@ember/component";
-import discourseComputed from "discourse-common/utils/decorators";
-import { isRTL } from "discourse/lib/text-direction";
-
-export default Component.extend({
-  tagName: "",
-
-  multiple: gt("bundle.actions.length", 1),
-  first: alias("bundle.actions.firstObject"),
-
-  @discourseComputed()
-  placement() {
-    const vertical = this.site.mobileView ? "top" : "bottom",
-      horizontal = isRTL() ? "end" : "start";
-    return `${vertical}-${horizontal}`;
-  },
-
-  actions: {
-    performById(id) {
-      this.performAction(this.get("bundle.actions").findBy("id", id));
-    },
-
-    performFirst() {
-      this.performAction(this.first);
-    },
-  },
-});