Move settings view components to separate folders

22 files changed, 252 insertions, 171 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/SettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/SettingsView.tsx
index c51022d7e6..9f5c4375a6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/SettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/SettingsView.tsx
@@ -1,21 +1,27 @@
 import styled from 'styled-components';
 
-import { strings } from '../../../../shared/constants';
 import { messages } from '../../../../shared/gettext';
-import { useAppContext } from '../../../context';
-import { Button, Flex, Icon, TitleBig } from '../../../lib/components';
-import { Dot } from '../../../lib/components/dot';
-import { ListItem } from '../../../lib/components/list-item';
+import { Flex, TitleBig } from '../../../lib/components';
 import { spacings } from '../../../lib/foundations';
 import { useHistory } from '../../../lib/history';
-import { RoutePath } from '../../../lib/routes';
 import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../../';
 import { measurements } from '../../common-styles';
 import { BackAction } from '../../KeyboardNavigation';
 import { SettingsContainer, SettingsNavigationScrollbars } from '../../Layout';
 import { NavigationContainer } from '../../NavigationContainer';
-import { NavigationListItem } from '../../NavigationListItem';
+import {
+  ApiAccessMethodsListItem,
+  AppInfoListItem,
+  DaitaListItem,
+  DebugListItem,
+  MultihopListItem,
+  QuitButton,
+  SplitTunnelingListItem,
+  SupportListItem,
+  UserInterfaceSettingsListItem,
+  VpnSettingsListItem,
+} from './components';
 
 export const Title = styled(TitleBig)`
   margin: 0 ${spacings.medium} ${spacings.medium};
@@ -68,14 +74,14 @@ export function SettingsView() {
                 <UserInterfaceSettingsListItem />
               )}
 
-              <ApiAccessMethodsButton />
+              <ApiAccessMethodsListItem />
 
               <Flex $flexDirection="column">
                 <SupportListItem />
                 <AppInfoListItem />
               </Flex>
 
-              {window.env.development && <DebugButton />}
+              {window.env.development && <DebugListItem />}
             </Flex>
             <Footer>
               <QuitButton />
@@ -86,165 +92,3 @@ export function SettingsView() {
     </BackAction>
   );
 }
-
-function UserInterfaceSettingsListItem() {
-  return (
-    <NavigationListItem to={RoutePath.userInterfaceSettings}>
-      <ListItem.Label>
-        {
-          // TRANSLATORS: Navigation button to the 'User interface settings' view
-          messages.pgettext('settings-view', 'User interface settings')
-        }
-      </ListItem.Label>
-      <Icon icon="chevron-right" />
-    </NavigationListItem>
-  );
-}
-
-function MultihopListItem() {
-  const relaySettings = useSelector((state) => state.settings.relaySettings);
-  const multihop = 'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false;
-  const unavailable =
-    'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
-
-  return (
-    <NavigationListItem to={RoutePath.multihopSettings}>
-      <ListItem.Label>{messages.pgettext('settings-view', 'Multihop')}</ListItem.Label>
-      <ListItem.Group>
-        <ListItem.Text>
-          {multihop && !unavailable ? messages.gettext('On') : messages.gettext('Off')}
-        </ListItem.Text>
-        <Icon icon="chevron-right" />
-      </ListItem.Group>
-    </NavigationListItem>
-  );
-}
-
-function DaitaListItem() {
-  const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
-  const relaySettings = useSelector((state) => state.settings.relaySettings);
-  const unavailable =
-    'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
-
-  return (
-    <NavigationListItem to={RoutePath.daitaSettings}>
-      <ListItem.Label>{strings.daita}</ListItem.Label>
-      <ListItem.Group>
-        <ListItem.Text>
-          {daita && !unavailable ? messages.gettext('On') : messages.gettext('Off')}
-        </ListItem.Text>
-        <Icon icon="chevron-right" />
-      </ListItem.Group>
-    </NavigationListItem>
-  );
-}
-
-function VpnSettingsListItem() {
-  return (
-    <NavigationListItem to={RoutePath.vpnSettings}>
-      <ListItem.Label>
-        {
-          // TRANSLATORS: Navigation button to the 'VPN settings' view
-          messages.pgettext('settings-view', 'VPN settings')
-        }
-      </ListItem.Label>
-      <Icon icon="chevron-right" />
-    </NavigationListItem>
-  );
-}
-
-function SplitTunnelingListItem() {
-  return (
-    <NavigationListItem to={RoutePath.splitTunneling}>
-      <ListItem.Label>{strings.splitTunneling}</ListItem.Label>
-      <Icon icon="chevron-right" />
-    </NavigationListItem>
-  );
-}
-
-function ApiAccessMethodsButton() {
-  return (
-    <NavigationListItem to={RoutePath.apiAccessMethods}>
-      <ListItem.Label>
-        {
-          // TRANSLATORS: Navigation button to the 'API access methods' view
-          messages.pgettext('settings-view', 'API access')
-        }
-      </ListItem.Label>
-      <Icon icon="chevron-right" />
-    </NavigationListItem>
-  );
-}
-
-const StyledText = styled(ListItem.Text)`
-  margin-top: -4px;
-`;
-
-function AppInfoListItem() {
-  const appVersion = useSelector((state) => state.version.current);
-  const suggestedUpgrade = useSelector((state) => state.version.suggestedUpgrade);
-
-  return (
-    <NavigationListItem to={RoutePath.appInfo}>
-      <Flex $flexDirection="column">
-        <ListItem.Label>
-          {
-            // TRANSLATORS: Navigation button to the 'App info' view
-            messages.pgettext('settings-view', 'App info')
-          }
-        </ListItem.Label>
-        {suggestedUpgrade && (
-          <StyledText variant="footnoteMini">
-            {
-              // TRANSLATORS: Label for the app info list item indicating that an update is available and can be downloaded
-              messages.pgettext('settings-view', 'Update available')
-            }
-          </StyledText>
-        )}
-      </Flex>
-      <ListItem.Group>
-        <ListItem.Text>{appVersion}</ListItem.Text>
-        {suggestedUpgrade && <Dot variant="warning" size="small" />}
-        <Icon icon="chevron-right" />
-      </ListItem.Group>
-    </NavigationListItem>
-  );
-}
-
-function SupportListItem() {
-  return (
-    <NavigationListItem to={RoutePath.support}>
-      <ListItem.Label>
-        {
-          // TRANSLATORS: Navigation button to the 'Support' view
-          messages.pgettext('settings-view', 'Support')
-        }
-      </ListItem.Label>
-      <Icon icon="chevron-right" />
-    </NavigationListItem>
-  );
-}
-
-function DebugButton() {
-  return (
-    <NavigationListItem to={RoutePath.debug}>
-      <ListItem.Label>Developer tools</ListItem.Label>
-      <Icon icon="chevron-right" />
-    </NavigationListItem>
-  );
-}
-
-function QuitButton() {
-  const { quit } = useAppContext();
-  const tunnelState = useSelector((state) => state.connection.status);
-
-  return (
-    <Button variant="destructive" onClick={quit}>
-      <Button.Text>
-        {tunnelState.state === 'disconnected'
-          ? messages.gettext('Quit')
-          : messages.gettext('Disconnect & quit')}
-      </Button.Text>
-    </Button>
-  );
-}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx
new file mode 100644
index 0000000000..d9ad5d9ed8
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/ApiAccessMethodsListItem.tsx
@@ -0,0 +1,19 @@
+import { messages } from '../../../../../../shared/gettext';
+import { Icon } from '../../../../../lib/components';
+import { ListItem } from '../../../../../lib/components/list-item';
+import { RoutePath } from '../../../../../lib/routes';
+import { NavigationListItem } from '../../../../NavigationListItem';
+
+export function ApiAccessMethodsListItem() {
+  return (
+    <NavigationListItem to={RoutePath.apiAccessMethods}>
+      <ListItem.Label>
+        {
+          // TRANSLATORS: Navigation button to the 'API access methods' view
+          messages.pgettext('settings-view', 'API access')
+        }
+      </ListItem.Label>
+      <Icon icon="chevron-right" />
+    </NavigationListItem>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/index.ts
new file mode 100644
index 0000000000..2665f013bd
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/api-access-methods-list-item/index.ts
@@ -0,0 +1 @@
+export * from './ApiAccessMethodsListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx
new file mode 100644
index 0000000000..93737617fd
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/AppInfoListItem.tsx
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+import { messages } from '../../../../../../shared/gettext';
+import { Flex, Icon } from '../../../../../lib/components';
+import { Dot } from '../../../../../lib/components/dot';
+import { ListItem } from '../../../../../lib/components/list-item';
+import { RoutePath } from '../../../../../lib/routes';
+import { useSelector } from '../../../../../redux/store';
+import { NavigationListItem } from '../../../../NavigationListItem';
+
+const StyledText = styled(ListItem.Text)`
+  margin-top: -4px;
+`;
+
+export function AppInfoListItem() {
+  const appVersion = useSelector((state) => state.version.current);
+  const suggestedUpgrade = useSelector((state) => state.version.suggestedUpgrade);
+
+  return (
+    <NavigationListItem to={RoutePath.appInfo}>
+      <Flex $flexDirection="column">
+        <ListItem.Label>
+          {
+            // TRANSLATORS: Navigation button to the 'App info' view
+            messages.pgettext('settings-view', 'App info')
+          }
+        </ListItem.Label>
+        {suggestedUpgrade && (
+          <StyledText variant="footnoteMini">
+            {
+              // TRANSLATORS: Label for the app info list item indicating that an update is available and can be downloaded
+              messages.pgettext('settings-view', 'Update available')
+            }
+          </StyledText>
+        )}
+      </Flex>
+      <ListItem.Group>
+        <ListItem.Text>{appVersion}</ListItem.Text>
+        {suggestedUpgrade && <Dot variant="warning" size="small" />}
+        <Icon icon="chevron-right" />
+      </ListItem.Group>
+    </NavigationListItem>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/index.ts
new file mode 100644
index 0000000000..00f4bab0ac
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/app-info-list-item/index.ts
@@ -0,0 +1 @@
+export * from './AppInfoListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx
new file mode 100644
index 0000000000..cf9676b750
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/DaitaListItem.tsx
@@ -0,0 +1,26 @@
+import { strings } from '../../../../../../shared/constants';
+import { messages } from '../../../../../../shared/gettext';
+import { Icon } from '../../../../../lib/components';
+import { ListItem } from '../../../../../lib/components/list-item';
+import { RoutePath } from '../../../../../lib/routes';
+import { useSelector } from '../../../../../redux/store';
+import { NavigationListItem } from '../../../../NavigationListItem';
+
+export function DaitaListItem() {
+  const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
+  const relaySettings = useSelector((state) => state.settings.relaySettings);
+  const unavailable =
+    'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
+
+  return (
+    <NavigationListItem to={RoutePath.daitaSettings}>
+      <ListItem.Label>{strings.daita}</ListItem.Label>
+      <ListItem.Group>
+        <ListItem.Text>
+          {daita && !unavailable ? messages.gettext('On') : messages.gettext('Off')}
+        </ListItem.Text>
+        <Icon icon="chevron-right" />
+      </ListItem.Group>
+    </NavigationListItem>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/index.ts
new file mode 100644
index 0000000000..849e42f7e2
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/daita-list-item/index.ts
@@ -0,0 +1 @@
+export * from './DaitaListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx
new file mode 100644
index 0000000000..afecdc7be7
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/DebugListItem.tsx
@@ -0,0 +1,13 @@
+import { Icon } from '../../../../../lib/components';
+import { ListItem } from '../../../../../lib/components/list-item';
+import { RoutePath } from '../../../../../lib/routes';
+import { NavigationListItem } from '../../../../NavigationListItem';
+
+export function DebugListItem() {
+  return (
+    <NavigationListItem to={RoutePath.debug}>
+      <ListItem.Label>Developer tools</ListItem.Label>
+      <Icon icon="chevron-right" />
+    </NavigationListItem>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/index.ts
new file mode 100644
index 0000000000..1b6e1dd98c
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/debug-list-item/index.ts
@@ -0,0 +1 @@
+export * from './DebugListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/index.ts
new file mode 100644
index 0000000000..ed410c10ca
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/index.ts
@@ -0,0 +1,10 @@
+export * from './api-access-methods-list-item';
+export * from './app-info-list-item';
+export * from './daita-list-item';
+export * from './debug-list-item';
+export * from './multihop-list-item';
+export * from './quit-button';
+export * from './split-tunneling-list-item';
+export * from './support-list-item';
+export * from './user-interface-settings-list-item';
+export * from './vpn-settings-list-item';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx
new file mode 100644
index 0000000000..351b78d536
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/MultihopListItem.tsx
@@ -0,0 +1,25 @@
+import { messages } from '../../../../../../shared/gettext';
+import { Icon } from '../../../../../lib/components';
+import { ListItem } from '../../../../../lib/components/list-item';
+import { RoutePath } from '../../../../../lib/routes';
+import { useSelector } from '../../../../../redux/store';
+import { NavigationListItem } from '../../../../NavigationListItem';
+
+export function MultihopListItem() {
+  const relaySettings = useSelector((state) => state.settings.relaySettings);
+  const multihop = 'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false;
+  const unavailable =
+    'normal' in relaySettings ? relaySettings.normal.tunnelProtocol === 'openvpn' : true;
+
+  return (
+    <NavigationListItem to={RoutePath.multihopSettings}>
+      <ListItem.Label>{messages.pgettext('settings-view', 'Multihop')}</ListItem.Label>
+      <ListItem.Group>
+        <ListItem.Text>
+          {multihop && !unavailable ? messages.gettext('On') : messages.gettext('Off')}
+        </ListItem.Text>
+        <Icon icon="chevron-right" />
+      </ListItem.Group>
+    </NavigationListItem>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/index.ts
new file mode 100644
index 0000000000..685db63327
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/multihop-list-item/index.ts
@@ -0,0 +1 @@
+export * from './MultihopListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/QuitButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/QuitButton.tsx
new file mode 100644
index 0000000000..1c2c450537
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/QuitButton.tsx
@@ -0,0 +1,19 @@
+import { messages } from '../../../../../../shared/gettext';
+import { useAppContext } from '../../../../../context';
+import { Button } from '../../../../../lib/components';
+import { useSelector } from '../../../../../redux/store';
+
+export function QuitButton() {
+  const { quit } = useAppContext();
+  const tunnelState = useSelector((state) => state.connection.status);
+
+  return (
+    <Button variant="destructive" onClick={quit}>
+      <Button.Text>
+        {tunnelState.state === 'disconnected'
+          ? messages.gettext('Quit')
+          : messages.gettext('Disconnect & quit')}
+      </Button.Text>
+    </Button>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/index.ts
new file mode 100644
index 0000000000..776a8dc589
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/quit-button/index.ts
@@ -0,0 +1 @@
+export * from './QuitButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx
new file mode 100644
index 0000000000..795525776a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/SplitTunnelingListItem.tsx
@@ -0,0 +1,14 @@
+import { strings } from '../../../../../../shared/constants';
+import { Icon } from '../../../../../lib/components';
+import { ListItem } from '../../../../../lib/components/list-item';
+import { RoutePath } from '../../../../../lib/routes';
+import { NavigationListItem } from '../../../../NavigationListItem';
+
+export function SplitTunnelingListItem() {
+  return (
+    <NavigationListItem to={RoutePath.splitTunneling}>
+      <ListItem.Label>{strings.splitTunneling}</ListItem.Label>
+      <Icon icon="chevron-right" />
+    </NavigationListItem>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/index.ts
new file mode 100644
index 0000000000..e531a0b5f6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/split-tunneling-list-item/index.ts
@@ -0,0 +1 @@
+export * from './SplitTunnelingListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx
new file mode 100644
index 0000000000..562f8436a4
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/SupportListItem.tsx
@@ -0,0 +1,19 @@
+import { messages } from '../../../../../../shared/gettext';
+import { Icon } from '../../../../../lib/components';
+import { ListItem } from '../../../../../lib/components/list-item';
+import { RoutePath } from '../../../../../lib/routes';
+import { NavigationListItem } from '../../../../NavigationListItem';
+
+export function SupportListItem() {
+  return (
+    <NavigationListItem to={RoutePath.support}>
+      <ListItem.Label>
+        {
+          // TRANSLATORS: Navigation button to the 'Support' view
+          messages.pgettext('settings-view', 'Support')
+        }
+      </ListItem.Label>
+      <Icon icon="chevron-right" />
+    </NavigationListItem>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/index.ts
new file mode 100644
index 0000000000..f7f980b220
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/support-list-item/index.ts
@@ -0,0 +1 @@
+export * from './SupportListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx
new file mode 100644
index 0000000000..4aa8e5bb53
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/UserInterfaceSettingsListItem.tsx
@@ -0,0 +1,19 @@
+import { messages } from '../../../../../../shared/gettext';
+import { Icon } from '../../../../../lib/components';
+import { ListItem } from '../../../../../lib/components/list-item';
+import { RoutePath } from '../../../../../lib/routes';
+import { NavigationListItem } from '../../../../NavigationListItem';
+
+export function UserInterfaceSettingsListItem() {
+  return (
+    <NavigationListItem to={RoutePath.userInterfaceSettings}>
+      <ListItem.Label>
+        {
+          // TRANSLATORS: Navigation button to the 'User interface settings' view
+          messages.pgettext('settings-view', 'User interface settings')
+        }
+      </ListItem.Label>
+      <Icon icon="chevron-right" />
+    </NavigationListItem>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/index.ts
new file mode 100644
index 0000000000..f5168d5f9e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/user-interface-settings-list-item/index.ts
@@ -0,0 +1 @@
+export * from './UserInterfaceSettingsListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx
new file mode 100644
index 0000000000..4af9576bf5
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/VpnSettingsListItem.tsx
@@ -0,0 +1,19 @@
+import { messages } from '../../../../../../shared/gettext';
+import { Icon } from '../../../../../lib/components';
+import { ListItem } from '../../../../../lib/components/list-item';
+import { RoutePath } from '../../../../../lib/routes';
+import { NavigationListItem } from '../../../../NavigationListItem';
+
+export function VpnSettingsListItem() {
+  return (
+    <NavigationListItem to={RoutePath.vpnSettings}>
+      <ListItem.Label>
+        {
+          // TRANSLATORS: Navigation button to the 'VPN settings' view
+          messages.pgettext('settings-view', 'VPN settings')
+        }
+      </ListItem.Label>
+      <Icon icon="chevron-right" />
+    </NavigationListItem>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/index.ts
new file mode 100644
index 0000000000..737115424d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/settings/components/vpn-settings-list-item/index.ts
@@ -0,0 +1 @@
+export * from './VpnSettingsListItem';