feat(settings): improve currency preferences UI (#1483)

* feat(settings): improve currency preferences UI

* fix: remove redundant keydown action from currency search input

* fix(settings): localize currency count pluralization in dialog

* feat: update selected count handling with pluralization support

app/javascript/controllers/currency_preferences_controller.js

@@ -1,12 +1,19 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = ["dialog", "checkbox"];
+  static targets = ["dialog", "checkbox", "selectedCount"];
   static values = {
     baseCurrency: String,
+    locale: String,
+    selectedCountTranslations: Object,
   };
 
+  connect() {
+    this.updateSelectedCount();
+  }
+
   open() {
+    this.updateSelectedCount();
     this.dialogTarget.showModal();
   }
 
@@ -14,12 +21,31 @@ export default class extends Controller {
     this.checkboxTargets.forEach((checkbox) => {
       checkbox.checked = true;
     });
+
+    this.updateSelectedCount();
   }
 
   selectBaseOnly() {
     this.checkboxTargets.forEach((checkbox) => {
       checkbox.checked = checkbox.value === this.baseCurrencyValue;
     });
+
+    this.updateSelectedCount();
+  }
+
+  updateSelectedCount() {
+    if (!this.hasSelectedCountTarget) return;
+
+    const selectedCount = this.checkboxTargets.filter((checkbox) => checkbox.checked).length;
+    const pluralRules = new Intl.PluralRules(this.localeValue || undefined);
+    const pluralCategory = pluralRules.select(selectedCount);
+    const labelTemplate =
+      this.selectedCountTranslationsValue[pluralCategory] ||
+      this.selectedCountTranslationsValue.other ||
+      "%{count}";
+    const label = labelTemplate.replace("%{count}", selectedCount);
+
+    this.selectedCountTarget.textContent = label;
   }
 
   handleSubmitEnd(event) {