diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.gjs
index ba320b7b78f..ca8443c8580 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.gjs
@@ -1,3 +1,9 @@
+import Component from "@ember/component";
+import { tagName } from "@ember-decorators/component";
+
+@tagName("")
+export default class Checkbox extends Component {}
+
 <label class="wizard-container__label">
   <PluginOutlet
     @name="wizard-checkbox"
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.js
deleted file mode 100644
index 40e7600e735..00000000000
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Component from "@ember/component";
-import { tagName } from "@ember-decorators/component";
-
-@tagName("")
-export default class Checkbox extends Component {}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.gjs
index 3d88e0f2050..50959f080b7 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.gjs
@@ -1,3 +1,37 @@
+import Component from "@ember/component";
+import { action, set } from "@ember/object";
+
+export default class Checkboxes extends Component {
+  init(...args) {
+    super.init(...args);
+    this.set("field.value", this.field.value || []);
+
+    for (let choice of this.field.choices) {
+      if (this.field.value.includes(choice.id)) {
+        set(choice, "checked", true);
+      }
+    }
+  }
+
+  @action
+  changed(checkbox) {
+    let newFieldValue = this.field.value;
+    const checkboxValue = checkbox.parentElement
+      .getAttribute("value")
+      .toLowerCase();
+
+    if (checkbox.checked) {
+      newFieldValue.push(checkboxValue);
+    } else {
+      const index = newFieldValue.indexOf(checkboxValue);
+      if (index > -1) {
+        newFieldValue.splice(index, 1);
+      }
+    }
+    this.set("field.value", newFieldValue);
+  }
+}
+
 {{#each this.field.choices as |c|}}
   <div class="checkbox-field-choice {{this.fieldClass}}">
     <label id={{c.id}} value={{c.label}}>
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.js
deleted file mode 100644
index 39146f7a3cc..00000000000
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Component from "@ember/component";
-import { action, set } from "@ember/object";
-
-export default class Checkboxes extends Component {
-  init(...args) {
-    super.init(...args);
-    this.set("field.value", this.field.value || []);
-
-    for (let choice of this.field.choices) {
-      if (this.field.value.includes(choice.id)) {
-        set(choice, "checked", true);
-      }
-    }
-  }
-
-  @action
-  changed(checkbox) {
-    let newFieldValue = this.field.value;
-    const checkboxValue = checkbox.parentElement
-      .getAttribute("value")
-      .toLowerCase();
-
-    if (checkbox.checked) {
-      newFieldValue.push(checkboxValue);
-    } else {
-      const index = newFieldValue.indexOf(checkboxValue);
-      if (index > -1) {
-        newFieldValue.splice(index, 1);
-      }
-    }
-    this.set("field.value", newFieldValue);
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.gjs
index 4a8973e62ea..7906d639a37 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.gjs
@@ -1 +1,7 @@
+import Component from "@ember/component";
+import { classNameBindings } from "@ember-decorators/component";
+
+@classNameBindings(":wizard-image-preview", "fieldClass")
+export default class Generic extends Component {}
+
 <img src={{this.field.value}} class={{this.fieldClass}} />
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.js
deleted file mode 100644
index 374a2716615..00000000000
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Component from "@ember/component";
-import { classNameBindings } from "@ember-decorators/component";
-
-@classNameBindings(":wizard-image-preview", "fieldClass")
-export default class Generic extends Component {}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.gjs
index cf604302a1f..cdaa3616f5f 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.gjs
@@ -1,3 +1,463 @@
+/*eslint no-bitwise:0 */
+import Component from "@ember/component";
+import { action } from "@ember/object";
+import { scheduleOnce } from "@ember/runloop";
+import { htmlSafe } from "@ember/template";
+import { Promise } from "rsvp";
+import getUrl from "discourse/lib/get-url";
+import PreloadStore from "discourse/lib/preload-store";
+import { i18n } from "discourse-i18n";
+import { darkLightDiff, drawHeader } from "../../../lib/preview";
+
+const scaled = {};
+
+function canvasFor(image, w, h) {
+  w = Math.ceil(w);
+  h = Math.ceil(h);
+
+  const scale = window.devicePixelRatio;
+
+  const can = document.createElement("canvas");
+  can.width = w * scale;
+  can.height = h * scale;
+
+  const ctx = can.getContext("2d");
+  ctx.scale(scale, scale);
+  ctx.drawImage(image, 0, 0, w, h);
+  return can;
+}
+
+const scale = window.devicePixelRatio;
+export default class PreviewBase extends Component {
+  ctx = null;
+  loaded = false;
+  loadingFontVariants = false;
+
+  get elementWidth() {
+    return this.width * scale;
+  }
+
+  get elementHeight() {
+    return this.height * scale;
+  }
+
+  get canvasStyle() {
+    return htmlSafe(`width:${this.width}px;height:${this.height}px`);
+  }
+
+  didInsertElement() {
+    super.didInsertElement(...arguments);
+    this.fontMap = PreloadStore.get("fontMap");
+    this.loadedFonts = new Set();
+    const c = this.element.querySelector("canvas");
+    this.ctx = c.getContext("2d");
+    this.ctx.scale(scale, scale);
+
+    if (this.step) {
+      this.step.findField("color_scheme")?.addListener(this.themeChanged);
+      this.step.findField("homepage_style")?.addListener(this.themeChanged);
+      this.step.findField("body_font")?.addListener(this.themeBodyFontChanged);
+      this.step.findField("site_font")?.addListener(this.themeFontChanged);
+      this.step
+        .findField("heading_font")
+        ?.addListener(this.themeHeadingFontChanged);
+    }
+
+    this.reload();
+  }
+
+  willDestroyElement() {
+    super.willDestroyElement(...arguments);
+
+    if (this.step) {
+      this.step.findField("color_scheme")?.removeListener(this.themeChanged);
+      this.step.findField("homepage_style")?.removeListener(this.themeChanged);
+      this.step
+        .findField("body_font")
+        ?.removeListener(this.themeBodyFontChanged);
+      this.step.findField("site_font")?.removeListener(this.themeFontChanged);
+      this.step
+        .findField("heading_font")
+        ?.removeListener(this.themeHeadingFontChanged);
+    }
+  }
+
+  @action
+  themeChanged() {
+    this.triggerRepaint();
+  }
+
+  @action
+  themeBodyFontChanged() {
+    if (!this.loadingFontVariants) {
+      this.loadFontVariants(this.wizard.font);
+    }
+  }
+
+  @action
+  themeHeadingFontChanged() {
+    if (!this.loadingFontVariants) {
+      this.loadFontVariants(this.wizard.headingFont);
+    }
+  }
+
+  @action
+  themeFontChanged() {
+    if (!this.loadingFontVariants) {
+      this.loadFontVariants(this.wizard.font);
+    }
+  }
+
+  loadFontVariants(font) {
+    if (!font) {
+      return Promise.resolve();
+    }
+
+    const fontVariantData = this.fontMap[font.id];
+
+    // System font for example does not need to load from a remote source.
+    if (!fontVariantData) {
+      this.loadedFonts.add(font.id);
+    }
+
+    if (fontVariantData && !this.loadedFonts.has(font.id)) {
+      this.loadingFontVariants = true;
+      const fontFaces = fontVariantData.map((fontVariant) => {
+        return new FontFace(font.label, `url(${fontVariant.url})`, {
+          style: "normal",
+          weight: fontVariant.weight,
+        });
+      });
+
+      return Promise.all(
+        fontFaces.map((fontFace) =>
+          fontFace.load().then((loadedFont) => {
+            document.fonts.add(loadedFont);
+
+            // We use our own Set because, though document.fonts.check is available,
+            // it does not seem very reliable, returning false for fonts that have
+            // definitely been loaded.
+            this.loadedFonts.add(font.id);
+          })
+        )
+      )
+        .then(() => {
+          this.triggerRepaint();
+        })
+        .finally(() => {
+          this.loadingFontVariants = false;
+        });
+    } else if (this.loadedFonts.has(font.id)) {
+      return Promise.resolve(this.triggerRepaint());
+    }
+  }
+
+  images() {}
+
+  // NOTE: This works for fonts included in a style that is actually using the
+  // @font-faces on load, but for fonts that we aren't using yet we need to
+  // make sure they are loaded before rendering the canvas via loadFontVariants.
+  loadFonts() {
+    return document.fonts.ready;
+  }
+
+  loadImages() {
+    const images = this.images();
+    if (images) {
+      return Promise.all(
+        Object.keys(images).map((id) => {
+          return loadImage(images[id]).then((img) => (this[id] = img));
+        })
+      );
+    }
+    return Promise.resolve();
+  }
+
+  reload() {
+    Promise.all([this.loadFonts(), this.loadImages()]).then(() => {
+      // NOTE: This must be done otherwise the "bold" variant of the body font
+      // will not be loaded for some reason before rendering the canvas.
+      //
+      // The header font does not suffer from this issue.
+      this.loadFontVariants(this.wizard.font).then(() => {
+        this.loaded = true;
+        this.triggerRepaint();
+      });
+    });
+  }
+
+  triggerRepaint() {
+    scheduleOnce("afterRender", this, "repaint");
+  }
+
+  repaint() {
+    if (!this.loaded) {
+      return false;
+    }
+
+    const colorsArray = this.wizard.currentColors;
+    if (!colorsArray) {
+      return;
+    }
+
+    let colors = {};
+    colorsArray.forEach(function (c) {
+      const name = c.name;
+      colors[name] = `#${c.hex}`;
+    });
+
+    const { font, headingFont } = this.wizard;
+    if (!font) {
+      return;
+    }
+
+    const { ctx } = this;
+
+    ctx.fillStyle = colors.secondary;
+    ctx.fillRect(0, 0, this.width, this.height);
+
+    const options = {
+      ctx,
+      colors,
+      font,
+      headingFont,
+      width: this.width,
+      height: this.height,
+    };
+    this.paint(options);
+  }
+
+  categories() {
+    return [
+      {
+        name: i18n("wizard.homepage_preview.category_names.icebreakers"),
+        color: "#652D90",
+      },
+      {
+        name: i18n("wizard.homepage_preview.category_names.news"),
+        color: "#3AB54A",
+      },
+      {
+        name: i18n("wizard.homepage_preview.category_names.site_feedback"),
+        color: "#25AAE2",
+      },
+    ];
+  }
+
+  scaleImage(image, x, y, w, h) {
+    w = Math.floor(w);
+    h = Math.floor(h);
+
+    const { ctx } = this;
+
+    const key = `${image.src}-${w}-${h}`;
+
+    if (!scaled[key]) {
+      let copy = image;
+      let ratio = copy.width / copy.height;
+      let newH = copy.height * 0.5;
+      while (newH > h) {
+        copy = canvasFor(copy, ratio * newH, newH);
+        newH = newH * 0.5;
+      }
+
+      scaled[key] = copy;
+    }
+
+    ctx.drawImage(scaled[key], x, y, w, h);
+  }
+
+  get headerHeight() {
+    return this.height * 0.15;
+  }
+
+  drawFullHeader(colors, font, logo) {
+    const { ctx } = this;
+
+    drawHeader(ctx, colors, this.width, this.headerHeight);
+
+    const avatarSize = this.height * 0.1;
+    const headerMargin = this.headerHeight * 0.2;
+
+    if (logo) {
+      const logoHeight = this.headerHeight - headerMargin * 2;
+
+      const ratio = logoHeight / logo.height;
+      this.scaleImage(
+        logo,
+        headerMargin,
+        headerMargin,
+        logo.width * ratio,
+        logoHeight
+      );
+
+      this.scaleImage(logo, this.width, headerMargin);
+    }
+
+    // Top right menu
+    this.scaleImage(
+      this.avatar,
+      this.width - avatarSize - headerMargin,
+      headerMargin,
+      avatarSize,
+      avatarSize
+    );
+
+    // accounts for hard-set color variables in solarized themes
+    ctx.fillStyle =
+      colors.primary_low_mid ||
+      darkLightDiff(colors.primary, colors.secondary, 45, 55);
+
+    const pathScale = this.headerHeight / 1200;
+    const searchIcon = new Path2D(
+      "M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+    );
+    const hamburgerIcon = new Path2D(
+      "M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+    );
+    const chatIcon = new Path2D(
+      "M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4c0 0 0 0 0 0s0 0 0 0s0 0 0 0c0 0 0 0 0 0l.3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z"
+    );
+    ctx.save(); // Save the previous state for translation and scale
+    ctx.translate(
+      this.width - avatarSize * 2 - headerMargin * 0.5,
+      avatarSize / 2
+    );
+    // need to scale paths otherwise they're too large
+    ctx.scale(pathScale, pathScale);
+    ctx.fill(searchIcon);
+    ctx.restore();
+    ctx.save();
+    ctx.translate(
+      this.width - avatarSize * 3 - headerMargin * 0.5,
+      avatarSize / 2
+    );
+    ctx.scale(pathScale, pathScale);
+    ctx.fill(chatIcon);
+    ctx.restore();
+    ctx.save();
+    ctx.translate(headerMargin * 1.75, avatarSize / 2);
+    ctx.scale(pathScale, pathScale);
+    ctx.fill(hamburgerIcon);
+    ctx.restore();
+  }
+
+  drawPills(colors, font, headerHeight, opts) {
+    opts = opts || {};
+
+    const { ctx } = this;
+
+    const badgeHeight = headerHeight * 2 * 0.25;
+    const headerMargin = headerHeight * 0.2;
+    const fontSize = Math.round(badgeHeight * 0.5);
+    ctx.font = `${fontSize}px '${font.label}'`;
+
+    const allCategoriesText = i18n(
+      "wizard.homepage_preview.nav_buttons.all_categories"
+    );
+    const categoriesWidth = ctx.measureText(allCategoriesText).width;
+    const categoriesBoxWidth = categoriesWidth + headerMargin * 2;
+
+    // Box around "all categories >"
+    ctx.beginPath();
+    ctx.strokeStyle = colors.primary;
+    ctx.lineWidth = 0.5;
+    ctx.rect(
+      headerMargin,
+      headerHeight + headerMargin,
+      categoriesBoxWidth,
+      badgeHeight
+    );
+    ctx.stroke();
+
+    ctx.fillStyle = colors.primary;
+    ctx.fillText(
+      allCategoriesText,
+      headerMargin * 1.5,
+      headerHeight + headerMargin * 1.4 + fontSize
+    );
+
+    // Caret (>) at the end of "all categories" box
+    const pathScale = badgeHeight / 1000;
+    const caretIcon = new Path2D(
+      "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
+    );
+
+    ctx.save();
+    ctx.translate(
+      categoriesBoxWidth,
+      headerHeight + headerMargin + badgeHeight / 4
+    );
+    ctx.scale(pathScale, pathScale);
+    ctx.fill(caretIcon);
+    ctx.restore();
+
+    const categoryHomepage =
+      opts.homepageStyle.includes("category") ||
+      opts.homepageStyle.includes("categories");
+
+    // First top menu item
+    const otherHomepageText = i18n(
+      `wizard.top_menu_items.${opts.homepageStyle}`
+    );
+
+    const firstTopMenuItemText = categoryHomepage
+      ? i18n("wizard.top_menu_items.categories")
+      : otherHomepageText;
+
+    const newText = i18n("wizard.top_menu_items.new");
+    const unreadText = i18n("wizard.top_menu_items.unread");
+    const topText = i18n("wizard.top_menu_items.top");
+
+    ctx.beginPath();
+    ctx.fillStyle = colors.tertiary;
+    ctx.rect(
+      categoriesBoxWidth + headerMargin * 2,
+      headerHeight + headerMargin,
+      ctx.measureText(firstTopMenuItemText).width + headerMargin * 2,
+      badgeHeight
+    );
+    ctx.fill();
+
+    ctx.font = `${fontSize}px '${font.label}'`;
+    ctx.fillStyle = colors.secondary;
+    const pillButtonTextY = headerHeight + headerMargin * 1.4 + fontSize;
+    const firstTopMenuItemX = headerMargin * 3.0 + categoriesBoxWidth;
+    ctx.fillText(
+      firstTopMenuItemText,
+      firstTopMenuItemX,
+      pillButtonTextY,
+      ctx.measureText(firstTopMenuItemText).width
+    );
+
+    ctx.fillStyle = colors.primary;
+
+    const newTextX =
+      firstTopMenuItemX +
+      ctx.measureText(firstTopMenuItemText).width +
+      headerMargin * 2.0;
+    ctx.fillText(newText, newTextX, pillButtonTextY);
+
+    const unreadTextX =
+      newTextX + ctx.measureText(newText).width + headerMargin * 2.0;
+    ctx.fillText(unreadText, unreadTextX, pillButtonTextY);
+
+    const topTextX =
+      unreadTextX + ctx.measureText(unreadText).width + headerMargin * 2.0;
+    ctx.fillText(topText, topTextX, pillButtonTextY);
+  }
+}
+
+function loadImage(src) {
+  if (!src) {
+    return Promise.resolve();
+  }
+
+  const img = new Image();
+  img.src = getUrl(src);
+  return new Promise((resolve) => (img.onload = () => resolve(img)));
+}
+
 <div class="wizard-container__preview">
   <canvas
     width={{this.elementWidth}}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
deleted file mode 100644
index abceb0424a3..00000000000
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
+++ /dev/null
@@ -1,459 +0,0 @@
-/*eslint no-bitwise:0 */
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { scheduleOnce } from "@ember/runloop";
-import { htmlSafe } from "@ember/template";
-import { Promise } from "rsvp";
-import getUrl from "discourse/lib/get-url";
-import PreloadStore from "discourse/lib/preload-store";
-import { i18n } from "discourse-i18n";
-import { darkLightDiff, drawHeader } from "../../../lib/preview";
-
-const scaled = {};
-
-function canvasFor(image, w, h) {
-  w = Math.ceil(w);
-  h = Math.ceil(h);
-
-  const scale = window.devicePixelRatio;
-
-  const can = document.createElement("canvas");
-  can.width = w * scale;
-  can.height = h * scale;
-
-  const ctx = can.getContext("2d");
-  ctx.scale(scale, scale);
-  ctx.drawImage(image, 0, 0, w, h);
-  return can;
-}
-
-const scale = window.devicePixelRatio;
-export default class PreviewBase extends Component {
-  ctx = null;
-  loaded = false;
-  loadingFontVariants = false;
-
-  get elementWidth() {
-    return this.width * scale;
-  }
-
-  get elementHeight() {
-    return this.height * scale;
-  }
-
-  get canvasStyle() {
-    return htmlSafe(`width:${this.width}px;height:${this.height}px`);
-  }
-
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-    this.fontMap = PreloadStore.get("fontMap");
-    this.loadedFonts = new Set();
-    const c = this.element.querySelector("canvas");
-    this.ctx = c.getContext("2d");
-    this.ctx.scale(scale, scale);
-
-    if (this.step) {
-      this.step.findField("color_scheme")?.addListener(this.themeChanged);
-      this.step.findField("homepage_style")?.addListener(this.themeChanged);
-      this.step.findField("body_font")?.addListener(this.themeBodyFontChanged);
-      this.step.findField("site_font")?.addListener(this.themeFontChanged);
-      this.step
-        .findField("heading_font")
-        ?.addListener(this.themeHeadingFontChanged);
-    }
-
-    this.reload();
-  }
-
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
-
-    if (this.step) {
-      this.step.findField("color_scheme")?.removeListener(this.themeChanged);
-      this.step.findField("homepage_style")?.removeListener(this.themeChanged);
-      this.step
-        .findField("body_font")
-        ?.removeListener(this.themeBodyFontChanged);
-      this.step.findField("site_font")?.removeListener(this.themeFontChanged);
-      this.step
-        .findField("heading_font")
-        ?.removeListener(this.themeHeadingFontChanged);
-    }
-  }
-
-  @action
-  themeChanged() {
-    this.triggerRepaint();
-  }
-
-  @action
-  themeBodyFontChanged() {
-    if (!this.loadingFontVariants) {
-      this.loadFontVariants(this.wizard.font);
-    }
-  }
-
-  @action
-  themeHeadingFontChanged() {
-    if (!this.loadingFontVariants) {
-      this.loadFontVariants(this.wizard.headingFont);
-    }
-  }
-
-  @action
-  themeFontChanged() {
-    if (!this.loadingFontVariants) {
-      this.loadFontVariants(this.wizard.font);
-    }
-  }
-
-  loadFontVariants(font) {
-    if (!font) {
-      return Promise.resolve();
-    }
-
-    const fontVariantData = this.fontMap[font.id];
-
-    // System font for example does not need to load from a remote source.
-    if (!fontVariantData) {
-      this.loadedFonts.add(font.id);
-    }
-
-    if (fontVariantData && !this.loadedFonts.has(font.id)) {
-      this.loadingFontVariants = true;
-      const fontFaces = fontVariantData.map((fontVariant) => {
-        return new FontFace(font.label, `url(${fontVariant.url})`, {
-          style: "normal",
-          weight: fontVariant.weight,
-        });
-      });
-
-      return Promise.all(
-        fontFaces.map((fontFace) =>
-          fontFace.load().then((loadedFont) => {
-            document.fonts.add(loadedFont);
-
-            // We use our own Set because, though document.fonts.check is available,
-            // it does not seem very reliable, returning false for fonts that have
-            // definitely been loaded.
-            this.loadedFonts.add(font.id);
-          })
-        )
-      )
-        .then(() => {
-          this.triggerRepaint();
-        })
-        .finally(() => {
-          this.loadingFontVariants = false;
-        });
-    } else if (this.loadedFonts.has(font.id)) {
-      return Promise.resolve(this.triggerRepaint());
-    }
-  }
-
-  images() {}
-
-  // NOTE: This works for fonts included in a style that is actually using the
-  // @font-faces on load, but for fonts that we aren't using yet we need to
-  // make sure they are loaded before rendering the canvas via loadFontVariants.
-  loadFonts() {
-    return document.fonts.ready;
-  }
-
-  loadImages() {
-    const images = this.images();
-    if (images) {
-      return Promise.all(
-        Object.keys(images).map((id) => {
-          return loadImage(images[id]).then((img) => (this[id] = img));
-        })
-      );
-    }
-    return Promise.resolve();
-  }
-
-  reload() {
-    Promise.all([this.loadFonts(), this.loadImages()]).then(() => {
-      // NOTE: This must be done otherwise the "bold" variant of the body font
-      // will not be loaded for some reason before rendering the canvas.
-      //
-      // The header font does not suffer from this issue.
-      this.loadFontVariants(this.wizard.font).then(() => {
-        this.loaded = true;
-        this.triggerRepaint();
-      });
-    });
-  }
-
-  triggerRepaint() {
-    scheduleOnce("afterRender", this, "repaint");
-  }
-
-  repaint() {
-    if (!this.loaded) {
-      return false;
-    }
-
-    const colorsArray = this.wizard.currentColors;
-    if (!colorsArray) {
-      return;
-    }
-
-    let colors = {};
-    colorsArray.forEach(function (c) {
-      const name = c.name;
-      colors[name] = `#${c.hex}`;
-    });
-
-    const { font, headingFont } = this.wizard;
-    if (!font) {
-      return;
-    }
-
-    const { ctx } = this;
-
-    ctx.fillStyle = colors.secondary;
-    ctx.fillRect(0, 0, this.width, this.height);
-
-    const options = {
-      ctx,
-      colors,
-      font,
-      headingFont,
-      width: this.width,
-      height: this.height,
-    };
-    this.paint(options);
-  }
-
-  categories() {
-    return [
-      {
-        name: i18n("wizard.homepage_preview.category_names.icebreakers"),
-        color: "#652D90",
-      },
-      {
-        name: i18n("wizard.homepage_preview.category_names.news"),
-        color: "#3AB54A",
-      },
-      {
-        name: i18n("wizard.homepage_preview.category_names.site_feedback"),
-        color: "#25AAE2",
-      },
-    ];
-  }
-
-  scaleImage(image, x, y, w, h) {
-    w = Math.floor(w);
-    h = Math.floor(h);
-
-    const { ctx } = this;
-
-    const key = `${image.src}-${w}-${h}`;
-
-    if (!scaled[key]) {
-      let copy = image;
-      let ratio = copy.width / copy.height;
-      let newH = copy.height * 0.5;
-      while (newH > h) {
-        copy = canvasFor(copy, ratio * newH, newH);
-        newH = newH * 0.5;
-      }
-
-      scaled[key] = copy;
-    }
-
-    ctx.drawImage(scaled[key], x, y, w, h);
-  }
-
-  get headerHeight() {
-    return this.height * 0.15;
-  }
-
-  drawFullHeader(colors, font, logo) {
-    const { ctx } = this;
-
-    drawHeader(ctx, colors, this.width, this.headerHeight);
-
-    const avatarSize = this.height * 0.1;
-    const headerMargin = this.headerHeight * 0.2;
-
-    if (logo) {
-      const logoHeight = this.headerHeight - headerMargin * 2;
-
-      const ratio = logoHeight / logo.height;
-      this.scaleImage(
-        logo,
-        headerMargin,
-        headerMargin,
-        logo.width * ratio,
-        logoHeight
-      );
-
-      this.scaleImage(logo, this.width, headerMargin);
-    }
-
-    // Top right menu
-    this.scaleImage(
-      this.avatar,
-      this.width - avatarSize - headerMargin,
-      headerMargin,
-      avatarSize,
-      avatarSize
-    );
-
-    // accounts for hard-set color variables in solarized themes
-    ctx.fillStyle =
-      colors.primary_low_mid ||
-      darkLightDiff(colors.primary, colors.secondary, 45, 55);
-
-    const pathScale = this.headerHeight / 1200;
-    const searchIcon = new Path2D(
-      "M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-    );
-    const hamburgerIcon = new Path2D(
-      "M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
-    );
-    const chatIcon = new Path2D(
-      "M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4c0 0 0 0 0 0s0 0 0 0s0 0 0 0c0 0 0 0 0 0l.3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z"
-    );
-    ctx.save(); // Save the previous state for translation and scale
-    ctx.translate(
-      this.width - avatarSize * 2 - headerMargin * 0.5,
-      avatarSize / 2
-    );
-    // need to scale paths otherwise they're too large
-    ctx.scale(pathScale, pathScale);
-    ctx.fill(searchIcon);
-    ctx.restore();
-    ctx.save();
-    ctx.translate(
-      this.width - avatarSize * 3 - headerMargin * 0.5,
-      avatarSize / 2
-    );
-    ctx.scale(pathScale, pathScale);
-    ctx.fill(chatIcon);
-    ctx.restore();
-    ctx.save();
-    ctx.translate(headerMargin * 1.75, avatarSize / 2);
-    ctx.scale(pathScale, pathScale);
-    ctx.fill(hamburgerIcon);
-    ctx.restore();
-  }
-
-  drawPills(colors, font, headerHeight, opts) {
-    opts = opts || {};
-
-    const { ctx } = this;
-
-    const badgeHeight = headerHeight * 2 * 0.25;
-    const headerMargin = headerHeight * 0.2;
-    const fontSize = Math.round(badgeHeight * 0.5);
-    ctx.font = `${fontSize}px '${font.label}'`;
-
-    const allCategoriesText = i18n(
-      "wizard.homepage_preview.nav_buttons.all_categories"
-    );
-    const categoriesWidth = ctx.measureText(allCategoriesText).width;
-    const categoriesBoxWidth = categoriesWidth + headerMargin * 2;
-
-    // Box around "all categories >"
-    ctx.beginPath();
-    ctx.strokeStyle = colors.primary;
-    ctx.lineWidth = 0.5;
-    ctx.rect(
-      headerMargin,
-      headerHeight + headerMargin,
-      categoriesBoxWidth,
-      badgeHeight
-    );
-    ctx.stroke();
-
-    ctx.fillStyle = colors.primary;
-    ctx.fillText(
-      allCategoriesText,
-      headerMargin * 1.5,
-      headerHeight + headerMargin * 1.4 + fontSize
-    );
-
-    // Caret (>) at the end of "all categories" box
-    const pathScale = badgeHeight / 1000;
-    const caretIcon = new Path2D(
-      "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
-    );
-
-    ctx.save();
-    ctx.translate(
-      categoriesBoxWidth,
-      headerHeight + headerMargin + badgeHeight / 4
-    );
-    ctx.scale(pathScale, pathScale);
-    ctx.fill(caretIcon);
-    ctx.restore();
-
-    const categoryHomepage =
-      opts.homepageStyle.includes("category") ||
-      opts.homepageStyle.includes("categories");
-
-    // First top menu item
-    const otherHomepageText = i18n(
-      `wizard.top_menu_items.${opts.homepageStyle}`
-    );
-
-    const firstTopMenuItemText = categoryHomepage
-      ? i18n("wizard.top_menu_items.categories")
-      : otherHomepageText;
-
-    const newText = i18n("wizard.top_menu_items.new");
-    const unreadText = i18n("wizard.top_menu_items.unread");
-    const topText = i18n("wizard.top_menu_items.top");
-
-    ctx.beginPath();
-    ctx.fillStyle = colors.tertiary;
-    ctx.rect(
-      categoriesBoxWidth + headerMargin * 2,
-      headerHeight + headerMargin,
-      ctx.measureText(firstTopMenuItemText).width + headerMargin * 2,
-      badgeHeight
-    );
-    ctx.fill();
-
-    ctx.font = `${fontSize}px '${font.label}'`;
-    ctx.fillStyle = colors.secondary;
-    const pillButtonTextY = headerHeight + headerMargin * 1.4 + fontSize;
-    const firstTopMenuItemX = headerMargin * 3.0 + categoriesBoxWidth;
-    ctx.fillText(
-      firstTopMenuItemText,
-      firstTopMenuItemX,
-      pillButtonTextY,
-      ctx.measureText(firstTopMenuItemText).width
-    );
-
-    ctx.fillStyle = colors.primary;
-
-    const newTextX =
-      firstTopMenuItemX +
-      ctx.measureText(firstTopMenuItemText).width +
-      headerMargin * 2.0;
-    ctx.fillText(newText, newTextX, pillButtonTextY);
-
-    const unreadTextX =
-      newTextX + ctx.measureText(newText).width + headerMargin * 2.0;
-    ctx.fillText(unreadText, unreadTextX, pillButtonTextY);
-
-    const topTextX =
-      unreadTextX + ctx.measureText(unreadText).width + headerMargin * 2.0;
-    ctx.fillText(topText, topTextX, pillButtonTextY);
-  }
-}
-
-function loadImage(src) {
-  if (!src) {
-    return Promise.resolve();
-  }
-
-  const img = new Image();
-  img.src = getUrl(src);
-  return new Promise((resolve) => (img.onload = () => resolve(img)));
-}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.gjs
index c061ca19200..06b7be1f4ef 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.gjs
@@ -1,3 +1,254 @@
+import { action } from "@ember/object";
+import { observes } from "@ember-decorators/object";
+import { bind } from "discourse/lib/decorators";
+import { i18n } from "discourse-i18n";
+import {
+  chooseDarker,
+  darkLightDiff,
+  resizeTextLinesToFitRect,
+} from "../../../lib/preview";
+import HomepagePreview from "./-homepage-preview";
+import PreviewBaseComponent from "./-preview-base";
+
+export default class Index extends PreviewBaseComponent {
+  width = 630;
+  height = 380;
+  logo = null;
+  avatar = null;
+  previewTopic = true;
+  draggingActive = false;
+  startX = 0;
+  scrollLeft = 0;
+  HomepagePreview = HomepagePreview;
+
+  init() {
+    super.init(...arguments);
+    this.step
+      .findField("homepage_style")
+      ?.addListener(this.onHomepageStyleChange);
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.step
+      .findField("homepage_style")
+      ?.removeListener(this.onHomepageStyleChange);
+  }
+
+  didInsertElement() {
+    super.didInsertElement(...arguments);
+    this.element.addEventListener("mouseleave", this.handleMouseLeave);
+    this.element.addEventListener("mousemove", this.handleMouseMove);
+  }
+
+  willDestroyElement() {
+    super.willDestroyElement(...arguments);
+    this.element.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.element.removeEventListener("mousemove", this.handleMouseMove);
+  }
+
+  mouseDown(e) {
+    const slider = this.element.querySelector(".previews");
+    this.setProperties({
+      draggingActive: true,
+      startX: e.pageX - slider.offsetLeft,
+      scrollLeft: slider.scrollLeft,
+    });
+  }
+
+  @bind
+  handleMouseLeave() {
+    this.set("draggingActive", false);
+  }
+
+  mouseUp() {
+    this.set("draggingActive", false);
+  }
+
+  @bind
+  handleMouseMove(e) {
+    if (!this.draggingActive) {
+      return;
+    }
+    e.preventDefault();
+
+    const slider = this.element.querySelector(".previews"),
+      x = e.pageX - slider.offsetLeft,
+      walk = (x - this.startX) * 1.5;
+
+    slider.scrollLeft = this.scrollLeft - walk;
+
+    if (slider.scrollLeft < 50) {
+      this.set("previewTopic", true);
+    }
+    if (slider.scrollLeft > slider.offsetWidth - 50) {
+      this.set("previewTopic", false);
+    }
+  }
+
+  didUpdateAttrs() {
+    super.didUpdateAttrs(...arguments);
+
+    this.triggerRepaint();
+  }
+
+  @bind
+  onHomepageStyleChange() {
+    this.set("previewTopic", false);
+  }
+
+  @observes("previewTopic")
+  scrollPreviewArea() {
+    const el = this.element.querySelector(".previews");
+    el.scrollTo({
+      top: 0,
+      left: this.previewTopic ? 0 : el.scrollWidth - el.offsetWidth,
+      behavior: "smooth",
+    });
+  }
+
+  images() {
+    return {
+      logo: this.wizard.logoUrl,
+      avatar: "/images/wizard/trout.png",
+    };
+  }
+
+  paint({ ctx, colors, font, headingFont, width, height }) {
+    this.drawFullHeader(colors, headingFont, this.logo);
+
+    const margin = 20;
+    const avatarSize = height * 0.1 + 5;
+    const lineHeight = height / 14;
+    const leftHandTextGutter = margin + avatarSize + margin;
+    const timelineX = width * 0.86;
+
+    // Draw a fake topic
+    this.scaleImage(
+      this.avatar,
+      margin,
+      this.headerHeight + height * 0.22,
+      avatarSize,
+      avatarSize
+    );
+
+    const titleFontSize = this.headerHeight / 30;
+
+    // Topic title
+    ctx.beginPath();
+    ctx.fillStyle = colors.primary;
+    ctx.font = `700 ${titleFontSize}em '${headingFont.label}'`;
+    ctx.fillText(i18n("wizard.previews.topic_title"), margin, height * 0.3);
+
+    // Topic OP text
+    const bodyFontSize = 1;
+    ctx.font = `${bodyFontSize}em '${font.label}'`;
+
+    let verticalLinePos = 0;
+    const topicOp = i18n("wizard.homepage_preview.topic_ops.what_books");
+    const topicOpLines = topicOp.split("\n");
+
+    resizeTextLinesToFitRect(
+      topicOpLines,
+      timelineX - leftHandTextGutter,
+      ctx,
+      bodyFontSize,
+      font,
+      (textLine, idx) => {
+        verticalLinePos = height * 0.4 + idx * lineHeight;
+        ctx.fillText(textLine, leftHandTextGutter, verticalLinePos);
+      }
+    );
+
+    ctx.font = `${bodyFontSize}em '${font.label}'`;
+
+    // Share button
+    const shareButtonWidth =
+      Math.round(ctx.measureText(i18n("wizard.previews.share_button")).width) +
+      margin;
+
+    ctx.beginPath();
+    ctx.rect(margin, verticalLinePos, shareButtonWidth, height * 0.1);
+    // accounts for hard-set color variables in solarized themes
+    ctx.fillStyle =
+      colors.primary_low ||
+      darkLightDiff(colors.primary, colors.secondary, 90, 65);
+    ctx.fill();
+    ctx.fillStyle = chooseDarker(colors.primary, colors.secondary);
+    ctx.fillText(
+      i18n("wizard.previews.share_button"),
+      margin + 10,
+      verticalLinePos + lineHeight * 0.9
+    );
+
+    // Reply button
+    const replyButtonWidth =
+      Math.round(ctx.measureText(i18n("wizard.previews.reply_button")).width) +
+      margin;
+
+    ctx.beginPath();
+    ctx.rect(
+      shareButtonWidth + margin + 10,
+      verticalLinePos,
+      replyButtonWidth,
+      height * 0.1
+    );
+    ctx.fillStyle = colors.tertiary;
+    ctx.fill();
+    ctx.fillStyle = colors.secondary;
+    ctx.fillText(
+      i18n("wizard.previews.reply_button"),
+      shareButtonWidth + margin * 2,
+      verticalLinePos + lineHeight * 0.9
+    );
+
+    // Draw timeline
+    ctx.beginPath();
+    ctx.strokeStyle = colors.tertiary;
+    ctx.lineWidth = 0.5;
+    ctx.moveTo(timelineX, height * 0.3);
+    ctx.lineTo(timelineX, height * 0.7);
+    ctx.stroke();
+
+    // Timeline handle
+    ctx.beginPath();
+    ctx.strokeStyle = colors.tertiary;
+    ctx.lineWidth = 3;
+    ctx.moveTo(timelineX, height * 0.3 + 10);
+    ctx.lineTo(timelineX, height * 0.4);
+    ctx.stroke();
+
+    // Timeline post count
+    const postCountY = height * 0.3 + margin + 10;
+    ctx.beginPath();
+    ctx.font = `700 ${bodyFontSize}em '${font.label}'`;
+    ctx.fillStyle = colors.primary;
+    ctx.fillText("1 / 20", timelineX + margin / 2, postCountY);
+
+    // Timeline post date
+    ctx.beginPath();
+    ctx.font = `${bodyFontSize * 0.9}em '${font.label}'`;
+    ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 70, 65);
+    ctx.fillText(
+      "Nov 22",
+      timelineX + margin / 2,
+      postCountY + lineHeight * 0.75
+    );
+  }
+
+  @action
+  setPreviewHomepage(event) {
+    event?.preventDefault();
+    this.set("previewTopic", false);
+  }
+
+  @action
+  setPreviewTopic(event) {
+    event?.preventDefault();
+    this.set("previewTopic", true);
+  }
+}
+
 <div class="previews {{if this.draggingActive 'dragging'}}">
   <div class="wizard-container__preview topic-preview">
     <canvas
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js
deleted file mode 100644
index f44b24806b6..00000000000
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js
+++ /dev/null
@@ -1,250 +0,0 @@
-import { action } from "@ember/object";
-import { observes } from "@ember-decorators/object";
-import { bind } from "discourse/lib/decorators";
-import { i18n } from "discourse-i18n";
-import {
-  chooseDarker,
-  darkLightDiff,
-  resizeTextLinesToFitRect,
-} from "../../../lib/preview";
-import HomepagePreview from "./-homepage-preview";
-import PreviewBaseComponent from "./-preview-base";
-
-export default class Index extends PreviewBaseComponent {
-  width = 630;
-  height = 380;
-  logo = null;
-  avatar = null;
-  previewTopic = true;
-  draggingActive = false;
-  startX = 0;
-  scrollLeft = 0;
-  HomepagePreview = HomepagePreview;
-
-  init() {
-    super.init(...arguments);
-    this.step
-      .findField("homepage_style")
-      ?.addListener(this.onHomepageStyleChange);
-  }
-
-  willDestroy() {
-    super.willDestroy(...arguments);
-    this.step
-      .findField("homepage_style")
-      ?.removeListener(this.onHomepageStyleChange);
-  }
-
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-    this.element.addEventListener("mouseleave", this.handleMouseLeave);
-    this.element.addEventListener("mousemove", this.handleMouseMove);
-  }
-
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
-    this.element.removeEventListener("mouseleave", this.handleMouseLeave);
-    this.element.removeEventListener("mousemove", this.handleMouseMove);
-  }
-
-  mouseDown(e) {
-    const slider = this.element.querySelector(".previews");
-    this.setProperties({
-      draggingActive: true,
-      startX: e.pageX - slider.offsetLeft,
-      scrollLeft: slider.scrollLeft,
-    });
-  }
-
-  @bind
-  handleMouseLeave() {
-    this.set("draggingActive", false);
-  }
-
-  mouseUp() {
-    this.set("draggingActive", false);
-  }
-
-  @bind
-  handleMouseMove(e) {
-    if (!this.draggingActive) {
-      return;
-    }
-    e.preventDefault();
-
-    const slider = this.element.querySelector(".previews"),
-      x = e.pageX - slider.offsetLeft,
-      walk = (x - this.startX) * 1.5;
-
-    slider.scrollLeft = this.scrollLeft - walk;
-
-    if (slider.scrollLeft < 50) {
-      this.set("previewTopic", true);
-    }
-    if (slider.scrollLeft > slider.offsetWidth - 50) {
-      this.set("previewTopic", false);
-    }
-  }
-
-  didUpdateAttrs() {
-    super.didUpdateAttrs(...arguments);
-
-    this.triggerRepaint();
-  }
-
-  @bind
-  onHomepageStyleChange() {
-    this.set("previewTopic", false);
-  }
-
-  @observes("previewTopic")
-  scrollPreviewArea() {
-    const el = this.element.querySelector(".previews");
-    el.scrollTo({
-      top: 0,
-      left: this.previewTopic ? 0 : el.scrollWidth - el.offsetWidth,
-      behavior: "smooth",
-    });
-  }
-
-  images() {
-    return {
-      logo: this.wizard.logoUrl,
-      avatar: "/images/wizard/trout.png",
-    };
-  }
-
-  paint({ ctx, colors, font, headingFont, width, height }) {
-    this.drawFullHeader(colors, headingFont, this.logo);
-
-    const margin = 20;
-    const avatarSize = height * 0.1 + 5;
-    const lineHeight = height / 14;
-    const leftHandTextGutter = margin + avatarSize + margin;
-    const timelineX = width * 0.86;
-
-    // Draw a fake topic
-    this.scaleImage(
-      this.avatar,
-      margin,
-      this.headerHeight + height * 0.22,
-      avatarSize,
-      avatarSize
-    );
-
-    const titleFontSize = this.headerHeight / 30;
-
-    // Topic title
-    ctx.beginPath();
-    ctx.fillStyle = colors.primary;
-    ctx.font = `700 ${titleFontSize}em '${headingFont.label}'`;
-    ctx.fillText(i18n("wizard.previews.topic_title"), margin, height * 0.3);
-
-    // Topic OP text
-    const bodyFontSize = 1;
-    ctx.font = `${bodyFontSize}em '${font.label}'`;
-
-    let verticalLinePos = 0;
-    const topicOp = i18n("wizard.homepage_preview.topic_ops.what_books");
-    const topicOpLines = topicOp.split("\n");
-
-    resizeTextLinesToFitRect(
-      topicOpLines,
-      timelineX - leftHandTextGutter,
-      ctx,
-      bodyFontSize,
-      font,
-      (textLine, idx) => {
-        verticalLinePos = height * 0.4 + idx * lineHeight;
-        ctx.fillText(textLine, leftHandTextGutter, verticalLinePos);
-      }
-    );
-
-    ctx.font = `${bodyFontSize}em '${font.label}'`;
-
-    // Share button
-    const shareButtonWidth =
-      Math.round(ctx.measureText(i18n("wizard.previews.share_button")).width) +
-      margin;
-
-    ctx.beginPath();
-    ctx.rect(margin, verticalLinePos, shareButtonWidth, height * 0.1);
-    // accounts for hard-set color variables in solarized themes
-    ctx.fillStyle =
-      colors.primary_low ||
-      darkLightDiff(colors.primary, colors.secondary, 90, 65);
-    ctx.fill();
-    ctx.fillStyle = chooseDarker(colors.primary, colors.secondary);
-    ctx.fillText(
-      i18n("wizard.previews.share_button"),
-      margin + 10,
-      verticalLinePos + lineHeight * 0.9
-    );
-
-    // Reply button
-    const replyButtonWidth =
-      Math.round(ctx.measureText(i18n("wizard.previews.reply_button")).width) +
-      margin;
-
-    ctx.beginPath();
-    ctx.rect(
-      shareButtonWidth + margin + 10,
-      verticalLinePos,
-      replyButtonWidth,
-      height * 0.1
-    );
-    ctx.fillStyle = colors.tertiary;
-    ctx.fill();
-    ctx.fillStyle = colors.secondary;
-    ctx.fillText(
-      i18n("wizard.previews.reply_button"),
-      shareButtonWidth + margin * 2,
-      verticalLinePos + lineHeight * 0.9
-    );
-
-    // Draw timeline
-    ctx.beginPath();
-    ctx.strokeStyle = colors.tertiary;
-    ctx.lineWidth = 0.5;
-    ctx.moveTo(timelineX, height * 0.3);
-    ctx.lineTo(timelineX, height * 0.7);
-    ctx.stroke();
-
-    // Timeline handle
-    ctx.beginPath();
-    ctx.strokeStyle = colors.tertiary;
-    ctx.lineWidth = 3;
-    ctx.moveTo(timelineX, height * 0.3 + 10);
-    ctx.lineTo(timelineX, height * 0.4);
-    ctx.stroke();
-
-    // Timeline post count
-    const postCountY = height * 0.3 + margin + 10;
-    ctx.beginPath();
-    ctx.font = `700 ${bodyFontSize}em '${font.label}'`;
-    ctx.fillStyle = colors.primary;
-    ctx.fillText("1 / 20", timelineX + margin / 2, postCountY);
-
-    // Timeline post date
-    ctx.beginPath();
-    ctx.font = `${bodyFontSize * 0.9}em '${font.label}'`;
-    ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 70, 65);
-    ctx.fillText(
-      "Nov 22",
-      timelineX + margin / 2,
-      postCountY + lineHeight * 0.75
-    );
-  }
-
-  @action
-  setPreviewHomepage(event) {
-    event?.preventDefault();
-    this.set("previewTopic", false);
-  }
-
-  @action
-  setPreviewTopic(event) {
-    event?.preventDefault();
-    this.set("previewTopic", true);
-  }
-}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.gjs b/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.gjs
index 29589c178fb..08841ba8263 100644
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.gjs
+++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.gjs
@@ -1,3 +1,7 @@
+import Component from "@ember/component";
+
+export default class Text extends Component {}
+
 <Input
   id={{this.field.id}}
   @value={{this.field.value}}
diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.js
deleted file mode 100644
index 8943b68cfc1..00000000000
--- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Component from "@ember/component";
-
-export default class Text extends Component {}
diff --git a/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.gjs b/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.gjs
index 6387211efc4..368084f95de 100644
--- a/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.gjs
@@ -1,3 +1,36 @@
+import { computed } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("color-palettes-row")
+export default class ColorPalettesRow extends SelectKitRowComponent {
+  @computed("item.colors.[]")
+  get palettes() {
+    return htmlSafe(
+      (this.item.colors || [])
+        .filter((color) => color.name !== "secondary")
+        .map((color) => `#${escape(color.hex)}`)
+        .map(
+          (hex) =>
+            `<span class="palette" style="background-color:${hex}"></span>`
+        )
+        .join("")
+    );
+  }
+
+  @computed("item.colors.[]")
+  get backgroundColor() {
+    const secondary = (this.item.colors || []).findBy("name", "secondary");
+
+    if (secondary && secondary.hex) {
+      return htmlSafe(`background-color:#${escape(secondary.hex)}`);
+    } else {
+      return "";
+    }
+  }
+}
+
 <span class="name">
   {{this.label}}
 </span>
diff --git a/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.js b/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.js
deleted file mode 100644
index 93d210b748d..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/color-palettes/color-palettes-row.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { computed } from "@ember/object";
-import { htmlSafe } from "@ember/template";
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("color-palettes-row")
-export default class ColorPalettesRow extends SelectKitRowComponent {
-  @computed("item.colors.[]")
-  get palettes() {
-    return htmlSafe(
-      (this.item.colors || [])
-        .filter((color) => color.name !== "secondary")
-        .map((color) => `#${escape(color.hex)}`)
-        .map(
-          (hex) =>
-            `<span class="palette" style="background-color:${hex}"></span>`
-        )
-        .join("")
-    );
-  }
-
-  @computed("item.colors.[]")
-  get backgroundColor() {
-    const secondary = (this.item.colors || []).findBy("name", "secondary");
-
-    if (secondary && secondary.hex) {
-      return htmlSafe(`background-color:#${escape(secondary.hex)}`);
-    } else {
-      return "";
-    }
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/create-color-row.gjs b/app/assets/javascripts/select-kit/addon/components/create-color-row.gjs
index 6902e57f3b9..2dea1d68c65 100644
--- a/app/assets/javascripts/select-kit/addon/components/create-color-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/create-color-row.gjs
@@ -1 +1,20 @@
+import { schedule } from "@ember/runloop";
+import { classNames } from "@ember-decorators/component";
+import { escapeExpression } from "discourse/lib/utilities";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("create-color-row")
+export default class CreateColorRow extends SelectKitRowComponent {
+  didReceiveAttrs() {
+    super.didReceiveAttrs(...arguments);
+
+    schedule("afterRender", () => {
+      const color = escapeExpression(this.rowValue);
+      this.element.style.borderLeftColor = color.startsWith("#")
+        ? color
+        : `#${color}`;
+    });
+  }
+}
+
 <span>{{this.label}}</span>
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/create-color-row.js b/app/assets/javascripts/select-kit/addon/components/create-color-row.js
deleted file mode 100644
index 04ed95036db..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/create-color-row.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { schedule } from "@ember/runloop";
-import { classNames } from "@ember-decorators/component";
-import { escapeExpression } from "discourse/lib/utilities";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("create-color-row")
-export default class CreateColorRow extends SelectKitRowComponent {
-  didReceiveAttrs() {
-    super.didReceiveAttrs(...arguments);
-
-    schedule("afterRender", () => {
-      const color = escapeExpression(this.rowValue);
-      this.element.style.borderLeftColor = color.startsWith("#")
-        ? color
-        : `#${color}`;
-    });
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.gjs b/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.gjs
index 2b0c587650a..643acf6417c 100644
--- a/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.gjs
@@ -1,3 +1,12 @@
+import { readOnly } from "@ember/object/computed";
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("dropdown-select-box-row")
+export default class DropdownSelectBoxRow extends SelectKitRowComponent {
+  @readOnly("item.description") description;
+}
+
 {{#if this.icons}}
   <div class="icons">
     <span class="selection-indicator"></span>
diff --git a/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.js b/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.js
deleted file mode 100644
index f59b673676e..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/dropdown-select-box/dropdown-select-box-row.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { readOnly } from "@ember/object/computed";
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("dropdown-select-box-row")
-export default class DropdownSelectBoxRow extends SelectKitRowComponent {
-  @readOnly("item.description") description;
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.gjs b/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.gjs
index 8ff700b0fd2..b84ca9dceaa 100644
--- a/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.gjs
@@ -1,3 +1,9 @@
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("email-group-user-chooser-row")
+export default class EmailGroupUserChooserRow extends SelectKitRowComponent {}
+
 {{#if this.item.isUser}}
   {{avatar this.item imageSize="tiny"}}
   <div>
diff --git a/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.js b/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.js
deleted file mode 100644
index 2b5c0363820..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/email-group-user-chooser-row.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("email-group-user-chooser-row")
-export default class EmailGroupUserChooserRow extends SelectKitRowComponent {}
diff --git a/app/assets/javascripts/select-kit/addon/components/flair-row.gjs b/app/assets/javascripts/select-kit/addon/components/flair-row.gjs
index 0b011e1ae67..411b77a8aa3 100644
--- a/app/assets/javascripts/select-kit/addon/components/flair-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/flair-row.gjs
@@ -1,3 +1,9 @@
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("flair-row")
+export default class FlairRow extends SelectKitRowComponent {}
+
 {{#if this.item.url}}
   <AvatarFlair
     @flairName={{this.item.name}}
diff --git a/app/assets/javascripts/select-kit/addon/components/flair-row.js b/app/assets/javascripts/select-kit/addon/components/flair-row.js
deleted file mode 100644
index d0ddacf4fce..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/flair-row.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("flair-row")
-export default class FlairRow extends SelectKitRowComponent {}
diff --git a/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.gjs b/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.gjs
index ee363afba4a..f60b4984c75 100644
--- a/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.gjs
@@ -1,3 +1,9 @@
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("future-date-input-selector-row")
+export default class FutureDateInputSelectorRow extends SelectKitRowComponent {}
+
 {{#if this.item.icon}}
   <div class="future-date-input-selector-icons">
     {{d-icon this.item.icon}}
diff --git a/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.js b/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.js
deleted file mode 100644
index 8c10eaa3ad7..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/future-date-input-selector/future-date-input-selector-row.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("future-date-input-selector-row")
-export default class FutureDateInputSelectorRow extends SelectKitRowComponent {}
diff --git a/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.gjs b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.gjs
index 79a16ca4809..440776a9977 100644
--- a/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.gjs
@@ -1,3 +1,9 @@
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("homepage-style-selector-row")
+export default class HomepageStyleSelectorRow extends SelectKitRowComponent {}
+
 <div class="texts">
   <span class="name">{{html-safe this.label}}</span>
   {{#if this.item.description}}
diff --git a/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.js b/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.js
deleted file mode 100644
index 6304554cb3d..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/homepage-style-selector/homepage-style-selector-row.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("homepage-style-selector-row")
-export default class HomepageStyleSelectorRow extends SelectKitRowComponent {}
diff --git a/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.gjs b/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.gjs
index 6d56b45927e..ef8ccdf430d 100644
--- a/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.gjs
@@ -1,3 +1,34 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { reads } from "@ember/object/computed";
+import { tagName } from "@ember-decorators/component";
+
+@tagName("")
+export default class SelectedCollection extends Component {
+  @reads("collection.content.selectedTags.[]") selectedTags;
+
+  @computed("selectedTags.[]", "selectKit.filter")
+  get tags() {
+    if (!this.selectedTags) {
+      return [];
+    }
+
+    let tags = this.selectedTags;
+    if (tags.length >= 20 && this.selectKit.filter) {
+      tags = tags.filter((t) => t.includes(this.selectKit.filter));
+    } else if (tags.length >= 20) {
+      tags = tags.slice(0, 20);
+    }
+
+    return tags.map((selectedTag) => {
+      return {
+        value: selectedTag,
+        classNames: "selected-tag",
+      };
+    });
+  }
+}
+
 {{#if this.tags}}
   <div class="mini-tag-chooser-selected-collection selected-tags">
     {{#each this.tags as |tag|}}
diff --git a/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.js b/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.js
deleted file mode 100644
index 52383708efd..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/mini-tag-chooser/selected-collection.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
-import { reads } from "@ember/object/computed";
-import { tagName } from "@ember-decorators/component";
-
-@tagName("")
-export default class SelectedCollection extends Component {
-  @reads("collection.content.selectedTags.[]") selectedTags;
-
-  @computed("selectedTags.[]", "selectKit.filter")
-  get tags() {
-    if (!this.selectedTags) {
-      return [];
-    }
-
-    let tags = this.selectedTags;
-    if (tags.length >= 20 && this.selectKit.filter) {
-      tags = tags.filter((t) => t.includes(this.selectKit.filter));
-    } else if (tags.length >= 20) {
-      tags = tags.slice(0, 20);
-    }
-
-    return tags.map((selectedTag) => {
-      return {
-        value: selectedTag,
-        classNames: "selected-tag",
-      };
-    });
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.gjs b/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.gjs
index 673544cfaf2..007ee618448 100644
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.gjs
@@ -1,3 +1,28 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { tagName } from "@ember-decorators/component";
+import { makeArray } from "discourse/lib/helpers";
+import UtilsMixin from "select-kit/mixins/utils";
+
+@tagName("")
+export default class FormatSelectedContent extends Component.extend(
+  UtilsMixin
+) {
+  content = null;
+  selectKit = null;
+
+  @computed("content")
+  get formattedContent() {
+    if (this.content) {
+      return makeArray(this.content)
+        .map((c) => this.getName(c))
+        .join(", ");
+    } else {
+      return this.getName(this.selectKit.noneItem);
+    }
+  }
+}
+
 <span class="formatted-selection">
   {{this.formattedContent}}
 </span>
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.js b/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.js
deleted file mode 100644
index 3492d93aa58..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/format-selected-content.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
-import { tagName } from "@ember-decorators/component";
-import { makeArray } from "discourse/lib/helpers";
-import UtilsMixin from "select-kit/mixins/utils";
-
-@tagName("")
-export default class FormatSelectedContent extends Component.extend(
-  UtilsMixin
-) {
-  content = null;
-  selectKit = null;
-
-  @computed("content")
-  get formattedContent() {
-    if (this.content) {
-      return makeArray(this.content)
-        .map((c) => this.getName(c))
-        .join(", ");
-    } else {
-      return this.getName(this.selectKit.noneItem);
-    }
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.gjs b/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.gjs
index f9099884900..f9dd2dbb520 100644
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.gjs
@@ -1,3 +1,41 @@
+import { action } from "@ember/object";
+import { isEmpty } from "@ember/utils";
+import { classNames } from "@ember-decorators/component";
+import discourseComputed from "discourse/lib/decorators";
+import SelectKitFilterComponent from "select-kit/components/select-kit/select-kit-filter";
+
+@classNames("multi-select-filter")
+export default class MultiSelectFilter extends SelectKitFilterComponent {
+  @discourseComputed("placeholder", "selectKit.hasSelection")
+  computedPlaceholder(placeholder, hasSelection) {
+    if (this.hidePlaceholderWithSelection && hasSelection) {
+      return "";
+    }
+
+    return isEmpty(placeholder) ? "" : placeholder;
+  }
+
+  @action
+  onPaste(event) {
+    const data = event?.clipboardData;
+
+    if (!data) {
+      return;
+    }
+
+    const parts = data.getData("text").split("|").filter(Boolean);
+
+    if (parts.length > 1) {
+      event.stopPropagation();
+      event.preventDefault();
+
+      this.selectKit.append(parts);
+
+      return false;
+    }
+  }
+}
+
 {{#unless this.isHidden}}
   {{! filter-input-search prevents 1password from attempting autocomplete }}
   {{! template-lint-disable no-pointer-down-event-binding }}
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.js b/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.js
deleted file mode 100644
index 7eaa3b6e1b7..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { action } from "@ember/object";
-import { isEmpty } from "@ember/utils";
-import { classNames } from "@ember-decorators/component";
-import discourseComputed from "discourse/lib/decorators";
-import SelectKitFilterComponent from "select-kit/components/select-kit/select-kit-filter";
-
-@classNames("multi-select-filter")
-export default class MultiSelectFilter extends SelectKitFilterComponent {
-  @discourseComputed("placeholder", "selectKit.hasSelection")
-  computedPlaceholder(placeholder, hasSelection) {
-    if (this.hidePlaceholderWithSelection && hasSelection) {
-      return "";
-    }
-
-    return isEmpty(placeholder) ? "" : placeholder;
-  }
-
-  @action
-  onPaste(event) {
-    const data = event?.clipboardData;
-
-    if (!data) {
-      return;
-    }
-
-    const parts = data.getData("text").split("|").filter(Boolean);
-
-    if (parts.length > 1) {
-      event.stopPropagation();
-      event.preventDefault();
-
-      this.selectKit.append(parts);
-
-      return false;
-    }
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.gjs b/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.gjs
index f2ac08c32ef..d09e33cb94e 100644
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.gjs
@@ -1,3 +1,22 @@
+import { computed } from "@ember/object";
+import { htmlSafe } from "@ember/template";
+import { classNames } from "@ember-decorators/component";
+import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import SelectedNameComponent from "select-kit/components/selected-name";
+
+@classNames("selected-category")
+export default class SelectedCategory extends SelectedNameComponent {
+  @computed("item")
+  get badge() {
+    return htmlSafe(
+      categoryBadgeHTML(this.item, {
+        allowUncategorized: true,
+        link: false,
+      })
+    );
+  }
+}
+
 <div
   {{on "click" this.onSelectedNameClick}}
   tabindex="0"
diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.js b/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.js
deleted file mode 100644
index 4480eda8a2c..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/multi-select/selected-category.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { computed } from "@ember/object";
-import { htmlSafe } from "@ember/template";
-import { classNames } from "@ember-decorators/component";
-import { categoryBadgeHTML } from "discourse/helpers/category-link";
-import SelectedNameComponent from "select-kit/components/selected-name";
-
-@classNames("selected-category")
-export default class SelectedCategory extends SelectedNameComponent {
-  @computed("item")
-  get badge() {
-    return htmlSafe(
-      categoryBadgeHTML(this.item, {
-        allowUncategorized: true,
-        link: false,
-      })
-    );
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/none-category-row.gjs b/app/assets/javascripts/select-kit/addon/components/none-category-row.gjs
index 35670d94ae2..8f71f5c5e55 100644
--- a/app/assets/javascripts/select-kit/addon/components/none-category-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/none-category-row.gjs
@@ -1,3 +1,23 @@
+import { htmlSafe } from "@ember/template";
+import { classNames } from "@ember-decorators/component";
+import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import discourseComputed from "discourse/lib/decorators";
+import CategoryRowComponent from "select-kit/components/category-row";
+
+@classNames("none category-row")
+export default class NoneCategoryRow extends CategoryRowComponent {
+  @discourseComputed("category")
+  badgeForCategory(category) {
+    return htmlSafe(
+      categoryBadgeHTML(category, {
+        link: false,
+        allowUncategorized: true,
+        hideParent: true,
+      })
+    );
+  }
+}
+
 {{#if this.category}}
   <div class="category-status" aria-hidden="true">
     {{#if this.hasParentCategory}}
diff --git a/app/assets/javascripts/select-kit/addon/components/none-category-row.js b/app/assets/javascripts/select-kit/addon/components/none-category-row.js
deleted file mode 100644
index 3f393295584..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/none-category-row.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { htmlSafe } from "@ember/template";
-import { classNames } from "@ember-decorators/component";
-import { categoryBadgeHTML } from "discourse/helpers/category-link";
-import discourseComputed from "discourse/lib/decorators";
-import CategoryRowComponent from "select-kit/components/category-row";
-
-@classNames("none category-row")
-export default class NoneCategoryRow extends CategoryRowComponent {
-  @discourseComputed("category")
-  badgeForCategory(category) {
-    return htmlSafe(
-      categoryBadgeHTML(category, {
-        link: false,
-        allowUncategorized: true,
-        hideParent: true,
-      })
-    );
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.gjs b/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.gjs
index 25b772219c0..c9a084893ca 100644
--- a/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.gjs
@@ -1,3 +1,18 @@
+import { classNames } from "@ember-decorators/component";
+import { fmt } from "discourse/lib/computed";
+import discourseComputed from "discourse/lib/decorators";
+import DropdownSelectBoxHeaderComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
+
+@classNames("notifications-filter-header", "btn-flat")
+export default class NotificationsFilterHeader extends DropdownSelectBoxHeaderComponent {
+  @fmt("value", "user.user_notifications.filters.%@") label;
+
+  @discourseComputed("selectKit.isExpanded")
+  caretIcon(isExpanded) {
+    return isExpanded ? "caret-up" : "caret-down";
+  }
+}
+
 <div class="select-kit-header-wrapper">
   <span class="filter-text">
     {{i18n "user.user_notifications.filters.filter_by"}}
diff --git a/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.js b/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.js
deleted file mode 100644
index d84d3b75f45..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/notifications-filter/notifications-filter-header.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import { fmt } from "discourse/lib/computed";
-import discourseComputed from "discourse/lib/decorators";
-import DropdownSelectBoxHeaderComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
-
-@classNames("notifications-filter-header", "btn-flat")
-export default class NotificationsFilterHeader extends DropdownSelectBoxHeaderComponent {
-  @fmt("value", "user.user_notifications.filters.%@") label;
-
-  @discourseComputed("selectKit.isExpanded")
-  caretIcon(isExpanded) {
-    return isExpanded ? "caret-up" : "caret-down";
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.gjs b/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.gjs
index 13fae3bb97f..4db69063d34 100644
--- a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.gjs
@@ -1,3 +1,15 @@
+import { classNames } from "@ember-decorators/component";
+import discourseComputed from "discourse/lib/decorators";
+import DropdownSelectBoxHeaderComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
+
+@classNames("period-chooser-header", "btn-flat")
+export default class PeriodChooserHeader extends DropdownSelectBoxHeaderComponent {
+  @discourseComputed("selectKit.isExpanded")
+  caretIcon(isExpanded) {
+    return isExpanded ? "caret-up" : "caret-down";
+  }
+}
+
 <h2 class="selected-name" title={{this.title}}>
   {{period-title
     this.value
diff --git a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.js b/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.js
deleted file mode 100644
index 59834b9cc87..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-header.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import discourseComputed from "discourse/lib/decorators";
-import DropdownSelectBoxHeaderComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-header";
-
-@classNames("period-chooser-header", "btn-flat")
-export default class PeriodChooserHeader extends DropdownSelectBoxHeaderComponent {
-  @discourseComputed("selectKit.isExpanded")
-  caretIcon(isExpanded) {
-    return isExpanded ? "caret-up" : "caret-down";
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.gjs b/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.gjs
index 82e46d041ad..6da4d8131d7 100644
--- a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.gjs
@@ -1,3 +1,16 @@
+import { classNames } from "@ember-decorators/component";
+import discourseComputed from "discourse/lib/decorators";
+import { i18n } from "discourse-i18n";
+import DropdownSelectBoxRowComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-row";
+
+@classNames("period-chooser-row")
+export default class PeriodChooserRow extends DropdownSelectBoxRowComponent {
+  @discourseComputed("rowName")
+  title(rowName) {
+    return i18n(`filters.top.${rowName || "this_week"}`).title;
+  }
+}
+
 <span class="selection-indicator"></span>
 
 <span class="period-title">
diff --git a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.js b/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.js
deleted file mode 100644
index 4d2e762f548..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/period-chooser/period-chooser-row.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import discourseComputed from "discourse/lib/decorators";
-import { i18n } from "discourse-i18n";
-import DropdownSelectBoxRowComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-row";
-
-@classNames("period-chooser-row")
-export default class PeriodChooserRow extends DropdownSelectBoxRowComponent {
-  @discourseComputed("rowName")
-  title(rowName) {
-    return i18n(`filters.top.${rowName || "this_week"}`).title;
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.gjs
index bbe619709a3..c8ed3d2c3ad 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.gjs
@@ -1,3 +1,9 @@
+import Component from "@ember/component";
+import { tagName } from "@ember-decorators/component";
+
+@tagName("")
+export default class ErrorsCollection extends Component {}
+
 {{#if this.collection.content}}
   <ul class="select-kit-errors-collection">
     {{#each this.collection.content as |item|}}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.js b/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.js
deleted file mode 100644
index 658729f33d0..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/errors-collection.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Component from "@ember/component";
-import { tagName } from "@ember-decorators/component";
-
-@tagName("")
-export default class ErrorsCollection extends Component {}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.gjs
index eaeea2409d2..b5fa73742ae 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.gjs
@@ -1,3 +1,68 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { next } from "@ember/runloop";
+import { classNameBindings, classNames } from "@ember-decorators/component";
+import { bind } from "discourse/lib/decorators";
+
+@classNames("select-kit-body")
+@classNameBindings("emptyBody:empty-body")
+export default class SelectKitBody extends Component {
+  @computed("selectKit.{filter,hasNoContent}")
+  get emptyBody() {
+    return false;
+  }
+
+  didInsertElement() {
+    super.didInsertElement(...arguments);
+
+    this.element.style.position = "relative";
+    document.addEventListener("click", this.handleClick, true);
+    this.selectKit
+      .mainElement()
+      .addEventListener("keydown", this._handleKeydown, true);
+  }
+
+  willDestroyElement() {
+    super.willDestroyElement(...arguments);
+    document.removeEventListener("click", this.handleClick, true);
+    this.selectKit
+      .mainElement()
+      ?.removeEventListener("keydown", this._handleKeydown, true);
+  }
+
+  @bind
+  handleClick(event) {
+    if (!this.selectKit.isExpanded || !this.selectKit.mainElement()) {
+      return;
+    }
+
+    if (this.selectKit.mainElement().contains(event.target)) {
+      return;
+    }
+
+    this.selectKit.close(event);
+  }
+
+  @bind
+  _handleKeydown(event) {
+    if (!this.selectKit.isExpanded || event.key !== "Tab") {
+      return;
+    }
+
+    next(() => {
+      if (
+        this.isDestroying ||
+        this.isDestroyed ||
+        this.selectKit.mainElement()?.contains(document.activeElement)
+      ) {
+        return;
+      }
+
+      this.selectKit.close(event);
+    });
+  }
+}
+
 {{#if this.selectKit.isExpanded}}
   {{yield}}
 {{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js
deleted file mode 100644
index 0470919a559..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
-import { next } from "@ember/runloop";
-import { classNameBindings, classNames } from "@ember-decorators/component";
-import { bind } from "discourse/lib/decorators";
-
-@classNames("select-kit-body")
-@classNameBindings("emptyBody:empty-body")
-export default class SelectKitBody extends Component {
-  @computed("selectKit.{filter,hasNoContent}")
-  get emptyBody() {
-    return false;
-  }
-
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-
-    this.element.style.position = "relative";
-    document.addEventListener("click", this.handleClick, true);
-    this.selectKit
-      .mainElement()
-      .addEventListener("keydown", this._handleKeydown, true);
-  }
-
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
-    document.removeEventListener("click", this.handleClick, true);
-    this.selectKit
-      .mainElement()
-      ?.removeEventListener("keydown", this._handleKeydown, true);
-  }
-
-  @bind
-  handleClick(event) {
-    if (!this.selectKit.isExpanded || !this.selectKit.mainElement()) {
-      return;
-    }
-
-    if (this.selectKit.mainElement().contains(event.target)) {
-      return;
-    }
-
-    this.selectKit.close(event);
-  }
-
-  @bind
-  _handleKeydown(event) {
-    if (!this.selectKit.isExpanded || event.key !== "Tab") {
-      return;
-    }
-
-    next(() => {
-      if (
-        this.isDestroying ||
-        this.isDestroyed ||
-        this.selectKit.mainElement()?.contains(document.activeElement)
-      ) {
-        return;
-      }
-
-      this.selectKit.close(event);
-    });
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.gjs
index 5010ad7782b..fcae72786b4 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.gjs
@@ -1,3 +1,9 @@
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("create")
+export default class SelectKitCreateRow extends SelectKitRowComponent {}
+
 {{#each this.icons as |icon|}}
   {{d-icon icon translatedTitle=this.dasherizedTitle}}
 {{/each}}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.js
deleted file mode 100644
index f12ec7219d2..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-create-row.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("create")
-export default class SelectKitCreateRow extends SelectKitRowComponent {}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.gjs
index d0f57faf828..9b9913d317a 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.gjs
@@ -1,3 +1,144 @@
+import Component from "@ember/component";
+import { action, computed } from "@ember/object";
+import { not } from "@ember/object/computed";
+import { isPresent } from "@ember/utils";
+import {
+  attributeBindings,
+  classNameBindings,
+  classNames,
+} from "@ember-decorators/component";
+import discourseComputed from "discourse/lib/decorators";
+import { i18n } from "discourse-i18n";
+import UtilsMixin from "select-kit/mixins/utils";
+
+@classNames("select-kit-filter")
+@classNameBindings("isExpanded:is-expanded")
+@attributeBindings("role")
+export default class SelectKitFilter extends Component.extend(UtilsMixin) {
+  tabIndex = -1;
+
+  @not("isHidden") isExpanded;
+
+  @computed(
+    "selectKit.options.{filterable,allowAny,autoFilterable}",
+    "content.[]"
+  )
+  get isHidden() {
+    return (
+      !this.selectKit.options.filterable &&
+      !this.selectKit.options.allowAny &&
+      !this.selectKit.options.autoFilterable
+    );
+  }
+
+  @discourseComputed(
+    "selectKit.options.filterPlaceholder",
+    "selectKit.options.translatedFilterPlaceholder",
+    "selectKit.options.allowAny"
+  )
+  placeholder(placeholder, translatedPlaceholder) {
+    if (isPresent(translatedPlaceholder)) {
+      return translatedPlaceholder;
+    }
+
+    if (isPresent(placeholder)) {
+      return i18n(placeholder);
+    }
+
+    return i18n(
+      this.selectKit.options.allowAny
+        ? "select_kit.filter_placeholder_with_any"
+        : "select_kit.filter_placeholder"
+    );
+  }
+
+  @action
+  onPaste() {}
+
+  @action
+  onInput(event) {
+    this.selectKit.onInput(event);
+    return true;
+  }
+
+  @action
+  onKeyup(event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    return true;
+  }
+
+  @action
+  onKeydown(event) {
+    if (!this.selectKit.onKeydown(event)) {
+      return false;
+    }
+
+    if (event.key === "Tab" && this.selectKit.isLoading) {
+      this.selectKit.cancelSearch();
+      this.selectKit.close(event);
+      return true;
+    }
+
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      return true;
+    }
+
+    if (event.key === "Backspace" && !this.selectKit.filter) {
+      this.selectKit.deselectLast();
+      event.preventDefault();
+      return false;
+    }
+
+    if (event.key === "ArrowUp") {
+      this.selectKit.highlightLast();
+      event.preventDefault();
+      return false;
+    }
+
+    if (event.key === "ArrowDown") {
+      if (!this.selectKit.isExpanded) {
+        this.selectKit.open(event);
+      }
+      this.selectKit.highlightFirst();
+      event.preventDefault();
+      return false;
+    }
+
+    if (event.key === "Escape") {
+      this.selectKit.close(event);
+      this.selectKit.headerElement().focus();
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    }
+
+    if (event.key === "Enter" && this.selectKit.highlighted) {
+      this.selectKit.select(
+        this.getValue(this.selectKit.highlighted),
+        this.selectKit.highlighted
+      );
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return false;
+    }
+
+    if (
+      event.key === "Enter" &&
+      (!this.selectKit.highlighted || this.selectKit.enterDisabled)
+    ) {
+      this.element.querySelector("input").focus();
+      if (this.selectKit.enterDisabled) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      return false;
+    }
+
+    this.selectKit.set("highlighted", null);
+  }
+}
+
 {{#unless this.isHidden}}
   {{! filter-input-search prevents 1password from attempting autocomplete }}
   {{! template-lint-disable no-pointer-down-event-binding }}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.js
deleted file mode 100644
index 3423943ffd1..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import Component from "@ember/component";
-import { action, computed } from "@ember/object";
-import { not } from "@ember/object/computed";
-import { isPresent } from "@ember/utils";
-import {
-  attributeBindings,
-  classNameBindings,
-  classNames,
-} from "@ember-decorators/component";
-import discourseComputed from "discourse/lib/decorators";
-import { i18n } from "discourse-i18n";
-import UtilsMixin from "select-kit/mixins/utils";
-
-@classNames("select-kit-filter")
-@classNameBindings("isExpanded:is-expanded")
-@attributeBindings("role")
-export default class SelectKitFilter extends Component.extend(UtilsMixin) {
-  tabIndex = -1;
-
-  @not("isHidden") isExpanded;
-
-  @computed(
-    "selectKit.options.{filterable,allowAny,autoFilterable}",
-    "content.[]"
-  )
-  get isHidden() {
-    return (
-      !this.selectKit.options.filterable &&
-      !this.selectKit.options.allowAny &&
-      !this.selectKit.options.autoFilterable
-    );
-  }
-
-  @discourseComputed(
-    "selectKit.options.filterPlaceholder",
-    "selectKit.options.translatedFilterPlaceholder",
-    "selectKit.options.allowAny"
-  )
-  placeholder(placeholder, translatedPlaceholder) {
-    if (isPresent(translatedPlaceholder)) {
-      return translatedPlaceholder;
-    }
-
-    if (isPresent(placeholder)) {
-      return i18n(placeholder);
-    }
-
-    return i18n(
-      this.selectKit.options.allowAny
-        ? "select_kit.filter_placeholder_with_any"
-        : "select_kit.filter_placeholder"
-    );
-  }
-
-  @action
-  onPaste() {}
-
-  @action
-  onInput(event) {
-    this.selectKit.onInput(event);
-    return true;
-  }
-
-  @action
-  onKeyup(event) {
-    event.preventDefault();
-    event.stopImmediatePropagation();
-    return true;
-  }
-
-  @action
-  onKeydown(event) {
-    if (!this.selectKit.onKeydown(event)) {
-      return false;
-    }
-
-    if (event.key === "Tab" && this.selectKit.isLoading) {
-      this.selectKit.cancelSearch();
-      this.selectKit.close(event);
-      return true;
-    }
-
-    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-      return true;
-    }
-
-    if (event.key === "Backspace" && !this.selectKit.filter) {
-      this.selectKit.deselectLast();
-      event.preventDefault();
-      return false;
-    }
-
-    if (event.key === "ArrowUp") {
-      this.selectKit.highlightLast();
-      event.preventDefault();
-      return false;
-    }
-
-    if (event.key === "ArrowDown") {
-      if (!this.selectKit.isExpanded) {
-        this.selectKit.open(event);
-      }
-      this.selectKit.highlightFirst();
-      event.preventDefault();
-      return false;
-    }
-
-    if (event.key === "Escape") {
-      this.selectKit.close(event);
-      this.selectKit.headerElement().focus();
-      event.preventDefault();
-      event.stopPropagation();
-      return false;
-    }
-
-    if (event.key === "Enter" && this.selectKit.highlighted) {
-      this.selectKit.select(
-        this.getValue(this.selectKit.highlighted),
-        this.selectKit.highlighted
-      );
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      return false;
-    }
-
-    if (
-      event.key === "Enter" &&
-      (!this.selectKit.highlighted || this.selectKit.enterDisabled)
-    ) {
-      this.element.querySelector("input").focus();
-      if (this.selectKit.enterDisabled) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-      return false;
-    }
-
-    this.selectKit.set("highlighted", null);
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.gjs
index 5010ad7782b..d7999750a72 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.gjs
@@ -1,3 +1,9 @@
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("none")
+export default class SelectKitNoneRow extends SelectKitRowComponent {}
+
 {{#each this.icons as |icon|}}
   {{d-icon icon translatedTitle=this.dasherizedTitle}}
 {{/each}}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.js
deleted file mode 100644
index 681ea72d11f..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-none-row.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("none")
-export default class SelectKitNoneRow extends SelectKitRowComponent {}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.gjs b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.gjs
index 5010ad7782b..fc01d418ac1 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.gjs
@@ -1,3 +1,210 @@
+import Component from "@ember/component";
+import { action, computed } from "@ember/object";
+import { reads } from "@ember/object/computed";
+import { guidFor } from "@ember/object/internals";
+import { dasherize } from "@ember/string";
+import {
+  attributeBindings,
+  classNameBindings,
+  classNames,
+  tagName,
+} from "@ember-decorators/component";
+import { makeArray } from "discourse/lib/helpers";
+import { i18n } from "discourse-i18n";
+import UtilsMixin from "select-kit/mixins/utils";
+
+@classNames("select-kit-row")
+@tagName("li")
+@attributeBindings(
+  "tabIndex",
+  "title",
+  "rowValue:data-value",
+  "rowName:data-name",
+  "index:data-index",
+  "role",
+  "ariaChecked:aria-checked",
+  "guid:data-guid",
+  "rowLang:lang"
+)
+@classNameBindings(
+  "isHighlighted",
+  "isSelected",
+  "isNone",
+  "isNone:none",
+  "item.classNames"
+)
+export default class SelectKitRow extends Component.extend(UtilsMixin) {
+  tabIndex = 0;
+  index = 0;
+  role = "menuitemradio";
+
+  @reads("item.lang") lang;
+
+  didInsertElement() {
+    super.didInsertElement(...arguments);
+
+    if (this.site.desktopView) {
+      this.element.addEventListener("mouseenter", this.handleMouseEnter);
+      this.element.addEventListener("focus", this.handleMouseEnter);
+    }
+  }
+
+  willDestroyElement() {
+    super.willDestroyElement(...arguments);
+
+    if (this.site.desktopView) {
+      this.element.removeEventListener("mouseenter", this.handleMouseEnter);
+      this.element.removeEventListener("focus", this.handleMouseEnter);
+    }
+  }
+
+  @computed("rowValue")
+  get isNone() {
+    return this.rowValue === this.getValue(this.selectKit.noneItem);
+  }
+
+  @computed("item")
+  get guid() {
+    return guidFor(this.item);
+  }
+
+  @computed("isSelected")
+  get ariaChecked() {
+    return this.isSelected ? "true" : "false";
+  }
+
+  @computed("rowTitle", "item.title", "rowName")
+  get title() {
+    return (
+      this.rowTitle || this.getProperty(this.item, "title") || this.rowName
+    );
+  }
+
+  @computed("title")
+  get dasherizedTitle() {
+    return dasherize((this.title || "").replace(".", "-"));
+  }
+
+  @computed("rowLabel", "item.label", "title", "rowName")
+  get label() {
+    const label =
+      this.rowLabel ||
+      this.getProperty(this.item, "label") ||
+      this.title ||
+      this.rowName;
+    if (
+      this.selectKit.options.allowAny &&
+      this.rowValue === this.selectKit.filter &&
+      this.getName(this.selectKit.noneItem) !== this.rowName &&
+      this.getName(this.selectKit.newItem) === this.rowName
+    ) {
+      return i18n("select_kit.create", { content: label });
+    }
+    return label;
+  }
+
+  didReceiveAttrs() {
+    super.didReceiveAttrs(...arguments);
+
+    this.setProperties({
+      rowName: this.getName(this.item),
+      rowValue: this.getValue(this.item),
+      rowLabel: this.getProperty(this.item, "labelProperty"),
+      rowTitle: this.getProperty(this.item, "titleProperty"),
+      rowLang: this.getProperty(this.item, "langProperty"),
+    });
+  }
+
+  @computed("item.{icon,icons}")
+  get icons() {
+    const icon = makeArray(this.getProperty(this.item, "icon"));
+    const icons = makeArray(this.getProperty(this.item, "icons"));
+    return icon.concat(icons).filter(Boolean);
+  }
+
+  @computed("selectKit.highlighted")
+  get highlightedValue() {
+    return this.getValue(this.selectKit.highlighted);
+  }
+
+  @computed("rowValue", "highlightedValue")
+  get isHighlighted() {
+    return this.rowValue === this.highlightedValue;
+  }
+
+  @computed("rowValue", "value")
+  get isSelected() {
+    return this.rowValue === this.value;
+  }
+
+  @action
+  handleMouseEnter() {
+    if (!this.isDestroying || !this.isDestroyed) {
+      this.selectKit.onHover(this.rowValue, this.item);
+    }
+    return false;
+  }
+
+  click(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.selectKit.select(this.rowValue, this.item);
+    return false;
+  }
+
+  mouseDown(event) {
+    if (this.selectKit.options.preventHeaderFocus) {
+      event.preventDefault();
+    }
+  }
+
+  focusIn(event) {
+    event.stopImmediatePropagation();
+  }
+
+  keyDown(event) {
+    if (this.selectKit.isExpanded) {
+      if (event.key === "Backspace") {
+        if (this.selectKit.isFilterExpanded) {
+          this.selectKit.set("filter", this.selectKit.filter.slice(0, -1));
+          this.selectKit.triggerSearch();
+          this.selectKit.focusFilter();
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        }
+      } else if (event.key === "ArrowUp") {
+        this.selectKit.highlightPrevious();
+        return false;
+      } else if (event.key === "ArrowDown") {
+        this.selectKit.highlightNext();
+        return false;
+      } else if (event.key === "Enter") {
+        event.stopImmediatePropagation();
+
+        this.selectKit.select(
+          this.getValue(this.selectKit.highlighted),
+          this.selectKit.highlighted
+        );
+        return false;
+      } else if (event.key === "Escape") {
+        this.selectKit.close(event);
+        this.selectKit.headerElement().focus();
+        event.preventDefault();
+        event.stopPropagation();
+      } else {
+        if (this.isValidInput(event.key)) {
+          this.selectKit.set("filter", event.key);
+          this.selectKit.triggerSearch();
+          this.selectKit.focusFilter();
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      }
+    }
+  }
+}
+
 {{#each this.icons as |icon|}}
   {{d-icon icon translatedTitle=this.dasherizedTitle}}
 {{/each}}
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js
deleted file mode 100644
index a000c831a00..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import Component from "@ember/component";
-import { action, computed } from "@ember/object";
-import { reads } from "@ember/object/computed";
-import { guidFor } from "@ember/object/internals";
-import { dasherize } from "@ember/string";
-import {
-  attributeBindings,
-  classNameBindings,
-  classNames,
-  tagName,
-} from "@ember-decorators/component";
-import { makeArray } from "discourse/lib/helpers";
-import { i18n } from "discourse-i18n";
-import UtilsMixin from "select-kit/mixins/utils";
-
-@classNames("select-kit-row")
-@tagName("li")
-@attributeBindings(
-  "tabIndex",
-  "title",
-  "rowValue:data-value",
-  "rowName:data-name",
-  "index:data-index",
-  "role",
-  "ariaChecked:aria-checked",
-  "guid:data-guid",
-  "rowLang:lang"
-)
-@classNameBindings(
-  "isHighlighted",
-  "isSelected",
-  "isNone",
-  "isNone:none",
-  "item.classNames"
-)
-export default class SelectKitRow extends Component.extend(UtilsMixin) {
-  tabIndex = 0;
-  index = 0;
-  role = "menuitemradio";
-
-  @reads("item.lang") lang;
-
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-
-    if (this.site.desktopView) {
-      this.element.addEventListener("mouseenter", this.handleMouseEnter);
-      this.element.addEventListener("focus", this.handleMouseEnter);
-    }
-  }
-
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
-
-    if (this.site.desktopView) {
-      this.element.removeEventListener("mouseenter", this.handleMouseEnter);
-      this.element.removeEventListener("focus", this.handleMouseEnter);
-    }
-  }
-
-  @computed("rowValue")
-  get isNone() {
-    return this.rowValue === this.getValue(this.selectKit.noneItem);
-  }
-
-  @computed("item")
-  get guid() {
-    return guidFor(this.item);
-  }
-
-  @computed("isSelected")
-  get ariaChecked() {
-    return this.isSelected ? "true" : "false";
-  }
-
-  @computed("rowTitle", "item.title", "rowName")
-  get title() {
-    return (
-      this.rowTitle || this.getProperty(this.item, "title") || this.rowName
-    );
-  }
-
-  @computed("title")
-  get dasherizedTitle() {
-    return dasherize((this.title || "").replace(".", "-"));
-  }
-
-  @computed("rowLabel", "item.label", "title", "rowName")
-  get label() {
-    const label =
-      this.rowLabel ||
-      this.getProperty(this.item, "label") ||
-      this.title ||
-      this.rowName;
-    if (
-      this.selectKit.options.allowAny &&
-      this.rowValue === this.selectKit.filter &&
-      this.getName(this.selectKit.noneItem) !== this.rowName &&
-      this.getName(this.selectKit.newItem) === this.rowName
-    ) {
-      return i18n("select_kit.create", { content: label });
-    }
-    return label;
-  }
-
-  didReceiveAttrs() {
-    super.didReceiveAttrs(...arguments);
-
-    this.setProperties({
-      rowName: this.getName(this.item),
-      rowValue: this.getValue(this.item),
-      rowLabel: this.getProperty(this.item, "labelProperty"),
-      rowTitle: this.getProperty(this.item, "titleProperty"),
-      rowLang: this.getProperty(this.item, "langProperty"),
-    });
-  }
-
-  @computed("item.{icon,icons}")
-  get icons() {
-    const icon = makeArray(this.getProperty(this.item, "icon"));
-    const icons = makeArray(this.getProperty(this.item, "icons"));
-    return icon.concat(icons).filter(Boolean);
-  }
-
-  @computed("selectKit.highlighted")
-  get highlightedValue() {
-    return this.getValue(this.selectKit.highlighted);
-  }
-
-  @computed("rowValue", "highlightedValue")
-  get isHighlighted() {
-    return this.rowValue === this.highlightedValue;
-  }
-
-  @computed("rowValue", "value")
-  get isSelected() {
-    return this.rowValue === this.value;
-  }
-
-  @action
-  handleMouseEnter() {
-    if (!this.isDestroying || !this.isDestroyed) {
-      this.selectKit.onHover(this.rowValue, this.item);
-    }
-    return false;
-  }
-
-  click(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.selectKit.select(this.rowValue, this.item);
-    return false;
-  }
-
-  mouseDown(event) {
-    if (this.selectKit.options.preventHeaderFocus) {
-      event.preventDefault();
-    }
-  }
-
-  focusIn(event) {
-    event.stopImmediatePropagation();
-  }
-
-  keyDown(event) {
-    if (this.selectKit.isExpanded) {
-      if (event.key === "Backspace") {
-        if (this.selectKit.isFilterExpanded) {
-          this.selectKit.set("filter", this.selectKit.filter.slice(0, -1));
-          this.selectKit.triggerSearch();
-          this.selectKit.focusFilter();
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-      } else if (event.key === "ArrowUp") {
-        this.selectKit.highlightPrevious();
-        return false;
-      } else if (event.key === "ArrowDown") {
-        this.selectKit.highlightNext();
-        return false;
-      } else if (event.key === "Enter") {
-        event.stopImmediatePropagation();
-
-        this.selectKit.select(
-          this.getValue(this.selectKit.highlighted),
-          this.selectKit.highlighted
-        );
-        return false;
-      } else if (event.key === "Escape") {
-        this.selectKit.close(event);
-        this.selectKit.headerElement().focus();
-        event.preventDefault();
-        event.stopPropagation();
-      } else {
-        if (this.isValidInput(event.key)) {
-          this.selectKit.set("filter", event.key);
-          this.selectKit.triggerSearch();
-          this.selectKit.focusFilter();
-          event.preventDefault();
-          event.stopPropagation();
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/selected-choice.gjs b/app/assets/javascripts/select-kit/addon/components/selected-choice.gjs
index c5534adb309..926eb8fa79f 100644
--- a/app/assets/javascripts/select-kit/addon/components/selected-choice.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/selected-choice.gjs
@@ -1,3 +1,46 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { guidFor } from "@ember/object/internals";
+import { tagName } from "@ember-decorators/component";
+import UtilsMixin from "select-kit/mixins/utils";
+
+@tagName("")
+export default class SelectedChoice extends Component.extend(UtilsMixin) {
+  item = null;
+  selectKit = null;
+  extraClass = null;
+  id = null;
+
+  init() {
+    super.init(...arguments);
+
+    this.set("id", guidFor(this));
+  }
+
+  @computed("item")
+  get itemValue() {
+    return this.getValue(this.item);
+  }
+
+  @computed("item")
+  get itemName() {
+    return this.getName(this.item);
+  }
+
+  @computed("item")
+  get mandatoryValuesArray() {
+    return this.get("mandatoryValues")?.split("|") || [];
+  }
+
+  @computed("item")
+  get readOnly() {
+    if (typeof this.item === "string") {
+      return this.mandatoryValuesArray.includes(this.item);
+    }
+    return this.mandatoryValuesArray.includes(this.item.id);
+  }
+}
+
 {{#if this.readOnly}}
   <button
     class="btn btn-default disabled"
diff --git a/app/assets/javascripts/select-kit/addon/components/selected-choice.js b/app/assets/javascripts/select-kit/addon/components/selected-choice.js
deleted file mode 100644
index 07095c5bb5b..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/selected-choice.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
-import { guidFor } from "@ember/object/internals";
-import { tagName } from "@ember-decorators/component";
-import UtilsMixin from "select-kit/mixins/utils";
-
-@tagName("")
-export default class SelectedChoice extends Component.extend(UtilsMixin) {
-  item = null;
-  selectKit = null;
-  extraClass = null;
-  id = null;
-
-  init() {
-    super.init(...arguments);
-
-    this.set("id", guidFor(this));
-  }
-
-  @computed("item")
-  get itemValue() {
-    return this.getValue(this.item);
-  }
-
-  @computed("item")
-  get itemName() {
-    return this.getName(this.item);
-  }
-
-  @computed("item")
-  get mandatoryValuesArray() {
-    return this.get("mandatoryValues")?.split("|") || [];
-  }
-
-  @computed("item")
-  get readOnly() {
-    if (typeof this.item === "string") {
-      return this.mandatoryValuesArray.includes(this.item);
-    }
-    return this.mandatoryValuesArray.includes(this.item.id);
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/selected-flair.gjs b/app/assets/javascripts/select-kit/addon/components/selected-flair.gjs
index 0b011e1ae67..02e55132370 100644
--- a/app/assets/javascripts/select-kit/addon/components/selected-flair.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/selected-flair.gjs
@@ -1,3 +1,9 @@
+import { tagName } from "@ember-decorators/component";
+import SelectedNameComponent from "select-kit/components/selected-name";
+
+@tagName("")
+export default class SelectedFlair extends SelectedNameComponent {}
+
 {{#if this.item.url}}
   <AvatarFlair
     @flairName={{this.item.name}}
diff --git a/app/assets/javascripts/select-kit/addon/components/selected-flair.js b/app/assets/javascripts/select-kit/addon/components/selected-flair.js
deleted file mode 100644
index c3f32266fb6..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/selected-flair.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { tagName } from "@ember-decorators/component";
-import SelectedNameComponent from "select-kit/components/selected-name";
-
-@tagName("")
-export default class SelectedFlair extends SelectedNameComponent {}
diff --git a/app/assets/javascripts/select-kit/addon/components/selected-name.gjs b/app/assets/javascripts/select-kit/addon/components/selected-name.gjs
index 54c09a41999..b2e86f463b5 100644
--- a/app/assets/javascripts/select-kit/addon/components/selected-name.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/selected-name.gjs
@@ -1,3 +1,96 @@
+import Component from "@ember/component";
+import { computed, get } from "@ember/object";
+import { reads } from "@ember/object/computed";
+import { guidFor } from "@ember/object/internals";
+import { tagName } from "@ember-decorators/component";
+import { makeArray } from "discourse/lib/helpers";
+import UtilsMixin from "select-kit/mixins/utils";
+
+@tagName("")
+export default class SelectedName extends Component.extend(UtilsMixin) {
+  name = null;
+  value = null;
+  headerTitle = null;
+  headerLang = null;
+  headerLabel = null;
+  id = null;
+
+  @reads("headerLang") lang;
+
+  init() {
+    super.init(...arguments);
+
+    this.set("id", guidFor(this));
+  }
+
+  didReceiveAttrs() {
+    super.didReceiveAttrs(...arguments);
+
+    // we can't listen on `item.nameProperty` given it's variable
+    this.setProperties({
+      headerLabel: this.getProperty(this.item, "labelProperty"),
+      headerTitle: this.getProperty(this.item, "titleProperty"),
+      headerLang: this.getProperty(this.item, "langProperty"),
+      name: this.getName(this.item),
+      renderIcon: this.canDisplayIcon,
+      value:
+        this.item === this.selectKit.noneItem ? null : this.getValue(this.item),
+    });
+  }
+
+  @computed("selectKit.options.shouldDisplayIcon")
+  get canDisplayIcon() {
+    return this.selectKit.options.shouldDisplayIcon ?? true;
+  }
+
+  @computed("item", "sanitizedTitle")
+  get ariaLabel() {
+    return this._safeProperty("ariaLabel", this.item) || this.sanitizedTitle;
+  }
+
+  // this might need a more advanced solution
+  // but atm it's the only case we have to handle
+  @computed("title")
+  get sanitizedTitle() {
+    return String(this.title).replace("&hellip;", "");
+  }
+
+  @computed("headerTitle", "item")
+  get title() {
+    return (
+      this.headerTitle ||
+      this._safeProperty("title", this.item) ||
+      this.name ||
+      ""
+    );
+  }
+
+  @computed("headerLabel", "title", "name")
+  get label() {
+    return (
+      this.headerLabel ||
+      this._safeProperty("label", this.item) ||
+      this.title ||
+      this.name
+    );
+  }
+
+  @computed("item.{icon,icons}")
+  get icons() {
+    const icon = makeArray(this._safeProperty("icon", this.item));
+    const icons = makeArray(this._safeProperty("icons", this.item));
+    return icon.concat(icons).filter(Boolean);
+  }
+
+  _safeProperty(name, content) {
+    if (!content) {
+      return null;
+    }
+
+    return get(content, name);
+  }
+}
+
 {{#if this.selectKit.options.showFullTitle}}
   <div
     lang={{this.lang}}
diff --git a/app/assets/javascripts/select-kit/addon/components/selected-name.js b/app/assets/javascripts/select-kit/addon/components/selected-name.js
deleted file mode 100644
index a48a73fa534..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/selected-name.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import Component from "@ember/component";
-import { computed, get } from "@ember/object";
-import { reads } from "@ember/object/computed";
-import { guidFor } from "@ember/object/internals";
-import { tagName } from "@ember-decorators/component";
-import { makeArray } from "discourse/lib/helpers";
-import UtilsMixin from "select-kit/mixins/utils";
-
-@tagName("")
-export default class SelectedName extends Component.extend(UtilsMixin) {
-  name = null;
-  value = null;
-  headerTitle = null;
-  headerLang = null;
-  headerLabel = null;
-  id = null;
-
-  @reads("headerLang") lang;
-
-  init() {
-    super.init(...arguments);
-
-    this.set("id", guidFor(this));
-  }
-
-  didReceiveAttrs() {
-    super.didReceiveAttrs(...arguments);
-
-    // we can't listen on `item.nameProperty` given it's variable
-    this.setProperties({
-      headerLabel: this.getProperty(this.item, "labelProperty"),
-      headerTitle: this.getProperty(this.item, "titleProperty"),
-      headerLang: this.getProperty(this.item, "langProperty"),
-      name: this.getName(this.item),
-      renderIcon: this.canDisplayIcon,
-      value:
-        this.item === this.selectKit.noneItem ? null : this.getValue(this.item),
-    });
-  }
-
-  @computed("selectKit.options.shouldDisplayIcon")
-  get canDisplayIcon() {
-    return this.selectKit.options.shouldDisplayIcon ?? true;
-  }
-
-  @computed("item", "sanitizedTitle")
-  get ariaLabel() {
-    return this._safeProperty("ariaLabel", this.item) || this.sanitizedTitle;
-  }
-
-  // this might need a more advanced solution
-  // but atm it's the only case we have to handle
-  @computed("title")
-  get sanitizedTitle() {
-    return String(this.title).replace("&hellip;", "");
-  }
-
-  @computed("headerTitle", "item")
-  get title() {
-    return (
-      this.headerTitle ||
-      this._safeProperty("title", this.item) ||
-      this.name ||
-      ""
-    );
-  }
-
-  @computed("headerLabel", "title", "name")
-  get label() {
-    return (
-      this.headerLabel ||
-      this._safeProperty("label", this.item) ||
-      this.title ||
-      this.name
-    );
-  }
-
-  @computed("item.{icon,icons}")
-  get icons() {
-    const icon = makeArray(this._safeProperty("icon", this.item));
-    const icons = makeArray(this._safeProperty("icons", this.item));
-    return icon.concat(icons).filter(Boolean);
-  }
-
-  _safeProperty(name, content) {
-    if (!content) {
-      return null;
-    }
-
-    return get(content, name);
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.gjs b/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.gjs
index 346c8e91a4d..6cb92358e2a 100644
--- a/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.gjs
@@ -1 +1,7 @@
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("tag-chooser-row")
+export default class TagChooserRow extends SelectKitRowComponent {}
+
 {{discourse-tag this.rowValue count=this.item.count noHref=true}}
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.js b/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.js
deleted file mode 100644
index 2efa8e2580f..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/tag-chooser-row.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("tag-chooser-row")
-export default class TagChooserRow extends SelectKitRowComponent {}
diff --git a/app/assets/javascripts/select-kit/addon/components/tag-row.gjs b/app/assets/javascripts/select-kit/addon/components/tag-row.gjs
index fb0f6212643..5b60601a66d 100644
--- a/app/assets/javascripts/select-kit/addon/components/tag-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/tag-row.gjs
@@ -1,3 +1,15 @@
+import { classNames } from "@ember-decorators/component";
+import discourseComputed from "discourse/lib/decorators";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("tag-row")
+export default class TagRow extends SelectKitRowComponent {
+  @discourseComputed("item")
+  isTag(item) {
+    return item.id !== "no-tags" && item.id !== "all-tags";
+  }
+}
+
 {{#if this.isTag}}
   {{discourse-tag
     this.rowValue
diff --git a/app/assets/javascripts/select-kit/addon/components/tag-row.js b/app/assets/javascripts/select-kit/addon/components/tag-row.js
deleted file mode 100644
index 4263ba384e3..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/tag-row.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import discourseComputed from "discourse/lib/decorators";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("tag-row")
-export default class TagRow extends SelectKitRowComponent {
-  @discourseComputed("item")
-  isTag(item) {
-    return item.id !== "no-tags" && item.id !== "all-tags";
-  }
-}
diff --git a/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.gjs b/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.gjs
index 06d611d56d9..a46f1ce9d99 100644
--- a/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.gjs
@@ -1 +1,5 @@
+import Component from "@ember/component";
+
+export default class ToolbarPopupMenuOptionsHeading extends Component {}
+
 {{this.heading}}
\ No newline at end of file
diff --git a/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.js b/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.js
deleted file mode 100644
index 0ba554f666a..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Component from "@ember/component";
-
-export default class ToolbarPopupMenuOptionsHeading extends Component {}
diff --git a/app/assets/javascripts/select-kit/addon/components/topic-row.gjs b/app/assets/javascripts/select-kit/addon/components/topic-row.gjs
index baab1c8dfd8..c16e4fad798 100644
--- a/app/assets/javascripts/select-kit/addon/components/topic-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/topic-row.gjs
@@ -1,3 +1,9 @@
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("topic-row")
+export default class TopicRow extends SelectKitRowComponent {}
+
 <TopicStatus @topic={{this.item}} @disableActions={{true}} />
 <div class="topic-title">{{replace-emoji this.item.title}}</div>
 <div class="topic-categories">
diff --git a/app/assets/javascripts/select-kit/addon/components/topic-row.js b/app/assets/javascripts/select-kit/addon/components/topic-row.js
deleted file mode 100644
index 51c02080910..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/topic-row.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("topic-row")
-export default class TopicRow extends SelectKitRowComponent {}
diff --git a/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.gjs b/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.gjs
index a97db703017..b81abd3eea8 100644
--- a/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.gjs
+++ b/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.gjs
@@ -1,3 +1,9 @@
+import { classNames } from "@ember-decorators/component";
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+@classNames("user-row")
+export default class UserRow extends SelectKitRowComponent {}
+
 {{avatar this.item imageSize="tiny"}}
 
 <span class="username">{{format-username this.item.username}}</span>
diff --git a/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.js b/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.js
deleted file mode 100644
index 0e7173ab86b..00000000000
--- a/app/assets/javascripts/select-kit/addon/components/user-chooser/user-row.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { classNames } from "@ember-decorators/component";
-import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-
-@classNames("user-row")
-export default class UserRow extends SelectKitRowComponent {}
diff --git a/plugins/automation/test/javascripts/integration/components/da-boolean-field-test.js b/plugins/automation/test/javascripts/integration/components/da-boolean-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-boolean-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-boolean-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-categories-field-test.js b/plugins/automation/test/javascripts/integration/components/da-categories-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-categories-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-categories-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-category-field-test.js b/plugins/automation/test/javascripts/integration/components/da-category-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-category-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-category-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-category-notification-level-field-test.js b/plugins/automation/test/javascripts/integration/components/da-category-notification-level-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-category-notification-level-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-category-notification-level-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-choices-field-test.js b/plugins/automation/test/javascripts/integration/components/da-choices-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-choices-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-choices-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-custom-field-test.js b/plugins/automation/test/javascripts/integration/components/da-custom-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-custom-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-custom-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-date-time-field-test.js b/plugins/automation/test/javascripts/integration/components/da-date-time-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-date-time-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-date-time-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-email-group-user-field-test.js b/plugins/automation/test/javascripts/integration/components/da-email-group-user-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-email-group-user-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-email-group-user-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-group-field-test.js b/plugins/automation/test/javascripts/integration/components/da-group-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-group-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-group-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-groups-field-test.js b/plugins/automation/test/javascripts/integration/components/da-groups-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-groups-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-groups-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-message-field-test.js b/plugins/automation/test/javascripts/integration/components/da-message-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-message-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-message-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-pms-field-test.js b/plugins/automation/test/javascripts/integration/components/da-pms-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-pms-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-pms-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-post-field-test.js b/plugins/automation/test/javascripts/integration/components/da-post-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-post-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-post-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-tags-field-test.js b/plugins/automation/test/javascripts/integration/components/da-tags-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-tags-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-tags-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-text-field-test.js b/plugins/automation/test/javascripts/integration/components/da-text-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-text-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-text-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-text-list-field-test.js b/plugins/automation/test/javascripts/integration/components/da-text-list-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-text-list-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-text-list-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-trust-levels-field-test.js b/plugins/automation/test/javascripts/integration/components/da-trust-levels-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-trust-levels-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-trust-levels-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-user-field-test.js b/plugins/automation/test/javascripts/integration/components/da-user-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-user-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-user-field-test.gjs
diff --git a/plugins/automation/test/javascripts/integration/components/da-users-field-test.js b/plugins/automation/test/javascripts/integration/components/da-users-field-test.gjs
similarity index 100%
rename from plugins/automation/test/javascripts/integration/components/da-users-field-test.js
rename to plugins/automation/test/javascripts/integration/components/da-users-field-test.gjs
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.gjs
index b4d02f4342c..273daa2e810 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.gjs
@@ -1,3 +1,35 @@
+import Component from "@glimmer/component";
+import { cached } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+export default class ChatStyleguideChatComposerMessageDetails extends Component {
+  @service site;
+  @service session;
+  @service keyValueStore;
+  @service currentUser;
+
+  @cached
+  get message() {
+    return new ChatFabricators(getOwner(this)).message({
+      user: this.currentUser,
+    });
+  }
+
+  @action
+  toggleMode() {
+    if (this.message.editing) {
+      this.message.editing = false;
+      this.message.inReplyTo = new ChatFabricators(getOwner(this)).message();
+    } else {
+      this.message.editing = true;
+      this.message.inReplyTo = null;
+    }
+  }
+}
+
 <StyleguideExample @title="<ChatComposerMessageDetails>">
   <Styleguide::Component>
     <ChatComposerMessageDetails @message={{this.message}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.js
deleted file mode 100644
index f491c061075..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Component from "@glimmer/component";
-import { cached } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { getOwner } from "@ember/owner";
-import { service } from "@ember/service";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-
-export default class ChatStyleguideChatComposerMessageDetails extends Component {
-  @service site;
-  @service session;
-  @service keyValueStore;
-  @service currentUser;
-
-  @cached
-  get message() {
-    return new ChatFabricators(getOwner(this)).message({
-      user: this.currentUser,
-    });
-  }
-
-  @action
-  toggleMode() {
-    if (this.message.editing) {
-      this.message.editing = false;
-      this.message.inReplyTo = new ChatFabricators(getOwner(this)).message();
-    } else {
-      this.message.editing = true;
-      this.message.inReplyTo = null;
-    }
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.gjs
index 24f529be21d..4ab221a6b2e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.gjs
@@ -1,3 +1,36 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import { CHANNEL_STATUSES } from "discourse/plugins/chat/discourse/models/chat-channel";
+
+export default class ChatStyleguideChatComposer extends Component {
+  @service chatChannelComposer;
+  @service chatChannelPane;
+
+  channel = new ChatFabricators(getOwner(this)).channel({ id: -999 });
+
+  @action
+  toggleDisabled() {
+    if (this.channel.status === CHANNEL_STATUSES.open) {
+      this.channel.status = CHANNEL_STATUSES.readOnly;
+    } else {
+      this.channel.status = CHANNEL_STATUSES.open;
+    }
+  }
+
+  @action
+  toggleSending() {
+    this.chatChannelPane.sending = !this.chatChannelPane.sending;
+  }
+
+  @action
+  onSendMessage() {
+    this.chatChannelComposer.reset();
+  }
+}
+
 <StyleguideExample @title="<ChatComposer>">
   <Styleguide::Component>
     <Chat::Composer::Channel
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.js
deleted file mode 100644
index 57b2e5d0b3a..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { getOwner } from "@ember/owner";
-import { service } from "@ember/service";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-import { CHANNEL_STATUSES } from "discourse/plugins/chat/discourse/models/chat-channel";
-
-export default class ChatStyleguideChatComposer extends Component {
-  @service chatChannelComposer;
-  @service chatChannelPane;
-
-  channel = new ChatFabricators(getOwner(this)).channel({ id: -999 });
-
-  @action
-  toggleDisabled() {
-    if (this.channel.status === CHANNEL_STATUSES.open) {
-      this.channel.status = CHANNEL_STATUSES.readOnly;
-    } else {
-      this.channel.status = CHANNEL_STATUSES.open;
-    }
-  }
-
-  @action
-  toggleSending() {
-    this.chatChannelPane.sending = !this.chatChannelPane.sending;
-  }
-
-  @action
-  onSendMessage() {
-    this.chatChannelComposer.reset();
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.gjs
index 373008cf8fb..9badd7068be 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.gjs
@@ -1,3 +1,55 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import {
+  HEADER_INDICATOR_PREFERENCE_ALL_NEW,
+  HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS,
+  HEADER_INDICATOR_PREFERENCE_NEVER,
+  HEADER_INDICATOR_PREFERENCE_ONLY_MENTIONS,
+} from "discourse/plugins/chat/discourse/controllers/preferences-chat";
+
+export default class ChatStyleguideChatHeaderIcon extends Component {
+  @tracked isActive = false;
+  @tracked currentUserInDnD = false;
+  @tracked urgentCount;
+  @tracked unreadCount;
+  @tracked indicatorPreference = HEADER_INDICATOR_PREFERENCE_ALL_NEW;
+
+  get indicatorPreferences() {
+    return [
+      HEADER_INDICATOR_PREFERENCE_ALL_NEW,
+      HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS,
+      HEADER_INDICATOR_PREFERENCE_ONLY_MENTIONS,
+      HEADER_INDICATOR_PREFERENCE_NEVER,
+    ];
+  }
+
+  @action
+  toggleIsActive() {
+    this.isActive = !this.isActive;
+  }
+
+  @action
+  toggleCurrentUserInDnD() {
+    this.currentUserInDnD = !this.currentUserInDnD;
+  }
+
+  @action
+  updateUnreadCount(event) {
+    this.unreadCount = event.target.value;
+  }
+
+  @action
+  updateUrgentCount(event) {
+    this.urgentCount = event.target.value;
+  }
+
+  @action
+  updateIndicatorPreference(value) {
+    this.indicatorPreference = value;
+  }
+}
+
 <StyleguideExample @title="<Chat::Header::Icon>">
   <Styleguide::Component>
     <header
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.js
deleted file mode 100644
index ef86cbf4bbc..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import {
-  HEADER_INDICATOR_PREFERENCE_ALL_NEW,
-  HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS,
-  HEADER_INDICATOR_PREFERENCE_NEVER,
-  HEADER_INDICATOR_PREFERENCE_ONLY_MENTIONS,
-} from "discourse/plugins/chat/discourse/controllers/preferences-chat";
-
-export default class ChatStyleguideChatHeaderIcon extends Component {
-  @tracked isActive = false;
-  @tracked currentUserInDnD = false;
-  @tracked urgentCount;
-  @tracked unreadCount;
-  @tracked indicatorPreference = HEADER_INDICATOR_PREFERENCE_ALL_NEW;
-
-  get indicatorPreferences() {
-    return [
-      HEADER_INDICATOR_PREFERENCE_ALL_NEW,
-      HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS,
-      HEADER_INDICATOR_PREFERENCE_ONLY_MENTIONS,
-      HEADER_INDICATOR_PREFERENCE_NEVER,
-    ];
-  }
-
-  @action
-  toggleIsActive() {
-    this.isActive = !this.isActive;
-  }
-
-  @action
-  toggleCurrentUserInDnD() {
-    this.currentUserInDnD = !this.currentUserInDnD;
-  }
-
-  @action
-  updateUnreadCount(event) {
-    this.unreadCount = event.target.value;
-  }
-
-  @action
-  updateUrgentCount(event) {
-    this.urgentCount = event.target.value;
-  }
-
-  @action
-  updateIndicatorPreference(value) {
-    this.indicatorPreference = value;
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.gjs
index f458d822513..09020a31f0f 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.gjs
@@ -1,3 +1,99 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import ChatMessagesManager from "discourse/plugins/chat/discourse/lib/chat-messages-manager";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+export default class ChatStyleguideChatMessage extends Component {
+  @service currentUser;
+
+  manager = new ChatMessagesManager(getOwner(this));
+
+  constructor() {
+    super(...arguments);
+    this.message = new ChatFabricators(getOwner(this)).message({
+      user: this.currentUser,
+    });
+    this.message.cook();
+  }
+
+  @action
+  toggleDeleted() {
+    if (this.message.deletedAt) {
+      this.message.deletedAt = null;
+    } else {
+      this.message.deletedAt = moment();
+    }
+  }
+
+  @action
+  toggleBookmarked() {
+    if (this.message.bookmark) {
+      this.message.bookmark = null;
+    } else {
+      this.message.bookmark = new ChatFabricators(getOwner(this)).bookmark();
+    }
+  }
+
+  @action
+  toggleHighlighted() {
+    this.message.highlighted = !this.message.highlighted;
+  }
+
+  @action
+  toggleEdited() {
+    this.message.edited = !this.message.edited;
+  }
+
+  @action
+  toggleThread() {
+    if (this.message.thread) {
+      this.message.channel.threadingEnabled = false;
+      this.message.thread = null;
+    } else {
+      this.message.thread = new ChatFabricators(getOwner(this)).thread({
+        channel: this.message.channel,
+      });
+      this.message.thread.preview.replyCount = 1;
+      this.message.channel.threadingEnabled = true;
+    }
+  }
+
+  @action
+  async updateMessage(event) {
+    this.message.message = event.target.value;
+    await this.message.cook();
+  }
+
+  @action
+  toggleReaction() {
+    if (this.message.reactions?.length) {
+      this.message.reactions = [];
+    } else {
+      this.message.reactions = [
+        new ChatFabricators(getOwner(this)).reaction({ emoji: "heart" }),
+        new ChatFabricators(getOwner(this)).reaction({
+          emoji: "rocket",
+          reacted: true,
+        }),
+      ];
+    }
+  }
+
+  @action
+  toggleUpload() {
+    if (this.message.uploads?.length) {
+      this.message.uploads = [];
+    } else {
+      this.message.uploads = [
+        new ChatFabricators(getOwner(this)).upload(),
+        new ChatFabricators(getOwner(this)).upload(),
+      ];
+    }
+  }
+}
+
 <StyleguideExample @title="<ChatMessage>">
   <Styleguide::Component>
     <ChatMessage @message={{this.message}} @context="channel" />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.js
deleted file mode 100644
index 0a31c2064cc..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { getOwner } from "@ember/owner";
-import { service } from "@ember/service";
-import ChatMessagesManager from "discourse/plugins/chat/discourse/lib/chat-messages-manager";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-
-export default class ChatStyleguideChatMessage extends Component {
-  @service currentUser;
-
-  manager = new ChatMessagesManager(getOwner(this));
-
-  constructor() {
-    super(...arguments);
-    this.message = new ChatFabricators(getOwner(this)).message({
-      user: this.currentUser,
-    });
-    this.message.cook();
-  }
-
-  @action
-  toggleDeleted() {
-    if (this.message.deletedAt) {
-      this.message.deletedAt = null;
-    } else {
-      this.message.deletedAt = moment();
-    }
-  }
-
-  @action
-  toggleBookmarked() {
-    if (this.message.bookmark) {
-      this.message.bookmark = null;
-    } else {
-      this.message.bookmark = new ChatFabricators(getOwner(this)).bookmark();
-    }
-  }
-
-  @action
-  toggleHighlighted() {
-    this.message.highlighted = !this.message.highlighted;
-  }
-
-  @action
-  toggleEdited() {
-    this.message.edited = !this.message.edited;
-  }
-
-  @action
-  toggleThread() {
-    if (this.message.thread) {
-      this.message.channel.threadingEnabled = false;
-      this.message.thread = null;
-    } else {
-      this.message.thread = new ChatFabricators(getOwner(this)).thread({
-        channel: this.message.channel,
-      });
-      this.message.thread.preview.replyCount = 1;
-      this.message.channel.threadingEnabled = true;
-    }
-  }
-
-  @action
-  async updateMessage(event) {
-    this.message.message = event.target.value;
-    await this.message.cook();
-  }
-
-  @action
-  toggleReaction() {
-    if (this.message.reactions?.length) {
-      this.message.reactions = [];
-    } else {
-      this.message.reactions = [
-        new ChatFabricators(getOwner(this)).reaction({ emoji: "heart" }),
-        new ChatFabricators(getOwner(this)).reaction({
-          emoji: "rocket",
-          reacted: true,
-        }),
-      ];
-    }
-  }
-
-  @action
-  toggleUpload() {
-    if (this.message.uploads?.length) {
-      this.message.uploads = [];
-    } else {
-      this.message.uploads = [
-        new ChatFabricators(getOwner(this)).upload(),
-        new ChatFabricators(getOwner(this)).upload(),
-      ];
-    }
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.gjs
index d2409d2f27c..900da5ba462 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.gjs
@@ -1,3 +1,25 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import ChatModalArchiveChannel from "discourse/plugins/chat/discourse/components/chat/modal/archive-channel";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+export default class ChatStyleguideChatModalArchiveChannel extends Component {
+  @service modal;
+
+  channel = new ChatFabricators(getOwner(this)).channel();
+
+  @action
+  openModal() {
+    return this.modal.show(ChatModalArchiveChannel, {
+      model: {
+        channel: this.channel,
+      },
+    });
+  }
+}
+
 <StyleguideExample @title="<Chat::Modal::ArchiveChannel>">
   <Styleguide::Controls::Row>
     <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.js
deleted file mode 100644
index c6f0870a8b4..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-archive-channel.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { getOwner } from "@ember/owner";
-import { service } from "@ember/service";
-import ChatModalArchiveChannel from "discourse/plugins/chat/discourse/components/chat/modal/archive-channel";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-
-export default class ChatStyleguideChatModalArchiveChannel extends Component {
-  @service modal;
-
-  channel = new ChatFabricators(getOwner(this)).channel();
-
-  @action
-  openModal() {
-    return this.modal.show(ChatModalArchiveChannel, {
-      model: {
-        channel: this.channel,
-      },
-    });
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.gjs
index e2747d289e6..d28fd75e5da 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.gjs
@@ -1,3 +1,17 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import ChatModalCreateChannel from "discourse/plugins/chat/discourse/components/chat/modal/create-channel";
+
+export default class ChatStyleguideChatModalCreateChannel extends Component {
+  @service modal;
+
+  @action
+  openModal() {
+    return this.modal.show(ChatModalCreateChannel);
+  }
+}
+
 <StyleguideExample @title="<Chat::Modal::CreateChannel>">
   <Styleguide::Controls::Row>
     <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.js
deleted file mode 100644
index 6918a25f812..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-create-channel.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import ChatModalCreateChannel from "discourse/plugins/chat/discourse/components/chat/modal/create-channel";
-
-export default class ChatStyleguideChatModalCreateChannel extends Component {
-  @service modal;
-
-  @action
-  openModal() {
-    return this.modal.show(ChatModalCreateChannel);
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.gjs
index f9787048ce6..da8be4d4dcf 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.gjs
@@ -1,3 +1,23 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import ChatModalDeleteChannel from "discourse/plugins/chat/discourse/components/chat/modal/delete-channel";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+export default class ChatStyleguideChatModalDeleteChannel extends Component {
+  @service modal;
+
+  channel = new ChatFabricators(getOwner(this)).channel();
+
+  @action
+  openModal() {
+    return this.modal.show(ChatModalDeleteChannel, {
+      model: { channel: this.channel },
+    });
+  }
+}
+
 <StyleguideExample @title="<Chat::Modal::DeleteChannel>">
   <Styleguide::Controls::Row>
     <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.js
deleted file mode 100644
index 55b8a204fb7..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-delete-channel.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { getOwner } from "@ember/owner";
-import { service } from "@ember/service";
-import ChatModalDeleteChannel from "discourse/plugins/chat/discourse/components/chat/modal/delete-channel";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-
-export default class ChatStyleguideChatModalDeleteChannel extends Component {
-  @service modal;
-
-  channel = new ChatFabricators(getOwner(this)).channel();
-
-  @action
-  openModal() {
-    return this.modal.show(ChatModalDeleteChannel, {
-      model: { channel: this.channel },
-    });
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.gjs
index b7d5dcc2804..ae830526412 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.gjs
@@ -1,3 +1,23 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import ChatModalEditChannelDescription from "discourse/plugins/chat/discourse/components/chat/modal/edit-channel-description";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+export default class ChatStyleguideChatModalEditChannelDescription extends Component {
+  @service modal;
+
+  channel = new ChatFabricators(getOwner(this)).channel();
+
+  @action
+  openModal() {
+    return this.modal.show(ChatModalEditChannelDescription, {
+      model: this.channel,
+    });
+  }
+}
+
 <StyleguideExample @title="<Chat::Modal::EditChannelDescription>">
   <Styleguide::Controls::Row>
     <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.js
deleted file mode 100644
index b50da7e8eaf..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-description.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { getOwner } from "@ember/owner";
-import { service } from "@ember/service";
-import ChatModalEditChannelDescription from "discourse/plugins/chat/discourse/components/chat/modal/edit-channel-description";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-
-export default class ChatStyleguideChatModalEditChannelDescription extends Component {
-  @service modal;
-
-  channel = new ChatFabricators(getOwner(this)).channel();
-
-  @action
-  openModal() {
-    return this.modal.show(ChatModalEditChannelDescription, {
-      model: this.channel,
-    });
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.gjs
index 5a40bff03cd..f9565680779 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.gjs
@@ -1,3 +1,23 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import ChatModalEditChannelName from "discourse/plugins/chat/discourse/components/chat/modal/edit-channel-name";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+export default class ChatStyleguideChatModalEditChannelName extends Component {
+  @service modal;
+
+  channel = new ChatFabricators(getOwner(this)).channel();
+
+  @action
+  openModal() {
+    return this.modal.show(ChatModalEditChannelName, {
+      model: this.channel,
+    });
+  }
+}
+
 <StyleguideExample @title="<Chat::Modal::EditChannelName>">
   <Styleguide::Controls::Row>
     <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.js
deleted file mode 100644
index 59aa68951ef..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-edit-channel-name.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { getOwner } from "@ember/owner";
-import { service } from "@ember/service";
-import ChatModalEditChannelName from "discourse/plugins/chat/discourse/components/chat/modal/edit-channel-name";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-
-export default class ChatStyleguideChatModalEditChannelName extends Component {
-  @service modal;
-
-  channel = new ChatFabricators(getOwner(this)).channel();
-
-  @action
-  openModal() {
-    return this.modal.show(ChatModalEditChannelName, {
-      model: this.channel,
-    });
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.gjs
index e508bd7810a..a1f7a826cfa 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.gjs
@@ -1,3 +1,33 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import ChatModalMoveMessageToChannel from "discourse/plugins/chat/discourse/components/chat/modal/move-message-to-channel";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+export default class ChatStyleguideChatModalMoveMessageToChannel extends Component {
+  @service modal;
+
+  channel = new ChatFabricators(getOwner(this)).channel();
+  selectedMessageIds = [
+    new ChatFabricators(getOwner(this)).message({ channel: this.channel }),
+  ].mapBy("id");
+
+  @action
+  openModal() {
+    return this.modal.show(ChatModalMoveMessageToChannel, {
+      model: {
+        sourceChannel: this.channel,
+        selectedMessageIds: [
+          new ChatFabricators(getOwner(this)).message({
+            channel: this.channel,
+          }),
+        ].mapBy("id"),
+      },
+    });
+  }
+}
+
 <StyleguideExample @title="<Chat::Modal::MoveMessageToChannel>">
   <Styleguide::Controls::Row>
     <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.js
deleted file mode 100644
index 69989599824..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-move-message-to-channel.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { getOwner } from "@ember/owner";
-import { service } from "@ember/service";
-import ChatModalMoveMessageToChannel from "discourse/plugins/chat/discourse/components/chat/modal/move-message-to-channel";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-
-export default class ChatStyleguideChatModalMoveMessageToChannel extends Component {
-  @service modal;
-
-  channel = new ChatFabricators(getOwner(this)).channel();
-  selectedMessageIds = [
-    new ChatFabricators(getOwner(this)).message({ channel: this.channel }),
-  ].mapBy("id");
-
-  @action
-  openModal() {
-    return this.modal.show(ChatModalMoveMessageToChannel, {
-      model: {
-        sourceChannel: this.channel,
-        selectedMessageIds: [
-          new ChatFabricators(getOwner(this)).message({
-            channel: this.channel,
-          }),
-        ].mapBy("id"),
-      },
-    });
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.gjs
index e39c631ef7c..9ff83a969bb 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.gjs
@@ -1,3 +1,17 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import ChatModalNewMessage from "discourse/plugins/chat/discourse/components/chat/modal/new-message";
+
+export default class ChatStyleguideChatModalNewMessage extends Component {
+  @service modal;
+
+  @action
+  openModal() {
+    return this.modal.show(ChatModalNewMessage);
+  }
+}
+
 <StyleguideExample @title="<Chat::Modal::NewMessage>">
   <Styleguide::Controls::Row>
     <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.js
deleted file mode 100644
index 0f8fc4ced6f..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-new-message.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import ChatModalNewMessage from "discourse/plugins/chat/discourse/components/chat/modal/new-message";
-
-export default class ChatStyleguideChatModalNewMessage extends Component {
-  @service modal;
-
-  @action
-  openModal() {
-    return this.modal.show(ChatModalNewMessage);
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.gjs
index 496b4784b58..268491ec82d 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.gjs
@@ -1,3 +1,21 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import ChatModalThreadSettings from "discourse/plugins/chat/discourse/components/chat/modal/thread-settings";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+export default class ChatStyleguideChatModalThreadSettings extends Component {
+  @service modal;
+
+  @action
+  openModal() {
+    return this.modal.show(ChatModalThreadSettings, {
+      model: new ChatFabricators(getOwner(this)).thread(),
+    });
+  }
+}
+
 <StyleguideExample @title="<Chat::Modal::ThreadSettings>">
   <Styleguide::Controls::Row>
     <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.js
deleted file mode 100644
index e21b915f190..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-thread-settings.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { getOwner } from "@ember/owner";
-import { service } from "@ember/service";
-import ChatModalThreadSettings from "discourse/plugins/chat/discourse/components/chat/modal/thread-settings";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-
-export default class ChatStyleguideChatModalThreadSettings extends Component {
-  @service modal;
-
-  @action
-  openModal() {
-    return this.modal.show(ChatModalThreadSettings, {
-      model: new ChatFabricators(getOwner(this)).thread(),
-    });
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.gjs
index c11dd520807..8f2125c2ba5 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.gjs
@@ -1,3 +1,21 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import ChatModalToggleChannelStatus from "discourse/plugins/chat/discourse/components/chat/modal/toggle-channel-status";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+export default class ChatStyleguideChatModalToggleChannelStatus extends Component {
+  @service modal;
+
+  @action
+  openModal() {
+    return this.modal.show(ChatModalToggleChannelStatus, {
+      model: new ChatFabricators(getOwner(this)).channel(),
+    });
+  }
+}
+
 <StyleguideExample @title="<Chat::Modal::ToggleChannelStatus>">
   <Styleguide::Controls::Row>
     <DButton @translatedLabel="Open modal" @action={{this.openModal}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.js
deleted file mode 100644
index c0687cacba6..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-modal-toggle-channel-status.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { getOwner } from "@ember/owner";
-import { service } from "@ember/service";
-import ChatModalToggleChannelStatus from "discourse/plugins/chat/discourse/components/chat/modal/toggle-channel-status";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-
-export default class ChatStyleguideChatModalToggleChannelStatus extends Component {
-  @service modal;
-
-  @action
-  openModal() {
-    return this.modal.show(ChatModalToggleChannelStatus, {
-      model: new ChatFabricators(getOwner(this)).channel(),
-    });
-  }
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.gjs b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.gjs
index 17f844e5cdd..a67126b0bca 100644
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.gjs
@@ -1,3 +1,24 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { getOwner } from "@ember/owner";
+import { next } from "@ember/runloop";
+import { service } from "@ember/service";
+import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+
+export default class ChatStyleguideChatThreadListItem extends Component {
+  @service currentUser;
+
+  @tracked thread;
+
+  constructor() {
+    super(...arguments);
+
+    next(() => {
+      this.thread = new ChatFabricators(getOwner(this)).thread();
+    });
+  }
+}
+
 <StyleguideExample @title="<Chat::ThreadList::Item>">
   <Styleguide::Component>
     {{#if this.thread}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.js b/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.js
deleted file mode 100644
index 6ff798ff40a..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-list-item.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { getOwner } from "@ember/owner";
-import { next } from "@ember/runloop";
-import { service } from "@ember/service";
-import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
-
-export default class ChatStyleguideChatThreadListItem extends Component {
-  @service currentUser;
-
-  @tracked thread;
-
-  constructor() {
-    super(...arguments);
-
-    next(() => {
-      this.thread = new ChatFabricators(getOwner(this)).thread();
-    });
-  }
-}
diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.gjs b/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.gjs
index edaed7c018f..6f2624d9ebe 100644
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.gjs
+++ b/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.gjs
@@ -1,3 +1,378 @@
+import Component from "@ember/component";
+import EmberObject, { action } from "@ember/object";
+import { notEmpty } from "@ember/object/computed";
+import { schedule } from "@ember/runloop";
+import { observes } from "@ember-decorators/object";
+import { propertyNotEqual } from "discourse/lib/computed";
+import computed, { debounce } from "discourse/lib/decorators";
+import { INPUT_DELAY } from "discourse/lib/environment";
+import { applyLocalDates } from "discourse/lib/local-dates";
+import { cook } from "discourse/lib/text";
+import { i18n } from "discourse-i18n";
+import generateDateMarkup from "discourse/plugins/discourse-local-dates/lib/local-date-markup-generator";
+
+export default class LocalDatesCreate extends Component {
+  timeFormat = "HH:mm:ss";
+  dateFormat = "YYYY-MM-DD";
+  dateTimeFormat = "YYYY-MM-DD HH:mm:ss";
+  date = null;
+  toDate = null;
+  time = null;
+  toTime = null;
+  format = null;
+  formats = null;
+  recurring = null;
+  advancedMode = false;
+  timezone = null;
+  fromSelected = null;
+  toSelected = null;
+
+  @notEmpty("date") fromFilled;
+  @notEmpty("toDate") toFilled;
+  @propertyNotEqual("currentUserTimezone", "options.timezone")
+  timezoneIsDifferentFromUserTimezone;
+
+  init() {
+    super.init(...arguments);
+
+    this._picker = null;
+
+    this.setProperties({
+      timezones: [],
+      formats: (this.siteSettings.discourse_local_dates_default_formats || "")
+        .split("|")
+        .filter((f) => f),
+      timezone: this.currentUserTimezone,
+      date: moment().format(this.dateFormat),
+    });
+  }
+
+  didInsertElement() {
+    super.didInsertElement(...arguments);
+    this.send("focusFrom");
+  }
+
+  @observes("computedConfig.{from,to,options}", "options", "isValid", "isRange")
+  configChanged() {
+    this._renderPreview();
+  }
+
+  @debounce(INPUT_DELAY)
+  async _renderPreview() {
+    if (this.markup) {
+      const result = await cook(this.markup);
+      this.set("currentPreview", result);
+
+      schedule("afterRender", () => {
+        applyLocalDates(
+          document.querySelectorAll(".preview .discourse-local-date"),
+          this.siteSettings
+        );
+      });
+    }
+  }
+
+  @computed("date", "toDate", "toTime")
+  isRange(date, toDate, toTime) {
+    return date && (toDate || toTime);
+  }
+
+  @computed("computedConfig", "isRange")
+  isValid(config, isRange) {
+    const fromConfig = config.from;
+    if (!config.from.dateTime || !config.from.dateTime.isValid()) {
+      return false;
+    }
+
+    if (isRange) {
+      const toConfig = config.to;
+
+      if (
+        !toConfig.dateTime ||
+        !toConfig.dateTime.isValid() ||
+        toConfig.dateTime.diff(fromConfig.dateTime) < 0
+      ) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  @computed("date", "time", "isRange", "options.{format,timezone}")
+  fromConfig(date, time, isRange, options = {}) {
+    const timeInferred = time ? false : true;
+
+    let dateTime;
+    if (!timeInferred) {
+      dateTime = moment.tz(`${date} ${time}`, options.timezone);
+    } else {
+      dateTime = moment.tz(date, options.timezone);
+    }
+
+    if (!timeInferred) {
+      time = dateTime.format(this.timeFormat);
+    }
+
+    let format = options.format;
+    if (timeInferred && this.formats.includes(format)) {
+      format = "LL";
+    }
+
+    return EmberObject.create({
+      date: dateTime.format(this.dateFormat),
+      time,
+      dateTime,
+      format,
+      range: isRange ? "start" : false,
+    });
+  }
+
+  @computed("toDate", "toTime", "isRange", "options.{timezone,format}")
+  toConfig(date, time, isRange, options = {}) {
+    const timeInferred = time ? false : true;
+
+    if (time && !date) {
+      date = moment().format(this.dateFormat);
+    }
+
+    let dateTime;
+    if (!timeInferred) {
+      dateTime = moment.tz(`${date} ${time}`, options.timezone);
+    } else {
+      dateTime = moment.tz(date, options.timezone).endOf("day");
+    }
+
+    if (!timeInferred) {
+      time = dateTime.format(this.timeFormat);
+    }
+
+    let format = options.format;
+    if (timeInferred && this.formats.includes(format)) {
+      format = "LL";
+    }
+
+    return EmberObject.create({
+      date: dateTime.format(this.dateFormat),
+      time,
+      dateTime,
+      format,
+      range: isRange ? "end" : false,
+    });
+  }
+
+  @computed("recurring", "timezones", "timezone", "format")
+  options(recurring, timezones, timezone, format) {
+    return EmberObject.create({
+      recurring,
+      timezones,
+      timezone,
+      format,
+    });
+  }
+
+  @computed(
+    "fromConfig.{date}",
+    "toConfig.{date}",
+    "options.{recurring,timezones,timezone,format}"
+  )
+  computedConfig(fromConfig, toConfig, options) {
+    return EmberObject.create({
+      from: fromConfig,
+      to: toConfig,
+      options,
+    });
+  }
+
+  @computed
+  currentUserTimezone() {
+    return this.currentUser.user_option.timezone || moment.tz.guess();
+  }
+
+  @computed
+  allTimezones() {
+    return moment.tz.names();
+  }
+
+  @computed("currentUserTimezone")
+  formattedCurrentUserTimezone(timezone) {
+    return timezone.replace("_", " ").replace("Etc/", "").replace("/", ", ");
+  }
+
+  @computed("formats")
+  previewedFormats(formats) {
+    return formats.map((format) => {
+      return {
+        format,
+        preview: moment().format(format),
+      };
+    });
+  }
+
+  @computed
+  recurringOptions() {
+    const key = "discourse_local_dates.create.form.recurring";
+
+    return [
+      {
+        name: i18n(`${key}.every_day`),
+        id: "1.days",
+      },
+      {
+        name: i18n(`${key}.every_week`),
+        id: "1.weeks",
+      },
+      {
+        name: i18n(`${key}.every_two_weeks`),
+        id: "2.weeks",
+      },
+      {
+        name: i18n(`${key}.every_month`),
+        id: "1.months",
+      },
+      {
+        name: i18n(`${key}.every_two_months`),
+        id: "2.months",
+      },
+      {
+        name: i18n(`${key}.every_three_months`),
+        id: "3.months",
+      },
+      {
+        name: i18n(`${key}.every_six_months`),
+        id: "6.months",
+      },
+      {
+        name: i18n(`${key}.every_year`),
+        id: "1.years",
+      },
+    ];
+  }
+
+  _generateDateMarkup(fromDateTime, options, isRange, toDateTime) {
+    return generateDateMarkup(fromDateTime, options, isRange, toDateTime);
+  }
+
+  @computed("advancedMode")
+  toggleModeBtnLabel(advancedMode) {
+    return advancedMode
+      ? "discourse_local_dates.create.form.simple_mode"
+      : "discourse_local_dates.create.form.advanced_mode";
+  }
+
+  @computed("computedConfig.{from,to,options}", "options", "isValid", "isRange")
+  markup(config, options, isValid, isRange) {
+    let text;
+
+    if (isValid && config.from) {
+      if (config.to && config.to.range) {
+        text = this._generateDateMarkup(
+          config.from,
+          options,
+          isRange,
+          config.to
+        );
+      } else {
+        text = this._generateDateMarkup(config.from, options, isRange);
+      }
+    }
+    return text;
+  }
+
+  @computed("fromConfig.dateTime")
+  formattedFrom(dateTime) {
+    return dateTime.format("LLLL");
+  }
+
+  @computed("toConfig.dateTime")
+  formattedTo(dateTime) {
+    return dateTime.isValid()
+      ? dateTime.format("LLLL")
+      : i18n("discourse_local_dates.create.form.until");
+  }
+
+  @action
+  updateFormat(format, event) {
+    event?.preventDefault();
+    this.set("format", format);
+  }
+
+  @computed("fromSelected", "toSelected")
+  selectedDate(fromSelected) {
+    return fromSelected ? this.date : this.toDate;
+  }
+
+  @computed("fromSelected", "toSelected")
+  selectedTime(fromSelected) {
+    return fromSelected ? this.time : this.toTime;
+  }
+
+  @action
+  changeSelectedDate(date) {
+    if (this.fromSelected) {
+      this.set("date", date);
+    } else {
+      this.set("toDate", date);
+    }
+  }
+
+  @action
+  changeSelectedTime(time) {
+    if (this.fromSelected) {
+      this.set("time", time);
+    } else {
+      this.set("toTime", time);
+    }
+  }
+
+  @action
+  eraseToDateTime() {
+    this.setProperties({
+      toDate: null,
+      toTime: null,
+    });
+    this.focusFrom();
+  }
+
+  @action
+  focusFrom() {
+    this.setProperties({
+      fromSelected: true,
+      toSelected: false,
+      minDate: null,
+    });
+  }
+
+  @action
+  focusTo() {
+    this.setProperties({
+      toSelected: true,
+      fromSelected: false,
+      minDate: this.get("fromConfig.date"),
+    });
+  }
+
+  @action
+  toggleAdvancedMode() {
+    this.toggleProperty("advancedMode");
+  }
+
+  @action
+  save() {
+    const markup = this.markup;
+
+    if (markup) {
+      this.closeModal();
+      this.model.insertDate(markup);
+    }
+  }
+
+  @action
+  cancel() {
+    this.closeModal();
+  }
+}
+
 <DModal
   @title={{i18n "discourse_local_dates.title"}}
   @closeModal={{@closeModal}}
diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.js b/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.js
deleted file mode 100644
index 4d6a9ac5eb4..00000000000
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/components/modal/local-dates-create.js
+++ /dev/null
@@ -1,374 +0,0 @@
-import Component from "@ember/component";
-import EmberObject, { action } from "@ember/object";
-import { notEmpty } from "@ember/object/computed";
-import { schedule } from "@ember/runloop";
-import { observes } from "@ember-decorators/object";
-import { propertyNotEqual } from "discourse/lib/computed";
-import computed, { debounce } from "discourse/lib/decorators";
-import { INPUT_DELAY } from "discourse/lib/environment";
-import { applyLocalDates } from "discourse/lib/local-dates";
-import { cook } from "discourse/lib/text";
-import { i18n } from "discourse-i18n";
-import generateDateMarkup from "discourse/plugins/discourse-local-dates/lib/local-date-markup-generator";
-
-export default class LocalDatesCreate extends Component {
-  timeFormat = "HH:mm:ss";
-  dateFormat = "YYYY-MM-DD";
-  dateTimeFormat = "YYYY-MM-DD HH:mm:ss";
-  date = null;
-  toDate = null;
-  time = null;
-  toTime = null;
-  format = null;
-  formats = null;
-  recurring = null;
-  advancedMode = false;
-  timezone = null;
-  fromSelected = null;
-  toSelected = null;
-
-  @notEmpty("date") fromFilled;
-  @notEmpty("toDate") toFilled;
-  @propertyNotEqual("currentUserTimezone", "options.timezone")
-  timezoneIsDifferentFromUserTimezone;
-
-  init() {
-    super.init(...arguments);
-
-    this._picker = null;
-
-    this.setProperties({
-      timezones: [],
-      formats: (this.siteSettings.discourse_local_dates_default_formats || "")
-        .split("|")
-        .filter((f) => f),
-      timezone: this.currentUserTimezone,
-      date: moment().format(this.dateFormat),
-    });
-  }
-
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-    this.send("focusFrom");
-  }
-
-  @observes("computedConfig.{from,to,options}", "options", "isValid", "isRange")
-  configChanged() {
-    this._renderPreview();
-  }
-
-  @debounce(INPUT_DELAY)
-  async _renderPreview() {
-    if (this.markup) {
-      const result = await cook(this.markup);
-      this.set("currentPreview", result);
-
-      schedule("afterRender", () => {
-        applyLocalDates(
-          document.querySelectorAll(".preview .discourse-local-date"),
-          this.siteSettings
-        );
-      });
-    }
-  }
-
-  @computed("date", "toDate", "toTime")
-  isRange(date, toDate, toTime) {
-    return date && (toDate || toTime);
-  }
-
-  @computed("computedConfig", "isRange")
-  isValid(config, isRange) {
-    const fromConfig = config.from;
-    if (!config.from.dateTime || !config.from.dateTime.isValid()) {
-      return false;
-    }
-
-    if (isRange) {
-      const toConfig = config.to;
-
-      if (
-        !toConfig.dateTime ||
-        !toConfig.dateTime.isValid() ||
-        toConfig.dateTime.diff(fromConfig.dateTime) < 0
-      ) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  @computed("date", "time", "isRange", "options.{format,timezone}")
-  fromConfig(date, time, isRange, options = {}) {
-    const timeInferred = time ? false : true;
-
-    let dateTime;
-    if (!timeInferred) {
-      dateTime = moment.tz(`${date} ${time}`, options.timezone);
-    } else {
-      dateTime = moment.tz(date, options.timezone);
-    }
-
-    if (!timeInferred) {
-      time = dateTime.format(this.timeFormat);
-    }
-
-    let format = options.format;
-    if (timeInferred && this.formats.includes(format)) {
-      format = "LL";
-    }
-
-    return EmberObject.create({
-      date: dateTime.format(this.dateFormat),
-      time,
-      dateTime,
-      format,
-      range: isRange ? "start" : false,
-    });
-  }
-
-  @computed("toDate", "toTime", "isRange", "options.{timezone,format}")
-  toConfig(date, time, isRange, options = {}) {
-    const timeInferred = time ? false : true;
-
-    if (time && !date) {
-      date = moment().format(this.dateFormat);
-    }
-
-    let dateTime;
-    if (!timeInferred) {
-      dateTime = moment.tz(`${date} ${time}`, options.timezone);
-    } else {
-      dateTime = moment.tz(date, options.timezone).endOf("day");
-    }
-
-    if (!timeInferred) {
-      time = dateTime.format(this.timeFormat);
-    }
-
-    let format = options.format;
-    if (timeInferred && this.formats.includes(format)) {
-      format = "LL";
-    }
-
-    return EmberObject.create({
-      date: dateTime.format(this.dateFormat),
-      time,
-      dateTime,
-      format,
-      range: isRange ? "end" : false,
-    });
-  }
-
-  @computed("recurring", "timezones", "timezone", "format")
-  options(recurring, timezones, timezone, format) {
-    return EmberObject.create({
-      recurring,
-      timezones,
-      timezone,
-      format,
-    });
-  }
-
-  @computed(
-    "fromConfig.{date}",
-    "toConfig.{date}",
-    "options.{recurring,timezones,timezone,format}"
-  )
-  computedConfig(fromConfig, toConfig, options) {
-    return EmberObject.create({
-      from: fromConfig,
-      to: toConfig,
-      options,
-    });
-  }
-
-  @computed
-  currentUserTimezone() {
-    return this.currentUser.user_option.timezone || moment.tz.guess();
-  }
-
-  @computed
-  allTimezones() {
-    return moment.tz.names();
-  }
-
-  @computed("currentUserTimezone")
-  formattedCurrentUserTimezone(timezone) {
-    return timezone.replace("_", " ").replace("Etc/", "").replace("/", ", ");
-  }
-
-  @computed("formats")
-  previewedFormats(formats) {
-    return formats.map((format) => {
-      return {
-        format,
-        preview: moment().format(format),
-      };
-    });
-  }
-
-  @computed
-  recurringOptions() {
-    const key = "discourse_local_dates.create.form.recurring";
-
-    return [
-      {
-        name: i18n(`${key}.every_day`),
-        id: "1.days",
-      },
-      {
-        name: i18n(`${key}.every_week`),
-        id: "1.weeks",
-      },
-      {
-        name: i18n(`${key}.every_two_weeks`),
-        id: "2.weeks",
-      },
-      {
-        name: i18n(`${key}.every_month`),
-        id: "1.months",
-      },
-      {
-        name: i18n(`${key}.every_two_months`),
-        id: "2.months",
-      },
-      {
-        name: i18n(`${key}.every_three_months`),
-        id: "3.months",
-      },
-      {
-        name: i18n(`${key}.every_six_months`),
-        id: "6.months",
-      },
-      {
-        name: i18n(`${key}.every_year`),
-        id: "1.years",
-      },
-    ];
-  }
-
-  _generateDateMarkup(fromDateTime, options, isRange, toDateTime) {
-    return generateDateMarkup(fromDateTime, options, isRange, toDateTime);
-  }
-
-  @computed("advancedMode")
-  toggleModeBtnLabel(advancedMode) {
-    return advancedMode
-      ? "discourse_local_dates.create.form.simple_mode"
-      : "discourse_local_dates.create.form.advanced_mode";
-  }
-
-  @computed("computedConfig.{from,to,options}", "options", "isValid", "isRange")
-  markup(config, options, isValid, isRange) {
-    let text;
-
-    if (isValid && config.from) {
-      if (config.to && config.to.range) {
-        text = this._generateDateMarkup(
-          config.from,
-          options,
-          isRange,
-          config.to
-        );
-      } else {
-        text = this._generateDateMarkup(config.from, options, isRange);
-      }
-    }
-    return text;
-  }
-
-  @computed("fromConfig.dateTime")
-  formattedFrom(dateTime) {
-    return dateTime.format("LLLL");
-  }
-
-  @computed("toConfig.dateTime")
-  formattedTo(dateTime) {
-    return dateTime.isValid()
-      ? dateTime.format("LLLL")
-      : i18n("discourse_local_dates.create.form.until");
-  }
-
-  @action
-  updateFormat(format, event) {
-    event?.preventDefault();
-    this.set("format", format);
-  }
-
-  @computed("fromSelected", "toSelected")
-  selectedDate(fromSelected) {
-    return fromSelected ? this.date : this.toDate;
-  }
-
-  @computed("fromSelected", "toSelected")
-  selectedTime(fromSelected) {
-    return fromSelected ? this.time : this.toTime;
-  }
-
-  @action
-  changeSelectedDate(date) {
-    if (this.fromSelected) {
-      this.set("date", date);
-    } else {
-      this.set("toDate", date);
-    }
-  }
-
-  @action
-  changeSelectedTime(time) {
-    if (this.fromSelected) {
-      this.set("time", time);
-    } else {
-      this.set("toTime", time);
-    }
-  }
-
-  @action
-  eraseToDateTime() {
-    this.setProperties({
-      toDate: null,
-      toTime: null,
-    });
-    this.focusFrom();
-  }
-
-  @action
-  focusFrom() {
-    this.setProperties({
-      fromSelected: true,
-      toSelected: false,
-      minDate: null,
-    });
-  }
-
-  @action
-  focusTo() {
-    this.setProperties({
-      toSelected: true,
-      fromSelected: false,
-      minDate: this.get("fromConfig.date"),
-    });
-  }
-
-  @action
-  toggleAdvancedMode() {
-    this.toggleProperty("advancedMode");
-  }
-
-  @action
-  save() {
-    const markup = this.markup;
-
-    if (markup) {
-      this.closeModal();
-      this.model.insertDate(markup);
-    }
-  }
-
-  @action
-  cancel() {
-    this.closeModal();
-  }
-}
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.gjs b/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.gjs
index 42effef7aef..995e7454bb0 100644
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.gjs
+++ b/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.gjs
@@ -1,3 +1,95 @@
+import Component from "@ember/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { classify } from "@ember/string";
+import { htmlSafe } from "@ember/template";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+import discourseComputed from "discourse/lib/decorators";
+import loadScript from "discourse/lib/load-script";
+import { i18n } from "discourse-i18n";
+
+export default class PollBreakdownModal extends Component {
+  @service dialog;
+  @service siteSettings;
+
+  model = null;
+  charts = null;
+  groupedBy = null;
+  highlightedOption = null;
+  displayMode = "percentage";
+
+  init() {
+    this.set("groupedBy", this.groupableUserFields[0]?.id);
+    loadScript("/javascripts/Chart.min.js")
+      .then(() => loadScript("/javascripts/chartjs-plugin-datalabels.min.js"))
+      .then(() => {
+        this.fetchGroupedPollData();
+      });
+    super.init(...arguments);
+  }
+
+  @discourseComputed("model.poll.title", "model.post.topic.title")
+  title(pollTitle, topicTitle) {
+    return pollTitle ? htmlSafe(pollTitle) : topicTitle;
+  }
+
+  get groupableUserFields() {
+    return this.siteSettings.poll_groupable_user_fields
+      .split("|")
+      .filter(Boolean)
+      .map((field) => {
+        const transformed = field.split("_").filter(Boolean);
+
+        if (transformed.length > 1) {
+          transformed[0] = classify(transformed[0]);
+        }
+
+        return { id: field, label: transformed.join(" ") };
+      });
+  }
+
+  @discourseComputed("model.poll.options")
+  totalVotes(options) {
+    return options.reduce((sum, option) => sum + option.votes, 0);
+  }
+
+  fetchGroupedPollData() {
+    return ajax("/polls/grouped_poll_results.json", {
+      data: {
+        post_id: this.model.post.id,
+        poll_name: this.model.poll.name,
+        user_field_name: this.groupedBy,
+      },
+    })
+      .catch((error) => {
+        if (error) {
+          popupAjaxError(error);
+        } else {
+          this.dialog.alert(i18n("poll.error_while_fetching_voters"));
+        }
+      })
+      .then((result) => {
+        if (this.isDestroying || this.isDestroyed) {
+          return;
+        }
+
+        this.set("charts", result.grouped_results);
+      });
+  }
+
+  @action
+  setGrouping(value) {
+    this.set("groupedBy", value);
+    this.fetchGroupedPollData();
+  }
+
+  @action
+  onSelectPanel(panel) {
+    this.set("displayMode", panel.id);
+  }
+}
+
 {{! template-lint-disable no-invalid-interactive }}
 <DModal
   @title={{i18n "poll.breakdown.title"}}
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.js b/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.js
deleted file mode 100644
index 82c9726bae3..00000000000
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-breakdown.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import { classify } from "@ember/string";
-import { htmlSafe } from "@ember/template";
-import { ajax } from "discourse/lib/ajax";
-import { popupAjaxError } from "discourse/lib/ajax-error";
-import discourseComputed from "discourse/lib/decorators";
-import loadScript from "discourse/lib/load-script";
-import { i18n } from "discourse-i18n";
-
-export default class PollBreakdownModal extends Component {
-  @service dialog;
-  @service siteSettings;
-
-  model = null;
-  charts = null;
-  groupedBy = null;
-  highlightedOption = null;
-  displayMode = "percentage";
-
-  init() {
-    this.set("groupedBy", this.groupableUserFields[0]?.id);
-    loadScript("/javascripts/Chart.min.js")
-      .then(() => loadScript("/javascripts/chartjs-plugin-datalabels.min.js"))
-      .then(() => {
-        this.fetchGroupedPollData();
-      });
-    super.init(...arguments);
-  }
-
-  @discourseComputed("model.poll.title", "model.post.topic.title")
-  title(pollTitle, topicTitle) {
-    return pollTitle ? htmlSafe(pollTitle) : topicTitle;
-  }
-
-  get groupableUserFields() {
-    return this.siteSettings.poll_groupable_user_fields
-      .split("|")
-      .filter(Boolean)
-      .map((field) => {
-        const transformed = field.split("_").filter(Boolean);
-
-        if (transformed.length > 1) {
-          transformed[0] = classify(transformed[0]);
-        }
-
-        return { id: field, label: transformed.join(" ") };
-      });
-  }
-
-  @discourseComputed("model.poll.options")
-  totalVotes(options) {
-    return options.reduce((sum, option) => sum + option.votes, 0);
-  }
-
-  fetchGroupedPollData() {
-    return ajax("/polls/grouped_poll_results.json", {
-      data: {
-        post_id: this.model.post.id,
-        poll_name: this.model.poll.name,
-        user_field_name: this.groupedBy,
-      },
-    })
-      .catch((error) => {
-        if (error) {
-          popupAjaxError(error);
-        } else {
-          this.dialog.alert(i18n("poll.error_while_fetching_voters"));
-        }
-      })
-      .then((result) => {
-        if (this.isDestroying || this.isDestroyed) {
-          return;
-        }
-
-        this.set("charts", result.grouped_results);
-      });
-  }
-
-  @action
-  setGrouping(value) {
-    this.set("groupedBy", value);
-    this.fetchGroupedPollData();
-  }
-
-  @action
-  onSelectPanel(panel) {
-    this.set("displayMode", panel.id);
-  }
-}
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.gjs b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.gjs
index a959c453a17..d46d6229017 100644
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.gjs
+++ b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.gjs
@@ -1,3 +1,403 @@
+import Component from "@ember/component";
+import EmberObject, { action } from "@ember/object";
+import { gt, or } from "@ember/object/computed";
+import { service } from "@ember/service";
+import { observes } from "@ember-decorators/object";
+import discourseComputed from "discourse/lib/decorators";
+import { i18n } from "discourse-i18n";
+
+export const BAR_CHART_TYPE = "bar";
+export const PIE_CHART_TYPE = "pie";
+
+export const REGULAR_POLL_TYPE = "regular";
+export const NUMBER_POLL_TYPE = "number";
+export const MULTIPLE_POLL_TYPE = "multiple";
+export const RANKED_CHOICE_POLL_TYPE = "ranked_choice";
+
+const ALWAYS_POLL_RESULT = "always";
+const VOTE_POLL_RESULT = "on_vote";
+const CLOSED_POLL_RESULT = "on_close";
+const STAFF_POLL_RESULT = "staff_only";
+
+export default class PollUiBuilderModal extends Component {
+  @service siteSettings;
+
+  showAdvanced = false;
+  pollType = REGULAR_POLL_TYPE;
+  pollTitle;
+  pollOptions = [EmberObject.create({ value: "" })];
+  pollOptionsText = "";
+  pollMin = 1;
+  pollMax = 2;
+  pollStep = 1;
+  pollGroups;
+  pollAutoClose;
+  pollResult = ALWAYS_POLL_RESULT;
+  chartType = BAR_CHART_TYPE;
+  publicPoll = this.siteSettings.poll_default_public;
+
+  @or("showAdvanced", "isNumber") showNumber;
+  @or("showAdvanced", "isRankedChoice") showRankedChoice;
+  @gt("pollOptions.length", 1) canRemoveOption;
+  @or("isRankedChoice", "isRegular") rankedChoiceOrRegular;
+  @or("isRankedChoice", "isNumber") rankedChoiceOrNumber;
+
+  @discourseComputed("currentUser.staff")
+  pollResults(staff) {
+    const options = [
+      {
+        name: i18n("poll.ui_builder.poll_result.always"),
+        value: ALWAYS_POLL_RESULT,
+      },
+      {
+        name: i18n("poll.ui_builder.poll_result.vote"),
+        value: VOTE_POLL_RESULT,
+      },
+      {
+        name: i18n("poll.ui_builder.poll_result.closed"),
+        value: CLOSED_POLL_RESULT,
+      },
+    ];
+
+    if (staff) {
+      options.push({
+        name: i18n("poll.ui_builder.poll_result.staff"),
+        value: STAFF_POLL_RESULT,
+      });
+    }
+
+    return options;
+  }
+
+  @discourseComputed("pollType")
+  isRegular(pollType) {
+    return pollType === REGULAR_POLL_TYPE;
+  }
+
+  @discourseComputed("pollType")
+  isNumber(pollType) {
+    return pollType === NUMBER_POLL_TYPE;
+  }
+
+  @discourseComputed("pollType")
+  isMultiple(pollType) {
+    return pollType === MULTIPLE_POLL_TYPE;
+  }
+
+  @discourseComputed("pollType")
+  isRankedChoice(pollType) {
+    return pollType === RANKED_CHOICE_POLL_TYPE;
+  }
+
+  @discourseComputed("pollOptions.@each.value")
+  pollOptionsCount(pollOptions) {
+    return (pollOptions || []).filter((option) => option.value.length > 0)
+      .length;
+  }
+
+  @discourseComputed("site.groups")
+  siteGroups(groups) {
+    // prevents group "everyone" to be listed
+    return groups.filter((g) => g.id !== 0);
+  }
+
+  @discourseComputed("chartType", "pollType")
+  isPie(chartType, pollType) {
+    return pollType !== NUMBER_POLL_TYPE && chartType === PIE_CHART_TYPE;
+  }
+
+  @observes("pollType", "pollOptionsCount")
+  _setPollMinMax() {
+    if (this.isMultiple) {
+      if (
+        this.pollMin <= 0 ||
+        this.pollMin >= this.pollMax ||
+        this.pollMin >= this.pollOptionsCount
+      ) {
+        this.set("pollMin", this.pollOptionsCount > 0 ? 1 : 0);
+      }
+
+      if (
+        this.pollMax <= 0 ||
+        this.pollMin >= this.pollMax ||
+        this.pollMax > this.pollOptionsCount
+      ) {
+        this.set("pollMax", this.pollOptionsCount);
+      }
+    } else if (this.isNumber) {
+      this.set("pollMax", this.siteSettings.poll_maximum_options);
+    }
+  }
+
+  @discourseComputed(
+    "pollType",
+    "pollResult",
+    "publicPoll",
+    "pollTitle",
+    "pollOptions.@each.value",
+    "pollMin",
+    "pollMax",
+    "pollStep",
+    "pollGroups",
+    "pollAutoClose",
+    "chartType"
+  )
+  pollOutput(
+    pollType,
+    pollResult,
+    publicPoll,
+    pollTitle,
+    pollOptions,
+    pollMin,
+    pollMax,
+    pollStep,
+    pollGroups,
+    pollAutoClose,
+    chartType
+  ) {
+    let pollHeader = "[poll";
+    let output = "";
+
+    const match = this.model.toolbarEvent
+      .getText()
+      .match(/\[poll(\s+name=[^\s\]]+)*.*\]/gim);
+
+    if (match) {
+      pollHeader += ` name=poll${match.length + 1}`;
+    }
+
+    let step = pollStep;
+    if (step < 1) {
+      step = 1;
+    }
+
+    if (pollType) {
+      pollHeader += ` type=${pollType}`;
+    }
+    if (pollResult) {
+      pollHeader += ` results=${pollResult}`;
+    }
+    if (pollMin && pollType !== REGULAR_POLL_TYPE) {
+      pollHeader += ` min=${pollMin}`;
+    }
+    if (pollMax && pollType !== REGULAR_POLL_TYPE) {
+      pollHeader += ` max=${pollMax}`;
+    }
+    if (pollType === NUMBER_POLL_TYPE) {
+      pollHeader += ` step=${step}`;
+    }
+    pollHeader += ` public=${publicPoll ? "true" : "false"}`;
+    if (chartType && pollType !== NUMBER_POLL_TYPE) {
+      pollHeader += ` chartType=${chartType}`;
+    }
+    if (pollGroups && pollGroups.length > 0) {
+      pollHeader += ` groups=${pollGroups}`;
+    }
+    if (pollAutoClose) {
+      pollHeader += ` close=${pollAutoClose.toISOString()}`;
+    }
+
+    pollHeader += "]";
+    output += `${pollHeader}\n`;
+
+    if (pollTitle) {
+      output += `# ${pollTitle.trim()}\n`;
+    }
+
+    if (pollOptions.length > 0 && pollType !== NUMBER_POLL_TYPE) {
+      pollOptions.forEach((option) => {
+        if (option.value.length > 0) {
+          output += `* ${option.value.trim()}\n`;
+        }
+      });
+    }
+
+    output += "[/poll]\n";
+    return output;
+  }
+
+  @discourseComputed("isNumber", "pollOptionsCount")
+  minNumOfOptionsValidation(isNumber, pollOptionsCount) {
+    let options = { ok: true };
+
+    if (!isNumber) {
+      if (pollOptionsCount < 1) {
+        return EmberObject.create({
+          failed: true,
+          reason: i18n("poll.ui_builder.help.options_min_count"),
+        });
+      }
+
+      if (pollOptionsCount > this.siteSettings.poll_maximum_options) {
+        return EmberObject.create({
+          failed: true,
+          reason: i18n("poll.ui_builder.help.options_max_count", {
+            count: this.siteSettings.poll_maximum_options,
+          }),
+        });
+      }
+    }
+
+    return EmberObject.create(options);
+  }
+
+  @discourseComputed("pollOptions.@each.value")
+  showMinNumOfOptionsValidation(pollOptions) {
+    return pollOptions.length !== 1 || pollOptions[0].value !== "";
+  }
+
+  @discourseComputed(
+    "isMultiple",
+    "pollOptionsCount",
+    "isNumber",
+    "pollMin",
+    "pollMax",
+    "pollStep"
+  )
+  minMaxValueValidation(
+    isMultiple,
+    pollOptionsCount,
+    isNumber,
+    pollMin,
+    pollMax,
+    pollStep
+  ) {
+    pollMin = parseInt(pollMin, 10) || 0;
+    pollMax = parseInt(pollMax, 10) || 0;
+    pollStep = parseInt(pollStep, 10) || 0;
+
+    if (pollMin < 0) {
+      return EmberObject.create({
+        failed: true,
+        reason: i18n("poll.ui_builder.help.invalid_min_value"),
+      });
+    }
+
+    if (pollMax < 0 || (isMultiple && pollMax > pollOptionsCount)) {
+      return EmberObject.create({
+        failed: true,
+        reason: i18n("poll.ui_builder.help.invalid_max_value"),
+      });
+    }
+
+    if (pollMin > pollMax) {
+      return EmberObject.create({
+        failed: true,
+        reason: i18n("poll.ui_builder.help.invalid_values"),
+      });
+    }
+
+    if (isNumber) {
+      if (pollStep < 1) {
+        return EmberObject.create({
+          failed: true,
+          reason: i18n("poll.ui_builder.help.min_step_value"),
+        });
+      }
+
+      const optionsCount = (pollMax - pollMin + 1) / pollStep;
+
+      if (optionsCount < 1) {
+        return EmberObject.create({
+          failed: true,
+          reason: i18n("poll.ui_builder.help.options_min_count"),
+        });
+      }
+
+      if (optionsCount > this.siteSettings.poll_maximum_options) {
+        return EmberObject.create({
+          failed: true,
+          reason: i18n("poll.ui_builder.help.options_max_count", {
+            count: this.siteSettings.poll_maximum_options,
+          }),
+        });
+      }
+    }
+
+    return EmberObject.create({ ok: true });
+  }
+
+  @discourseComputed("minMaxValueValidation", "minNumOfOptionsValidation")
+  disableInsert(minMaxValueValidation, minNumOfOptionsValidation) {
+    return !minMaxValueValidation.ok || !minNumOfOptionsValidation.ok;
+  }
+
+  _comboboxOptions(startIndex, endIndex) {
+    return [...Array(endIndex - startIndex).keys()].map((number) => ({
+      value: number + startIndex,
+      name: number + startIndex,
+    }));
+  }
+
+  @action
+  onOptionsTextChange(e) {
+    this.set(
+      "pollOptions",
+      e.target.value.split("\n").map((value) => EmberObject.create({ value }))
+    );
+  }
+
+  @action
+  insertPoll() {
+    this.model.toolbarEvent.addText(this.pollOutput);
+    this.closeModal();
+  }
+
+  @action
+  toggleAdvanced() {
+    this.toggleProperty("showAdvanced");
+    if (this.showAdvanced) {
+      this.set(
+        "pollOptionsText",
+        this.pollOptions.map((x) => x.value).join("\n")
+      );
+    }
+  }
+
+  @action
+  updateValue(option, event) {
+    option.set("value", event.target.value);
+  }
+
+  @action
+  onInputKeydown(index, event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (event.target.value !== "") {
+        this.addOption(index + 1);
+      }
+    }
+  }
+
+  @action
+  addOption(atIndex) {
+    if (atIndex === -1) {
+      atIndex = this.pollOptions.length;
+    }
+
+    const option = EmberObject.create({ value: "" });
+    this.pollOptions.insertAt(atIndex, option);
+  }
+
+  @action
+  removeOption(option) {
+    this.pollOptions.removeObject(option);
+  }
+
+  @action
+  updatePollType(pollType, event) {
+    event?.preventDefault();
+    this.set("pollType", pollType);
+  }
+
+  @action
+  togglePublic() {
+    this.set("publicPoll", !this.publicPoll);
+  }
+}
+
 <DModal
   @title={{i18n "poll.ui_builder.title"}}
   @closeModal={{@closeModal}}
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.js b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.js
deleted file mode 100644
index 08c4441bc28..00000000000
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.js
+++ /dev/null
@@ -1,399 +0,0 @@
-import Component from "@ember/component";
-import EmberObject, { action } from "@ember/object";
-import { gt, or } from "@ember/object/computed";
-import { service } from "@ember/service";
-import { observes } from "@ember-decorators/object";
-import discourseComputed from "discourse/lib/decorators";
-import { i18n } from "discourse-i18n";
-
-export const BAR_CHART_TYPE = "bar";
-export const PIE_CHART_TYPE = "pie";
-
-export const REGULAR_POLL_TYPE = "regular";
-export const NUMBER_POLL_TYPE = "number";
-export const MULTIPLE_POLL_TYPE = "multiple";
-export const RANKED_CHOICE_POLL_TYPE = "ranked_choice";
-
-const ALWAYS_POLL_RESULT = "always";
-const VOTE_POLL_RESULT = "on_vote";
-const CLOSED_POLL_RESULT = "on_close";
-const STAFF_POLL_RESULT = "staff_only";
-
-export default class PollUiBuilderModal extends Component {
-  @service siteSettings;
-
-  showAdvanced = false;
-  pollType = REGULAR_POLL_TYPE;
-  pollTitle;
-  pollOptions = [EmberObject.create({ value: "" })];
-  pollOptionsText = "";
-  pollMin = 1;
-  pollMax = 2;
-  pollStep = 1;
-  pollGroups;
-  pollAutoClose;
-  pollResult = ALWAYS_POLL_RESULT;
-  chartType = BAR_CHART_TYPE;
-  publicPoll = this.siteSettings.poll_default_public;
-
-  @or("showAdvanced", "isNumber") showNumber;
-  @or("showAdvanced", "isRankedChoice") showRankedChoice;
-  @gt("pollOptions.length", 1) canRemoveOption;
-  @or("isRankedChoice", "isRegular") rankedChoiceOrRegular;
-  @or("isRankedChoice", "isNumber") rankedChoiceOrNumber;
-
-  @discourseComputed("currentUser.staff")
-  pollResults(staff) {
-    const options = [
-      {
-        name: i18n("poll.ui_builder.poll_result.always"),
-        value: ALWAYS_POLL_RESULT,
-      },
-      {
-        name: i18n("poll.ui_builder.poll_result.vote"),
-        value: VOTE_POLL_RESULT,
-      },
-      {
-        name: i18n("poll.ui_builder.poll_result.closed"),
-        value: CLOSED_POLL_RESULT,
-      },
-    ];
-
-    if (staff) {
-      options.push({
-        name: i18n("poll.ui_builder.poll_result.staff"),
-        value: STAFF_POLL_RESULT,
-      });
-    }
-
-    return options;
-  }
-
-  @discourseComputed("pollType")
-  isRegular(pollType) {
-    return pollType === REGULAR_POLL_TYPE;
-  }
-
-  @discourseComputed("pollType")
-  isNumber(pollType) {
-    return pollType === NUMBER_POLL_TYPE;
-  }
-
-  @discourseComputed("pollType")
-  isMultiple(pollType) {
-    return pollType === MULTIPLE_POLL_TYPE;
-  }
-
-  @discourseComputed("pollType")
-  isRankedChoice(pollType) {
-    return pollType === RANKED_CHOICE_POLL_TYPE;
-  }
-
-  @discourseComputed("pollOptions.@each.value")
-  pollOptionsCount(pollOptions) {
-    return (pollOptions || []).filter((option) => option.value.length > 0)
-      .length;
-  }
-
-  @discourseComputed("site.groups")
-  siteGroups(groups) {
-    // prevents group "everyone" to be listed
-    return groups.filter((g) => g.id !== 0);
-  }
-
-  @discourseComputed("chartType", "pollType")
-  isPie(chartType, pollType) {
-    return pollType !== NUMBER_POLL_TYPE && chartType === PIE_CHART_TYPE;
-  }
-
-  @observes("pollType", "pollOptionsCount")
-  _setPollMinMax() {
-    if (this.isMultiple) {
-      if (
-        this.pollMin <= 0 ||
-        this.pollMin >= this.pollMax ||
-        this.pollMin >= this.pollOptionsCount
-      ) {
-        this.set("pollMin", this.pollOptionsCount > 0 ? 1 : 0);
-      }
-
-      if (
-        this.pollMax <= 0 ||
-        this.pollMin >= this.pollMax ||
-        this.pollMax > this.pollOptionsCount
-      ) {
-        this.set("pollMax", this.pollOptionsCount);
-      }
-    } else if (this.isNumber) {
-      this.set("pollMax", this.siteSettings.poll_maximum_options);
-    }
-  }
-
-  @discourseComputed(
-    "pollType",
-    "pollResult",
-    "publicPoll",
-    "pollTitle",
-    "pollOptions.@each.value",
-    "pollMin",
-    "pollMax",
-    "pollStep",
-    "pollGroups",
-    "pollAutoClose",
-    "chartType"
-  )
-  pollOutput(
-    pollType,
-    pollResult,
-    publicPoll,
-    pollTitle,
-    pollOptions,
-    pollMin,
-    pollMax,
-    pollStep,
-    pollGroups,
-    pollAutoClose,
-    chartType
-  ) {
-    let pollHeader = "[poll";
-    let output = "";
-
-    const match = this.model.toolbarEvent
-      .getText()
-      .match(/\[poll(\s+name=[^\s\]]+)*.*\]/gim);
-
-    if (match) {
-      pollHeader += ` name=poll${match.length + 1}`;
-    }
-
-    let step = pollStep;
-    if (step < 1) {
-      step = 1;
-    }
-
-    if (pollType) {
-      pollHeader += ` type=${pollType}`;
-    }
-    if (pollResult) {
-      pollHeader += ` results=${pollResult}`;
-    }
-    if (pollMin && pollType !== REGULAR_POLL_TYPE) {
-      pollHeader += ` min=${pollMin}`;
-    }
-    if (pollMax && pollType !== REGULAR_POLL_TYPE) {
-      pollHeader += ` max=${pollMax}`;
-    }
-    if (pollType === NUMBER_POLL_TYPE) {
-      pollHeader += ` step=${step}`;
-    }
-    pollHeader += ` public=${publicPoll ? "true" : "false"}`;
-    if (chartType && pollType !== NUMBER_POLL_TYPE) {
-      pollHeader += ` chartType=${chartType}`;
-    }
-    if (pollGroups && pollGroups.length > 0) {
-      pollHeader += ` groups=${pollGroups}`;
-    }
-    if (pollAutoClose) {
-      pollHeader += ` close=${pollAutoClose.toISOString()}`;
-    }
-
-    pollHeader += "]";
-    output += `${pollHeader}\n`;
-
-    if (pollTitle) {
-      output += `# ${pollTitle.trim()}\n`;
-    }
-
-    if (pollOptions.length > 0 && pollType !== NUMBER_POLL_TYPE) {
-      pollOptions.forEach((option) => {
-        if (option.value.length > 0) {
-          output += `* ${option.value.trim()}\n`;
-        }
-      });
-    }
-
-    output += "[/poll]\n";
-    return output;
-  }
-
-  @discourseComputed("isNumber", "pollOptionsCount")
-  minNumOfOptionsValidation(isNumber, pollOptionsCount) {
-    let options = { ok: true };
-
-    if (!isNumber) {
-      if (pollOptionsCount < 1) {
-        return EmberObject.create({
-          failed: true,
-          reason: i18n("poll.ui_builder.help.options_min_count"),
-        });
-      }
-
-      if (pollOptionsCount > this.siteSettings.poll_maximum_options) {
-        return EmberObject.create({
-          failed: true,
-          reason: i18n("poll.ui_builder.help.options_max_count", {
-            count: this.siteSettings.poll_maximum_options,
-          }),
-        });
-      }
-    }
-
-    return EmberObject.create(options);
-  }
-
-  @discourseComputed("pollOptions.@each.value")
-  showMinNumOfOptionsValidation(pollOptions) {
-    return pollOptions.length !== 1 || pollOptions[0].value !== "";
-  }
-
-  @discourseComputed(
-    "isMultiple",
-    "pollOptionsCount",
-    "isNumber",
-    "pollMin",
-    "pollMax",
-    "pollStep"
-  )
-  minMaxValueValidation(
-    isMultiple,
-    pollOptionsCount,
-    isNumber,
-    pollMin,
-    pollMax,
-    pollStep
-  ) {
-    pollMin = parseInt(pollMin, 10) || 0;
-    pollMax = parseInt(pollMax, 10) || 0;
-    pollStep = parseInt(pollStep, 10) || 0;
-
-    if (pollMin < 0) {
-      return EmberObject.create({
-        failed: true,
-        reason: i18n("poll.ui_builder.help.invalid_min_value"),
-      });
-    }
-
-    if (pollMax < 0 || (isMultiple && pollMax > pollOptionsCount)) {
-      return EmberObject.create({
-        failed: true,
-        reason: i18n("poll.ui_builder.help.invalid_max_value"),
-      });
-    }
-
-    if (pollMin > pollMax) {
-      return EmberObject.create({
-        failed: true,
-        reason: i18n("poll.ui_builder.help.invalid_values"),
-      });
-    }
-
-    if (isNumber) {
-      if (pollStep < 1) {
-        return EmberObject.create({
-          failed: true,
-          reason: i18n("poll.ui_builder.help.min_step_value"),
-        });
-      }
-
-      const optionsCount = (pollMax - pollMin + 1) / pollStep;
-
-      if (optionsCount < 1) {
-        return EmberObject.create({
-          failed: true,
-          reason: i18n("poll.ui_builder.help.options_min_count"),
-        });
-      }
-
-      if (optionsCount > this.siteSettings.poll_maximum_options) {
-        return EmberObject.create({
-          failed: true,
-          reason: i18n("poll.ui_builder.help.options_max_count", {
-            count: this.siteSettings.poll_maximum_options,
-          }),
-        });
-      }
-    }
-
-    return EmberObject.create({ ok: true });
-  }
-
-  @discourseComputed("minMaxValueValidation", "minNumOfOptionsValidation")
-  disableInsert(minMaxValueValidation, minNumOfOptionsValidation) {
-    return !minMaxValueValidation.ok || !minNumOfOptionsValidation.ok;
-  }
-
-  _comboboxOptions(startIndex, endIndex) {
-    return [...Array(endIndex - startIndex).keys()].map((number) => ({
-      value: number + startIndex,
-      name: number + startIndex,
-    }));
-  }
-
-  @action
-  onOptionsTextChange(e) {
-    this.set(
-      "pollOptions",
-      e.target.value.split("\n").map((value) => EmberObject.create({ value }))
-    );
-  }
-
-  @action
-  insertPoll() {
-    this.model.toolbarEvent.addText(this.pollOutput);
-    this.closeModal();
-  }
-
-  @action
-  toggleAdvanced() {
-    this.toggleProperty("showAdvanced");
-    if (this.showAdvanced) {
-      this.set(
-        "pollOptionsText",
-        this.pollOptions.map((x) => x.value).join("\n")
-      );
-    }
-  }
-
-  @action
-  updateValue(option, event) {
-    option.set("value", event.target.value);
-  }
-
-  @action
-  onInputKeydown(index, event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (event.target.value !== "") {
-        this.addOption(index + 1);
-      }
-    }
-  }
-
-  @action
-  addOption(atIndex) {
-    if (atIndex === -1) {
-      atIndex = this.pollOptions.length;
-    }
-
-    const option = EmberObject.create({ value: "" });
-    this.pollOptions.insertAt(atIndex, option);
-  }
-
-  @action
-  removeOption(option) {
-    this.pollOptions.removeObject(option);
-  }
-
-  @action
-  updatePollType(pollType, event) {
-    event?.preventDefault();
-    this.set("pollType", pollType);
-  }
-
-  @action
-  togglePublic() {
-    this.set("publicPoll", !this.publicPoll);
-  }
-}
diff --git a/plugins/poll/test/javascripts/component/poll-buttons-dropdown-test.js b/plugins/poll/test/javascripts/component/poll-buttons-dropdown-test.gjs
similarity index 100%
rename from plugins/poll/test/javascripts/component/poll-buttons-dropdown-test.js
rename to plugins/poll/test/javascripts/component/poll-buttons-dropdown-test.gjs
diff --git a/plugins/poll/test/javascripts/component/poll-info-test.js b/plugins/poll/test/javascripts/component/poll-info-test.gjs
similarity index 100%
rename from plugins/poll/test/javascripts/component/poll-info-test.js
rename to plugins/poll/test/javascripts/component/poll-info-test.gjs
diff --git a/plugins/poll/test/javascripts/component/poll-options-test.js b/plugins/poll/test/javascripts/component/poll-options-test.gjs
similarity index 100%
rename from plugins/poll/test/javascripts/component/poll-options-test.js
rename to plugins/poll/test/javascripts/component/poll-options-test.gjs
diff --git a/plugins/poll/test/javascripts/component/poll-results-pie-test.js b/plugins/poll/test/javascripts/component/poll-results-pie-test.gjs
similarity index 100%
rename from plugins/poll/test/javascripts/component/poll-results-pie-test.js
rename to plugins/poll/test/javascripts/component/poll-results-pie-test.gjs
diff --git a/plugins/poll/test/javascripts/component/poll-results-ranked-choice-test.js b/plugins/poll/test/javascripts/component/poll-results-ranked-choice-test.gjs
similarity index 100%
rename from plugins/poll/test/javascripts/component/poll-results-ranked-choice-test.js
rename to plugins/poll/test/javascripts/component/poll-results-ranked-choice-test.gjs
diff --git a/plugins/poll/test/javascripts/component/poll-results-standard-test.js b/plugins/poll/test/javascripts/component/poll-results-standard-test.gjs
similarity index 100%
rename from plugins/poll/test/javascripts/component/poll-results-standard-test.js
rename to plugins/poll/test/javascripts/component/poll-results-standard-test.gjs
diff --git a/plugins/poll/test/javascripts/component/poll-results-tabs-test.js b/plugins/poll/test/javascripts/component/poll-results-tabs-test.gjs
similarity index 100%
rename from plugins/poll/test/javascripts/component/poll-results-tabs-test.js
rename to plugins/poll/test/javascripts/component/poll-results-tabs-test.gjs
diff --git a/plugins/poll/test/javascripts/component/poll-test.js b/plugins/poll/test/javascripts/component/poll-test.gjs
similarity index 100%
rename from plugins/poll/test/javascripts/component/poll-test.js
rename to plugins/poll/test/javascripts/component/poll-test.gjs
diff --git a/plugins/poll/test/javascripts/component/poll-ui-builder-test.js b/plugins/poll/test/javascripts/component/poll-ui-builder-test.gjs
similarity index 100%
rename from plugins/poll/test/javascripts/component/poll-ui-builder-test.js
rename to plugins/poll/test/javascripts/component/poll-ui-builder-test.gjs
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.gjs
index e50ca8baa02..f63d9a920b4 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.gjs
@@ -1,3 +1,116 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import { MENU } from "float-kit/lib/constants";
+import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
+
+export default class Menus extends Component {
+  @service menu;
+
+  @tracked label = "What is this?";
+  @tracked triggers = MENU.options.triggers;
+  @tracked untriggers = MENU.options.untriggers;
+  @tracked arrow = MENU.options.arrow;
+  @tracked inline = MENU.options.inline;
+  @tracked interactive = MENU.options.interactive;
+  @tracked maxWidth = MENU.options.maxWidth;
+  @tracked identifier;
+  @tracked offset = MENU.options.offset;
+  @tracked _content = htmlSafe("<ul><li>Hello</li><li>World!</li></ul>");
+
+  get content() {
+    return this._content;
+  }
+
+  set content(value) {
+    this._content = htmlSafe(value);
+  }
+
+  get templateCode() {
+    return `<DMenu
+  @label={{html-safe "${this.label}"}}
+  @content={{html-safe "${this.content}"}}
+/>`;
+  }
+
+  get templateCodeContent() {
+    return `<DMenu @maxWidth={{100}}>
+  <:trigger>
+     ${this.label}
+  </:trigger>
+  <:content>
+    ${this.content}
+  </:content>
+</DMenu>`;
+  }
+
+  get serviceCode() {
+    return `this.menu.register(
+  document.queryselector(".my-element"),
+  { content: htmlSafe(${this.content}) }
+);`;
+  }
+
+  get serviceCodeComponent() {
+    return `this.menu.register(
+  document.queryselector(".my-element"),
+  { component: MyComponent, data: { foo: 1 } }
+);`;
+  }
+
+  @action
+  toggleArrow() {
+    this.arrow = !this.arrow;
+  }
+
+  @action
+  toggleInteractive() {
+    this.interactive = !this.interactive;
+  }
+
+  @action
+  toggleInline() {
+    this.inline = !this.inline;
+  }
+
+  @action
+  registerMenu() {
+    this.menuInstance?.destroy();
+    this.menuInstance = this.menu.register(
+      document.querySelector("#menu-instance"),
+      this.options
+    );
+  }
+
+  @action
+  registerMenuWithComponent() {
+    this.menuInstanceWithComponent?.destroy();
+    this.menuInstanceWithComponent = this.menu.register(
+      document.querySelector("#menu-instance-with-component"),
+      {
+        ...this.options,
+        component: DummyComponent,
+        data: { foo: 1 },
+      }
+    );
+  }
+
+  get options() {
+    return {
+      offset: this.offset,
+      arrow: this.arrow,
+      maxWidth: this.maxWidth,
+      identifier: this.identifier,
+      interactive: this.interactive,
+      triggers: this.triggers ?? ["click"],
+      untriggers: this.untriggers ?? ["click"],
+      content: this.content,
+    };
+  }
+}
+
 <StyleguideExample @title="<Dmenu />">
   <Styleguide::Component @tag="dmenu component">
     <:sample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.js b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.js
deleted file mode 100644
index a49c308c0f8..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/menus.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import { htmlSafe } from "@ember/template";
-import { MENU } from "float-kit/lib/constants";
-import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
-
-export default class Menus extends Component {
-  @service menu;
-
-  @tracked label = "What is this?";
-  @tracked triggers = MENU.options.triggers;
-  @tracked untriggers = MENU.options.untriggers;
-  @tracked arrow = MENU.options.arrow;
-  @tracked inline = MENU.options.inline;
-  @tracked interactive = MENU.options.interactive;
-  @tracked maxWidth = MENU.options.maxWidth;
-  @tracked identifier;
-  @tracked offset = MENU.options.offset;
-  @tracked _content = htmlSafe("<ul><li>Hello</li><li>World!</li></ul>");
-
-  get content() {
-    return this._content;
-  }
-
-  set content(value) {
-    this._content = htmlSafe(value);
-  }
-
-  get templateCode() {
-    return `<DMenu
-  @label={{html-safe "${this.label}"}}
-  @content={{html-safe "${this.content}"}}
-/>`;
-  }
-
-  get templateCodeContent() {
-    return `<DMenu @maxWidth={{100}}>
-  <:trigger>
-     ${this.label}
-  </:trigger>
-  <:content>
-    ${this.content}
-  </:content>
-</DMenu>`;
-  }
-
-  get serviceCode() {
-    return `this.menu.register(
-  document.queryselector(".my-element"),
-  { content: htmlSafe(${this.content}) }
-);`;
-  }
-
-  get serviceCodeComponent() {
-    return `this.menu.register(
-  document.queryselector(".my-element"),
-  { component: MyComponent, data: { foo: 1 } }
-);`;
-  }
-
-  @action
-  toggleArrow() {
-    this.arrow = !this.arrow;
-  }
-
-  @action
-  toggleInteractive() {
-    this.interactive = !this.interactive;
-  }
-
-  @action
-  toggleInline() {
-    this.inline = !this.inline;
-  }
-
-  @action
-  registerMenu() {
-    this.menuInstance?.destroy();
-    this.menuInstance = this.menu.register(
-      document.querySelector("#menu-instance"),
-      this.options
-    );
-  }
-
-  @action
-  registerMenuWithComponent() {
-    this.menuInstanceWithComponent?.destroy();
-    this.menuInstanceWithComponent = this.menu.register(
-      document.querySelector("#menu-instance-with-component"),
-      {
-        ...this.options,
-        component: DummyComponent,
-        data: { foo: 1 },
-      }
-    );
-  }
-
-  get options() {
-    return {
-      offset: this.offset,
-      arrow: this.arrow,
-      maxWidth: this.maxWidth,
-      identifier: this.identifier,
-      interactive: this.interactive,
-      triggers: this.triggers ?? ["click"],
-      untriggers: this.untriggers ?? ["click"],
-      content: this.content,
-    };
-  }
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.gjs
index 8a83e8984a2..a0b7e1ed6f0 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.gjs
@@ -1,3 +1,81 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { TOAST } from "float-kit/lib/constants";
+import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
+
+export default class Toasts extends Component {
+  @service toasts;
+
+  @tracked title = "Title";
+  @tracked message = "Message";
+  @tracked duration = TOAST.options.duration;
+  @tracked autoClose = TOAST.options.autoClose;
+  @tracked showProgressBar = TOAST.options.showProgressBar;
+  @tracked class;
+  @tracked action = true;
+  @tracked icon;
+
+  @action
+  showCustomComponentToast() {
+    this.toasts.show({
+      duration: this.duration,
+      autoClose: this.autoClose,
+      class: this.class,
+      component: DummyComponent,
+      data: {
+        foo: 1,
+      },
+    });
+  }
+
+  @action
+  showToast(theme) {
+    const actions = [];
+
+    if (this.action) {
+      actions.push({
+        label: "Ok",
+        class: "btn-primary",
+        action: (args) => {
+          // eslint-disable-next-line no-alert
+          alert("Closing toast:" + args.data.title);
+          args.close();
+        },
+      });
+    }
+
+    this.toasts[theme]({
+      duration: this.duration,
+      autoClose: this.autoClose,
+      showProgressBar: this.showProgressBar,
+      class: this.class,
+      data: {
+        title: this.title,
+        message: this.message,
+        icon: this.icon,
+        actions,
+      },
+    });
+  }
+
+  @action
+  toggleAction() {
+    this.action = !this.action;
+  }
+
+  @action
+  toggleAutoClose() {
+    this.autoClose = !this.autoClose;
+  }
+
+  @action
+  toggleShowProgressBar() {
+    this.showProgressBar = !this.showProgressBar;
+  }
+}
+
 {{! template-lint-disable no-potential-path-strings }}
 <StyleguideExample @title="Toasts service">
   <Styleguide::Component @tag="default">
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.js b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.js
deleted file mode 100644
index 81db0d8cb90..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/toasts.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import { TOAST } from "float-kit/lib/constants";
-import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
-
-export default class Toasts extends Component {
-  @service toasts;
-
-  @tracked title = "Title";
-  @tracked message = "Message";
-  @tracked duration = TOAST.options.duration;
-  @tracked autoClose = TOAST.options.autoClose;
-  @tracked showProgressBar = TOAST.options.showProgressBar;
-  @tracked class;
-  @tracked action = true;
-  @tracked icon;
-
-  @action
-  showCustomComponentToast() {
-    this.toasts.show({
-      duration: this.duration,
-      autoClose: this.autoClose,
-      class: this.class,
-      component: DummyComponent,
-      data: {
-        foo: 1,
-      },
-    });
-  }
-
-  @action
-  showToast(theme) {
-    const actions = [];
-
-    if (this.action) {
-      actions.push({
-        label: "Ok",
-        class: "btn-primary",
-        action: (args) => {
-          // eslint-disable-next-line no-alert
-          alert("Closing toast:" + args.data.title);
-          args.close();
-        },
-      });
-    }
-
-    this.toasts[theme]({
-      duration: this.duration,
-      autoClose: this.autoClose,
-      showProgressBar: this.showProgressBar,
-      class: this.class,
-      data: {
-        title: this.title,
-        message: this.message,
-        icon: this.icon,
-        actions,
-      },
-    });
-  }
-
-  @action
-  toggleAction() {
-    this.action = !this.action;
-  }
-
-  @action
-  toggleAutoClose() {
-    this.autoClose = !this.autoClose;
-  }
-
-  @action
-  toggleShowProgressBar() {
-    this.showProgressBar = !this.showProgressBar;
-  }
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.gjs
index a75f59ea166..30ae670cfc0 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.gjs
@@ -1,3 +1,121 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import { TOOLTIP } from "float-kit/lib/constants";
+import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
+
+export default class Tooltips extends Component {
+  @service tooltip;
+  @service site;
+
+  @tracked label = "What is this?";
+  @tracked triggers = TOOLTIP.options.triggers[this.triggersByDevice];
+  @tracked untriggers = TOOLTIP.options.untriggers[this.triggersByDevice];
+  @tracked arrow = TOOLTIP.options.arrow;
+  @tracked inline = TOOLTIP.options.inline;
+  @tracked interactive = TOOLTIP.options.interactive;
+  @tracked maxWidth = TOOLTIP.options.maxWidth;
+  @tracked identifier;
+  @tracked offset = TOOLTIP.options.offset;
+  @tracked _content = "Hello World!";
+
+  get triggersByDevice() {
+    return this.site.mobileView ? "mobile" : "desktop";
+  }
+
+  get content() {
+    return this._content;
+  }
+
+  set content(value) {
+    this._content = htmlSafe(value);
+  }
+
+  get templateCode() {
+    return `<DTooltip
+  @label="${this.label}"
+  @content="${this.content}"
+/>`;
+  }
+
+  get templateCodeContent() {
+    return `<DTooltip @maxWidth={{100}}>
+  <:trigger>
+     ${this.label}
+  </:trigger>
+  <:content>
+    ${this.content}
+  </:content>
+</DTooltip>`;
+  }
+
+  get serviceCode() {
+    return `this.tooltip.register(
+  document.queryselector(".my-element"),
+  { content: "${this.content}" }
+);`;
+  }
+
+  get serviceCodeComponent() {
+    return `this.tooltip.register(
+  document.queryselector(".my-element"),
+  { component: MyComponent, data: { foo: 1 } }
+);`;
+  }
+
+  @action
+  toggleArrow() {
+    this.arrow = !this.arrow;
+  }
+
+  @action
+  toggleInteractive() {
+    this.interactive = !this.interactive;
+  }
+
+  @action
+  toggleInline() {
+    this.inline = !this.inline;
+  }
+
+  @action
+  registerTooltip() {
+    this.tooltipInstance?.destroy();
+    this.tooltipInstance = this.tooltip.register(
+      document.querySelector("#tooltip-instance"),
+      this.options
+    );
+  }
+
+  @action
+  registerTooltipWithComponent() {
+    this.tooltipInstanceWithComponent?.destroy();
+    this.tooltipInstanceWithComponent = this.tooltip.register(
+      document.querySelector("#tooltip-instance-with-component"),
+      {
+        ...this.options,
+        component: DummyComponent,
+        data: { foo: 1 },
+      }
+    );
+  }
+
+  get options() {
+    return {
+      offset: this.offset,
+      arrow: this.arrow,
+      maxWidth: this.maxWidth,
+      identifier: this.identifier,
+      interactive: this.interactive,
+      triggers: this.triggers,
+      untriggers: this.untriggers,
+      content: this.content,
+    };
+  }
+}
+
 <StyleguideExample @title="<DTooltip />">
   <Styleguide::Component @tag="tooltip component">
     <:sample>
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.js b/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.js
deleted file mode 100644
index 49d7ccdbc03..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/tooltips.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import { htmlSafe } from "@ember/template";
-import { TOOLTIP } from "float-kit/lib/constants";
-import DummyComponent from "discourse/plugins/styleguide/discourse/components/dummy-component";
-
-export default class Tooltips extends Component {
-  @service tooltip;
-  @service site;
-
-  @tracked label = "What is this?";
-  @tracked triggers = TOOLTIP.options.triggers[this.triggersByDevice];
-  @tracked untriggers = TOOLTIP.options.untriggers[this.triggersByDevice];
-  @tracked arrow = TOOLTIP.options.arrow;
-  @tracked inline = TOOLTIP.options.inline;
-  @tracked interactive = TOOLTIP.options.interactive;
-  @tracked maxWidth = TOOLTIP.options.maxWidth;
-  @tracked identifier;
-  @tracked offset = TOOLTIP.options.offset;
-  @tracked _content = "Hello World!";
-
-  get triggersByDevice() {
-    return this.site.mobileView ? "mobile" : "desktop";
-  }
-
-  get content() {
-    return this._content;
-  }
-
-  set content(value) {
-    this._content = htmlSafe(value);
-  }
-
-  get templateCode() {
-    return `<DTooltip
-  @label="${this.label}"
-  @content="${this.content}"
-/>`;
-  }
-
-  get templateCodeContent() {
-    return `<DTooltip @maxWidth={{100}}>
-  <:trigger>
-     ${this.label}
-  </:trigger>
-  <:content>
-    ${this.content}
-  </:content>
-</DTooltip>`;
-  }
-
-  get serviceCode() {
-    return `this.tooltip.register(
-  document.queryselector(".my-element"),
-  { content: "${this.content}" }
-);`;
-  }
-
-  get serviceCodeComponent() {
-    return `this.tooltip.register(
-  document.queryselector(".my-element"),
-  { component: MyComponent, data: { foo: 1 } }
-);`;
-  }
-
-  @action
-  toggleArrow() {
-    this.arrow = !this.arrow;
-  }
-
-  @action
-  toggleInteractive() {
-    this.interactive = !this.interactive;
-  }
-
-  @action
-  toggleInline() {
-    this.inline = !this.inline;
-  }
-
-  @action
-  registerTooltip() {
-    this.tooltipInstance?.destroy();
-    this.tooltipInstance = this.tooltip.register(
-      document.querySelector("#tooltip-instance"),
-      this.options
-    );
-  }
-
-  @action
-  registerTooltipWithComponent() {
-    this.tooltipInstanceWithComponent?.destroy();
-    this.tooltipInstanceWithComponent = this.tooltip.register(
-      document.querySelector("#tooltip-instance-with-component"),
-      {
-        ...this.options,
-        component: DummyComponent,
-        data: { foo: 1 },
-      }
-    );
-  }
-
-  get options() {
-    return {
-      offset: this.offset,
-      arrow: this.arrow,
-      maxWidth: this.maxWidth,
-      identifier: this.identifier,
-      interactive: this.interactive,
-      triggers: this.triggers,
-      untriggers: this.untriggers,
-      content: this.content,
-    };
-  }
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.gjs
index 39c4278d7bb..6682ca3dbf0 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.gjs
@@ -1,3 +1,52 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { getLoadedFaker } from "discourse/lib/load-faker";
+import { i18n } from "discourse-i18n";
+
+export default class extends Component {
+  @tracked inline = true;
+  @tracked hideHeader = false;
+  @tracked dismissable = true;
+  @tracked modalTagName = "div";
+  @tracked title = i18n("styleguide.sections.modal.header");
+  @tracked body = getLoadedFaker().faker.lorem.lines(5);
+  @tracked subtitle = "";
+  @tracked flash = "";
+  @tracked flashType = "success";
+
+  flashTypes = ["success", "info", "warning", "error"];
+  modalTagNames = ["div", "form"];
+
+  @action
+  toggleHeader() {
+    this.hideHeader = !this.hideHeader;
+  }
+
+  @action
+  toggleInline() {
+    this.inline = !this.inline;
+    if (!this.inline) {
+      // Make sure there is a way to dismiss the modal
+      this.dismissable = true;
+    }
+  }
+
+  @action
+  toggleDismissable() {
+    this.dismissable = !this.dismissable;
+    if (!this.dismissable) {
+      // Make sure there is a way to dismiss the modal
+      this.inline = true;
+    }
+  }
+
+  @action
+  toggleShowFooter() {
+    this.showFooter = !this.showFooter;
+  }
+}
+
 {{! template-lint-disable no-potential-path-strings}}
 
 <StyleguideExample @title="<DModal>">
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.js b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.js
deleted file mode 100644
index e4d8b41f26b..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { getLoadedFaker } from "discourse/lib/load-faker";
-import { i18n } from "discourse-i18n";
-
-export default class extends Component {
-  @tracked inline = true;
-  @tracked hideHeader = false;
-  @tracked dismissable = true;
-  @tracked modalTagName = "div";
-  @tracked title = i18n("styleguide.sections.modal.header");
-  @tracked body = getLoadedFaker().faker.lorem.lines(5);
-  @tracked subtitle = "";
-  @tracked flash = "";
-  @tracked flashType = "success";
-
-  flashTypes = ["success", "info", "warning", "error"];
-  modalTagNames = ["div", "form"];
-
-  @action
-  toggleHeader() {
-    this.hideHeader = !this.hideHeader;
-  }
-
-  @action
-  toggleInline() {
-    this.inline = !this.inline;
-    if (!this.inline) {
-      // Make sure there is a way to dismiss the modal
-      this.dismissable = true;
-    }
-  }
-
-  @action
-  toggleDismissable() {
-    this.dismissable = !this.dismissable;
-    if (!this.dismissable) {
-      // Make sure there is a way to dismiss the modal
-      this.inline = true;
-    }
-  }
-
-  @action
-  toggleShowFooter() {
-    this.showFooter = !this.showFooter;
-  }
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.gjs
index 25f0cd276af..bac2468d8a5 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.gjs
@@ -1,3 +1,15 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+export default class StyleguideExample extends Component {
+  @tracked value = null;
+
+  constructor() {
+    super(...arguments);
+    this.value = this.args.initialValue;
+  }
+}
+
 <section class="styleguide-example">
   <div class="example-title">{{@title}}</div>
   <section class="rendered">{{yield this.value}}</section>
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js
deleted file mode 100644
index 551b6d69036..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-
-export default class StyleguideExample extends Component {
-  @tracked value = null;
-
-  constructor() {
-    super(...arguments);
-    this.value = this.args.initialValue;
-  }
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.gjs
index 12cb4dfe5b1..b13e377aede 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.gjs
@@ -1,3 +1,33 @@
+import Component from "@ember/component";
+import { classNames, tagName } from "@ember-decorators/component";
+import { afterRender } from "discourse/lib/decorators";
+import { REPLACEMENTS } from "discourse/lib/icon-library";
+import discourseLater from "discourse/lib/later";
+
+@tagName("section")
+@classNames("styleguide-icons")
+export default class StyleguideIcons extends Component {
+  iconIds = [];
+
+  init() {
+    super.init(...arguments);
+    this.setIconIds();
+  }
+
+  @afterRender
+  setIconIds() {
+    let symbols = document.querySelectorAll("#svg-sprites symbol");
+    if (symbols.length > 0) {
+      let ids = Array.from(symbols).mapBy("id");
+      ids.push(...Object.keys(REPLACEMENTS));
+      this.set("iconIds", [...new Set(ids.sort())]);
+    } else {
+      // Let's try again a short time later if there are no svgs loaded yet
+      discourseLater(this, this.setIconIds, 1500);
+    }
+  }
+}
+
 {{#each this.iconIds as |id|}}
   <div class="styleguide-icon">
     {{d-icon id}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js
deleted file mode 100644
index a9050c2eecb..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Component from "@ember/component";
-import { classNames, tagName } from "@ember-decorators/component";
-import { afterRender } from "discourse/lib/decorators";
-import { REPLACEMENTS } from "discourse/lib/icon-library";
-import discourseLater from "discourse/lib/later";
-
-@tagName("section")
-@classNames("styleguide-icons")
-export default class StyleguideIcons extends Component {
-  iconIds = [];
-
-  init() {
-    super.init(...arguments);
-    this.setIconIds();
-  }
-
-  @afterRender
-  setIconIds() {
-    let symbols = document.querySelectorAll("#svg-sprites symbol");
-    if (symbols.length > 0) {
-      let ids = Array.from(symbols).mapBy("id");
-      ids.push(...Object.keys(REPLACEMENTS));
-      this.set("iconIds", [...new Set(ids.sort())]);
-    } else {
-      // Let's try again a short time later if there are no svgs loaded yet
-      discourseLater(this, this.setIconIds, 1500);
-    }
-  }
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.gjs
index e00319bddc5..2a2156524ed 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.gjs
@@ -1,3 +1,23 @@
+import Component from "@ember/component";
+import { classNameBindings, tagName } from "@ember-decorators/component";
+import computed from "discourse/lib/decorators";
+
+@tagName("section")
+@classNameBindings(":styleguide-section", "sectionClass")
+export default class StyleguideSection extends Component {
+  didReceiveAttrs() {
+    super.didReceiveAttrs(...arguments);
+    window.scrollTo(0, 0);
+  }
+
+  @computed("section")
+  sectionClass(section) {
+    if (section) {
+      return `${section.id}-examples`;
+    }
+  }
+}
+
 <h1 class="section-title">
   {{#if this.section}}
     {{section-title this.section.id}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js
deleted file mode 100644
index 5455fbf9029..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Component from "@ember/component";
-import { classNameBindings, tagName } from "@ember-decorators/component";
-import computed from "discourse/lib/decorators";
-
-@tagName("section")
-@classNameBindings(":styleguide-section", "sectionClass")
-export default class StyleguideSection extends Component {
-  didReceiveAttrs() {
-    super.didReceiveAttrs(...arguments);
-    window.scrollTo(0, 0);
-  }
-
-  @computed("section")
-  sectionClass(section) {
-    if (section) {
-      return `${section.id}-examples`;
-    }
-  }
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.gjs b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.gjs
index deac3d3c715..46d3101a520 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.gjs
@@ -1,3 +1,28 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+
+export default class StyleguideCalendarDateTimeInput extends Component {
+  @service currentUser;
+
+  @tracked dateFormat = "YYYY-MM-DD";
+  @tracked timeFormat = "HH:mm:ss";
+  @tracked date = null;
+  @tracked time = null;
+  @tracked minDate = null;
+
+  @action
+  changeDate(date) {
+    this.date = date;
+  }
+
+  @action
+  changeTime(time) {
+    this.time = time;
+  }
+}
+
 <StyleguideExample @title="<CalendarDateTimeInput>">
   <Styleguide::Component>
     <CalendarDateTimeInput
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.js
deleted file mode 100644
index 2d28d9178e9..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide/calendar-date-time-input.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-
-export default class StyleguideCalendarDateTimeInput extends Component {
-  @service currentUser;
-
-  @tracked dateFormat = "YYYY-MM-DD";
-  @tracked timeFormat = "HH:mm:ss";
-  @tracked date = null;
-  @tracked time = null;
-  @tracked minDate = null;
-
-  @action
-  changeDate(date) {
-    this.date = date;
-  }
-
-  @action
-  changeTime(time) {
-    this.time = time;
-  }
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.gjs b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.gjs
index be380d583e4..902e1e509fe 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.gjs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.gjs
@@ -1,3 +1,88 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { loadColorSchemeStylesheet } from "discourse/lib/color-scheme-picker";
+import { currentThemeId } from "discourse/lib/theme-selector";
+
+const DARK = "dark";
+const LIGHT = "light";
+
+function colorSchemeOverride(type) {
+  const lightScheme = document.querySelector("link.light-scheme");
+  const darkScheme =
+    document.querySelector("link.dark-scheme") ||
+    document.querySelector("link#cs-preview-dark");
+
+  if (!lightScheme && !darkScheme) {
+    return;
+  }
+
+  switch (type) {
+    case DARK:
+      lightScheme.origMedia = lightScheme.media;
+      lightScheme.media = "none";
+      darkScheme.origMedia = darkScheme.media;
+      darkScheme.media = "all";
+      break;
+    case LIGHT:
+      lightScheme.origMedia = lightScheme.media;
+      lightScheme.media = "all";
+      darkScheme.origMedia = darkScheme.media;
+      darkScheme.media = "none";
+      break;
+    default:
+      if (lightScheme.origMedia) {
+        lightScheme.media = lightScheme.origMedia;
+        lightScheme.removeAttribute("origMedia");
+      }
+      if (darkScheme.origMedia) {
+        darkScheme.media = darkScheme.origMedia;
+        darkScheme.removeAttribute("origMedia");
+      }
+      break;
+  }
+}
+
+export default class ToggleColorMode extends Component {
+  @service keyValueStore;
+  @service siteSettings;
+
+  @tracked colorSchemeOverride = this.default;
+  @tracked shouldRender = true;
+
+  constructor() {
+    super(...arguments);
+
+    // If site has a dark color scheme set but user doesn't auto switch in dark mode
+    // we need to load the stylesheet manually
+    if (!document.querySelector("link.dark-scheme")) {
+      if (this.siteSettings.default_dark_mode_color_scheme_id > 0) {
+        loadColorSchemeStylesheet(
+          this.siteSettings.default_dark_mode_color_scheme_id,
+          currentThemeId(),
+          true
+        );
+      } else {
+        // no dark color scheme available, hide button
+        this.shouldRender = false;
+      }
+    }
+  }
+
+  get default() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? DARK
+      : LIGHT;
+  }
+
+  @action
+  toggle() {
+    this.colorSchemeOverride = this.colorSchemeOverride === DARK ? LIGHT : DARK;
+    colorSchemeOverride(this.colorSchemeOverride);
+  }
+}
+
 {{#if this.shouldRender}}
   <DButton @action={{this.toggle}} class="toggle-color-mode">Toggle color</DButton>
 {{/if}}
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js
deleted file mode 100644
index 734851fb0b0..00000000000
--- a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import { loadColorSchemeStylesheet } from "discourse/lib/color-scheme-picker";
-import { currentThemeId } from "discourse/lib/theme-selector";
-
-const DARK = "dark";
-const LIGHT = "light";
-
-function colorSchemeOverride(type) {
-  const lightScheme = document.querySelector("link.light-scheme");
-  const darkScheme =
-    document.querySelector("link.dark-scheme") ||
-    document.querySelector("link#cs-preview-dark");
-
-  if (!lightScheme && !darkScheme) {
-    return;
-  }
-
-  switch (type) {
-    case DARK:
-      lightScheme.origMedia = lightScheme.media;
-      lightScheme.media = "none";
-      darkScheme.origMedia = darkScheme.media;
-      darkScheme.media = "all";
-      break;
-    case LIGHT:
-      lightScheme.origMedia = lightScheme.media;
-      lightScheme.media = "all";
-      darkScheme.origMedia = darkScheme.media;
-      darkScheme.media = "none";
-      break;
-    default:
-      if (lightScheme.origMedia) {
-        lightScheme.media = lightScheme.origMedia;
-        lightScheme.removeAttribute("origMedia");
-      }
-      if (darkScheme.origMedia) {
-        darkScheme.media = darkScheme.origMedia;
-        darkScheme.removeAttribute("origMedia");
-      }
-      break;
-  }
-}
-
-export default class ToggleColorMode extends Component {
-  @service keyValueStore;
-  @service siteSettings;
-
-  @tracked colorSchemeOverride = this.default;
-  @tracked shouldRender = true;
-
-  constructor() {
-    super(...arguments);
-
-    // If site has a dark color scheme set but user doesn't auto switch in dark mode
-    // we need to load the stylesheet manually
-    if (!document.querySelector("link.dark-scheme")) {
-      if (this.siteSettings.default_dark_mode_color_scheme_id > 0) {
-        loadColorSchemeStylesheet(
-          this.siteSettings.default_dark_mode_color_scheme_id,
-          currentThemeId(),
-          true
-        );
-      } else {
-        // no dark color scheme available, hide button
-        this.shouldRender = false;
-      }
-    }
-  }
-
-  get default() {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
-      ? DARK
-      : LIGHT;
-  }
-
-  @action
-  toggle() {
-    this.colorSchemeOverride = this.colorSchemeOverride === DARK ? LIGHT : DARK;
-    colorSchemeOverride(this.colorSchemeOverride);
-  }
-}