frontend: move active currencies to top of dropdown

Improves UX by making active currencies
more visible and easier to deselect.

Author: strmci

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 - Add feedback link to guide and about settings
+- Move active currencies to top of currency dropdown
 
 ## v4.49.0
 - Bundle BitBox02 Nova firmware version v9.24.0

frontends/web/src/routes/settings/components/appearance/activecurrenciesdropdown.tsx

@@ -37,6 +37,13 @@ type TSelectProps = {
   onOpenChange: (isOpen: boolean) => void;
 };
 
+const sortCurrencyOptions = (options: SelectOption[], activeCurrencies: Fiat[]): SelectOption[] => {
+  const byLabel = (a: SelectOption, b: SelectOption) => a.label.localeCompare(b.label);
+  const selected = options.filter(opt => activeCurrencies.includes(opt.value)).sort(byLabel);
+  const others = options.filter(opt => !activeCurrencies.includes(opt.value)).sort(byLabel);
+  return [...selected, ...others];
+};
+
 export const ActiveCurrenciesDropdown = ({
   options,
   defaultCurrency,
@@ -71,12 +78,13 @@ export const ActiveCurrenciesDropdown = ({
       </div>
     );
   };
+  const sortedOptions = sortCurrencyOptions(options, activeCurrencies);
 
   return (
     <Dropdown
       isMulti
       closeMenuOnSelect={false}
-      options={options}
+      options={sortedOptions}
       value={formattedActiveCurrencies}
       title={t('newSettings.appearance.activeCurrencies.title')}
       mobileFullScreen