diff --git a/app/assets/javascripts/admin/addon/components/themes-list-item.gjs b/app/assets/javascripts/admin/addon/components/themes-list-item.gjs
new file mode 100644
index 00000000000..eca7738d754
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/themes-list-item.gjs
@@ -0,0 +1,168 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { Input } from "@ember/component";
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import PluginOutlet from "discourse/components/plugin-outlet";
+import concatClass from "discourse/helpers/concat-class";
+import icon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
+import escape from "discourse-common/lib/escape";
+import { iconHTML } from "discourse-common/lib/icon-library";
+
+const MAX_COMPONENTS = 4;
+
+export default class ThemesListItem extends Component {
+ @tracked childrenExpanded = false;
+
+ get displayHasMore() {
+ return this.args.theme?.get("childThemes.length") > MAX_COMPONENTS;
+ }
+
+ get displayComponents() {
+ return this.hasComponents && this.args.theme?.isActive;
+ }
+
+ get hasComponents() {
+ return this.children.length > 0;
+ }
+
+ @action
+ handleClick(event) {
+ if (!event.target.classList.contains("others-count")) {
+ this.args.navigateToTheme();
+ }
+ }
+
+ get children() {
+ let children = this.args.theme?.get("childThemes.[]");
+ if (this.args.theme?.get("component") || !children) {
+ return [];
+ }
+ children = this.childrenExpanded
+ ? children
+ : children.slice(0, MAX_COMPONENTS);
+ return children.map((t) => {
+ const name = escape(t.name);
+ return t.enabled ? name : `${iconHTML("ban")} ${name}`;
+ });
+ }
+
+ get childrenString() {
+ return this.children.join(", ");
+ }
+
+ get moreCount() {
+ const childrenCount = this.args.theme?.get("childThemes.length");
+ if (
+ this.args.theme?.get("component") ||
+ !childrenCount ||
+ this.childrenExpanded
+ ) {
+ return 0;
+ }
+ return childrenCount - MAX_COMPONENTS;
+ }
+
+ @action
+ toggleChildrenExpanded(event) {
+ event?.preventDefault();
+ this.childrenExpanded = !this.childrenExpanded;
+ }
+
+ <template>
+ {{! template-lint-disable no-nested-interactive }}
+ <div
+ class={{concatClass
+ "themes-list-container__item"
+ (if @theme.selected "selected")
+ }}
+ role="button"
+ {{on "click" this.handleClick}}
+ ...attributes
+ >
+ <div class="inner-wrapper">
+ <span>
+ <PluginOutlet
+ @name="admin-customize-themes-list-item"
+ @connectorTagName="span"
+ @outletArgs={{hash theme=@theme}}
+ />
+ </span>
+
+ <div class="info">
+ {{#if @selectInactiveMode}}
+ <Input
+ @checked={{@theme.markedToDelete}}
+ id={{@theme.id}}
+ @type="checkbox"
+ />
+ {{/if}}
+ <span class="name">
+ {{@theme.name}}
+ </span>
+
+ <span class="icons">
+ {{#if @theme.selected}}
+ {{icon "caret-right"}}
+ {{else}}
+ {{#if @theme.default}}
+ {{icon
+ "check"
+ class="default-indicator"
+ title="admin.customize.theme.default_theme_tooltip"
+ }}
+ {{/if}}
+ {{#if @theme.isPendingUpdates}}
+ {{icon
+ "sync"
+ title="admin.customize.theme.updates_available_tooltip"
+ class="light-grey-icon"
+ }}
+ {{/if}}
+ {{#if @theme.isBroken}}
+ {{icon
+ "exclamation-circle"
+ class="broken-indicator"
+ title="admin.customize.theme.broken_theme_tooltip"
+ }}
+ {{/if}}
+ {{#unless @theme.enabled}}
+ {{icon
+ "ban"
+ class="light-grey-icon"
+ title="admin.customize.theme.disabled_component_tooltip"
+ }}
+ {{/unless}}
+ {{/if}}
+ </span>
+ </div>
+
+ {{#if this.displayComponents}}
+ <div class="components-list">
+ <span class="components">{{htmlSafe this.childrenString}}</span>
+
+ {{#if this.displayHasMore}}
+ <a
+ href
+ {{on "click" this.toggleChildrenExpanded}}
+ class="others-count"
+ >
+ {{#if this.childrenExpanded}}
+ {{i18n "admin.customize.theme.collapse"}}
+ {{else}}
+ {{i18n
+ "admin.customize.theme.and_x_more"
+ count=this.moreCount
+ }}
+ {{/if}}
+ </a>
+ {{/if}}
+ </div>
+ {{/if}}
+ </div>
+ </div>
+ </template>
+}
diff --git a/app/assets/javascripts/admin/addon/components/themes-list-item.hbs b/app/assets/javascripts/admin/addon/components/themes-list-item.hbs
deleted file mode 100644
index 82bb11b066e..00000000000
--- a/app/assets/javascripts/admin/addon/components/themes-list-item.hbs
+++ /dev/null
@@ -1,73 +0,0 @@
-<div class="inner-wrapper">
- <span>
- <PluginOutlet
- @name="admin-customize-themes-list-item"
- @connectorTagName="span"
- @outletArgs={{hash theme=this.theme}}
- />
- </span>
-
- <div class="info">
- {{#if @selectInactiveMode}}
- <Input
- @checked={{this.theme.markedToDelete}}
- id={{this.theme.id}}
- @type="checkbox"
- />
- {{/if}}
- <span class="name">
- {{this.theme.name}}
- </span>
-
- <span class="icons">
- {{#if this.theme.selected}}
- {{d-icon "caret-right"}}
- {{else}}
- {{#if this.theme.default}}
- {{d-icon
- "check"
- class="default-indicator"
- title="admin.customize.theme.default_theme_tooltip"
- }}
- {{/if}}
- {{#if this.theme.isPendingUpdates}}
- {{d-icon
- "sync"
- title="admin.customize.theme.updates_available_tooltip"
- class="light-grey-icon"
- }}
- {{/if}}
- {{#if this.theme.isBroken}}
- {{d-icon
- "exclamation-circle"
- class="broken-indicator"
- title="admin.customize.theme.broken_theme_tooltip"
- }}
- {{/if}}
- {{#unless this.theme.enabled}}
- {{d-icon
- "ban"
- class="light-grey-icon"
- title="admin.customize.theme.disabled_component_tooltip"
- }}
- {{/unless}}
- {{/if}}
- </span>
- </div>
-
- {{#if this.displayComponents}}
- <div class="components-list">
- <span class="components">{{html-safe this.childrenString}}</span>
-
- {{#if this.displayHasMore}}
- <a href {{on "click" this.toggleChildrenExpanded}} class="others-count">
- {{#if this.childrenExpanded}}
- {{i18n "admin.customize.theme.collapse"}}
- {{else}}
- {{i18n "admin.customize.theme.and_x_more" count=this.moreCount}}
- {{/if}}
- </a>
- {{/if}}
- </div>
- {{/if}}
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/themes-list-item.js b/app/assets/javascripts/admin/addon/components/themes-list-item.js
deleted file mode 100644
index 3630d3a27de..00000000000
--- a/app/assets/javascripts/admin/addon/components/themes-list-item.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { and, gt } from "@ember/object/computed";
-import { classNameBindings, classNames } from "@ember-decorators/component";
-import escape from "discourse-common/lib/escape";
-import { iconHTML } from "discourse-common/lib/icon-library";
-import discourseComputed from "discourse-common/utils/decorators";
-
-const MAX_COMPONENTS = 4;
-
-@classNames("themes-list-container__item")
-@classNameBindings("theme.selected:selected")
-export default class ThemesListItem extends Component {
- childrenExpanded = false;
-
- @gt("children.length", 0) hasComponents;
-
- @and("hasComponents", "theme.isActive") displayComponents;
-
- @gt("theme.childThemes.length", MAX_COMPONENTS) displayHasMore;
-
- click(e) {
- if (!e.target.classList.contains("others-count")) {
- this.navigateToTheme();
- }
- }
-
- @discourseComputed(
- "theme.component",
- "theme.childThemes.@each.name",
- "theme.childThemes.length",
- "childrenExpanded"
- )
- children() {
- const theme = this.theme;
- let children = theme.get("childThemes");
- if (theme.get("component") || !children) {
- return [];
- }
- children = this.childrenExpanded
- ? children
- : children.slice(0, MAX_COMPONENTS);
- return children.map((t) => {
- const name = escape(t.name);
- return t.enabled ? name : `${iconHTML("ban")} ${name}`;
- });
- }
-
- @discourseComputed("children")
- childrenString(children) {
- return children.join(", ");
- }
-
- @discourseComputed(
- "theme.childThemes.length",
- "theme.component",
- "childrenExpanded",
- "children.length"
- )
- moreCount(childrenCount, component, expanded) {
- if (component || !childrenCount || expanded) {
- return 0;
- }
- return childrenCount - MAX_COMPONENTS;
- }
-
- @action
- toggleChildrenExpanded(event) {
- event?.preventDefault();
- this.toggleProperty("childrenExpanded");
- }
-}
diff --git a/app/assets/javascripts/admin/addon/components/themes-list.hbs b/app/assets/javascripts/admin/addon/components/themes-list.hbs
index 51d33899c58..4792658a8ec 100644
--- a/app/assets/javascripts/admin/addon/components/themes-list.hbs
+++ b/app/assets/javascripts/admin/addon/components/themes-list.hbs
@@ -114,7 +114,7 @@
{{#if (and this.hasInactiveThemes (not this.activeFilter))}}
{{#each this.inactiveThemes as |theme|}}
<ThemesListItem
- @classNames="inactive-theme"
+ class="inactive-theme"
@theme={{theme}}
@navigateToTheme={{fn this.navigateToTheme theme}}
@selectInactiveMode={{this.selectInactiveMode}}