Display current device separated at top of device list

4 files changed, 34 insertions, 3 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx
index b13e201737..93186de4a5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list-item/DeviceListItem.tsx
@@ -1,4 +1,5 @@
 import { sprintf } from 'sprintf-js';
+import styled, { css } from 'styled-components';
 
 import { IDevice } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
@@ -6,6 +7,7 @@ import { capitalizeEveryWord } from '../../../shared/string-helpers';
 import { IconButton, Text } from '../../lib/components';
 import { FlexColumn } from '../../lib/components/flex-column';
 import { ListItem, ListItemProps } from '../../lib/components/list-item';
+import { spacings } from '../../lib/foundations';
 import { useBoolean } from '../../lib/utility-hooks';
 import { DeviceListItemProvider, useDeviceListItemContext } from './';
 import { ConfirmDialog, ErrorDialog } from './components';
@@ -15,6 +17,19 @@ export type SettingsToggleListItemProps = {
   device: IDevice;
 } & Omit<ListItemProps, 'children'>;
 
+const StyledListItem = styled(ListItem)<{ $isCurrentDevice: boolean }>(
+  ({ $isCurrentDevice }) => css`
+    ${() => {
+      if ($isCurrentDevice) {
+        return css`
+          margin-bottom: ${spacings.medium};
+        `;
+      }
+      return null;
+    }}
+  `,
+);
+
 function DeviceListItemInner({ ...props }: Omit<SettingsToggleListItemProps, 'device'>) {
   const { device, deleting, showConfirmDialog, confirmDialogVisible, error } =
     useDeviceListItemContext();
@@ -24,7 +39,7 @@ function DeviceListItemInner({ ...props }: Omit<SettingsToggleListItemProps, 'de
 
   return (
     <>
-      <ListItem disabled={deleting} {...props}>
+      <StyledListItem disabled={deleting} $isCurrentDevice={isCurrentDevice} {...props}>
         <ListItem.Item>
           <ListItem.Content>
             <FlexColumn>
@@ -68,7 +83,7 @@ function DeviceListItemInner({ ...props }: Omit<SettingsToggleListItemProps, 'de
             </ListItem.Group>
           </ListItem.Content>
         </ListItem.Item>
-      </ListItem>
+      </StyledListItem>
       <ConfirmDialog isOpen={confirmDialogVisible} />
       <ErrorDialog isOpen={error} />
     </>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts
index 1dfb60199c..1ada24c505 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts
@@ -1 +1,2 @@
 export * from './use-get-devices';
+export * from './use-sorted-devices';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts
index 1016f8f37f..84236ac8fb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts
@@ -2,11 +2,12 @@ import React from 'react';
 
 import { useAppContext } from '../../../../context';
 import { useSelector } from '../../../../redux/store';
+import { useSortedDevices } from './use-sorted-devices';
 
 export const useGetDevices = () => {
   const { fetchDevices } = useAppContext();
   const accountNumber = useSelector((state) => state.account.accountNumber)!;
-  const devices = useSelector((state) => state.account.devices);
+  const devices = useSortedDevices();
 
   React.useEffect(() => {
     try {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-sorted-devices.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-sorted-devices.ts
new file mode 100644
index 0000000000..e364188191
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-sorted-devices.ts
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { useSelector } from '../../../../redux/store';
+
+export const useSortedDevices = () => {
+  const devices = useSelector((state) => state.account.devices);
+  const currentDeviceName = useSelector((state) => state.account.deviceName);
+  return React.useMemo(() => {
+    const currentDevice = devices.find((device) => device.name === currentDeviceName);
+    if (!currentDevice) return devices;
+
+    return [currentDevice, ...devices.filter((device) => device.name !== currentDeviceName)];
+  }, [currentDeviceName, devices]);
+};