Merge branch 'frontend-responsive-account-selector'

shonsirsha · shonsirsha · commit 2347c9b39868 · 2025-12-16T12:58:06.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - Add "Change device password" functionality (in Settings)
 - Add icons for CTA and action buttons in account page
 - Restructure "Manage device" tab in settings
+- Responsive account selector (Marketplace)
 
 ## v4.49.0
 - Bundle BitBox02 Nova firmware version v9.24.0
diff --git a/frontends/web/src/components/dropdown/dropdown.tsx b/frontends/web/src/components/dropdown/dropdown.tsx
@@ -7,6 +7,8 @@ import Select, {
   OptionProps,
   DropdownIndicatorProps,
   MultiValueProps,
+  GroupProps,
+  GroupHeadingProps,
   Props as ReactSelectProps,
   ActionMeta,
 } from 'react-select';
@@ -19,11 +21,31 @@ export type TOption<T = any> = {
   value: T;
 };
 
-type SelectProps<T = any, IsMulti extends boolean = false> = Omit<
+export type TGroupedOption<T, TExtra = object, TOptionExt = object> = {
+  label: string;
+  options: (TOption<T> & TOptionExt)[];
+} & TExtra;
+
+export const isGroupedOptions = <T, >(
+  options: TOption<T>[] | TGroupedOption<T>[] | undefined
+): options is TGroupedOption<T>[] => {
+  if (!options || options.length === 0) {
+    return false;
+  }
+  const firstOption = options[0];
+  if (!firstOption) {
+    return false;
+  }
+  return 'options' in firstOption && Array.isArray((firstOption as TGroupedOption<T>).options);
+};
+
+type SelectProps<T, IsMulti extends boolean = false, TExtra = object, TOptionExt = object> = Omit<
   ReactSelectProps<TOption<T>>,
-  'onChange'
+  'onChange' | 'options'
 > & {
-  renderOptions?: (selectedItem: TOption<T>, isSelectedValue: boolean) => ReactNode; // Function to render options and selected value for single dropdown
+  options?: TOption<T>[] | TGroupedOption<T, TExtra, TOptionExt>[];
+  renderOptions?: (selectedItem: TOption<T> & TOptionExt, isSelectedValue: boolean) => ReactNode;
+  renderGroupHeader?: (group: TGroupedOption<T, TExtra, TOptionExt>) => ReactNode;
   onChange: (
     newValue: IsMulti extends true ? TOption<T>[] : TOption<T>,
     actionMeta: ActionMeta<TOption<T>>
@@ -87,37 +109,50 @@ const CustomMultiValue = ({ index, getValue }: MultiValueProps<TOption>) => {
   );
 };
 
-export const Dropdown = <T, IsMulti extends boolean = false>({
+const Group = (props: GroupProps<TOption>) => (
+  <div>
+    <components.Group {...props} />
+  </div>
+);
+
+const createGroupHeading = <T, TExtra = object, TOptionExt = object>(
+  renderGroupHeader?: (group: TGroupedOption<T, TExtra, TOptionExt>) => ReactNode
+) => (props: GroupHeadingProps<TOption<T>>) => {
+  if (renderGroupHeader) {
+    return (
+      <div className={styles.groupHeader}>
+        {renderGroupHeader(props.data as unknown as TGroupedOption<T, TExtra, TOptionExt>)}
+      </div>
+    );
+  }
+  return <components.GroupHeading {...props} />;
+};
+
+export const Dropdown = <T, IsMulti extends boolean = false, TExtra = object, TOptionExt = object>({
   classNamePrefix = 'react-select',
   renderOptions,
+  renderGroupHeader,
   className,
   onChange,
   title = '',
   mobileFullScreen = false,
   isOpen,
   onOpenChange,
   mobileTriggerComponent,
+  options,
   ...props
-}: SelectProps<T, IsMulti>) => {
+}: SelectProps<T, IsMulti, TExtra, TOptionExt>) => {
   const isMobile = useMediaQuery('(max-width: 768px)');
+  const isGrouped = isGroupedOptions(options);
 
   if (isMobile && mobileFullScreen) {
-    const options: TOption<T>[] = props.options
-      ? (props.options as TOption<T>[]).filter(
-        (option): option is TOption<T> =>
-          option !== null &&
-            typeof option === 'object' &&
-            'value' in option &&
-            'label' in option
-      )
-      : [];
-
     return (
       <MobileFullscreenSelector
         title={title}
         options={options}
         renderOptions={renderOptions || (() => null)}
-        value={props.value as any}
+        renderGroupHeader={renderGroupHeader}
+        value={props.value as IsMulti extends true ? TOption<T>[] : TOption<T>}
         onSelect={onChange}
         isMulti={props.isMulti}
         isOpen={isOpen}
@@ -127,6 +162,28 @@ export const Dropdown = <T, IsMulti extends boolean = false>({
     );
   }
 
+  const componentOverrides: ReactSelectProps<TOption<T>>['components'] = {
+    DropdownIndicator,
+    SingleValue: (singleValueProps: SingleValueProps<TOption<T>>) =>
+      singleValueProps.isMulti ? undefined : (
+        <SelectSingleValue
+          {...singleValueProps}
+          selectProps={{ ...singleValueProps.selectProps, renderOptions }}
+        />
+      ),
+    Option: (optionProps: OptionProps<TOption<T>>) => (
+      <Option {...optionProps} selectProps={{ ...optionProps.selectProps, renderOptions }} />
+    ),
+    MultiValue: props.isMulti ? CustomMultiValue : undefined,
+    IndicatorSeparator: () => null,
+    MultiValueRemove: () => null,
+  };
+
+  if (isGrouped) {
+    componentOverrides.Group = Group;
+    componentOverrides.GroupHeading = createGroupHeading<T, TExtra, TOptionExt>(renderGroupHeader);
+  }
+
   return (
     <Select
       className={`
@@ -136,14 +193,8 @@ export const Dropdown = <T, IsMulti extends boolean = false>({
       classNamePrefix={classNamePrefix}
       isClearable={false}
       hideSelectedOptions={false}
-      components={{
-        DropdownIndicator,
-        SingleValue: (props) => props.isMulti ? undefined : <SelectSingleValue {...props} selectProps={{ ...props.selectProps, renderOptions }} />,
-        Option: (props) => <Option {...props} selectProps={{ ...props.selectProps, renderOptions }} />,
-        MultiValue: props.isMulti ? CustomMultiValue : undefined, // uses MultiValue only for multi-select
-        IndicatorSeparator: () => null,
-        MultiValueRemove: () => null,
-      }}
+      options={options}
+      components={componentOverrides}
       onChange={(selected, actionMeta) => {
         const handleChange = props.isMulti
           ? (onChange as (value: TOption<T>[], actionMeta: ActionMeta<TOption<T>>) => void)
@@ -154,4 +205,3 @@ export const Dropdown = <T, IsMulti extends boolean = false>({
     />
   );
 };
-
diff --git a/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css b/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css
@@ -59,13 +59,13 @@
     border: none;
     color: var(--color-default);
     cursor: pointer;
-    padding-left: 0;
     margin-right: var(--space-quarter);
+    padding-left: 0;
 }
 
 .backButtonIcon {
-    width: 24px;
     height: 24px;
+    width: 24px;
 }
 
 .fullscreenTitle {
@@ -92,11 +92,11 @@ input.searchInput {
     background-color: var(--background-secondary);
     border: 1px solid var(--background-secondary);
     border-radius: 4px;
-    height: auto;
     color: var(--color-default);
     font-size: var(--size-default);
-    width: 100%;
+    height: auto;
     padding: var(--space-quarter) var(--space-half);
+    width: 100%;
 }
 
 input.searchInput:focus {
@@ -109,6 +109,18 @@ input.searchInput:focus {
     padding: 0;
 }
 
+.group {
+    padding-bottom: var(--space-quarter);
+}
+
+.groupHeader {
+    align-items: center;
+    display: flex;
+    font-weight: 500;
+    padding: var(--space-half);
+    padding-bottom: var(--space-quarter);
+}
+
 .optionItem {
     align-items: center;
     background: none;
@@ -123,6 +135,10 @@ input.searchInput:focus {
     width: 100%;
 }
 
+.optionItem:hover {
+    background-color: var(--background-custom-select-hover);
+}
+
 .selectedOption {
     background-color: var(--background-custom-select-selected);
 }
@@ -132,15 +148,15 @@ input.searchInput:focus {
 }
 
 .noOptions {
-    padding: var(--space-half);
-    text-align: center;
     color: var(--color-secondary);
     font-size: var(--size-default);
+    padding: var(--space-half);
+    text-align: center;
 }
 
 @media screen and (max-width: 560px) {
     .mobileSelectorTrigger {
         padding-top: var(--space-quarter);
         text-align: start;
     }
-}
+}
diff --git a/frontends/web/src/components/dropdown/mobile-fullscreen-selector.tsx b/frontends/web/src/components/dropdown/mobile-fullscreen-selector.tsx
@@ -3,15 +3,16 @@
 import { ReactNode, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionMeta } from 'react-select';
-import { TOption } from './dropdown';
+import { TOption, TGroupedOption, isGroupedOptions } from './dropdown';
 import { ChevronLeftDark } from '@/components/icon';
 import { UseBackButton } from '@/hooks/backbutton';
 import styles from './mobile-fullscreen-selector.module.css';
 
-type Props<T, IsMulti extends boolean = false> = {
+type Props<T, IsMulti extends boolean = false, TExtra = object, TOptionExt = object> = {
   title: string;
-  options: TOption<T>[];
-  renderOptions: (option: TOption<T>, isSelectedValue: boolean) => ReactNode;
+  options?: TOption<T>[] | TGroupedOption<T, TExtra, TOptionExt>[];
+  renderOptions: (option: TOption<T> & TOptionExt, isSelectedValue: boolean) => ReactNode;
+  renderGroupHeader?: (group: TGroupedOption<T, TExtra, TOptionExt>) => ReactNode;
   value: IsMulti extends true ? TOption<T>[] : TOption<T>;
   onSelect: (newValue: IsMulti extends true ? TOption<T>[] : TOption<T>, actionMeta: ActionMeta<TOption<T>>) => void;
   isMulti?: boolean;
@@ -20,21 +21,23 @@ type Props<T, IsMulti extends boolean = false> = {
   triggerComponent?: ReactNode | ((props: { onClick: () => void }) => ReactNode);
 };
 
-export const MobileFullscreenSelector = <T, IsMulti extends boolean = false>({
+export const MobileFullscreenSelector = <T, IsMulti extends boolean = false, TExtra = object, TOptionExt = object>({
   title,
   options,
   renderOptions,
+  renderGroupHeader,
   value,
   onSelect,
   isMulti,
   isOpen: controlledIsOpen,
   onOpenChange,
   triggerComponent,
-}: Props<T, IsMulti>) => {
+}: Props<T, IsMulti, TExtra, TOptionExt>) => {
   const [localIsOpen, setLocalIsOpen] = useState(false);
   const [searchText, setSearchText] = useState('');
   const { t } = useTranslation();
   const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : localIsOpen;
+  const isGrouped = isGroupedOptions(options);
 
   useEffect(() => {
     if (!isOpen) {
@@ -87,12 +90,71 @@ export const MobileFullscreenSelector = <T, IsMulti extends boolean = false>({
 
   const displayValue = isMulti
     ? (value as TOption<T>[]).map(v => v.label).reverse().join(', ')
-    : (value as TOption<T>).label;
+    : (value as TOption<T>)?.label || '';
 
-  const filteredOptions = options.filter(option =>
-    option.label.toLowerCase().includes(searchText.toLowerCase())
+  const getFilteredOptions = () => {
+    if (!options) {
+      return [];
+    }
+    const searchLower = searchText.toLowerCase();
+
+    if (isGrouped) {
+      return (options as TGroupedOption<T, TExtra, TOptionExt>[])
+        .map(group => ({
+          ...group,
+          options: group.options.filter(opt =>
+            opt.label.toLowerCase().includes(searchLower)
+          ),
+        }))
+        .filter(group => group.options.length > 0);
+    }
+
+    return (options as (TOption<T> & TOptionExt)[]).filter(opt =>
+      opt.label.toLowerCase().includes(searchLower)
+    );
+  };
+
+  const filteredOptions = getFilteredOptions();
+
+  const renderFlatOptions = (flatOptions: (TOption<T> & TOptionExt)[]) => (
+    flatOptions.map((option) => (
+      <button
+        key={JSON.stringify(option.value)}
+        className={`
+          ${styles.optionItem || ''} 
+          ${isSelected(option) ? styles.selectedOption || '' : ''}`
+        }
+        onClick={(e) => handleSelect(option, e)}
+      >
+        <div className={styles.optionContent}>{renderOptions(option, false)}</div>
+      </button>
+    ))
   );
 
+  const renderGroupedOptions = (groupedOptions: TGroupedOption<T, TExtra, TOptionExt>[]) => (
+    groupedOptions.map((group) => (
+      <div key={group.label} className={styles.group}>
+        <div className={styles.groupHeader}>
+          {renderGroupHeader ? renderGroupHeader(group) : <span>{group.label}</span>}
+        </div>
+        {group.options.map((option) => (
+          <button
+            key={JSON.stringify(option.value)}
+            type="button"
+            className={`${styles.optionItem || ''} ${isSelected(option) ? styles.selectedOption || '' : ''}`}
+            onClick={(e) => handleSelect(option, e)}
+          >
+            <div className={styles.optionContent}>{renderOptions(option, false)}</div>
+          </button>
+        ))}
+      </div>
+    ))
+  );
+
+  const hasResults = isGrouped
+    ? (filteredOptions as TGroupedOption<T, TExtra, TOptionExt>[]).length > 0
+    : (filteredOptions as (TOption<T> & TOptionExt)[]).length > 0;
+
   return (
     <div className={styles.dropdownContainer}>
       <UseBackButton handler={() => {
@@ -147,21 +209,10 @@ export const MobileFullscreenSelector = <T, IsMulti extends boolean = false>({
             </div>
 
             <div className={styles.optionsList}>
-              {filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
-                  <button
-                    key={JSON.stringify(option.value)}
-                    className={`
-                    ${styles.optionItem || ''} 
-                    ${isSelected(option) ?
-                    styles.selectedOption || ''
-                    : ''}`
-                    }
-                    onClick={(e) => handleSelect(option, e)}
-                  >
-                    <div className={styles.optionContent}>{renderOptions(option, false)}</div>
-                  </button>
-                ))
+              {hasResults ? (
+                isGrouped
+                  ? renderGroupedOptions(filteredOptions as TGroupedOption<T, TExtra, TOptionExt>[])
+                  : renderFlatOptions(filteredOptions as (TOption<T> & TOptionExt)[])
               ) : (
                 <div className={styles.noOptions}>{t('generic.noOptions')}</div>
               )}
diff --git a/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css b/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css
diff --git a/frontends/web/src/components/groupedaccountselector/groupedaccountselector.tsx b/frontends/web/src/components/groupedaccountselector/groupedaccountselector.tsx
