Add and use anchor id type

5 files changed, 23 insertions, 14 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx
index 89abfa35a8..6fc8fffbb5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx
@@ -13,10 +13,7 @@ export function TransportProtocolSetting() {
   const relaySettingsUpdater = useRelaySettingsUpdater();
   const relaySettings = useSelector((state) => state.settings.relaySettings);
   const bridgeState = useSelector((state) => state.settings.bridgeState);
-
-  const id = 'transport-protocol-setting';
-  const ref = React.useRef<HTMLDivElement>(null);
-  const scrollToListItem = useScrollToListItem(ref, id);
+  const scrollToListItem = useScrollToListItem();
 
   const descriptionId = React.useId();
 
@@ -38,7 +35,7 @@ export function TransportProtocolSetting() {
 
   return (
     <Listbox animation={scrollToListItem?.animation} value={protocol} onValueChange={onSelect}>
-      <Listbox.Item ref={ref}>
+      <Listbox.Item>
         <Listbox.Content>
           <Listbox.Label>
             {messages.pgettext('openvpn-settings-view', 'Transport protocol')}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx
index c441d58fb3..15626f7a88 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
@@ -12,9 +12,7 @@ import { ToggleListItem } from '../../../../toggle-list-item';
 export function EnableIpv6Setting() {
   const enableIpv6 = useSelector((state) => state.settings.enableIpv6);
   const { setEnableIpv6: setEnableIpv6Impl } = useAppContext();
-  const id = 'enable-ipv6-setting';
-  const ref = useRef<HTMLDivElement>(null);
-  const scrollToAnchor = useScrollToListItem(ref, id);
+  const scrollToAnchor = useScrollToListItem();
 
   const setEnableIpv6 = useCallback(
     async (enableIpv6: boolean) => {
@@ -30,7 +28,6 @@ export function EnableIpv6Setting() {
 
   return (
     <ToggleListItem
-      ref={ref}
       animation={scrollToAnchor?.animation}
       checked={enableIpv6}
       onCheckedChange={setEnableIpv6}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
index 8e23e70021..fa52864e29 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
@@ -24,8 +24,7 @@ export function TunnelProtocolSetting() {
   const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant);
   const openVpnDisabled = daita || multihop || quantumResistant;
 
-  const id = 'tunnel-protocol-setting';
-  const scrollToAnchor = useScrollToListItem(undefined, id);
+  const scrollToAnchor = useScrollToListItem();
 
   const featuresToDisableForOpenVpn = [];
   if (daita) {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
index 63e9cdc0c7..b4acae7e58 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
@@ -1,10 +1,11 @@
+import { ScrollToAnchorId } from '../../shared/ipc-types';
 import { ListItemAnimation } from '../lib/components/list-item';
 import { useHistory } from '../lib/history';
 import { useScrollToReference } from '.';
 
 export const useScrollToListItem = (
   ref?: React.RefObject<HTMLDivElement | null>,
-  id?: string,
+  id?: ScrollToAnchorId,
 ):
   | {
       animation: ListItemAnimation;
diff --git a/desktop/packages/mullvad-vpn/src/shared/ipc-types.ts b/desktop/packages/mullvad-vpn/src/shared/ipc-types.ts
index d316caf377..bf8fa6996e 100644
--- a/desktop/packages/mullvad-vpn/src/shared/ipc-types.ts
+++ b/desktop/packages/mullvad-vpn/src/shared/ipc-types.ts
@@ -17,9 +17,24 @@ export type SuppressOutdatedVersionOption = {
   type: 'suppress-outdated-version-warning';
 };
 
+export type ScrollToAnchorId =
+  | 'daita-enable-setting'
+  | 'multihop-setting'
+  | 'custom-dns-settings'
+  | 'allow-lan-setting'
+  | 'lockdown-mode-setting'
+  | 'dns-blocker-setting'
+  | 'mtu-setting'
+  | 'obfuscation-setting'
+  | 'port-setting'
+  | 'bridge-mode-setting'
+  | 'mss-fix-setting'
+  | 'quantum-resistant-setting'
+  | 'tunnel-protocol-setting';
+
 export type ScrollToAnchorOption = {
   type: 'scroll-to-anchor';
-  id: string;
+  id: ScrollToAnchorId;
 };
 
 export type LocationStateOptions = SuppressOutdatedVersionOption | ScrollToAnchorOption;