From 3930064fd180c0893c403dce8bcb881bf6ec1a2b Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Tue, 30 Apr 2024 16:44:49 +0200
Subject: [PATCH] DEV: Convert various components to gjs (#26782)

Those were all low hanging fruits - all were already glimmer components, so this was mostly merging js and hbs files and adding imports.

(occasionally also adds/fixes class names)
---
 .../addon/components/plugin-commit-hash.gjs   | 19 ++++
 .../addon/components/plugin-commit-hash.hbs   |  9 --
 .../addon/components/plugin-commit-hash.js    | 11 ---
 .../discourse/app/components/badge-button.gjs | 27 ++++++
 .../discourse/app/components/badge-button.hbs | 11 ---
 .../discourse/app/components/badge-button.js  | 12 ---
 ...de-notice.js => bootstrap-mode-notice.gjs} |  9 ++
 .../app/components/bootstrap-mode-notice.hbs  |  5 -
 .../app/components/card-container.gjs         | 51 ++++++++++
 .../app/components/card-container.hbs         | 19 ----
 .../app/components/card-container.js          | 26 ------
 .../app/components/composer-save-button.gjs   | 23 +++++
 .../app/components/composer-save-button.hbs   |  9 --
 .../app/components/composer-save-button.js    |  9 --
 .../form-template-field/multi-select.gjs      | 57 ++++++++++++
 .../form-template-field/multi-select.hbs      | 40 --------
 .../form-template-field/multi-select.js       |  9 --
 ...component-with-deprecated-parent-view.gjs} |  0
 .../loading-slider-fallback-spinner.gjs       | 24 +++++
 .../loading-slider-fallback-spinner.hbs       |  5 -
 .../loading-slider-fallback-spinner.js        | 13 ---
 .../app/components/modal-container.gjs        | 31 +++++++
 .../app/components/modal-container.hbs        | 12 ---
 .../app/components/modal-container.js         | 12 ---
 .../app/components/modal/dismiss-read.gjs     | 38 ++++++++
 .../app/components/modal/dismiss-read.hbs     | 24 -----
 .../app/components/modal/dismiss-read.js      |  6 --
 ...s => new-list-header-controls-wrapper.gjs} | 20 ++++
 .../new-list-header-controls-wrapper.hbs      | 13 ---
 .../app/components/offline-indicator.gjs      | 31 +++++++
 .../app/components/offline-indicator.hbs      | 10 --
 .../app/components/offline-indicator.js       | 16 ----
 ...ding-slider.js => page-loading-slider.gjs} | 39 ++++++--
 .../app/components/page-loading-slider.hbs    | 17 ----
 .../user-nav/messages-secondary-nav.gjs       | 13 +++
 .../user-nav/messages-secondary-nav.hbs       |  3 -
 .../user-nav/messages-secondary-nav.js        | 10 --
 .../app/components/user-status-message.gjs    | 51 ++++++++++
 .../app/components/user-status-message.hbs    | 27 ------
 .../app/components/user-status-message.js     | 19 ----
 .../{watch-read.js => watch-read.gjs}         | 10 +-
 .../{da-base-field.js => da-base-field.gjs}   |  0
 .../discourse/components/lazy-iframe.gjs      | 48 ++++++++++
 .../discourse/components/lazy-iframe.hbs      | 11 ---
 .../discourse/components/lazy-iframe.js       | 34 -------
 .../discourse/components/lazy-video.gjs       | 92 +++++++++++++++++++
 .../discourse/components/lazy-video.hbs       | 54 -----------
 .../discourse/components/lazy-video.js        | 31 -------
 48 files changed, 570 insertions(+), 490 deletions(-)
 create mode 100644 app/assets/javascripts/admin/addon/components/plugin-commit-hash.gjs
 delete mode 100644 app/assets/javascripts/admin/addon/components/plugin-commit-hash.hbs
 delete mode 100644 app/assets/javascripts/admin/addon/components/plugin-commit-hash.js
 create mode 100644 app/assets/javascripts/discourse/app/components/badge-button.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/badge-button.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/badge-button.js
 rename app/assets/javascripts/discourse/app/components/{bootstrap-mode-notice.js => bootstrap-mode-notice.gjs} (64%)
 delete mode 100644 app/assets/javascripts/discourse/app/components/bootstrap-mode-notice.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/card-container.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/card-container.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/card-container.js
 create mode 100644 app/assets/javascripts/discourse/app/components/composer-save-button.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/composer-save-button.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/composer-save-button.js
 create mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/multi-select.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/form-template-field/multi-select.js
 rename app/assets/javascripts/discourse/app/components/{glimmer-component-with-deprecated-parent-view.js => glimmer-component-with-deprecated-parent-view.gjs} (100%)
 create mode 100644 app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.js
 create mode 100644 app/assets/javascripts/discourse/app/components/modal-container.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/modal-container.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/modal-container.js
 create mode 100644 app/assets/javascripts/discourse/app/components/modal/dismiss-read.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/modal/dismiss-read.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/modal/dismiss-read.js
 rename app/assets/javascripts/discourse/app/components/{new-list-header-controls-wrapper.js => new-list-header-controls-wrapper.gjs} (50%)
 delete mode 100644 app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/offline-indicator.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/offline-indicator.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/offline-indicator.js
 rename app/assets/javascripts/discourse/app/components/{page-loading-slider.js => page-loading-slider.gjs} (66%)
 delete mode 100644 app/assets/javascripts/discourse/app/components/page-loading-slider.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.js
 create mode 100644 app/assets/javascripts/discourse/app/components/user-status-message.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/user-status-message.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/user-status-message.js
 rename app/assets/javascripts/discourse/app/components/{watch-read.js => watch-read.gjs} (85%)
 rename plugins/automation/admin/assets/javascripts/admin/components/fields/{da-base-field.js => da-base-field.gjs} (100%)
 create mode 100644 plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.gjs
 delete mode 100644 plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.hbs
 delete mode 100644 plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js
 create mode 100644 plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.gjs
 delete mode 100644 plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs
 delete mode 100644 plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.js

diff --git a/app/assets/javascripts/admin/addon/components/plugin-commit-hash.gjs b/app/assets/javascripts/admin/addon/components/plugin-commit-hash.gjs
new file mode 100644
index 00000000000..9adc21d1474
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/plugin-commit-hash.gjs
@@ -0,0 +1,19 @@
+import Component from "@glimmer/component";
+
+export default class PluginCommitHash extends Component {
+  get shortCommitHash() {
+    return this.args.plugin.commitHash?.slice(0, 7);
+  }
+
+  <template>
+    {{#if @plugin.commitHash}}
+      <a
+        href={{@plugin.commitUrl}}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="current commit-hash"
+        title={{@plugin.commitHash}}
+      >{{this.shortCommitHash}}</a>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/admin/addon/components/plugin-commit-hash.hbs b/app/assets/javascripts/admin/addon/components/plugin-commit-hash.hbs
deleted file mode 100644
index 8bfb11c40bd..00000000000
--- a/app/assets/javascripts/admin/addon/components/plugin-commit-hash.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-{{#if this.commitHash}}
-  <a
-    href={{@plugin.commitUrl}}
-    target="_blank"
-    rel="noopener noreferrer"
-    class="current commit-hash"
-    title={{this.commitHash}}
-  >{{this.shortCommitHash}}</a>
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/plugin-commit-hash.js b/app/assets/javascripts/admin/addon/components/plugin-commit-hash.js
deleted file mode 100644
index f8205402918..00000000000
--- a/app/assets/javascripts/admin/addon/components/plugin-commit-hash.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Component from "@glimmer/component";
-
-export default class PluginCommitHash extends Component {
-  get shortCommitHash() {
-    return this.commitHash?.slice(0, 7);
-  }
-
-  get commitHash() {
-    return this.args.plugin.commitHash;
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/components/badge-button.gjs b/app/assets/javascripts/discourse/app/components/badge-button.gjs
new file mode 100644
index 00000000000..2abddb36646
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/badge-button.gjs
@@ -0,0 +1,27 @@
+import Component from "@glimmer/component";
+import iconOrImage from "discourse/helpers/icon-or-image";
+import domFromString from "discourse-common/lib/dom-from-string";
+
+export default class BadgeButton extends Component {
+  get title() {
+    const description = this.args.badge?.description;
+    if (description) {
+      return domFromString(`<div>${description}</div>`)[0].innerText;
+    }
+  }
+
+  <template>
+    <span
+      title={{this.title}}
+      data-badge-name={{@badge.name}}
+      class="user-badge
+        {{@badge.badgeTypeClassName}}
+        {{unless @badge.enabled 'disabled'}}"
+      ...attributes
+    >
+      {{iconOrImage @badge}}
+      <span class="badge-display-name">{{@badge.name}}</span>
+      {{yield}}
+    </span>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/badge-button.hbs b/app/assets/javascripts/discourse/app/components/badge-button.hbs
deleted file mode 100644
index e127ded1556..00000000000
--- a/app/assets/javascripts/discourse/app/components/badge-button.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-<span
-  class="user-badge
-    {{@badge.badgeTypeClassName}}
-    {{unless @badge.enabled 'disabled'}}"
-  title={{this.title}}
-  data-badge-name={{@badge.name}}
->
-  {{icon-or-image @badge}}
-  <span class="badge-display-name">{{@badge.name}}</span>
-  {{yield}}
-</span>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/badge-button.js b/app/assets/javascripts/discourse/app/components/badge-button.js
deleted file mode 100644
index 8b44d859cd1..00000000000
--- a/app/assets/javascripts/discourse/app/components/badge-button.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from "@glimmer/component";
-import domFromString from "discourse-common/lib/dom-from-string";
-
-// Takes @badge as argument.
-export default class BadgeButtonComponent extends Component {
-  get title() {
-    const description = this.args.badge?.description;
-    if (description) {
-      return domFromString(`<div>${description}</div>`)[0].innerText;
-    }
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/components/bootstrap-mode-notice.js b/app/assets/javascripts/discourse/app/components/bootstrap-mode-notice.gjs
similarity index 64%
rename from app/assets/javascripts/discourse/app/components/bootstrap-mode-notice.js
rename to app/assets/javascripts/discourse/app/components/bootstrap-mode-notice.gjs
index 1edf07efc90..a3cbaf17d68 100644
--- a/app/assets/javascripts/discourse/app/components/bootstrap-mode-notice.js
+++ b/app/assets/javascripts/discourse/app/components/bootstrap-mode-notice.gjs
@@ -1,6 +1,7 @@
 import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
 import DiscourseURL from "discourse/lib/url";
 
 export default class BootstrapModeNotice extends Component {
@@ -12,4 +13,12 @@ export default class BootstrapModeNotice extends Component {
       `/t/-/${this.siteSettings.admin_quick_start_topic_id}`
     );
   }
+
+  <template>
+    <DButton
+      @action={{this.routeToAdminGuide}}
+      @label="bootstrap_mode"
+      class="btn-default bootstrap-mode"
+    />
+  </template>
 }
diff --git a/app/assets/javascripts/discourse/app/components/bootstrap-mode-notice.hbs b/app/assets/javascripts/discourse/app/components/bootstrap-mode-notice.hbs
deleted file mode 100644
index 7c1e030e756..00000000000
--- a/app/assets/javascripts/discourse/app/components/bootstrap-mode-notice.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<DButton
-  class="btn-default bootstrap-mode"
-  @label="bootstrap_mode"
-  @action={{this.routeToAdminGuide}}
-/>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/card-container.gjs b/app/assets/javascripts/discourse/app/components/card-container.gjs
new file mode 100644
index 00000000000..cf904448d4e
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/card-container.gjs
@@ -0,0 +1,51 @@
+import Component from "@glimmer/component";
+import { inject as controller } from "@ember/controller";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import GroupCardContents from "discourse/components/group-card-contents";
+import UserCardContents from "discourse/components/user-card-contents";
+import routeAction from "discourse/helpers/route-action";
+import DiscourseURL, { groupPath, userPath } from "discourse/lib/url";
+import PluginOutlet from "./plugin-outlet";
+
+export default class CardContainer extends Component {
+  @service site;
+  @controller topic;
+
+  @action
+  filterPosts(user) {
+    this.topic.send("filterParticipant", user);
+  }
+
+  @action
+  showUser(user) {
+    DiscourseURL.routeTo(userPath(user.username_lower));
+  }
+
+  @action
+  showGroup(group) {
+    DiscourseURL.routeTo(groupPath(group.name));
+  }
+
+  <template>
+    {{#if this.site.mobileView}}
+      <div class="card-cloak hidden"></div>
+    {{/if}}
+
+    <PluginOutlet @name="user-card-content-container">
+      <UserCardContents
+        @topic={{this.topic.model}}
+        @showUser={{this.showUser}}
+        @filterPosts={{this.filterPosts}}
+        @composePrivateMessage={{routeAction "composePrivateMessage"}}
+        role="dialog"
+      />
+    </PluginOutlet>
+
+    <GroupCardContents
+      @topic={{this.topic.model}}
+      @showUser={{this.showUser}}
+      @showGroup={{this.showGroup}}
+    />
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/card-container.hbs b/app/assets/javascripts/discourse/app/components/card-container.hbs
deleted file mode 100644
index 487e2d686bd..00000000000
--- a/app/assets/javascripts/discourse/app/components/card-container.hbs
+++ /dev/null
@@ -1,19 +0,0 @@
-{{#if this.site.mobileView}}
-  <div class="card-cloak hidden"></div>
-{{/if}}
-
-<PluginOutlet @name="user-card-content-container">
-  <UserCardContents
-    @topic={{this.topic.model}}
-    @showUser={{this.showUser}}
-    @filterPosts={{this.filterPosts}}
-    @composePrivateMessage={{route-action "composePrivateMessage"}}
-    role="dialog"
-  />
-</PluginOutlet>
-
-<GroupCardContents
-  @topic={{this.topic.model}}
-  @showUser={{this.showUser}}
-  @showGroup={{this.showGroup}}
-/>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/card-container.js b/app/assets/javascripts/discourse/app/components/card-container.js
deleted file mode 100644
index f3e2e97891d..00000000000
--- a/app/assets/javascripts/discourse/app/components/card-container.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Component from "@glimmer/component";
-import { inject as controller } from "@ember/controller";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import DiscourseURL, { groupPath, userPath } from "discourse/lib/url";
-
-export default class CardWrapper extends Component {
-  @service site;
-  @controller topic;
-
-  @action
-  filterPosts(user) {
-    const topicController = this.topic;
-    topicController.send("filterParticipant", user);
-  }
-
-  @action
-  showUser(user) {
-    DiscourseURL.routeTo(userPath(user.username_lower));
-  }
-
-  @action
-  showGroup(group) {
-    DiscourseURL.routeTo(groupPath(group.name));
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/components/composer-save-button.gjs b/app/assets/javascripts/discourse/app/components/composer-save-button.gjs
new file mode 100644
index 00000000000..eb943f8bc55
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/composer-save-button.gjs
@@ -0,0 +1,23 @@
+import Component from "@glimmer/component";
+import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
+import { translateModKey } from "discourse/lib/utilities";
+import I18n from "discourse-i18n";
+
+export default class ComposerSaveButton extends Component {
+  get translatedTitle() {
+    return I18n.t("composer.title", { modifier: translateModKey("Meta+") });
+  }
+
+  <template>
+    <DButton
+      @action={{@action}}
+      @label={{@label}}
+      @icon={{@icon}}
+      @translatedTitle={{this.translatedTitle}}
+      @forwardEvent={{@forwardEvent}}
+      class={{concatClass "btn-primary create" (if @disabledSubmit "disabled")}}
+      ...attributes
+    />
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/composer-save-button.hbs b/app/assets/javascripts/discourse/app/components/composer-save-button.hbs
deleted file mode 100644
index 09085b4c3dc..00000000000
--- a/app/assets/javascripts/discourse/app/components/composer-save-button.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<DButton
-  @translatedTitle={{this.translatedTitle}}
-  @label={{@label}}
-  @action={{@action}}
-  @icon={{@icon}}
-  @forwardEvent={{@forwardEvent}}
-  class="btn-primary create {{if @disabledSubmit 'disabled'}}"
-  ...attributes
-/>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/composer-save-button.js b/app/assets/javascripts/discourse/app/components/composer-save-button.js
deleted file mode 100644
index 10525e55e65..00000000000
--- a/app/assets/javascripts/discourse/app/components/composer-save-button.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Component from "@glimmer/component";
-import { translateModKey } from "discourse/lib/utilities";
-import I18n from "discourse-i18n";
-
-export default class ComposerSaveButton extends Component {
-  get translatedTitle() {
-    return I18n.t("composer.title", { modifier: translateModKey("Meta+") });
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.gjs b/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.gjs
new file mode 100644
index 00000000000..8a1130ddd2d
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.gjs
@@ -0,0 +1,57 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import icon from "discourse-common/helpers/d-icon";
+
+export default class FormTemplateFieldMultiSelect extends Component {
+  @action
+  isSelected(option) {
+    return this.args.value?.includes(option);
+  }
+
+  <template>
+    <div
+      data-field-type="multi-select"
+      class="control-group form-template-field"
+    >
+      {{#if @attributes.label}}
+        <label class="form-template-field__label">
+          {{@attributes.label}}
+          {{#if @validations.required}}
+            {{icon "asterisk" class="form-template-field__required-indicator"}}
+          {{/if}}
+        </label>
+      {{/if}}
+
+      {{#if @attributes.description}}
+        <span class="form-template-field__description">
+          {{htmlSafe @attributes.description}}
+        </span>
+      {{/if}}
+
+      {{! TODO(@keegan): Update implementation to use <MultiSelect/> instead }}
+      {{! Current using <select multiple> as it integrates easily with FormData (will update in v2) }}
+      <select
+        name={{@id}}
+        required={{if @validations.required "required" ""}}
+        multiple="multiple"
+        class="form-template-field__multi-select"
+      >
+        {{#if @attributes.none_label}}
+          <option
+            class="form-template-field__multi-select-placeholder"
+            value=""
+            disabled
+            hidden
+          >{{@attributes.none_label}}</option>
+        {{/if}}
+        {{#each @choices as |choice|}}
+          <option
+            value={{choice}}
+            selected={{this.isSelected choice}}
+          >{{choice}}</option>
+        {{/each}}
+      </select>
+    </div>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs
deleted file mode 100644
index 7b20016b0e5..00000000000
--- a/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="control-group form-template-field" data-field-type="multi-select">
-  {{#if @attributes.label}}
-    <label class="form-template-field__label">
-      {{@attributes.label}}
-      {{#if @validations.required}}
-        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
-      {{/if}}
-    </label>
-  {{/if}}
-
-  {{#if @attributes.description}}
-    <span class="form-template-field__description">
-      {{html-safe @attributes.description}}
-    </span>
-  {{/if}}
-
-  {{! TODO(@keegan): Update implementation to use <MultiSelect/> instead }}
-  {{! Current using <select multiple> as it integrates easily with FormData (will update in v2) }}
-  <select
-    name={{@id}}
-    class="form-template-field__multi-select"
-    required={{if @validations.required "required" ""}}
-    multiple="multiple"
-  >
-    {{#if @attributes.none_label}}
-      <option
-        class="form-template-field__multi-select-placeholder"
-        value=""
-        disabled
-        hidden
-      >{{@attributes.none_label}}</option>
-    {{/if}}
-    {{#each @choices as |choice|}}
-      <option
-        value={{choice}}
-        selected={{this.isSelected choice}}
-      >{{choice}}</option>
-    {{/each}}
-  </select>
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.js b/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.js
deleted file mode 100644
index be6f59a9f91..00000000000
--- a/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-
-export default class FormTemplateFieldMultiSelect extends Component {
-  @action
-  isSelected(option) {
-    return this.args.value?.includes(option);
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/components/glimmer-component-with-deprecated-parent-view.js b/app/assets/javascripts/discourse/app/components/glimmer-component-with-deprecated-parent-view.gjs
similarity index 100%
rename from app/assets/javascripts/discourse/app/components/glimmer-component-with-deprecated-parent-view.js
rename to app/assets/javascripts/discourse/app/components/glimmer-component-with-deprecated-parent-view.gjs
diff --git a/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.gjs b/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.gjs
new file mode 100644
index 00000000000..c2b7ab54319
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.gjs
@@ -0,0 +1,24 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import bodyClass from "discourse/helpers/body-class";
+import hideApplicationFooter from "discourse/helpers/hide-application-footer";
+import loadingSpinner from "discourse/helpers/loading-spinner";
+
+export default class LoadingSliderFallbackSpinner extends Component {
+  @service loadingSlider;
+
+  get shouldDisplay() {
+    const { mode, loading, stillLoading } = this.loadingSlider;
+    return (
+      (mode === "spinner" && loading) || (mode === "slider" && stillLoading)
+    );
+  }
+
+  <template>
+    {{#if this.shouldDisplay}}
+      <div class="route-loading-spinner">{{loadingSpinner}}</div>
+      {{bodyClass "has-route-loading-spinner"}}
+      {{hideApplicationFooter}}
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.hbs b/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.hbs
deleted file mode 100644
index 2f7f9d1ba5f..00000000000
--- a/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-{{#if this.shouldDisplay}}
-  <div class="route-loading-spinner">{{loading-spinner}}</div>
-  {{body-class "has-route-loading-spinner"}}
-  {{hide-application-footer}}
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.js b/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.js
deleted file mode 100644
index a6ff90bc283..00000000000
--- a/app/assets/javascripts/discourse/app/components/loading-slider-fallback-spinner.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Component from "@glimmer/component";
-import { service } from "@ember/service";
-
-export default class LoadingSliderFallbackSpinner extends Component {
-  @service loadingSlider;
-
-  get shouldDisplay() {
-    const { mode, loading, stillLoading } = this.loadingSlider;
-    return (
-      (mode === "spinner" && loading) || (mode === "slider" && stillLoading)
-    );
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/components/modal-container.gjs b/app/assets/javascripts/discourse/app/components/modal-container.gjs
new file mode 100644
index 00000000000..5ca80a6fbe3
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal-container.gjs
@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+import { array } from "@ember/helper";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { service } from "@ember/service";
+
+export default class ModalContainer extends Component {
+  @service modal;
+
+  @action
+  closeModal(data) {
+    this.modal.close(data);
+  }
+
+  <template>
+    <div
+      {{didInsert this.modal.setContainerElement}}
+      class="modal-container"
+    ></div>
+
+    {{#if this.modal.activeModal}}
+      {{#each (array this.modal.activeModal) as |activeModal|}}
+        {{! #each ensures that the activeModal component/model are updated atomically }}
+        <activeModal.component
+          @model={{activeModal.opts.model}}
+          @closeModal={{this.closeModal}}
+        />
+      {{/each}}
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/modal-container.hbs b/app/assets/javascripts/discourse/app/components/modal-container.hbs
deleted file mode 100644
index e6c5f2c503b..00000000000
--- a/app/assets/javascripts/discourse/app/components/modal-container.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="modal-container" {{did-insert this.modal.setContainerElement}}>
-</div>
-
-{{#if this.modal.activeModal}}
-  {{#each (array this.modal.activeModal) as |activeModal|}}
-    {{! #each ensures that the activeModal component/model are updated atomically }}
-    <activeModal.component
-      @model={{activeModal.opts.model}}
-      @closeModal={{this.closeModal}}
-    />
-  {{/each}}
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/modal-container.js b/app/assets/javascripts/discourse/app/components/modal-container.js
deleted file mode 100644
index 4ca670fe477..00000000000
--- a/app/assets/javascripts/discourse/app/components/modal-container.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-
-export default class ModalContainer extends Component {
-  @service modal;
-
-  @action
-  closeModal(data) {
-    this.modal.close(data);
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/components/modal/dismiss-read.gjs b/app/assets/javascripts/discourse/app/components/modal/dismiss-read.gjs
new file mode 100644
index 00000000000..dbee5fb1abf
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/dismiss-read.gjs
@@ -0,0 +1,38 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { fn } from "@ember/helper";
+import DButton from "discourse/components/d-button";
+import DModal from "discourse/components/d-modal";
+import PreferenceCheckbox from "discourse/components/preference-checkbox";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class DismissRead extends Component {
+  @tracked dismissTopics = false;
+
+  <template>
+    <DModal
+      @closeModal={{@closeModal}}
+      @title={{i18n @model.title count=@model.count}}
+      class="dismiss-read-modal"
+    >
+      <:body>
+        <p>
+          <PreferenceCheckbox
+            @labelKey="topics.bulk.also_dismiss_topics"
+            @checked={{this.dismissTopics}}
+            class="dismiss-read-modal__stop-tracking"
+          />
+        </p>
+      </:body>
+      <:footer>
+        <DButton
+          @action={{fn @model.dismissRead this.dismissTopics}}
+          @label="topics.bulk.dismiss"
+          @icon="check"
+          id="dismiss-read-confirm"
+          class="btn-primary"
+        />
+      </:footer>
+    </DModal>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/modal/dismiss-read.hbs b/app/assets/javascripts/discourse/app/components/modal/dismiss-read.hbs
deleted file mode 100644
index 714335b9a36..00000000000
--- a/app/assets/javascripts/discourse/app/components/modal/dismiss-read.hbs
+++ /dev/null
@@ -1,24 +0,0 @@
-<DModal
-  @closeModal={{@closeModal}}
-  @title={{i18n @model.title count=@model.count}}
-  class="dismiss-read-modal"
->
-  <:body>
-    <p>
-      <PreferenceCheckbox
-        @labelKey="topics.bulk.also_dismiss_topics"
-        @checked={{this.dismissTopics}}
-        class="dismiss-read-modal__stop-tracking"
-      />
-    </p>
-  </:body>
-  <:footer>
-    <DButton
-      class="btn-primary"
-      @action={{fn @model.dismissRead this.dismissTopics}}
-      @icon="check"
-      id="dismiss-read-confirm"
-      @label="topics.bulk.dismiss"
-    />
-  </:footer>
-</DModal>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/modal/dismiss-read.js b/app/assets/javascripts/discourse/app/components/modal/dismiss-read.js
deleted file mode 100644
index 060335989fa..00000000000
--- a/app/assets/javascripts/discourse/app/components/modal/dismiss-read.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-
-export default class DismissRead extends Component {
-  @tracked dismissTopics = false;
-}
diff --git a/app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.js b/app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.gjs
similarity index 50%
rename from app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.js
rename to app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.gjs
index ff2cc7d27bf..1036e920144 100644
--- a/app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.js
+++ b/app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.gjs
@@ -1,6 +1,10 @@
 import Component from "@glimmer/component";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import raw from "discourse/helpers/raw";
 
 export default class NewListHeaderControlsWrapper extends Component {
+  @action
   click(e) {
     const target = e.target;
     if (target.closest("button.topics-replies-toggle.--all")) {
@@ -11,4 +15,20 @@ export default class NewListHeaderControlsWrapper extends Component {
       this.args.changeNewListSubset("replies");
     }
   }
+
+  <template>
+    <div
+      {{! template-lint-disable no-invalid-interactive }}
+      {{on "click" this.click}}
+      class="topic-replies-toggle-wrapper"
+    >
+      {{raw
+        "list/new-list-header-controls"
+        current=@current
+        newRepliesCount=@newRepliesCount
+        newTopicsCount=@newTopicsCount
+        noStaticLabel=true
+      }}
+    </div>
+  </template>
 }
diff --git a/app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.hbs b/app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.hbs
deleted file mode 100644
index 6f6ffc55b71..00000000000
--- a/app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-<div
-  class="topic-replies-toggle-wrapper"
-  {{on "click" (action this.click)}}
-  {{! template-lint-disable no-invalid-interactive  }}
->
-  {{raw
-    "list/new-list-header-controls"
-    current=@current
-    newRepliesCount=@newRepliesCount
-    newTopicsCount=@newTopicsCount
-    noStaticLabel=true
-  }}
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/offline-indicator.gjs b/app/assets/javascripts/discourse/app/components/offline-indicator.gjs
new file mode 100644
index 00000000000..8fa7724c3a6
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/offline-indicator.gjs
@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class OfflineIndicator extends Component {
+  @service networkConnectivity;
+
+  get showing() {
+    return !this.networkConnectivity.connected;
+  }
+
+  @action
+  refresh() {
+    window.location.reload(true);
+  }
+
+  <template>
+    {{#if this.showing}}
+      <div class="offline-indicator">
+        <span>{{i18n "offline_indicator.no_internet"}}</span>
+        <DButton
+          @label="offline_indicator.refresh_page"
+          @display="link"
+          @action={{this.refresh}}
+        />
+      </div>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/offline-indicator.hbs b/app/assets/javascripts/discourse/app/components/offline-indicator.hbs
deleted file mode 100644
index ee53efd7aeb..00000000000
--- a/app/assets/javascripts/discourse/app/components/offline-indicator.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{#if this.showing}}
-  <div class="offline-indicator">
-    <span>{{i18n "offline_indicator.no_internet"}}</span>
-    <DButton
-      @label="offline_indicator.refresh_page"
-      @display="link"
-      @action={{this.refresh}}
-    />
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/offline-indicator.js b/app/assets/javascripts/discourse/app/components/offline-indicator.js
deleted file mode 100644
index 5af64006ef3..00000000000
--- a/app/assets/javascripts/discourse/app/components/offline-indicator.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-
-export default class OfflineIndicator extends Component {
-  @service networkConnectivity;
-
-  get showing() {
-    return !this.networkConnectivity.connected;
-  }
-
-  @action
-  refresh() {
-    window.location.reload(true);
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/components/page-loading-slider.js b/app/assets/javascripts/discourse/app/components/page-loading-slider.gjs
similarity index 66%
rename from app/assets/javascripts/discourse/app/components/page-loading-slider.js
rename to app/assets/javascripts/discourse/app/components/page-loading-slider.gjs
index bc65c67e392..1fb2ac66a0b 100644
--- a/app/assets/javascripts/discourse/app/components/page-loading-slider.js
+++ b/app/assets/javascripts/discourse/app/components/page-loading-slider.gjs
@@ -1,12 +1,15 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { cancel, next } from "@ember/runloop";
 import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
+import { eq } from "truth-helpers";
+import concatClass from "discourse/helpers/concat-class";
 import { bind } from "discourse-common/utils/decorators";
 
-export default class extends Component {
+export default class PageLoadingSlider extends Component {
   @service loadingSlider;
   @service capabilities;
 
@@ -17,6 +20,11 @@ export default class extends Component {
     this.loadingSlider.on("stateChanged", this.stateChanged);
   }
 
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.loadingSlider.off("stateChange", this, "stateChange");
+  }
+
   @bind
   stateChanged(loading) {
     if (this._deferredStateChange) {
@@ -34,9 +42,9 @@ export default class extends Component {
     }
   }
 
-  destroy() {
-    this.loadingSlider.off("stateChange", this, "stateChange");
-    super.destroy();
+  get containerStyle() {
+    const duration = this.loadingSlider.averageLoadingDuration.toFixed(2);
+    return htmlSafe(`--loading-duration: ${duration}s`);
   }
 
   @action
@@ -60,8 +68,23 @@ export default class extends Component {
     }
   }
 
-  get containerStyle() {
-    const duration = this.loadingSlider.averageLoadingDuration.toFixed(2);
-    return htmlSafe(`--loading-duration: ${duration}s`);
-  }
+  <template>
+    {{#if (eq this.loadingSlider.mode "slider")}}
+      <div
+        {{on "transitionend" this.onContainerTransitionEnd}}
+        style={{this.containerStyle}}
+        class={{concatClass
+          "loading-indicator-container"
+          this.state
+          (if this.capabilities.isAppWebview "discourse-hub-webview")
+        }}
+      >
+        <div
+          {{on "transitionend" this.onBarTransitionEnd}}
+          class="loading-indicator"
+        >
+        </div>
+      </div>
+    {{/if}}
+  </template>
 }
diff --git a/app/assets/javascripts/discourse/app/components/page-loading-slider.hbs b/app/assets/javascripts/discourse/app/components/page-loading-slider.hbs
deleted file mode 100644
index 6393272cd34..00000000000
--- a/app/assets/javascripts/discourse/app/components/page-loading-slider.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-{{#if (eq this.loadingSlider.mode "slider")}}
-  <div
-    class={{concat-class
-      "loading-indicator-container"
-      this.state
-      (if this.capabilities.isAppWebview "discourse-hub-webview")
-    }}
-    {{on "transitionend" this.onContainerTransitionEnd}}
-    style={{this.containerStyle}}
-  >
-    <div
-      class="loading-indicator"
-      {{on "transitionend" this.onBarTransitionEnd}}
-    >
-    </div>
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.gjs b/app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.gjs
new file mode 100644
index 00000000000..185173ed741
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.gjs
@@ -0,0 +1,13 @@
+import Component from "@glimmer/component";
+
+export default class MessagesSecondaryNav extends Component {
+  get messagesNav() {
+    return document.getElementById("user-navigation-secondary__horizontal-nav");
+  }
+
+  <template>
+    {{#in-element this.messagesNav}}
+      {{yield}}
+    {{/in-element}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.hbs
deleted file mode 100644
index ba830cb1910..00000000000
--- a/app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-{{#in-element this.messagesNav}}
-  {{yield}}
-{{/in-element}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.js b/app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.js
deleted file mode 100644
index c4020f9304e..00000000000
--- a/app/assets/javascripts/discourse/app/components/user-nav/messages-secondary-nav.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from "@glimmer/component";
-import { service } from "@ember/service";
-
-export default class extends Component {
-  @service currentUser;
-
-  get messagesNav() {
-    return document.getElementById("user-navigation-secondary__horizontal-nav");
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/components/user-status-message.gjs b/app/assets/javascripts/discourse/app/components/user-status-message.gjs
new file mode 100644
index 00000000000..5a0e1dc7882
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/user-status-message.gjs
@@ -0,0 +1,51 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import emoji from "discourse/helpers/emoji";
+import { until } from "discourse/lib/formatter";
+import DTooltip from "float-kit/components/d-tooltip";
+
+export default class UserStatusMessage extends Component {
+  @service currentUser;
+
+  get until() {
+    if (!this.args.status.ends_at) {
+      return;
+    }
+
+    const timezone = this.currentUser
+      ? this.currentUser.user_option?.timezone
+      : moment.tz.guess();
+
+    return until(this.args.status.ends_at, timezone, this.currentUser?.locale);
+  }
+
+  <template>
+    {{#if @status}}
+      <DTooltip
+        @identifier="user-status-message-tooltip"
+        class="user-status-message"
+        ...attributes
+      >
+        <:trigger>
+          {{emoji @status.emoji skipTitle=true}}
+          {{#if @showDescription}}
+            <span class="user-status-message-description">
+              {{@status.description}}
+            </span>
+          {{/if}}
+        </:trigger>
+        <:content>
+          {{emoji @status.emoji skipTitle=true}}
+          <span class="user-status-tooltip-description">
+            {{@status.description}}
+          </span>
+          {{#if this.until}}
+            <div class="user-status-tooltip-until">
+              {{this.until}}
+            </div>
+          {{/if}}
+        </:content>
+      </DTooltip>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/user-status-message.hbs b/app/assets/javascripts/discourse/app/components/user-status-message.hbs
deleted file mode 100644
index d053a1b2be7..00000000000
--- a/app/assets/javascripts/discourse/app/components/user-status-message.hbs
+++ /dev/null
@@ -1,27 +0,0 @@
-{{#if @status}}
-  <DTooltip
-    @identifier="user-status-message-tooltip"
-    class="user-status-message"
-    ...attributes
-  >
-    <:trigger>
-      {{emoji @status.emoji skipTitle=true}}
-      {{#if @showDescription}}
-        <span class="user-status-message-description">
-          {{@status.description}}
-        </span>
-      {{/if}}
-    </:trigger>
-    <:content>
-      {{emoji @status.emoji skipTitle=true}}
-      <span class="user-status-tooltip-description">
-        {{@status.description}}
-      </span>
-      {{#if this.until}}
-        <div class="user-status-tooltip-until">
-          {{this.until}}
-        </div>
-      {{/if}}
-    </:content>
-  </DTooltip>
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/user-status-message.js b/app/assets/javascripts/discourse/app/components/user-status-message.js
deleted file mode 100644
index 2ca135a0381..00000000000
--- a/app/assets/javascripts/discourse/app/components/user-status-message.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Component from "@glimmer/component";
-import { service } from "@ember/service";
-import { until } from "discourse/lib/formatter";
-
-export default class UserStatusMessage extends Component {
-  @service currentUser;
-
-  get until() {
-    if (!this.args.status.ends_at) {
-      return;
-    }
-
-    const timezone = this.currentUser
-      ? this.currentUser.user_option?.timezone
-      : moment.tz.guess();
-
-    return until(this.args.status.ends_at, timezone, this.currentUser?.locale);
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/components/watch-read.js b/app/assets/javascripts/discourse/app/components/watch-read.gjs
similarity index 85%
rename from app/assets/javascripts/discourse/app/components/watch-read.js
rename to app/assets/javascripts/discourse/app/components/watch-read.gjs
index fbe1a8f49b6..5aafa28ccfb 100644
--- a/app/assets/javascripts/discourse/app/components/watch-read.js
+++ b/app/assets/javascripts/discourse/app/components/watch-read.gjs
@@ -1,4 +1,4 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import { ajax } from "discourse/lib/ajax";
 import isElementInViewport from "discourse/lib/is-element-in-viewport";
@@ -8,8 +8,8 @@ import { bind } from "discourse-common/utils/decorators";
 export default class WatchRead extends Component {
   @service currentUser;
 
-  didInsertElement() {
-    super.didInsertElement(...arguments);
+  constructor() {
+    super(...arguments);
 
     if (!this.currentUser || this.currentUser.read_faq) {
       return;
@@ -20,8 +20,8 @@ export default class WatchRead extends Component {
     window.addEventListener("scroll", this._checkIfRead, false);
   }
 
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
+  willDestroy() {
+    super.willDestroy(...arguments);
 
     window.removeEventListener("resize", this._checkIfRead);
     window.removeEventListener("scroll", this._checkIfRead);
diff --git a/plugins/automation/admin/assets/javascripts/admin/components/fields/da-base-field.js b/plugins/automation/admin/assets/javascripts/admin/components/fields/da-base-field.gjs
similarity index 100%
rename from plugins/automation/admin/assets/javascripts/admin/components/fields/da-base-field.js
rename to plugins/automation/admin/assets/javascripts/admin/components/fields/da-base-field.gjs
diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.gjs b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.gjs
new file mode 100644
index 00000000000..d7c4a34c86f
--- /dev/null
+++ b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.gjs
@@ -0,0 +1,48 @@
+import Component from "@glimmer/component";
+
+function convertToSeconds(time) {
+  const match = time.toString().match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);
+  const [hours, minutes, seconds] = match.slice(1);
+
+  if (hours || minutes || seconds) {
+    const h = parseInt(hours, 10) || 0;
+    const m = parseInt(minutes, 10) || 0;
+    const s = parseInt(seconds, 10) || 0;
+
+    return h * 3600 + m * 60 + s;
+  }
+  return time;
+}
+
+export default class LazyIframe extends Component {
+  get iframeSrc() {
+    switch (this.args.providerName) {
+      case "youtube":
+        let url = `https://www.youtube.com/embed/${this.args.videoId}?autoplay=1&rel=0`;
+        if (this.args.startTime) {
+          url += `&start=${convertToSeconds(this.args.startTime)}`;
+        }
+        return url;
+      case "vimeo":
+        return `https://player.vimeo.com/video/${this.args.videoId}${
+          this.args.videoId.includes("?") ? "&" : "?"
+        }autoplay=1`;
+      case "tiktok":
+        return `https://www.tiktok.com/embed/v2/${this.args.videoId}`;
+    }
+  }
+
+  <template>
+    {{#if @providerName}}
+      <iframe
+        src={{this.iframeSrc}}
+        title={{@title}}
+        allowFullScreen
+        scrolling="no"
+        frameborder="0"
+        seamless="seamless"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+      ></iframe>
+    {{/if}}
+  </template>
+}
diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.hbs b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.hbs
deleted file mode 100644
index d662c4787a5..00000000000
--- a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-{{#if @providerName}}
-  <iframe
-    src={{this.iframeSrc}}
-    title={{@title}}
-    allowFullScreen
-    scrolling="no"
-    frameborder="0"
-    seamless="seamless"
-    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  ></iframe>
-{{/if}}
\ No newline at end of file
diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js
deleted file mode 100644
index 6eec7b1015b..00000000000
--- a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Component from "@glimmer/component";
-
-export default class LazyVideo extends Component {
-  get iframeSrc() {
-    switch (this.args.providerName) {
-      case "youtube":
-        let url = `https://www.youtube.com/embed/${this.args.videoId}?autoplay=1&rel=0`;
-        if (this.args.startTime) {
-          url += `&start=${this.convertToSeconds(this.args.startTime)}`;
-        }
-        return url;
-      case "vimeo":
-        return `https://player.vimeo.com/video/${this.args.videoId}${
-          this.args.videoId.includes("?") ? "&" : "?"
-        }autoplay=1`;
-      case "tiktok":
-        return `https://www.tiktok.com/embed/v2/${this.args.videoId}`;
-    }
-  }
-
-  convertToSeconds(time) {
-    const match = time.toString().match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);
-    const [hours, minutes, seconds] = match.slice(1);
-
-    if (hours || minutes || seconds) {
-      const h = parseInt(hours, 10) || 0;
-      const m = parseInt(minutes, 10) || 0;
-      const s = parseInt(seconds, 10) || 0;
-
-      return h * 3600 + m * 60 + s;
-    }
-    return time;
-  }
-}
diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.gjs b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.gjs
new file mode 100644
index 00000000000..d12500d3a3d
--- /dev/null
+++ b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.gjs
@@ -0,0 +1,92 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { concat } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import concatClass from "discourse/helpers/concat-class";
+import LazyIframe from "./lazy-iframe";
+
+export default class LazyVideo extends Component {
+  @tracked isLoaded = false;
+
+  get thumbnailStyle() {
+    const color = this.args.videoAttributes.dominantColor;
+    if (color?.match(/^[0-9A-Fa-f]+$/)) {
+      return htmlSafe(`background-color: #${color};`);
+    }
+  }
+
+  @action
+  loadEmbed() {
+    if (!this.isLoaded) {
+      this.isLoaded = true;
+      this.args.onLoadedVideo?.();
+    }
+  }
+
+  @action
+  onKeyPress(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this.loadEmbed();
+    }
+  }
+
+  <template>
+    <div
+      data-video-id={{@videoAttributes.id}}
+      data-video-title={{@videoAttributes.title}}
+      data-video-start-time={{@videoAttributes.startTime}}
+      data-provider-name={{@videoAttributes.providerName}}
+      class={{concatClass
+        "lazy-video-container"
+        (concat @videoAttributes.providerName "-onebox")
+        (if this.isLoaded "video-loaded")
+      }}
+    >
+      {{#if this.isLoaded}}
+        <LazyIframe
+          @providerName={{@videoAttributes.providerName}}
+          @title={{@videoAttributes.title}}
+          @videoId={{@videoAttributes.id}}
+          @startTime={{@videoAttributes.startTime}}
+        />
+      {{else}}
+        <div
+          {{on "click" this.loadEmbed}}
+          {{on "keypress" this.loadEmbed}}
+          tabindex="0"
+          style={{this.thumbnailStyle}}
+          class={{concatClass "video-thumbnail" @videoAttributes.providerName}}
+        >
+          <img
+            src={{@videoAttributes.thumbnail}}
+            title={{@videoAttributes.title}}
+            loading="lazy"
+            class={{concat @videoAttributes.providerName "-thumbnail"}}
+          />
+          <div
+            class={{concatClass
+              "icon"
+              (concat @videoAttributes.providerName "-icon")
+            }}
+          ></div>
+        </div>
+        <div class="title-container">
+          <div class="title-wrapper">
+            <a
+              href={{@videoAttributes.url}}
+              title={{@videoAttributes.title}}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="title-link"
+            >
+              {{@videoAttributes.title}}
+            </a>
+          </div>
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs
deleted file mode 100644
index 0d0ae7138af..00000000000
--- a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs
+++ /dev/null
@@ -1,54 +0,0 @@
-<div
-  class={{concat-class
-    "lazy-video-container"
-    (concat @videoAttributes.providerName "-onebox")
-    (if this.isLoaded "video-loaded")
-  }}
-  data-video-id={{@videoAttributes.id}}
-  data-video-title={{@videoAttributes.title}}
-  data-video-start-time={{@videoAttributes.startTime}}
-  data-provider-name={{@videoAttributes.providerName}}
->
-  {{#if this.isLoaded}}
-    <LazyIframe
-      @providerName={{@videoAttributes.providerName}}
-      @title={{@videoAttributes.title}}
-      @videoId={{@videoAttributes.id}}
-      @startTime={{@videoAttributes.startTime}}
-    />
-  {{else}}
-    <div
-      class={{concat-class "video-thumbnail" @videoAttributes.providerName}}
-      tabindex="0"
-      style={{this.thumbnailStyle}}
-      {{on "click" this.loadEmbed}}
-      {{on "keypress" this.loadEmbed}}
-    >
-      <img
-        class={{concat @videoAttributes.providerName "-thumbnail"}}
-        src={{@videoAttributes.thumbnail}}
-        title={{@videoAttributes.title}}
-        loading="lazy"
-      />
-      <div
-        class={{concat-class
-          "icon"
-          (concat @videoAttributes.providerName "-icon")
-        }}
-      ></div>
-    </div>
-    <div class="title-container">
-      <div class="title-wrapper">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          class="title-link"
-          href={{@videoAttributes.url}}
-          title={{@videoAttributes.title}}
-        >
-          {{@videoAttributes.title}}
-        </a>
-      </div>
-    </div>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.js b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.js
deleted file mode 100644
index e387458f50e..00000000000
--- a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { htmlSafe } from "@ember/template";
-
-export default class LazyVideo extends Component {
-  @tracked isLoaded = false;
-
-  @action
-  loadEmbed() {
-    if (!this.isLoaded) {
-      this.isLoaded = true;
-      this.args.onLoadedVideo?.();
-    }
-  }
-
-  @action
-  onKeyPress(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      this.loadEmbed();
-    }
-  }
-
-  get thumbnailStyle() {
-    const color = this.args.videoAttributes.dominantColor;
-    if (color?.match(/^[0-9A-Fa-f]+$/)) {
-      return htmlSafe(`background-color: #${color};`);
-    }
-  }
-}