frontend: fullscreen selector on mobile

to improve the mobile UX, we've introduced a new component called
MobileFullscreenSelector.

This component is rendered automatically when the Dropdown
component is used with the prop mobileFullScreen={true}.

This feature is integrated in this commit across the
following components:

- ActiveCurrenciesDropdownSetting
- DefaultCurrencyDropdownSetting
- LanguageDropdownSetting

Author: shonsirsha

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Reduced support for BitBox01
 - Fix a bug that would prevent the app to perform firmware upgrade when offline.
 - Replace sidebar with bottom navigation bar for mobile devices
+- Introduce full screen selector for mobile in place of dropdown
 
 # v4.47.2
 - Linux: fix compatiblity with some versions of Mesa that are incompatible with the bundled wayland libraries

frontends/web/src/components/dropdown/dropdown.module.css

@@ -1,4 +1,3 @@
-
 .dropdown {
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-labelledby='chevron down' color='%23777'%3E%3Cdefs/%3E%3Cpolyline points='6 10 12 16 18 10'/%3E%3C/svg%3E%0A");

frontends/web/src/components/dropdown/dropdown.tsx

@@ -1,6 +1,5 @@
-
 /**
- * Copyright 2024 Shift Crypto AG
+ * Copyright 2024-2025 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -25,6 +24,8 @@ import Select, {
   Props as ReactSelectProps,
   ActionMeta,
 } from 'react-select';
+import { useMediaQuery } from '@/hooks/mediaquery';
+import { MobileFullscreenSelector } from './mobile-fullscreen-selector';
 import styles from './dropdown.module.css';
 
 export type TOption<T = any> = {
@@ -41,6 +42,10 @@ type SelectProps<T = any, IsMulti extends boolean = false> = Omit<
     newValue: IsMulti extends true ? TOption<T>[] : TOption<T>,
     actionMeta: ActionMeta<TOption<T>>
   ) => void;
+  mobileFullScreen?: boolean;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  title?: string;
 };
 
 const DropdownIndicator = (props: DropdownIndicatorProps<TOption>) => (
@@ -89,7 +94,7 @@ const CustomMultiValue = ({ index, getValue }: MultiValueProps<TOption>) => {
   const hiddenCount = selectedValues.length - maxVisible;
 
   return (
-    <div className={styles.valueContainer}>
+    <div>
       {hiddenCount > 0 ? `${displayedValues}...` : displayedValues}
     </div>
   );
@@ -100,8 +105,39 @@ export const Dropdown = <T, IsMulti extends boolean = false>({
   renderOptions,
   className,
   onChange,
+  title = '',
+  mobileFullScreen = false,
+  isOpen,
+  onOpenChange,
   ...props
 }: SelectProps<T, IsMulti>) => {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  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}
+        value={props.value as any}
+        onSelect={onChange}
+        isMulti={props.isMulti}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      />
+    );
+  }
+
   return (
     <Select
       className={`

frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css

@@ -0,0 +1,152 @@
+.dropdown {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-labelledby='chevron down' color='%23777'%3E%3Cdefs/%3E%3Cpolyline points='6 10 12 16 18 10'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    font-weight: 400;
+    height: calc(var(--space-quarter) * 3);
+    padding: 0 calc(var(--space-quarter) + var(--space-eight));
+    transform: rotate(270deg);
+}
+
+.dropdownContainer {
+    width: 100%;
+}
+
+.mobileDropdownTrigger {
+    background-color: var(--background-secondary);
+    border: none;
+    border-radius: 2px;
+    color: var(--color-default);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: var(--size-default);
+    height: auto;
+    padding: 0;
+    width: 100%;
+    text-align: end;
+}
+
+.mobileDropdownValue {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-secondary);
+}
+
+.fullscreenOverlay {
+    background-color: var(--background-secondary);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 9999;
+}
+
+.fullscreenContent {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+
+.fullscreenHeader {
+    align-items: center;
+    border-bottom: 1px solid var(--background);
+    background-color: var(--background);
+    cursor: default;
+    display: flex;
+    height: var(--item-height);
+    padding: 0 var(--space-half);
+    position: relative;
+}
+
+.backButton {
+    background: none;
+    border: none;
+    color: var(--color-default);
+    cursor: pointer;
+    padding-left: 0;
+    margin-right: var(--space-quarter);
+}
+
+.backButtonIcon {
+    width: 24px;
+    height: 24px;
+}
+
+.fullscreenTitle {
+    color: var(--color-default);
+    flex: 1;
+    font-size: var(--size-subheader);
+    font-weight: 400;
+    margin: 0;
+    position: absolute;
+    text-align: center;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.searchContainer {
+    background-color: var(--background);
+    border-bottom: 1px solid var(--background-secondary);
+    padding: var(--space-half);
+    padding-top: 0;
+}
+
+.searchInput {
+    background-color: var(--background-secondary);
+    border: 1px solid var(--background-secondary);
+    border-radius: 4px;
+    color: var(--color-default);
+    font-size: var(--size-default);
+    width: 100%;
+    padding: var(--space-quarter) var(--space-half);
+}
+.searchInput:focus {
+    outline: none;
+}
+.optionsList {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+}
+
+.optionItem {
+    align-items: center;
+    background: none;
+    border: none;
+    color: var(--color-default);
+    cursor: pointer;
+    display: flex;
+    font-size: var(--size-default);
+    justify-content: space-between;
+    padding: var(--space-half);
+    text-align: left;
+    width: 100%;
+}
+
+.selectedOption {
+    background-color: var(--background-custom-select-selected);
+}
+
+.optionContent {
+    flex: 1;
+}
+
+.noOptions {
+    padding: var(--space-half);
+    text-align: center;
+    color: var(--color-secondary);
+    font-size: var(--size-default);
+}
+
+@media screen and (max-width: 560px) {
+    .mobileDropdownTrigger {
+        padding-top: var(--space-quarter);
+        text-align: start;
+    }
+}