Link feature indicators to settings in wireguard settings

6 files changed, 363 insertions, 233 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/hooks/use-get-feature-indicator/useGetFeatureIndicator.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/hooks/use-get-feature-indicator/useGetFeatureIndicator.ts
index 61c3b17b9d..0bc0d9d336 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/hooks/use-get-feature-indicator/useGetFeatureIndicator.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/feature-indicators/hooks/use-get-feature-indicator/useGetFeatureIndicator.ts
@@ -88,6 +88,42 @@ export const useGetFeatureIndicator = () => {
     });
   }, [history]);
 
+  const gotoMtuFeature = React.useCallback(() => {
+    history.push(RoutePath.wireguardSettings, {
+      transition: TransitionType.show,
+      options: [
+        {
+          type: 'scroll-to-anchor',
+          id: 'mtu-setting',
+        },
+      ],
+    });
+  }, [history]);
+
+  const gotoQuantumResistantFeature = React.useCallback(() => {
+    history.push(RoutePath.wireguardSettings, {
+      transition: TransitionType.show,
+      options: [
+        {
+          type: 'scroll-to-anchor',
+          id: 'quantum-resistant-setting',
+        },
+      ],
+    });
+  }, [history]);
+
+  const gotoObfuscation = React.useCallback(() => {
+    history.push(RoutePath.wireguardSettings, {
+      transition: TransitionType.show,
+      options: [
+        {
+          type: 'scroll-to-anchor',
+          id: 'obfuscation-setting',
+        },
+      ],
+    });
+  }, [history]);
+
   const featureMap: Record<FeatureIndicator, { label: string; onClick?: () => void }> = {
     [FeatureIndicator.daita]: { label: strings.daita, onClick: gotoDaitaFeature },
     [FeatureIndicator.daitaMultihop]: {
@@ -101,14 +137,20 @@ export const useGetFeatureIndicator = () => {
           DAITA: strings.daita,
         },
       ),
+      onClick: gotoDaitaFeature,
     },
     [FeatureIndicator.udp2tcp]: {
       label: messages.pgettext('wireguard-settings-view', 'Obfuscation'),
+      onClick: gotoObfuscation,
     },
     [FeatureIndicator.shadowsocks]: {
       label: messages.pgettext('wireguard-settings-view', 'Obfuscation'),
+      onClick: gotoObfuscation,
+    },
+    [FeatureIndicator.quic]: {
+      label: messages.pgettext('wireguard-settings-view', 'Obfuscation'),
+      onClick: gotoObfuscation,
     },
-    [FeatureIndicator.quic]: { label: messages.pgettext('wireguard-settings-view', 'Obfuscation') },
     [FeatureIndicator.multihop]: {
       label:
         // TRANSLATORS: This refers to the multihop setting in the VPN settings view. This is
@@ -123,7 +165,10 @@ export const useGetFeatureIndicator = () => {
         messages.gettext('Custom DNS'),
       onClick: gotoCustomDnsFeature,
     },
-    [FeatureIndicator.customMtu]: { label: messages.pgettext('wireguard-settings-view', 'MTU') },
+    [FeatureIndicator.customMtu]: {
+      label: messages.pgettext('wireguard-settings-view', 'MTU'),
+      onClick: gotoMtuFeature,
+    },
     [FeatureIndicator.bridgeMode]: {
       label: messages.pgettext('openvpn-settings-view', 'Bridge mode'),
     },
@@ -145,10 +190,13 @@ export const useGetFeatureIndicator = () => {
     [FeatureIndicator.serverIpOverride]: {
       label: messages.pgettext('settings-import', 'Server IP override'),
     },
-    [FeatureIndicator.quantumResistance]:
-      // TRANSLATORS: This refers to the quantum resistance setting in the WireGuard settings view.
-      // TRANSLATORS: This is displayed when the feature is on.
-      { label: messages.gettext('Quantum resistance') },
+    [FeatureIndicator.quantumResistance]: {
+      label:
+        // TRANSLATORS: This refers to the quantum resistance setting in the WireGuard settings view.
+        // TRANSLATORS: This is displayed when the feature is on.
+        messages.gettext('Quantum resistance'),
+      onClick: gotoQuantumResistantFeature,
+    },
     [FeatureIndicator.dnsContentBlockers]: {
       label: messages.pgettext('vpn-settings-view', 'DNS content blockers'),
       onClick: gotoDnsContentBlockersFeature,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx
index 4d72450bd3..4ff48fdc88 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx
@@ -1,20 +1,15 @@
 import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
-import styled from 'styled-components';
 
 import { strings } from '../../../../../../shared/constants';
 import { IpVersion, wrapConstraint } from '../../../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
+import { useScrollToListItem } from '../../../../../hooks';
+import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
 import { useSelector } from '../../../../../redux/store';
-import { AriaDescription, AriaInputGroup } from '../../../../AriaGroup';
-import * as Cell from '../../../../cell';
-import Selector, { SelectorItem } from '../../../../cell/Selector';
-
-const StyledSelectorContainer = styled.div({
-  flex: 0,
-});
+import { DefaultListboxOption } from '../../../../default-listbox-option';
 
 export function IpVersionSetting() {
   const relaySettingsUpdater = useRelaySettingsUpdater();
@@ -24,19 +19,7 @@ export function IpVersionSetting() {
     return ipVersion === 'any' ? null : ipVersion;
   }, [relaySettings]);
 
-  const ipVersionItems: SelectorItem<IpVersion>[] = useMemo(
-    () => [
-      {
-        label: messages.gettext('IPv4'),
-        value: 'ipv4',
-      },
-      {
-        label: messages.gettext('IPv6'),
-        value: 'ipv6',
-      },
-    ],
-    [],
-  );
+  const scrollToAnchor = useScrollToListItem();
 
   const setIpVersion = useCallback(
     async (ipVersion: IpVersion | null) => {
@@ -54,33 +37,36 @@ export function IpVersionSetting() {
   );
 
   return (
-    <AriaInputGroup>
-      <StyledSelectorContainer>
-        <Selector
-          // TRANSLATORS: The title for the WireGuard IP version selector.
-          title={messages.pgettext('wireguard-settings-view', 'IP version')}
-          items={ipVersionItems}
-          value={ipVersion}
-          onSelect={setIpVersion}
-          automaticValue={null}
-        />
-      </StyledSelectorContainer>
-      <Cell.CellFooter>
-        <AriaDescription>
-          <Cell.CellFooterText>
-            {sprintf(
-              // TRANSLATORS: The hint displayed below the WireGuard IP version selector.
-              // TRANSLATORS: Available placeholders:
-              // TRANSLATORS: %(wireguard)s - Will be replaced with the string "WireGuard"
-              messages.pgettext(
-                'wireguard-settings-view',
-                'This allows access to %(wireguard)s for devices that only support IPv6.',
-              ),
-              { wireguard: strings.wireguard },
-            )}
-          </Cell.CellFooterText>
-        </AriaDescription>
-      </Cell.CellFooter>
-    </AriaInputGroup>
+    <Listbox value={ipVersion} onValueChange={setIpVersion} animation={scrollToAnchor?.animation}>
+      <Listbox.Item>
+        <Listbox.Content>
+          <Listbox.Label>
+            {
+              // TRANSLATORS: The title for the WireGuard IP version selector.
+              messages.pgettext('wireguard-settings-view', 'IP version')
+            }
+          </Listbox.Label>
+        </Listbox.Content>
+      </Listbox.Item>
+      <Listbox.Options>
+        <DefaultListboxOption value={null}>{messages.gettext('Automatic')}</DefaultListboxOption>
+        <DefaultListboxOption value={'ipv4'}>{messages.gettext('IPv4')}</DefaultListboxOption>
+        <DefaultListboxOption value={'ipv6'}>{messages.gettext('IPv6')}</DefaultListboxOption>
+      </Listbox.Options>
+      <Listbox.Footer>
+        <Listbox.Text>
+          {sprintf(
+            // TRANSLATORS: The hint displayed below the WireGuard IP version selector.
+            // TRANSLATORS: Available placeholders:
+            // TRANSLATORS: %(wireguard)s - Will be replaced with the string "WireGuard"
+            messages.pgettext(
+              'wireguard-settings-view',
+              'This allows access to %(wireguard)s for devices that only support IPv6.',
+            ),
+            { wireguard: strings.wireguard },
+          )}
+        </Listbox.Text>
+      </Listbox.Footer>
+    </Listbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx
index 3b8ed56c81..4b4acbb929 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 
 import { strings } from '../../../../../../shared/constants';
@@ -6,9 +6,10 @@ import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
 import { removeNonNumericCharacters } from '../../../../../../shared/string-helpers';
 import { useAppContext } from '../../../../../context';
+import { useScrollToListItem } from '../../../../../hooks';
+import { ListItem } from '../../../../../lib/components/list-item';
+import { useTextField } from '../../../../../lib/components/text-field';
 import { useSelector } from '../../../../../redux/store';
-import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from '../../../../AriaGroup';
-import * as Cell from '../../../../cell';
 
 const MIN_WIREGUARD_MTU_VALUE = 1280;
 const MAX_WIREGUARD_MTU_VALUE = 1420;
@@ -25,6 +26,14 @@ export function MtuSetting() {
   const { setWireguardMtu: setWireguardMtuImpl } = useAppContext();
   const mtu = useSelector((state) => state.settings.wireguard.mtu);
 
+  const id = 'mtu-setting';
+  const ref = React.useRef<HTMLDivElement>(null);
+  const scrollToAnchor = useScrollToListItem(ref, id);
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+
   const setMtu = useCallback(
     async (mtu?: number) => {
       try {
@@ -47,47 +56,80 @@ export function MtuSetting() {
     [setMtu],
   );
 
+  const { value, handleChange, invalid, dirty, blur, reset } = useTextField({
+    inputRef,
+    defaultValue: mtu ? mtu.toString() : '',
+    format: removeNonNumericCharacters,
+    validate: mtuIsValid,
+  });
+
+  const handleBlur = React.useCallback(async () => {
+    if (!invalid && dirty) {
+      await onSubmit(value);
+    }
+    if (invalid) {
+      reset();
+    }
+  }, [dirty, invalid, onSubmit, reset, value]);
+
+  const handleSubmit = React.useCallback(
+    async (event: React.FormEvent) => {
+      event.preventDefault();
+      if (!invalid) {
+        await onSubmit(value);
+        blur();
+      }
+    },
+    [blur, invalid, onSubmit, value],
+  );
+
   return (
-    <AriaInputGroup>
-      <Cell.Container>
-        <AriaLabel>
-          <Cell.InputLabel>{messages.pgettext('wireguard-settings-view', 'MTU')}</Cell.InputLabel>
-        </AriaLabel>
-        <AriaInput>
-          <Cell.AutoSizingTextInput
-            initialValue={mtu ? mtu.toString() : ''}
-            inputMode={'numeric'}
-            maxLength={4}
-            placeholder={messages.gettext('Default')}
-            onSubmitValue={onSubmit}
-            validateValue={mtuIsValid}
-            submitOnBlur={true}
-            modifyValue={removeNonNumericCharacters}
-          />
-        </AriaInput>
-      </Cell.Container>
-      <Cell.CellFooter>
-        <AriaDescription>
-          <Cell.CellFooterText>
-            {sprintf(
-              // TRANSLATORS: The hint displayed below the WireGuard MTU input field.
-              // TRANSLATORS: Available placeholders:
-              // TRANSLATORS: %(wireguard)s - Will be replaced with the string "WireGuard"
-              // TRANSLATORS: %(max)d - the maximum possible wireguard mtu value
-              // TRANSLATORS: %(min)d - the minimum possible wireguard mtu value
-              messages.pgettext(
-                'wireguard-settings-view',
-                'Set %(wireguard)s MTU value. Valid range: %(min)d - %(max)d.',
-              ),
-              {
-                wireguard: strings.wireguard,
-                min: MIN_WIREGUARD_MTU_VALUE,
-                max: MAX_WIREGUARD_MTU_VALUE,
-              },
-            )}
-          </Cell.CellFooterText>
-        </AriaDescription>
-      </Cell.CellFooter>
-    </AriaInputGroup>
+    <ListItem animation={scrollToAnchor?.animation}>
+      <ListItem.Item ref={ref}>
+        <ListItem.Content>
+          <ListItem.Label id={labelId}>
+            {
+              // TRANSLATORS: The title for the WireGuard MTU setting. MTU stands for Maximum
+              // TRANSLATORS: Transmission Unit and controls the maximum size of packets sent over
+              // TRANSLATORS: the VPN tunnel.
+              messages.pgettext('wireguard-settings-view', 'MTU')
+            }
+          </ListItem.Label>
+          <ListItem.TextField invalid={invalid} onSubmit={handleSubmit}>
+            <ListItem.TextField.Input
+              ref={inputRef}
+              value={value}
+              placeholder={messages.gettext('Default')}
+              inputMode="numeric"
+              maxLength={4}
+              aria-labelledby={labelId}
+              aria-describedby={descriptionId}
+              onBlur={handleBlur}
+              onChange={handleChange}
+            />
+          </ListItem.TextField>
+        </ListItem.Content>
+      </ListItem.Item>
+      <ListItem.Footer>
+        <ListItem.Text id={descriptionId}>
+          {sprintf(
+            // TRANSLATORS: The hint displayed below the WireGuard MTU input field.
+            // TRANSLATORS: Available placeholders:
+            // TRANSLATORS: %(wireguard)s - Will be replaced with the string "WireGuard"
+            // TRANSLATORS: %(max)d - the maximum possible wireguard mtu value
+            // TRANSLATORS: %(min)d - the minimum possible wireguard mtu value
+            messages.pgettext(
+              'wireguard-settings-view',
+              'Set %(wireguard)s MTU value. Valid range: %(min)d - %(max)d.',
+            ),
+            {
+              wireguard: strings.wireguard,
+              min: MIN_WIREGUARD_MTU_VALUE,
+              max: MAX_WIREGUARD_MTU_VALUE,
+            },
+          )}
+        </ListItem.Text>
+      </ListItem.Footer>
+    </ListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
index 8ad91f387e..7a9f70590c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
@@ -1,19 +1,20 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
+import React from 'react';
 import { sprintf } from 'sprintf-js';
-import styled from 'styled-components';
 
 import { Constraint, ObfuscationType } from '../../../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../../../shared/gettext';
 import { RoutePath } from '../../../../../../shared/routes';
 import { useAppContext } from '../../../../../context';
+import { useScrollToListItem } from '../../../../../hooks';
+import { Text } from '../../../../../lib/components';
+import { FlexColumn } from '../../../../../lib/components/flex-column';
+import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useSelector } from '../../../../../redux/store';
-import { AriaInputGroup } from '../../../../AriaGroup';
-import Selector, { SelectorItem } from '../../../../cell/Selector';
+import { DefaultListboxOption } from '../../../../default-listbox-option';
+import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
-
-const StyledSelectorContainer = styled.div({
-  flex: 0,
-});
+import { SplitListboxOption } from '../../../../split-listbox-option';
 
 export function formatPortForSubLabel(port: Constraint<number>): string {
   return port === 'any' ? messages.gettext('Automatic') : `${port.only}`;
@@ -23,51 +24,16 @@ export function ObfuscationSettings() {
   const { setObfuscationSettings } = useAppContext();
   const obfuscationSettings = useSelector((state) => state.settings.obfuscationSettings);
 
+  const id = 'obfuscation-setting';
+  const ref = React.useRef<HTMLDivElement>(null);
+  const scrollToAnchor = useScrollToListItem(ref, id);
+
   // TRANSLATORS: Text showing currently selected port.
   // TRANSLATORS: Available placeholders:
   // TRANSLATORS: %(port)s - Can be either a number between 1 and 65535 or the text "Automatic".
   const subLabelTemplate = messages.pgettext('wireguard-settings-view', 'Port: %(port)s');
 
   const obfuscationType = obfuscationSettings.selectedObfuscation;
-  const obfuscationTypeItems: SelectorItem<ObfuscationType>[] = useMemo(
-    () => [
-      {
-        label: messages.pgettext('wireguard-settings-view', 'Shadowsocks'),
-        subLabel: sprintf(subLabelTemplate, {
-          port: formatPortForSubLabel(obfuscationSettings.shadowsocksSettings.port),
-        }),
-        value: ObfuscationType.shadowsocks,
-        details: {
-          path: RoutePath.shadowsocks,
-          ariaLabel: messages.pgettext('accessibility', 'Shadowsocks settings'),
-        },
-      },
-      {
-        label: messages.pgettext('wireguard-settings-view', 'UDP-over-TCP'),
-        subLabel: sprintf(subLabelTemplate, {
-          port: formatPortForSubLabel(obfuscationSettings.udp2tcpSettings.port),
-        }),
-        value: ObfuscationType.udp2tcp,
-        details: {
-          path: RoutePath.udpOverTcp,
-          ariaLabel: messages.pgettext('accessibility', 'UDP-over-TCP settings'),
-        },
-      },
-      {
-        label: messages.pgettext('wireguard-settings-view', 'QUIC'),
-        value: ObfuscationType.quic,
-      },
-      {
-        label: messages.gettext('Off'),
-        value: ObfuscationType.off,
-      },
-    ],
-    [
-      obfuscationSettings.shadowsocksSettings.port,
-      obfuscationSettings.udp2tcpSettings.port,
-      subLabelTemplate,
-    ],
-  );
 
   const selectObfuscationType = useCallback(
     async (value: ObfuscationType) => {
@@ -80,12 +46,19 @@ export function ObfuscationSettings() {
   );
 
   return (
-    <AriaInputGroup>
-      <StyledSelectorContainer>
-        <Selector
-          // TRANSLATORS: The title for the WireGuard obfuscation selector.
-          title={messages.pgettext('wireguard-settings-view', 'Obfuscation')}
-          details={
+    <Listbox
+      onValueChange={selectObfuscationType}
+      value={obfuscationType}
+      animation={scrollToAnchor?.animation}>
+      <Listbox.Item ref={ref}>
+        <Listbox.Content>
+          <Listbox.Label>
+            {
+              // TRANSLATORS: The title for the WireGuard obfuscation selector.
+              messages.pgettext('wireguard-settings-view', 'Obfuscation')
+            }
+          </Listbox.Label>
+          <InfoButton>
             <ModalMessage>
               {
                 // TRANSLATORS: Describes what WireGuard obfuscation does, how it works and when
@@ -96,14 +69,56 @@ export function ObfuscationSettings() {
                 )
               }
             </ModalMessage>
-          }
-          items={obfuscationTypeItems}
-          value={obfuscationType}
-          onSelect={selectObfuscationType}
-          automaticValue={ObfuscationType.auto}
-          automaticTestId="automatic-obfuscation"
-        />
-      </StyledSelectorContainer>
-    </AriaInputGroup>
+          </InfoButton>
+        </Listbox.Content>
+      </Listbox.Item>
+      <Listbox.Options>
+        <DefaultListboxOption value={ObfuscationType.auto} data-testid="automatic-obfuscation">
+          {messages.gettext('Automatic')}
+        </DefaultListboxOption>
+        <SplitListboxOption value={ObfuscationType.shadowsocks}>
+          <SplitListboxOption.Item>
+            <FlexColumn>
+              <Listbox.Option.Label>
+                {messages.pgettext('wireguard-settings-view', 'Shadowsocks')}
+              </Listbox.Option.Label>
+              <Text variant="labelTiny" color="whiteAlpha60">
+                {sprintf(subLabelTemplate, {
+                  port: formatPortForSubLabel(obfuscationSettings.shadowsocksSettings.port),
+                })}
+              </Text>
+            </FlexColumn>
+          </SplitListboxOption.Item>
+          <SplitListboxOption.NavigateButton
+            to={RoutePath.shadowsocks}
+            aria-description={messages.pgettext('accessibility', 'Shadowsocks settings')}
+          />
+        </SplitListboxOption>
+        <SplitListboxOption value={ObfuscationType.udp2tcp}>
+          <SplitListboxOption.Item>
+            <FlexColumn>
+              <Listbox.Option.Label>
+                {messages.pgettext('wireguard-settings-view', 'UDP-over-TCP')}
+              </Listbox.Option.Label>
+              <Text variant="labelTiny" color="whiteAlpha60">
+                {sprintf(subLabelTemplate, {
+                  port: formatPortForSubLabel(obfuscationSettings.udp2tcpSettings.port),
+                })}
+              </Text>
+            </FlexColumn>
+          </SplitListboxOption.Item>
+          <SplitListboxOption.NavigateButton
+            to={RoutePath.udpOverTcp}
+            aria-description={messages.pgettext('accessibility', 'UDP-over-TCP settings')}
+          />
+        </SplitListboxOption>
+        <DefaultListboxOption value={ObfuscationType.quic}>
+          {messages.pgettext('wireguard-settings-view', 'QUIC')}
+        </DefaultListboxOption>
+        <DefaultListboxOption value={ObfuscationType.off}>
+          {messages.gettext('Off')}
+        </DefaultListboxOption>
+      </Listbox.Options>
+    </Listbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx
index c0fc48945c..79f3294c73 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx
@@ -1,16 +1,20 @@
 import { useCallback, useMemo } from 'react';
+import React from 'react';
 import { sprintf } from 'sprintf-js';
-import styled from 'styled-components';
 
 import { wrapConstraint } from '../../../../../../shared/daemon-rpc-types';
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
 import { removeNonNumericCharacters } from '../../../../../../shared/string-helpers';
 import { isInRanges } from '../../../../../../shared/utils';
+import { useScrollToListItem } from '../../../../../hooks';
+import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useRelaySettingsUpdater } from '../../../../../lib/constraint-updater';
 import { useSelector } from '../../../../../redux/store';
-import { AriaInputGroup } from '../../../../AriaGroup';
-import { SelectorItem, SelectorWithCustomItem } from '../../../../cell/Selector';
+import { SelectorItem } from '../../../../cell/Selector';
+import { DefaultListboxOption } from '../../../../default-listbox-option';
+import InfoButton from '../../../../InfoButton';
+import { InputListboxOption } from '../../../../input-listbox-option';
 import { ModalMessage } from '../../../../Modal';
 
 const WIREUGARD_UDP_PORTS = [51820, 53];
@@ -18,31 +22,45 @@ const WIREUGARD_UDP_PORTS = [51820, 53];
 function mapPortToSelectorItem(value: number): SelectorItem<number> {
   return { label: value.toString(), value };
 }
-
-const StyledSelectorContainer = styled.div({
-  flex: 0,
-});
-
 export function PortSetting() {
   const relaySettings = useSelector((state) => state.settings.relaySettings);
   const relaySettingsUpdater = useRelaySettingsUpdater();
   const allowedPortRanges = useSelector((state) => state.settings.wireguardEndpointData.portRanges);
 
+  const id = 'port-setting';
+  const ref = React.useRef<HTMLDivElement>(null);
+  const scrollToAnchor = useScrollToListItem(ref, id);
+
   const wireguardPortItems = useMemo<Array<SelectorItem<number>>>(
     () => WIREUGARD_UDP_PORTS.map(mapPortToSelectorItem),
     [],
   );
 
-  const port = useMemo(() => {
+  const selectedOption = useMemo(() => {
     const port = 'normal' in relaySettings ? relaySettings.normal.wireguard.port : 'any';
-    return port === 'any' ? null : port;
+    if (port === 'any')
+      return {
+        port: 'any',
+        value: null,
+      };
+    if (port && !WIREUGARD_UDP_PORTS.includes(port))
+      return {
+        port,
+        value: 'custom',
+      };
+    return {
+      port,
+      value: port,
+    };
   }, [relaySettings]);
 
   const setWireguardPort = useCallback(
-    async (port: number | null) => {
+    async (port: number | string | null) => {
       try {
         await relaySettingsUpdater((settings) => {
-          settings.wireguardConstraints.port = wrapConstraint(port);
+          settings.wireguardConstraints.port = wrapConstraint(
+            typeof port === 'string' ? parseInt(port) : port,
+          );
           return settings;
         });
       } catch (e) {
@@ -53,33 +71,38 @@ export function PortSetting() {
     [relaySettingsUpdater],
   );
 
-  const parseValue = useCallback((port: string) => parseInt(port), []);
-
   const validateValue = useCallback(
     (value: number) => isInRanges(value, allowedPortRanges),
     [allowedPortRanges],
   );
 
+  const validateStringValue = useCallback(
+    (value: string) => {
+      const numericValue = parseInt(value, 10);
+      if (Number.isNaN(numericValue)) return false;
+      return validateValue(numericValue);
+    },
+    [validateValue],
+  );
+
   const portRangesText = allowedPortRanges
     .map(([start, end]) => (start === end ? start : `${start}-${end}`))
     .join(', ');
 
   return (
-    <AriaInputGroup>
-      <StyledSelectorContainer>
-        <SelectorWithCustomItem
-          // TRANSLATORS: The title for the WireGuard port selector.
-          title={messages.pgettext('wireguard-settings-view', 'Port')}
-          items={wireguardPortItems}
-          value={port}
-          onSelect={setWireguardPort}
-          inputPlaceholder={messages.pgettext('wireguard-settings-view', 'Port')}
-          automaticValue={null}
-          parseValue={parseValue}
-          modifyValue={removeNonNumericCharacters}
-          validateValue={validateValue}
-          maxLength={5}
-          details={
+    <Listbox
+      value={selectedOption.value}
+      onValueChange={setWireguardPort}
+      animation={scrollToAnchor?.animation}>
+      <Listbox.Item ref={ref}>
+        <Listbox.Content>
+          <Listbox.Label>
+            {
+              // TRANSLATORS: The title for the WireGuard port selector.
+              messages.pgettext('wireguard-settings-view', 'Port')
+            }
+          </Listbox.Label>
+          <InfoButton>
             <>
               <ModalMessage>
                 {messages.pgettext(
@@ -97,9 +120,31 @@ export function PortSetting() {
                 )}
               </ModalMessage>
             </>
-          }
-        />
-      </StyledSelectorContainer>
-    </AriaInputGroup>
+          </InfoButton>
+        </Listbox.Content>
+      </Listbox.Item>
+      <Listbox.Options>
+        <DefaultListboxOption value={null}>{messages.gettext('Automatic')}</DefaultListboxOption>
+        {wireguardPortItems.map((item) => (
+          <DefaultListboxOption key={item.value} value={item.value}>
+            {item.label}
+          </DefaultListboxOption>
+        ))}
+        <InputListboxOption value="custom">
+          <InputListboxOption.Label>{messages.gettext('Custom')}</InputListboxOption.Label>
+          <InputListboxOption.Input
+            initialValue={
+              selectedOption.value === 'custom' ? selectedOption.port?.toString() : undefined
+            }
+            placeholder={messages.pgettext('wireguard-settings-view', 'Port')}
+            maxLength={5}
+            type="text"
+            inputMode="numeric"
+            validate={validateStringValue}
+            format={removeNonNumericCharacters}
+          />
+        </InputListboxOption>
+      </Listbox.Options>
+    </Listbox>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx
index f853d913a4..8b5450b66e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx
@@ -1,34 +1,22 @@
-import { useCallback, useMemo } from 'react';
-import styled from 'styled-components';
+import { useCallback } from 'react';
+import React from 'react';
 
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
+import { useScrollToListItem } from '../../../../../hooks';
+import { Listbox } from '../../../../../lib/components/listbox/Listbox';
 import { useSelector } from '../../../../../redux/store';
-import { AriaInputGroup } from '../../../../AriaGroup';
-import Selector, { SelectorItem } from '../../../../cell/Selector';
+import { DefaultListboxOption } from '../../../../default-listbox-option';
+import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
 
-const StyledSelectorContainer = styled.div({
-  flex: 0,
-});
-
 export function QuantumResistantSetting() {
   const { setWireguardQuantumResistant } = useAppContext();
   const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant);
 
-  const items: SelectorItem<boolean>[] = useMemo(
-    () => [
-      {
-        label: messages.gettext('On'),
-        value: true,
-      },
-      {
-        label: messages.gettext('Off'),
-        value: false,
-      },
-    ],
-    [],
-  );
+  const id = 'quantum-resistant-setting';
+  const ref = React.useRef<HTMLDivElement>(null);
+  const scrollToListItem = useScrollToListItem(ref, id);
 
   const selectQuantumResistant = useCallback(
     async (quantumResistant: boolean | null) => {
@@ -38,16 +26,21 @@ export function QuantumResistantSetting() {
   );
 
   return (
-    <AriaInputGroup>
-      <StyledSelectorContainer>
-        <Selector
-          title={
-            // TRANSLATORS: The title for the WireGuard quantum resistance selector. This setting
-            // TRANSLATORS: makes the cryptography resistant to the future abilities of quantum
-            // TRANSLATORS: computers.
-            messages.pgettext('wireguard-settings-view', 'Quantum-resistant tunnel')
-          }
-          details={
+    <Listbox
+      animation={scrollToListItem?.animation}
+      value={quantumResistant ?? null}
+      onValueChange={selectQuantumResistant}>
+      <Listbox.Item ref={ref}>
+        <Listbox.Content>
+          <Listbox.Label>
+            {
+              // TRANSLATORS: The title for the WireGuard quantum resistance selector. This setting
+              // TRANSLATORS: makes the cryptography resistant to the future abilities of quantum
+              // TRANSLATORS: computers.
+              messages.pgettext('wireguard-settings-view', 'Quantum-resistant tunnel')
+            }
+          </Listbox.Label>
+          <InfoButton>
             <>
               <ModalMessage>
                 {messages.pgettext(
@@ -62,13 +55,14 @@ export function QuantumResistantSetting() {
                 )}
               </ModalMessage>
             </>
-          }
-          items={items}
-          value={quantumResistant ?? null}
-          onSelect={selectQuantumResistant}
-          automaticValue={null}
-        />
-      </StyledSelectorContainer>
-    </AriaInputGroup>
+          </InfoButton>
+        </Listbox.Content>
+      </Listbox.Item>
+      <Listbox.Options>
+        <DefaultListboxOption value={null}>{messages.gettext('Automatic')}</DefaultListboxOption>
+        <DefaultListboxOption value={true}>{messages.gettext('On')}</DefaultListboxOption>
+        <DefaultListboxOption value={false}>{messages.gettext('Off')}</DefaultListboxOption>
+      </Listbox.Options>
+    </Listbox>
   );
 }