@oxyhq/services 5.3.5 → 5.3.6

package/lib/module/ui/screens/AccountSwitcherScreen.js

@@ -1,11 +1,11 @@
 "use strict";
 
 import React, { useState, useEffect } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Alert, Platform, Dimensions } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Alert, Image, Dimensions } from 'react-native';
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const AccountSwitcherScreen = ({
+const ModernAccountSwitcherScreen = ({
   onClose,
   theme,
   navigate,
@@ -21,11 +21,16 @@ const AccountSwitcherScreen = ({
     logoutAll,
     isLoading
   } = useOxy();
-  const [allDeviceSessions, setAllDeviceSessions] = useState([]);
-  const [loadingDeviceSessions, setLoadingDeviceSessions] = useState(false);
+  const [sessionsWithUsers, setSessionsWithUsers] = useState([]);
   const [switchingToUserId, setSwitchingToUserId] = useState(null);
   const [removingUserId, setRemovingUserId] = useState(null);
-  const [showRemoteDevices, setShowRemoteDevices] = useState(false);
+
+  // Device session management state
+  const [showDeviceManagement, setShowDeviceManagement] = useState(false);
+  const [deviceSessions, setDeviceSessions] = useState([]);
+  const [loadingDeviceSessions, setLoadingDeviceSessions] = useState(false);
+  const [remotingLogoutSessionId, setRemoteLogoutSessionId] = useState(null);
+  const [loggingOutAllDevices, setLoggingOutAllDevices] = useState(false);
   const screenWidth = Dimensions.get('window').width;
   const isDarkTheme = theme === 'dark';
 
@@ -44,36 +49,38 @@ const AccountSwitcherScreen = ({
     shadow: isDarkTheme ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)'
   };
 
-  // Load all device sessions for remote management
-  const loadAllDeviceSessions = async () => {
-    if (!activeSessionId || !oxyServices) return;
-    setLoadingDeviceSessions(true);
-    try {
-      const allSessions = await oxyServices.getSessionsBySessionId(activeSessionId);
-      const deviceSessions = allSessions.map(session => ({
-        sessionId: session.sessionId,
-        deviceId: session.deviceId,
-        deviceName: session.deviceName || 'Unknown Device',
-        isActive: session.isActive,
-        lastActive: session.lastActive || new Date().toISOString(),
-        expiresAt: session.expiresAt || new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
-        isCurrent: session.sessionId === activeSessionId
+  // Load user profiles for sessions
+  useEffect(() => {
+    const loadUserProfiles = async () => {
+      if (!sessions.length || !oxyServices) return;
+      const updatedSessions = sessions.map(session => ({
+        ...session,
+        isLoadingProfile: true
       }));
-      setAllDeviceSessions(deviceSessions);
-    } catch (error) {
-      console.error('Failed to load device sessions:', error);
-      Alert.alert('Error', 'Failed to load device sessions');
-    } finally {
-      setLoadingDeviceSessions(false);
-    }
-  };
+      setSessionsWithUsers(updatedSessions);
 
-  // Load device sessions when showing remote devices
-  useEffect(() => {
-    if (showRemoteDevices) {
-      loadAllDeviceSessions();
-    }
-  }, [showRemoteDevices, activeSessionId, oxyServices]);
+      // Load profiles for each session
+      for (let i = 0; i < sessions.length; i++) {
+        const session = sessions[i];
+        try {
+          // Try to get user profile using the session
+          const userProfile = await oxyServices.getUserBySession(session.sessionId);
+          setSessionsWithUsers(prev => prev.map(s => s.sessionId === session.sessionId ? {
+            ...s,
+            userProfile,
+            isLoadingProfile: false
+          } : s));
+        } catch (error) {
+          console.error(`Failed to load profile for session ${session.sessionId}:`, error);
+          setSessionsWithUsers(prev => prev.map(s => s.sessionId === session.sessionId ? {
+            ...s,
+            isLoadingProfile: false
+          } : s));
+        }
+      }
+    };
+    loadUserProfiles();
+  }, [sessions, oxyServices]);
   const handleSwitchSession = async sessionId => {
     if (sessionId === user?.sessionId) return; // Already active session
 
@@ -92,9 +99,10 @@ const AccountSwitcherScreen = ({
     }
   };
   const handleRemoveSession = async sessionId => {
-    const sessionToRemove = sessions.find(s => s.sessionId === sessionId);
+    const sessionToRemove = sessionsWithUsers.find(s => s.sessionId === sessionId);
     if (!sessionToRemove) return;
-    Alert.alert('Remove Account', `Are you sure you want to remove this session from this device? You'll need to sign in again to access this account.`, [{
+    const displayName = typeof sessionToRemove.userProfile?.name === 'object' ? sessionToRemove.userProfile.name.full || sessionToRemove.userProfile.name.first || sessionToRemove.userProfile.username : sessionToRemove.userProfile?.name || sessionToRemove.userProfile?.username || 'this account';
+    Alert.alert('Remove Account', `Are you sure you want to remove ${displayName} from this device? You'll need to sign in again to access this account.`, [{
       text: 'Cancel',
       style: 'cancel'
     }, {
@@ -139,22 +147,41 @@ const AccountSwitcherScreen = ({
       cancelable: true
     });
   };
+
+  // Device session management functions
+  const loadAllDeviceSessions = async () => {
+    if (!oxyServices || !user?.sessionId) return;
+    setLoadingDeviceSessions(true);
+    try {
+      // This would call the API to get all device sessions for the current user
+      const allSessions = await oxyServices.getDeviceSessions(user.sessionId);
+      setDeviceSessions(allSessions || []);
+    } catch (error) {
+      console.error('Failed to load device sessions:', error);
+      Alert.alert('Error', 'Failed to load device sessions. Please try again.');
+    } finally {
+      setLoadingDeviceSessions(false);
+    }
+  };
   const handleRemoteSessionLogout = async (sessionId, deviceName) => {
-    Alert.alert('Logout Remote Session', `Are you sure you want to logout from "${deviceName}"?`, [{
+    Alert.alert('Remove Device Session', `Are you sure you want to sign out from "${deviceName}"? This will end the session on that device.`, [{
       text: 'Cancel',
       style: 'cancel'
     }, {
-      text: 'Logout',
+      text: 'Sign Out',
       style: 'destructive',
       onPress: async () => {
+        setRemoteLogoutSessionId(sessionId);
         try {
-          await oxyServices.logoutSecureSession(activeSessionId, sessionId);
-          Alert.alert('Success', 'Remote session logged out successfully!');
-          // Refresh the device sessions list
+          await oxyServices?.logoutSecureSession(user?.sessionId || '', sessionId);
+          // Refresh device sessions list
           await loadAllDeviceSessions();
+          Alert.alert('Success', `Signed out from ${deviceName} successfully!`);
         } catch (error) {
           console.error('Remote logout failed:', error);
-          Alert.alert('Logout Failed', 'There was a problem logging out the remote session. Please try again.');
+          Alert.alert('Logout Failed', 'There was a problem signing out from the device. Please try again.');
+        } finally {
+          setRemoteLogoutSessionId(null);
         }
       }
     }], {
@@ -162,64 +189,182 @@ const AccountSwitcherScreen = ({
     });
   };
   const handleLogoutAllDevices = async () => {
-    Alert.alert('Logout All Devices', 'Are you sure you want to logout from all other devices? This will keep your current session active.', [{
+    const otherDevicesCount = deviceSessions.filter(session => !session.isCurrent).length;
+    if (otherDevicesCount === 0) {
+      Alert.alert('No Other Devices', 'No other device sessions found to sign out from.');
+      return;
+    }
+    Alert.alert('Sign Out All Other Devices', `Are you sure you want to sign out from all ${otherDevicesCount} other device(s)? This will end sessions on all other devices except this one.`, [{
       text: 'Cancel',
       style: 'cancel'
     }, {
-      text: 'Logout All Others',
+      text: 'Sign Out All',
       style: 'destructive',
       onPress: async () => {
+        setLoggingOutAllDevices(true);
         try {
-          await oxyServices.logoutAllDeviceSessions(activeSessionId, undefined, true);
-          Alert.alert('Success', 'All other device sessions logged out successfully!');
-          // Refresh the device sessions list
+          await oxyServices?.logoutAllDeviceSessions(user?.sessionId || '', undefined, true);
+          // Refresh device sessions list
           await loadAllDeviceSessions();
+          Alert.alert('Success', `Signed out from all other devices successfully!`);
         } catch (error) {
           console.error('Logout all devices failed:', error);
-          Alert.alert('Logout Failed', 'There was a problem logging out other devices. Please try again.');
+          Alert.alert('Logout Failed', 'There was a problem signing out from other devices. Please try again.');
+        } finally {
+          setLoggingOutAllDevices(false);
         }
       }
     }], {
       cancelable: true
     });
   };
-  const renderSessionItem = session => {
-    const isActive = session.sessionId === activeSessionId;
-    const isSwitching = switchingToUserId === session.sessionId;
-    const isRemoving = removingUserId === session.sessionId;
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.userItem, {
-        backgroundColor: isActive ? colors.activeCard : colors.surface,
-        borderColor: isActive ? colors.accent : colors.border
+  const renderDeviceSessionItem = deviceSession => {
+    const isLoggingOut = remotingLogoutSessionId === deviceSession.sessionId;
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.sessionCard, {
+        backgroundColor: deviceSession.isCurrent ? colors.activeCard : colors.card,
+        borderColor: deviceSession.isCurrent ? colors.accent : colors.border,
+        borderWidth: deviceSession.isCurrent ? 2 : 1
       }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.userInfo,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.username, {
-            color: colors.text
-          }],
-          children: isActive ? user?.username || 'Current Account' : 'Account Session'
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: [styles.email, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: ["Last active: ", new Date(session.lastActive).toLocaleDateString()]
-        }), isActive && /*#__PURE__*/_jsx(View, {
-          style: [styles.activeBadge, {
-            backgroundColor: colors.success
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.sessionHeader,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.userInfo,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: [styles.displayName, {
+              color: colors.text
+            }],
+            numberOfLines: 1,
+            children: [deviceSession.deviceName, deviceSession.isCurrent && /*#__PURE__*/_jsx(Text, {
+              style: [styles.username, {
+                color: colors.accent
+              }],
+              children: ' (This Device)'
+            })]
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: [styles.username, {
+              color: colors.secondaryText
+            }],
+            numberOfLines: 1,
+            children: ["ID: ...", deviceSession.deviceId.slice(-8)]
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: [styles.lastActive, {
+              color: colors.secondaryText
+            }],
+            numberOfLines: 1,
+            children: ["Last active: ", new Date(deviceSession.lastActive).toLocaleDateString()]
+          })]
+        }), !deviceSession.isCurrent && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.removeButton, {
+            borderColor: colors.destructive,
+            backgroundColor: colors.background
           }],
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.activeBadgeText,
-            children: "Active"
+          onPress: () => handleRemoteSessionLogout(deviceSession.sessionId, deviceSession.deviceName),
+          disabled: isLoggingOut,
+          children: isLoggingOut ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            color: colors.destructive,
+            size: "small"
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: [styles.removeButtonText, {
+              color: colors.destructive
+            }],
+            children: "Sign Out"
           })
         })]
+      })
+    }, deviceSession.sessionId);
+  };
+
+  // Load device sessions when device management is shown
+  useEffect(() => {
+    if (showDeviceManagement && deviceSessions.length === 0) {
+      loadAllDeviceSessions();
+    }
+  }, [showDeviceManagement]);
+  const renderSessionItem = sessionWithUser => {
+    const isActive = sessionWithUser.sessionId === activeSessionId;
+    const isSwitching = switchingToUserId === sessionWithUser.sessionId;
+    const isRemoving = removingUserId === sessionWithUser.sessionId;
+    const {
+      userProfile,
+      isLoadingProfile
+    } = sessionWithUser;
+    const displayName = typeof userProfile?.name === 'object' ? userProfile.name.full || userProfile.name.first || userProfile.username : userProfile?.name || userProfile?.username || 'Unknown User';
+    const username = userProfile?.username || 'unknown';
+    const avatarUrl = userProfile?.avatar?.url;
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.sessionCard, {
+        backgroundColor: isActive ? colors.activeCard : colors.card,
+        borderColor: isActive ? colors.accent : colors.border,
+        borderWidth: isActive ? 2 : 1,
+        shadowColor: colors.shadow
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.sessionHeader,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.avatarContainer,
+          children: [isLoadingProfile ? /*#__PURE__*/_jsx(View, {
+            style: [styles.avatarPlaceholder, {
+              backgroundColor: colors.surface
+            }],
+            children: /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: colors.accent
+            })
+          }) : avatarUrl ? /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: avatarUrl
+            },
+            style: styles.avatar
+          }) : /*#__PURE__*/_jsx(View, {
+            style: [styles.avatarPlaceholder, {
+              backgroundColor: colors.surface
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.avatarText, {
+                color: colors.accent
+              }],
+              children: displayName.charAt(0).toUpperCase()
+            })
+          }), isActive && /*#__PURE__*/_jsx(View, {
+            style: [styles.activeBadge, {
+              backgroundColor: colors.success
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.activeBadgeText,
+              children: "\u2713"
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.userInfo,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.displayName, {
+              color: colors.text
+            }],
+            numberOfLines: 1,
+            children: displayName
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: [styles.username, {
+              color: colors.secondaryText
+            }],
+            numberOfLines: 1,
+            children: ["@", username]
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: [styles.lastActive, {
+              color: colors.secondaryText
+            }],
+            numberOfLines: 1,
+            children: ["Last active: ", new Date(sessionWithUser.lastActive).toLocaleDateString()]
+          })]
+        })]
       }), /*#__PURE__*/_jsxs(View, {
-        style: styles.userActions,
+        style: styles.sessionActions,
         children: [!isActive && /*#__PURE__*/_jsx(TouchableOpacity, {
           style: [styles.switchButton, {
-            borderColor: colors.accent
+            borderColor: colors.accent,
+            backgroundColor: colors.background
           }],
-          onPress: () => handleSwitchSession(session.sessionId),
+          onPress: () => handleSwitchSession(sessionWithUser.sessionId),
           disabled: isSwitching || isRemoving,
           children: isSwitching ? /*#__PURE__*/_jsx(ActivityIndicator, {
             color: colors.accent,
@@ -232,10 +377,11 @@ const AccountSwitcherScreen = ({
           })
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
           style: [styles.removeButton, {
-            borderColor: colors.destructive
+            borderColor: colors.destructive,
+            backgroundColor: colors.background
           }],
-          onPress: () => handleRemoveSession(session.sessionId),
-          disabled: isSwitching || isRemoving || sessions.length === 1,
+          onPress: () => handleRemoveSession(sessionWithUser.sessionId),
+          disabled: isSwitching || isRemoving,
           children: isRemoving ? /*#__PURE__*/_jsx(ActivityIndicator, {
             color: colors.destructive,
             size: "small"
@@ -247,57 +393,7 @@ const AccountSwitcherScreen = ({
           })
         })]
       })]
-    }, session.sessionId);
-  };
-  const renderDeviceSessionItem = deviceSession => {
-    const isCurrentSession = deviceSession.isCurrent;
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.userItem, {
-        backgroundColor: isCurrentSession ? colors.activeCard : colors.surface,
-        borderColor: isCurrentSession ? colors.accent : colors.border
-      }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.userInfo,
-        children: [/*#__PURE__*/_jsxs(Text, {
-          style: [styles.username, {
-            color: colors.text
-          }],
-          children: [deviceSession.deviceName, isCurrentSession && ' (This Device)']
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: [styles.email, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: ["Last active: ", new Date(deviceSession.lastActive).toLocaleDateString()]
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: [styles.email, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: ["Device ID: ", deviceSession.deviceId.substring(0, 8), "..."]
-        }), isCurrentSession && /*#__PURE__*/_jsx(View, {
-          style: [styles.activeBadge, {
-            backgroundColor: colors.success
-          }],
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.activeBadgeText,
-            children: "Current"
-          })
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.userActions,
-        children: !isCurrentSession && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.removeButton, {
-            borderColor: colors.destructive
-          }],
-          onPress: () => handleRemoteSessionLogout(deviceSession.sessionId, deviceSession.deviceName),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.removeButtonText, {
-              color: colors.destructive
-            }],
-            children: "Logout"
-          })
-        })
-      })]
-    }, deviceSession.sessionId);
+    }, sessionWithUser.sessionId);
   };
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, {
@@ -318,115 +414,159 @@ const AccountSwitcherScreen = ({
         style: [styles.title, {
           color: colors.text
         }],
-        children: "Account Switcher"
+        children: "Accounts"
       }), /*#__PURE__*/_jsx(View, {
-        style: styles.placeholder
+        style: styles.headerSpacer
       })]
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      style: styles.scrollView,
-      contentContainerStyle: styles.scrollContainer,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.description,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.descriptionText, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      style: styles.content,
+      showsVerticalScrollIndicator: false,
+      contentContainerStyle: styles.scrollContent,
+      children: isLoading ? /*#__PURE__*/_jsxs(View, {
+        style: styles.loadingContainer,
+        children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "large",
+          color: colors.accent
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.loadingText, {
+            color: colors.secondaryText
           }],
-          children: "Manage multiple accounts on this device. Switch between accounts or remove them from this device."
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.usersContainer,
+          children: "Loading accounts..."
+        })]
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsxs(Text, {
           style: [styles.sectionTitle, {
             color: colors.text
           }],
-          children: ["Local Sessions (", sessions.length, ")"]
-        }), sessions.map(renderSessionItem)]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.usersContainer,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.sectionHeader,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.sectionTitle, {
-              color: colors.text
+          children: ["Saved Accounts (", sessionsWithUsers.length, ")"]
+        }), sessionsWithUsers.length === 0 ? /*#__PURE__*/_jsx(View, {
+          style: styles.emptyState,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.emptyText, {
+              color: colors.secondaryText
             }],
-            children: "All Devices & Sessions"
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.toggleButton, {
-              borderColor: colors.accent
+            children: "No saved accounts found"
+          })
+        }) : sessionsWithUsers.map(renderSessionItem), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionsSection,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.actionButton, {
+              borderColor: colors.border,
+              backgroundColor: colors.card
             }],
-            onPress: () => setShowRemoteDevices(!showRemoteDevices),
+            onPress: () => navigate?.('SignIn'),
             children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.toggleButtonText, {
-                color: colors.accent
+              style: [styles.actionButtonText, {
+                color: colors.text
+              }],
+              children: "+ Add Another Account"
+            })
+          }), sessionsWithUsers.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.actionButton, styles.dangerButton, {
+              borderColor: colors.destructive,
+              backgroundColor: colors.background
+            }],
+            onPress: handleLogoutAll,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.dangerButtonText, {
+                color: colors.destructive
               }],
-              children: showRemoteDevices ? 'Hide' : 'Show'
+              children: "Sign Out All Accounts"
             })
           })]
-        }), showRemoteDevices && /*#__PURE__*/_jsx(_Fragment, {
-          children: loadingDeviceSessions ? /*#__PURE__*/_jsxs(View, {
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.actionsSection,
+          children: /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.actionButton, {
+              borderColor: colors.border,
+              backgroundColor: colors.card
+            }],
+            onPress: () => setShowDeviceManagement(!showDeviceManagement),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.actionButtonText, {
+                color: colors.text
+              }],
+              children: showDeviceManagement ? '− Hide Device Management' : '+ Manage Device Sessions'
+            })
+          })
+        }), showDeviceManagement && /*#__PURE__*/_jsxs(View, {
+          style: [styles.deviceManagementSection, {
+            backgroundColor: colors.card,
+            borderColor: colors.border
+          }],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.sectionTitle, {
+              color: colors.text
+            }],
+            children: "Device Sessions"
+          }), loadingDeviceSessions ? /*#__PURE__*/_jsxs(View, {
             style: styles.loadingContainer,
             children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-              color: colors.accent,
-              size: "small"
+              size: "large",
+              color: colors.accent
             }), /*#__PURE__*/_jsx(Text, {
               style: [styles.loadingText, {
                 color: colors.secondaryText
               }],
               children: "Loading device sessions..."
             })]
-          }) : /*#__PURE__*/_jsx(_Fragment, {
-            children: allDeviceSessions.length > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
-              children: [allDeviceSessions.map(renderDeviceSessionItem), allDeviceSessions.filter(s => !s.isCurrent).length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
-                style: [styles.actionButton, {
-                  borderColor: colors.destructive,
-                  marginTop: 12
-                }],
-                onPress: handleLogoutAllDevices,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: [styles.actionButtonText, {
-                    color: colors.destructive
-                  }],
-                  children: "Logout All Other Devices"
-                })
-              })]
-            }) : /*#__PURE__*/_jsx(Text, {
+          }) : deviceSessions.length === 0 ? /*#__PURE__*/_jsx(View, {
+            style: styles.emptyState,
+            children: /*#__PURE__*/_jsx(Text, {
               style: [styles.emptyText, {
                 color: colors.secondaryText
               }],
-              children: "No other device sessions found"
+              children: "No device sessions found"
             })
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.actionsContainer,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.actionButton, {
-            borderColor: colors.border
-          }],
-          onPress: () => navigate('SignIn'),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.actionButtonText, {
-              color: colors.text
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [deviceSessions.map(renderDeviceSessionItem), deviceSessions.filter(session => !session.isCurrent).length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: [styles.actionButton, styles.dangerButton, {
+                borderColor: colors.destructive,
+                backgroundColor: colors.background,
+                marginTop: 20
+              }],
+              onPress: handleLogoutAllDevices,
+              disabled: loggingOutAllDevices,
+              children: loggingOutAllDevices ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                color: colors.destructive,
+                size: "small"
+              }) : /*#__PURE__*/_jsx(Text, {
+                style: [styles.dangerButtonText, {
+                  color: colors.destructive
+                }],
+                children: "Sign Out All Other Devices"
+              })
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionsSection,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.actionButton, {
+              borderColor: colors.border,
+              backgroundColor: colors.card
             }],
-            children: "Add Another Account"
-          })
-        }), sessions.length > 1 && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.dangerButton, {
-            backgroundColor: isDarkTheme ? '#300000' : '#FFEBEE'
-          }],
-          onPress: handleLogoutAll,
-          disabled: isLoading,
-          children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            color: colors.destructive,
-            size: "small"
-          }) : /*#__PURE__*/_jsx(Text, {
-            style: [styles.dangerButtonText, {
-              color: colors.destructive
+            onPress: () => navigate?.('SignIn'),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.actionButtonText, {
+                color: colors.text
+              }],
+              children: "+ Add Another Account"
+            })
+          }), sessionsWithUsers.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.actionButton, styles.dangerButton, {
+              borderColor: colors.destructive,
+              backgroundColor: colors.background
             }],
-            children: "Sign Out All Sessions"
-          })
+            onPress: handleLogoutAll,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.dangerButtonText, {
+                color: colors.destructive
+              }],
+              children: "Sign Out All Accounts"
+            })
+          })]
         })]
-      })]
+      })
     })]
   });
 };
@@ -439,168 +579,187 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingHorizontal: 20,
-    paddingTop: Platform.OS === 'ios' ? 50 : 20,
-    paddingBottom: 20,
-    borderBottomWidth: 1,
-    borderBottomColor: 'rgba(0, 0, 0, 0.1)'
+    paddingTop: 20,
+    paddingBottom: 10
   },
   backButton: {
-    paddingVertical: 8,
-    paddingHorizontal: 4
+    padding: 8
   },
   backButtonText: {
     fontSize: 18,
-    fontFamily: fontFamilies.phudu
+    fontFamily: fontFamilies.phuduMedium
   },
   title: {
-    fontSize: 20,
-    fontFamily: fontFamilies.phuduSemiBold,
+    fontSize: 24,
+    fontFamily: fontFamilies.phuduBold,
     textAlign: 'center'
   },
-  placeholder: {
-    width: 60 // Same as back button to center title
+  headerSpacer: {
+    width: 40
   },
-  scrollView: {
-    flex: 1
-  },
-  scrollContainer: {
-    padding: 20
+  content: {
+    flex: 1,
+    paddingHorizontal: 20
   },
-  description: {
-    marginBottom: 24
+  scrollContent: {
+    paddingBottom: 40
   },
-  descriptionText: {
-    fontSize: 14,
-    fontFamily: fontFamilies.phudu,
-    lineHeight: 20
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 60
   },
-  usersContainer: {
-    marginBottom: 32
+  loadingText: {
+    marginTop: 16,
+    fontSize: 16,
+    fontFamily: fontFamilies.phudu
   },
   sectionTitle: {
-    fontSize: 16,
+    fontSize: 20,
     fontFamily: fontFamilies.phuduSemiBold,
-    marginBottom: 16
+    marginBottom: 20,
+    marginTop: 10
+  },
+  emptyState: {
+    alignItems: 'center',
+    paddingVertical: 40
+  },
+  emptyText: {
+    fontSize: 16,
+    fontFamily: fontFamilies.phudu,
+    textAlign: 'center'
   },
-  userItem: {
+  sessionCard: {
+    borderRadius: 16,
+    marginBottom: 16,
+    padding: 20,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3
+  },
+  sessionHeader: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 16,
-    borderRadius: 12,
-    borderWidth: 1,
-    marginBottom: 12
+    marginBottom: 16
+  },
+  avatarContainer: {
+    position: 'relative',
+    marginRight: 16
+  },
+  avatar: {
+    width: 60,
+    height: 60,
+    borderRadius: 30
+  },
+  avatarPlaceholder: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  avatarText: {
+    fontSize: 24,
+    fontFamily: fontFamilies.phuduBold
+  },
+  activeBadge: {
+    position: 'absolute',
+    bottom: -2,
+    right: -2,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  activeBadgeText: {
+    color: 'white',
+    fontSize: 12,
+    fontFamily: fontFamilies.phuduBold
   },
   userInfo: {
-    flex: 1
+    flex: 1,
+    justifyContent: 'center'
   },
-  username: {
-    fontSize: 16,
+  displayName: {
+    fontSize: 18,
     fontFamily: fontFamilies.phuduSemiBold,
     marginBottom: 4
   },
-  email: {
+  username: {
     fontSize: 14,
     fontFamily: fontFamilies.phudu,
-    marginBottom: 8
-  },
-  activeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 6,
-    alignSelf: 'flex-start'
+    marginBottom: 4
   },
-  activeBadgeText: {
-    color: '#FFFFFF',
+  lastActive: {
     fontSize: 12,
-    fontFamily: fontFamilies.phuduMedium
+    fontFamily: fontFamilies.phudu
   },
-  userActions: {
+  sessionActions: {
     flexDirection: 'row',
-    gap: 8
+    justifyContent: 'space-between',
+    gap: 12
   },
   switchButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
+    flex: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 20,
     borderWidth: 1,
-    minWidth: 70,
-    alignItems: 'center'
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   switchButtonText: {
     fontSize: 14,
-    fontFamily: fontFamilies.phuduMedium
+    fontFamily: fontFamilies.phuduSemiBold
   },
   removeButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
+    flex: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 20,
     borderWidth: 1,
-    minWidth: 70,
-    alignItems: 'center'
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   removeButtonText: {
     fontSize: 14,
-    fontFamily: fontFamilies.phuduMedium
+    fontFamily: fontFamilies.phuduSemiBold
   },
-  actionsContainer: {
+  actionsSection: {
+    marginTop: 40,
     gap: 16
   },
   actionButton: {
     paddingVertical: 16,
     paddingHorizontal: 20,
-    borderRadius: 12,
     borderWidth: 1,
-    alignItems: 'center'
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   actionButtonText: {
     fontSize: 16,
-    fontFamily: fontFamilies.phuduMedium
+    fontFamily: fontFamilies.phuduSemiBold
   },
   dangerButton: {
-    paddingVertical: 16,
-    paddingHorizontal: 20,
-    borderRadius: 12,
-    alignItems: 'center'
+    // Additional styles for danger buttons if needed
   },
   dangerButtonText: {
     fontSize: 16,
-    fontFamily: fontFamilies.phuduMedium
-  },
-  sectionHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 16
+    fontFamily: fontFamilies.phuduSemiBold
   },
-  toggleButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 6,
+  deviceManagementSection: {
+    marginTop: 20,
+    padding: 16,
+    borderRadius: 12,
     borderWidth: 1
-  },
-  toggleButtonText: {
-    fontSize: 14,
-    fontFamily: fontFamilies.phuduMedium
-  },
-  loadingContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 20,
-    gap: 8
-  },
-  loadingText: {
-    fontSize: 14,
-    fontFamily: fontFamilies.phudu
-  },
-  emptyText: {
-    fontSize: 14,
-    fontFamily: fontFamilies.phudu,
-    textAlign: 'center',
-    paddingVertical: 20,
-    fontStyle: 'italic'
   }
 });
-export default AccountSwitcherScreen;
+export default ModernAccountSwitcherScreen;
 //# sourceMappingURL=AccountSwitcherScreen.js.map