@oxyhq/services 5.3.5 → 5.3.6

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -8,6 +8,7 @@ import {
     ScrollView,
     Alert,
     Platform,
+    Image,
     Dimensions,
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
@@ -16,6 +17,11 @@ import { SecureClientSession } from '../../models/secureSession';
 import { fontFamilies } from '../styles/fonts';
 import { User } from '../../models/interfaces';
 
+interface SessionWithUser extends SecureClientSession {
+    userProfile?: User;
+    isLoadingProfile?: boolean;
+}
+
 interface DeviceSession {
     sessionId: string;
     deviceId: string;
@@ -26,7 +32,7 @@ interface DeviceSession {
     isCurrent: boolean;
 }
 
-const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
+const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
     navigate,
@@ -43,11 +49,16 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         isLoading 
     } = useOxy();
 
-    const [allDeviceSessions, setAllDeviceSessions] = useState<DeviceSession[]>([]);
-    const [loadingDeviceSessions, setLoadingDeviceSessions] = useState(false);
+    const [sessionsWithUsers, setSessionsWithUsers] = useState<SessionWithUser[]>([]);
     const [switchingToUserId, setSwitchingToUserId] = useState<string | null>(null);
     const [removingUserId, setRemovingUserId] = useState<string | null>(null);
-    const [showRemoteDevices, setShowRemoteDevices] = useState(false);
+    
+    // Device session management state
+    const [showDeviceManagement, setShowDeviceManagement] = useState(false);
+    const [deviceSessions, setDeviceSessions] = useState<DeviceSession[]>([]);
+    const [loadingDeviceSessions, setLoadingDeviceSessions] = useState(false);
+    const [remotingLogoutSessionId, setRemoteLogoutSessionId] = useState<string | null>(null);
+    const [loggingOutAllDevices, setLoggingOutAllDevices] = useState(false);
 
     const screenWidth = Dimensions.get('window').width;
     const isDarkTheme = theme === 'dark';
@@ -67,37 +78,46 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         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: DeviceSession[] = allSessions.map((session: any) => ({
-                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: SessionWithUser[] = 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: string) => {
         if (sessionId === user?.sessionId) return; // Already active session
@@ -118,12 +138,16 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     };
 
     const handleRemoveSession = async (sessionId: string) => {
-        const sessionToRemove = sessions.find(s => s.sessionId === sessionId);
+        const sessionToRemove = sessionsWithUsers.find(s => s.sessionId === sessionId);
         if (!sessionToRemove) return;
 
+        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 this session from this device? You'll need to sign in again to access this 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',
@@ -180,27 +204,47 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         );
     };
 
+    // 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: string, deviceName: string) => {
         Alert.alert(
-            'Logout Remote Session',
-            `Are you sure you want to logout from "${deviceName}"?`,
+            '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);
                         }
                     },
                 },
@@ -210,26 +254,36 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     };
 
     const handleLogoutAllDevices = async () => {
+        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(
-            'Logout All Devices',
-            'Are you sure you want to logout from all other devices? This will keep your current session active.',
+            '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);
                         }
                     },
                 },
@@ -238,108 +292,168 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         );
     };
 
-    const renderSessionItem = (session: SecureClientSession) => {
-        const isActive = session.sessionId === activeSessionId;
-        const isSwitching = switchingToUserId === session.sessionId;
-        const isRemoving = removingUserId === session.sessionId;
-
+    const renderDeviceSessionItem = (deviceSession: DeviceSession) => {
+        const isLoggingOut = remotingLogoutSessionId === deviceSession.sessionId;
+        
         return (
             <View
-                key={session.sessionId}
+                key={deviceSession.sessionId}
                 style={[
-                    styles.userItem,
+                    styles.sessionCard,
                     {
-                        backgroundColor: isActive ? colors.activeCard : colors.surface,
-                        borderColor: isActive ? colors.accent : colors.border,
+                        backgroundColor: deviceSession.isCurrent ? colors.activeCard : colors.card,
+                        borderColor: deviceSession.isCurrent ? colors.accent : colors.border,
+                        borderWidth: deviceSession.isCurrent ? 2 : 1,
                     },
                 ]}
             >
-                <View style={styles.userInfo}>
-                    <Text style={[styles.username, { color: colors.text }]}>
-                        {isActive ? user?.username || 'Current Account' : 'Account Session'}
-                    </Text>
-                    <Text style={[styles.email, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                        Last active: {new Date(session.lastActive).toLocaleDateString()}
-                    </Text>
-                    {isActive && (
-                        <View style={[styles.activeBadge, { backgroundColor: colors.success }]}>
-                            <Text style={styles.activeBadgeText}>Active</Text>
-                        </View>
-                    )}
-                </View>
-
-                <View style={styles.userActions}>
-                    {!isActive && (
+                <View style={styles.sessionHeader}>
+                    <View style={styles.userInfo}>
+                        <Text style={[styles.displayName, { color: colors.text }]} numberOfLines={1}>
+                            {deviceSession.deviceName}
+                            {deviceSession.isCurrent && (
+                                <Text style={[styles.username, { color: colors.accent }]}>
+                                    {' (This Device)'}
+                                </Text>
+                            )}
+                        </Text>
+                        <Text style={[styles.username, { color: colors.secondaryText }]} numberOfLines={1}>
+                            ID: ...{deviceSession.deviceId.slice(-8)}
+                        </Text>
+                        <Text style={[styles.lastActive, { color: colors.secondaryText }]} numberOfLines={1}>
+                            Last active: {new Date(deviceSession.lastActive).toLocaleDateString()}
+                        </Text>
+                    </View>
+                    
+                    {!deviceSession.isCurrent && (
                         <TouchableOpacity
-                            style={[styles.switchButton, { borderColor: colors.accent }]}
-                            onPress={() => handleSwitchSession(session.sessionId)}
-                            disabled={isSwitching || isRemoving}
+                            style={[styles.removeButton, { 
+                                borderColor: colors.destructive,
+                                backgroundColor: colors.background,
+                            }]}
+                            onPress={() => handleRemoteSessionLogout(deviceSession.sessionId, deviceSession.deviceName)}
+                            disabled={isLoggingOut}
                         >
-                            {isSwitching ? (
-                                <ActivityIndicator color={colors.accent} size="small" />
+                            {isLoggingOut ? (
+                                <ActivityIndicator color={colors.destructive} size="small" />
                             ) : (
-                                <Text style={[styles.switchButtonText, { color: colors.accent }]}>Switch</Text>
+                                <Text style={[styles.removeButtonText, { color: colors.destructive }]}>
+                                    Sign Out
+                                </Text>
                             )}
                         </TouchableOpacity>
                     )}
-
-                    <TouchableOpacity
-                        style={[styles.removeButton, { borderColor: colors.destructive }]}
-                        onPress={() => handleRemoveSession(session.sessionId)}
-                        disabled={isSwitching || isRemoving || sessions.length === 1}
-                    >
-                        {isRemoving ? (
-                            <ActivityIndicator color={colors.destructive} size="small" />
-                        ) : (
-                            <Text style={[styles.removeButtonText, { color: colors.destructive }]}>Remove</Text>
-                        )}
-                    </TouchableOpacity>
                 </View>
             </View>
         );
     };
 
-    const renderDeviceSessionItem = (deviceSession: DeviceSession) => {
-        const isCurrentSession = deviceSession.isCurrent;
-        
+    // Load device sessions when device management is shown
+    useEffect(() => {
+        if (showDeviceManagement && deviceSessions.length === 0) {
+            loadAllDeviceSessions();
+        }
+    }, [showDeviceManagement]);
+
+    const renderSessionItem = (sessionWithUser: 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 (
             <View
-                key={deviceSession.sessionId}
+                key={sessionWithUser.sessionId}
                 style={[
-                    styles.userItem,
+                    styles.sessionCard,
                     {
-                        backgroundColor: isCurrentSession ? colors.activeCard : colors.surface,
-                        borderColor: isCurrentSession ? colors.accent : colors.border,
+                        backgroundColor: isActive ? colors.activeCard : colors.card,
+                        borderColor: isActive ? colors.accent : colors.border,
+                        borderWidth: isActive ? 2 : 1,
+                        shadowColor: colors.shadow,
                     },
                 ]}
             >
-                <View style={styles.userInfo}>
-                    <Text style={[styles.username, { color: colors.text }]}>
-                        {deviceSession.deviceName}
-                        {isCurrentSession && ' (This Device)'}
-                    </Text>
-                    <Text style={[styles.email, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                        Last active: {new Date(deviceSession.lastActive).toLocaleDateString()}
-                    </Text>
-                    <Text style={[styles.email, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                        Device ID: {deviceSession.deviceId.substring(0, 8)}...
-                    </Text>
-                    {isCurrentSession && (
-                        <View style={[styles.activeBadge, { backgroundColor: colors.success }]}>
-                            <Text style={styles.activeBadgeText}>Current</Text>
-                        </View>
-                    )}
+                <View style={styles.sessionHeader}>
+                    <View style={styles.avatarContainer}>
+                        {isLoadingProfile ? (
+                            <View style={[styles.avatarPlaceholder, { backgroundColor: colors.surface }]}>
+                                <ActivityIndicator size="small" color={colors.accent} />
+                            </View>
+                        ) : avatarUrl ? (
+                            <Image 
+                                source={{ uri: avatarUrl }} 
+                                style={styles.avatar}
+                            />
+                        ) : (
+                            <View style={[styles.avatarPlaceholder, { backgroundColor: colors.surface }]}>
+                                <Text style={[styles.avatarText, { color: colors.accent }]}>
+                                    {displayName.charAt(0).toUpperCase()}
+                                </Text>
+                            </View>
+                        )}
+                        {isActive && (
+                            <View style={[styles.activeBadge, { backgroundColor: colors.success }]}>
+                                <Text style={styles.activeBadgeText}>✓</Text>
+                            </View>
+                        )}
+                    </View>
+                    
+                    <View style={styles.userInfo}>
+                        <Text style={[styles.displayName, { color: colors.text }]} numberOfLines={1}>
+                            {displayName}
+                        </Text>
+                        <Text style={[styles.username, { color: colors.secondaryText }]} numberOfLines={1}>
+                            @{username}
+                        </Text>
+                        <Text style={[styles.lastActive, { color: colors.secondaryText }]} numberOfLines={1}>
+                            Last active: {new Date(sessionWithUser.lastActive).toLocaleDateString()}
+                        </Text>
+                    </View>
                 </View>
 
-                <View style={styles.userActions}>
-                    {!isCurrentSession && (
+                <View style={styles.sessionActions}>
+                    {!isActive && (
                         <TouchableOpacity
-                            style={[styles.removeButton, { borderColor: colors.destructive }]}
-                            onPress={() => handleRemoteSessionLogout(deviceSession.sessionId, deviceSession.deviceName)}
+                            style={[styles.switchButton, { 
+                                borderColor: colors.accent,
+                                backgroundColor: colors.background,
+                            }]}
+                            onPress={() => handleSwitchSession(sessionWithUser.sessionId)}
+                            disabled={isSwitching || isRemoving}
                         >
-                            <Text style={[styles.removeButtonText, { color: colors.destructive }]}>Logout</Text>
+                            {isSwitching ? (
+                                <ActivityIndicator color={colors.accent} size="small" />
+                            ) : (
+                                <Text style={[styles.switchButtonText, { color: colors.accent }]}>
+                                    Switch
+                                </Text>
+                            )}
                         </TouchableOpacity>
                     )}
+                    
+                    <TouchableOpacity
+                        style={[styles.removeButton, { 
+                            borderColor: colors.destructive,
+                            backgroundColor: colors.background,
+                        }]}
+                        onPress={() => handleRemoveSession(sessionWithUser.sessionId)}
+                        disabled={isSwitching || isRemoving}
+                    >
+                        {isRemoving ? (
+                            <ActivityIndicator color={colors.destructive} size="small" />
+                        ) : (
+                            <Text style={[styles.removeButtonText, { color: colors.destructive }]}>
+                                Remove
+                            </Text>
+                        )}
+                    </TouchableOpacity>
                 </View>
             </View>
         );
@@ -351,103 +465,160 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 <TouchableOpacity style={styles.backButton} onPress={goBack}>
                     <Text style={[styles.backButtonText, { color: colors.accent }]}>‹ Back</Text>
                 </TouchableOpacity>
-                <Text style={[styles.title, { color: colors.text }]}>Account Switcher</Text>
-                <View style={styles.placeholder} />
+                <Text style={[styles.title, { color: colors.text }]}>Accounts</Text>
+                <View style={styles.headerSpacer} />
             </View>
 
-            <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
-                <View style={styles.description}>
-                    <Text style={[styles.descriptionText, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                        Manage multiple accounts on this device. Switch between accounts or remove them from this device.
-                    </Text>
-                </View>
-
-                <View style={styles.usersContainer}>
-                    <Text style={[styles.sectionTitle, { color: colors.text }]}>
-                        Local Sessions ({sessions.length})
-                    </Text>
-                    
-                    {sessions.map(renderSessionItem)}
-                </View>
-
-                {/* Remote Device Management Section */}
-                <View style={styles.usersContainer}>
-                    <View style={styles.sectionHeader}>
-                        <Text style={[styles.sectionTitle, { color: colors.text }]}>
-                            All Devices & Sessions
+            <ScrollView 
+                style={styles.content} 
+                showsVerticalScrollIndicator={false}
+                contentContainerStyle={styles.scrollContent}
+            >
+                {isLoading ? (
+                    <View style={styles.loadingContainer}>
+                        <ActivityIndicator size="large" color={colors.accent} />
+                        <Text style={[styles.loadingText, { color: colors.secondaryText }]}>
+                            Loading accounts...
                         </Text>
-                        <TouchableOpacity
-                            style={[styles.toggleButton, { borderColor: colors.accent }]}
-                            onPress={() => setShowRemoteDevices(!showRemoteDevices)}
-                        >
-                            <Text style={[styles.toggleButtonText, { color: colors.accent }]}>
-                                {showRemoteDevices ? 'Hide' : 'Show'}
-                            </Text>
-                        </TouchableOpacity>
                     </View>
-                    
-                    {showRemoteDevices && (
-                        <>
-                            {loadingDeviceSessions ? (
-                                <View style={styles.loadingContainer}>
-                                    <ActivityIndicator color={colors.accent} size="small" />
-                                    <Text style={[styles.loadingText, { color: colors.secondaryText }]}>
-                                        Loading device sessions...
+                ) : (
+                    <>
+                        <Text style={[styles.sectionTitle, { color: colors.text }]}>
+                            Saved Accounts ({sessionsWithUsers.length})
+                        </Text>
+                        
+                        {sessionsWithUsers.length === 0 ? (
+                            <View style={styles.emptyState}>
+                                <Text style={[styles.emptyText, { color: colors.secondaryText }]}>
+                                    No saved accounts found
+                                </Text>
+                            </View>
+                        ) : (
+                            sessionsWithUsers.map(renderSessionItem)
+                        )}
+
+                        <View style={styles.actionsSection}>
+                            <TouchableOpacity
+                                style={[styles.actionButton, { 
+                                    borderColor: colors.border,
+                                    backgroundColor: colors.card,
+                                }]}
+                                onPress={() => navigate?.('SignIn')}
+                            >
+                                <Text style={[styles.actionButtonText, { color: colors.text }]}>
+                                    + Add Another Account
+                                </Text>
+                            </TouchableOpacity>
+
+                            {sessionsWithUsers.length > 0 && (
+                                <TouchableOpacity
+                                    style={[styles.actionButton, styles.dangerButton, { 
+                                        borderColor: colors.destructive,
+                                        backgroundColor: colors.background,
+                                    }]}
+                                    onPress={handleLogoutAll}
+                                >
+                                    <Text style={[styles.dangerButtonText, { color: colors.destructive }]}>
+                                        Sign Out All Accounts
                                     </Text>
-                                </View>
-                            ) : (
-                                <>
-                                    {allDeviceSessions.length > 0 ? (
-                                        <>
-                                            {allDeviceSessions.map(renderDeviceSessionItem)}
-                                            {allDeviceSessions.filter(s => !s.isCurrent).length > 0 && (
-                                                <TouchableOpacity
-                                                    style={[styles.actionButton, { borderColor: colors.destructive, marginTop: 12 }]}
-                                                    onPress={handleLogoutAllDevices}
-                                                >
-                                                    <Text style={[styles.actionButtonText, { color: colors.destructive }]}>
-                                                        Logout All Other Devices
-                                                    </Text>
-                                                </TouchableOpacity>
-                                            )}
-                                        </>
-                                    ) : (
-                                        <Text style={[styles.emptyText, { color: colors.secondaryText }]}>
-                                            No other device sessions found
-                                        </Text>
-                                    )}
-                                </>
+                                </TouchableOpacity>
                             )}
-                        </>
-                    )}
-                </View>
+                        </View>
 
-                <View style={styles.actionsContainer}>
-                    <TouchableOpacity
-                        style={[styles.actionButton, { borderColor: colors.border }]}
-                        onPress={() => navigate('SignIn')}
-                    >
-                        <Text style={[styles.actionButtonText, { color: colors.text }]}>
-                            Add Another Account
-                        </Text>
-                    </TouchableOpacity>
+                        {/* Device Management Section */}
+                        <View style={styles.actionsSection}>
+                            <TouchableOpacity
+                                style={[styles.actionButton, { 
+                                    borderColor: colors.border,
+                                    backgroundColor: colors.card,
+                                }]}
+                                onPress={() => setShowDeviceManagement(!showDeviceManagement)}
+                            >
+                                <Text style={[styles.actionButtonText, { color: colors.text }]}>
+                                    {showDeviceManagement ? '− Hide Device Management' : '+ Manage Device Sessions'}
+                                </Text>
+                            </TouchableOpacity>
+                        </View>
 
-                    {sessions.length > 1 && (
-                        <TouchableOpacity
-                            style={[styles.dangerButton, { backgroundColor: isDarkTheme ? '#300000' : '#FFEBEE' }]}
-                            onPress={handleLogoutAll}
-                            disabled={isLoading}
-                        >
-                            {isLoading ? (
-                                <ActivityIndicator color={colors.destructive} size="small" />
-                            ) : (
-                                <Text style={[styles.dangerButtonText, { color: colors.destructive }]}>
-                                    Sign Out All Sessions
+                        {showDeviceManagement && (
+                            <View style={[styles.deviceManagementSection, {
+                                backgroundColor: colors.card,
+                                borderColor: colors.border,
+                            }]}>
+                                <Text style={[styles.sectionTitle, { color: colors.text }]}>
+                                    Device Sessions
+                                </Text>
+                                
+                                {loadingDeviceSessions ? (
+                                    <View style={styles.loadingContainer}>
+                                        <ActivityIndicator size="large" color={colors.accent} />
+                                        <Text style={[styles.loadingText, { color: colors.secondaryText }]}>
+                                            Loading device sessions...
+                                        </Text>
+                                    </View>
+                                ) : deviceSessions.length === 0 ? (
+                                    <View style={styles.emptyState}>
+                                        <Text style={[styles.emptyText, { color: colors.secondaryText }]}>
+                                            No device sessions found
+                                        </Text>
+                                    </View>
+                                ) : (
+                                    <>
+                                        {deviceSessions.map(renderDeviceSessionItem)}
+                                        
+                                        {deviceSessions.filter(session => !session.isCurrent).length > 0 && (
+                                            <TouchableOpacity
+                                                style={[styles.actionButton, styles.dangerButton, { 
+                                                    borderColor: colors.destructive,
+                                                    backgroundColor: colors.background,
+                                                    marginTop: 20,
+                                                }]}
+                                                onPress={handleLogoutAllDevices}
+                                                disabled={loggingOutAllDevices}
+                                            >
+                                                {loggingOutAllDevices ? (
+                                                    <ActivityIndicator color={colors.destructive} size="small" />
+                                                ) : (
+                                                    <Text style={[styles.dangerButtonText, { color: colors.destructive }]}>
+                                                        Sign Out All Other Devices
+                                                    </Text>
+                                                )}
+                                            </TouchableOpacity>
+                                        )}
+                                    </>
+                                )}
+                            </View>
+                        )}
+
+                        <View style={styles.actionsSection}>
+                            <TouchableOpacity
+                                style={[styles.actionButton, { 
+                                    borderColor: colors.border,
+                                    backgroundColor: colors.card,
+                                }]}
+                                onPress={() => navigate?.('SignIn')}
+                            >
+                                <Text style={[styles.actionButtonText, { color: colors.text }]}>
+                                    + Add Another Account
                                 </Text>
+                            </TouchableOpacity>
+
+                            {sessionsWithUsers.length > 0 && (
+                                <TouchableOpacity
+                                    style={[styles.actionButton, styles.dangerButton, { 
+                                        borderColor: colors.destructive,
+                                        backgroundColor: colors.background,
+                                    }]}
+                                    onPress={handleLogoutAll}
+                                >
+                                    <Text style={[styles.dangerButtonText, { color: colors.destructive }]}>
+                                        Sign Out All Accounts
+                                    </Text>
+                                </TouchableOpacity>
                             )}
-                        </TouchableOpacity>
-                    )}
-                </View>
+                        </View>
+                    </>
+                )}
             </ScrollView>
         </View>
     );
@@ -462,168 +633,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: {
+    content: {
         flex: 1,
+        paddingHorizontal: 20,
     },
-    scrollContainer: {
-        padding: 20,
+    scrollContent: {
+        paddingBottom: 40,
     },
-    description: {
-        marginBottom: 24,
+    loadingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingTop: 60,
     },
-    descriptionText: {
-        fontSize: 14,
+    loadingText: {
+        marginTop: 16,
+        fontSize: 16,
         fontFamily: fontFamilies.phudu,
-        lineHeight: 20,
-    },
-    usersContainer: {
-        marginBottom: 32,
     },
     sectionTitle: {
-        fontSize: 16,
+        fontSize: 20,
         fontFamily: fontFamilies.phuduSemiBold,
-        marginBottom: 16,
+        marginBottom: 20,
+        marginTop: 10,
+    },
+    emptyState: {
+        alignItems: 'center',
+        paddingVertical: 40,
     },
-    userItem: {
+    emptyText: {
+        fontSize: 16,
+        fontFamily: fontFamilies.phudu,
+        textAlign: 'center',
+    },
+    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,
+        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,
+        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,
+        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,
+        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;