@oxyhq/services 5.3.11 → 5.4.1

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

@@ -3,8 +3,8 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Alert, Image, Dimensions } from 'react-native';
 import { useOxy } from '../context/OxyContext';
-import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
+import OxyIcon from '../components/icon/OxyIcon';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ModernAccountSwitcherScreen = ({
   onClose,
@@ -163,44 +163,6 @@ const ModernAccountSwitcherScreen = ({
       const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
       toast.error(`There was a problem signing out: ${errorMessage}`);
     }
-
-    /* ORIGINAL CODE WITH CONFIRMATION - TEMPORARILY DISABLED
-    Alert.alert(
-        'Sign Out All',
-        'Are you sure you want to sign out of all accounts on this device?',
-        [
-            {
-                text: 'Cancel',
-                style: 'cancel',
-                onPress: () => {
-                    console.log('🔴 User cancelled logout');
-                }
-            },
-            {
-                text: 'Sign Out All',
-                style: 'destructive',
-                onPress: async () => {
-                    console.log('🔴 CONFIRMATION: User confirmed logout all - proceeding...');
-                    try {
-                        console.log('🔴 CONFIRMATION: About to call logoutAll()');
-                        await logoutAll();
-                        console.log('🔴 CONFIRMATION: logoutAll() completed successfully');
-                        toast.success('All accounts signed out successfully!');
-                        if (onClose) {
-                            console.log('🔴 CONFIRMATION: Calling onClose');
-                            onClose();
-                        }
-                    } catch (error) {
-                        console.error('🔴 CONFIRMATION: Logout all failed:', error);
-                        const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-                        toast.error(`There was a problem signing out: ${errorMessage}`);
-                    }
-                },
-            },
-        ],
-        { cancelable: true }
-    );
-    */
   };
 
   // Device session management functions
@@ -273,353 +235,344 @@ const ModernAccountSwitcherScreen = ({
       cancelable: true
     });
   };
-  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.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
-          }],
-          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.sessionActions,
-        children: [!isActive && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.switchButton, {
-            borderColor: colors.accent,
-            backgroundColor: colors.background
-          }],
-          onPress: () => handleSwitchSession(sessionWithUser.sessionId),
-          disabled: isSwitching || isRemoving,
-          children: isSwitching ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            color: colors.accent,
-            size: "small"
-          }) : /*#__PURE__*/_jsx(Text, {
-            style: [styles.switchButtonText, {
-              color: colors.accent
-            }],
-            children: "Switch"
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.removeButton, {
-            borderColor: colors.destructive,
-            backgroundColor: colors.background
-          }],
-          onPress: () => handleRemoveSession(sessionWithUser.sessionId),
-          disabled: isSwitching || isRemoving,
-          children: isRemoving ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            color: colors.destructive,
-            size: "small"
-          }) : /*#__PURE__*/_jsx(Text, {
-            style: [styles.removeButtonText, {
-              color: colors.destructive
-            }],
-            children: "Remove"
-          })
-        })]
-      })]
-    }, sessionWithUser.sessionId);
-  };
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, {
-      backgroundColor: colors.background
+      backgroundColor: '#f2f2f2'
     }],
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.header,
       children: [/*#__PURE__*/_jsx(TouchableOpacity, {
         style: styles.backButton,
         onPress: goBack,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.backButtonText, {
-            color: colors.accent
-          }],
-          children: "\u2039 Back"
+        children: /*#__PURE__*/_jsx(OxyIcon, {
+          name: "chevron-back",
+          size: 24,
+          color: "#007AFF"
         })
       }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.title, {
-          color: colors.text
-        }],
-        children: "Accounts"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.headerSpacer
+        style: styles.headerTitle,
+        children: "Account Switcher"
+      }), onClose && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.closeButton,
+        onPress: onClose,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.closeButtonText,
+          children: "\xD7"
+        })
       })]
     }), /*#__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
+          color: "#007AFF"
         }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.loadingText, {
-            color: colors.secondaryText
-          }],
+          style: styles.loadingText,
           children: "Loading accounts..."
         })]
       }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsxs(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: "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
-            }],
+        children: [user && /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: "Current Account"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard],
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.userIcon,
+              children: [user.avatar?.url ? /*#__PURE__*/_jsx(Image, {
+                source: {
+                  uri: user.avatar.url
+                },
+                style: styles.accountAvatarImage
+              }) : /*#__PURE__*/_jsx(View, {
+                style: styles.accountAvatarFallback,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.accountAvatarText,
+                  children: (typeof user.name === 'string' ? user.name : user.name?.first || user.username)?.charAt(0).toUpperCase()
+                })
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.activeBadge,
+                children: /*#__PURE__*/_jsx(OxyIcon, {
+                  name: "checkmark",
+                  size: 12,
+                  color: "#fff"
+                })
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.settingInfo,
+              children: /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.settingLabel,
+                  children: typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.settingDescription,
+                  children: user.email || user.username
+                })]
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.currentBadge,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.currentBadgeText,
+                children: "Current"
+              })
+            })]
+          })]
+        }), sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).length > 0 && /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.sectionTitle,
+            children: ["Other Accounts (", sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).length, ")"]
+          }), sessionsWithUsers.filter(s => s.sessionId !== activeSessionId).map((sessionWithUser, index, filteredArray) => {
+            const isFirst = index === 0;
+            const isLast = index === filteredArray.length - 1;
+            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';
+            return /*#__PURE__*/_jsxs(View, {
+              style: [styles.settingItem, isFirst && styles.firstSettingItem, isLast && styles.lastSettingItem],
+              children: [/*#__PURE__*/_jsx(View, {
+                style: styles.userIcon,
+                children: isLoadingProfile ? /*#__PURE__*/_jsx(View, {
+                  style: styles.accountAvatarFallback,
+                  children: /*#__PURE__*/_jsx(ActivityIndicator, {
+                    size: "small",
+                    color: "#007AFF"
+                  })
+                }) : userProfile?.avatar?.url ? /*#__PURE__*/_jsx(Image, {
+                  source: {
+                    uri: userProfile.avatar.url
+                  },
+                  style: styles.accountAvatarImage
+                }) : /*#__PURE__*/_jsx(View, {
+                  style: styles.accountAvatarFallback,
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: styles.accountAvatarText,
+                    children: displayName.charAt(0).toUpperCase()
+                  })
+                })
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.settingInfo,
+                children: /*#__PURE__*/_jsxs(View, {
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.settingLabel,
+                    children: displayName
+                  }), /*#__PURE__*/_jsxs(Text, {
+                    style: styles.settingDescription,
+                    children: ["@", userProfile?.username || 'unknown']
+                  })]
+                })
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.accountActions,
+                children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                  style: styles.switchButton,
+                  onPress: () => handleSwitchSession(sessionWithUser.sessionId),
+                  disabled: isSwitching || isRemoving,
+                  children: isSwitching ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                    size: "small",
+                    color: "#007AFF"
+                  }) : /*#__PURE__*/_jsx(Text, {
+                    style: styles.switchButtonText,
+                    children: "Switch"
+                  })
+                }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                  style: styles.removeButton,
+                  onPress: () => handleRemoveSession(sessionWithUser.sessionId),
+                  disabled: isSwitching || isRemoving,
+                  children: isRemoving ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                    size: "small",
+                    color: "#FF3B30"
+                  }) : /*#__PURE__*/_jsx(OxyIcon, {
+                    name: "trash",
+                    size: 16,
+                    color: "#FF3B30"
+                  })
+                })]
+              })]
+            }, sessionWithUser.sessionId);
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.section,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionTitle,
+            children: "Quick Actions"
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.settingItem, styles.firstSettingItem],
             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: [/*#__PURE__*/_jsxs(View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/_jsx(OxyIcon, {
+                name: "person-add",
+                size: 20,
+                color: "#007AFF",
+                style: styles.settingIcon
+              }), /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.settingLabel,
+                  children: "Add Another Account"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.settingDescription,
+                  children: "Sign in with a different account"
+                })]
+              })]
+            }), /*#__PURE__*/_jsx(OxyIcon, {
+              name: "chevron-forward",
+              size: 16,
+              color: "#ccc"
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: styles.settingItem,
+            onPress: () => setShowDeviceManagement(!showDeviceManagement),
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/_jsx(OxyIcon, {
+                name: "devices",
+                size: 20,
+                color: "#5856D6",
+                style: styles.settingIcon
+              }), /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsxs(Text, {
+                  style: styles.settingLabel,
+                  children: [showDeviceManagement ? 'Hide' : 'Manage', " Device Sessions"]
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.settingDescription,
+                  children: "View and manage sessions on other devices"
+                })]
+              })]
+            }), /*#__PURE__*/_jsx(OxyIcon, {
+              name: "chevron-forward",
+              size: 16,
+              color: "#ccc"
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.settingItem, styles.lastSettingItem],
             onPress: handleLogoutAll,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.dangerButtonText, {
-                color: colors.destructive
-              }],
-              children: "Sign Out All Accounts"
-            })
+            disabled: sessionsWithUsers.length === 0,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/_jsx(OxyIcon, {
+                name: "log-out",
+                size: 20,
+                color: "#FF3B30",
+                style: styles.settingIcon
+              }), /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [styles.settingLabel, {
+                    color: sessionsWithUsers.length === 0 ? '#ccc' : '#FF3B30'
+                  }],
+                  children: "Sign Out All Accounts"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.settingDescription,
+                  children: "Remove all accounts from this device"
+                })]
+              })]
+            }), /*#__PURE__*/_jsx(OxyIcon, {
+              name: "chevron-forward",
+              size: 16,
+              color: "#ccc"
+            })]
           })]
-        }), /*#__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
-          }],
+          style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.sectionTitle, {
-              color: colors.text
-            }],
+            style: styles.sectionTitle,
             children: "Device Sessions"
-          }), loadingDeviceSessions ? /*#__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: "Loading device sessions..."
-            })]
+          }), loadingDeviceSessions ? /*#__PURE__*/_jsx(View, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
+            children: /*#__PURE__*/_jsxs(View, {
+              style: styles.loadingContainer,
+              children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+                size: "small",
+                color: "#007AFF"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.loadingText,
+                children: "Loading device sessions..."
+              })]
+            })
           }) : deviceSessions.length === 0 ? /*#__PURE__*/_jsx(View, {
-            style: styles.emptyState,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.emptyText, {
-                color: colors.secondaryText
-              }],
-              children: "No device sessions found"
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
+            children: /*#__PURE__*/_jsxs(View, {
+              style: styles.settingInfo,
+              children: [/*#__PURE__*/_jsx(OxyIcon, {
+                name: "phone-portrait",
+                size: 20,
+                color: "#ccc",
+                style: styles.settingIcon
+              }), /*#__PURE__*/_jsxs(View, {
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.settingLabel,
+                  children: "No device sessions found"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.settingDescription,
+                  children: "Device session management not available"
+                })]
+              })]
             })
-          }) : /*#__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__*/_jsx(_Fragment, {
+            children: deviceSessions.map((session, index) => /*#__PURE__*/_jsxs(View, {
+              style: [styles.settingItem, index === 0 && styles.firstSettingItem, index === deviceSessions.length - 1 && styles.lastSettingItem],
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.settingInfo,
+                children: [/*#__PURE__*/_jsx(OxyIcon, {
+                  name: session.isCurrent ? "phone-portrait" : "phone-portrait-outline",
+                  size: 20,
+                  color: session.isCurrent ? "#34C759" : "#8E8E93",
+                  style: styles.settingIcon
+                }), /*#__PURE__*/_jsxs(View, {
+                  children: [/*#__PURE__*/_jsxs(Text, {
+                    style: styles.settingLabel,
+                    children: [session.deviceName, " ", session.isCurrent ? '(This device)' : '']
+                  }), /*#__PURE__*/_jsxs(Text, {
+                    style: styles.settingDescription,
+                    children: ["Last active: ", new Date(session.lastActive).toLocaleDateString()]
+                  })]
+                })]
+              }), !session.isCurrent && /*#__PURE__*/_jsx(TouchableOpacity, {
+                style: styles.removeButton,
+                onPress: () => handleRemoteSessionLogout(session.sessionId, session.deviceName),
+                disabled: remotingLogoutSessionId === session.sessionId,
+                children: remotingLogoutSessionId === session.sessionId ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                  size: "small",
+                  color: "#FF3B30"
+                }) : /*#__PURE__*/_jsx(OxyIcon, {
+                  name: "log-out",
+                  size: 16,
+                  color: "#FF3B30"
+                })
+              })]
+            }, session.sessionId))
           })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.actionsSection,
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.actionButton, {
-              borderColor: colors.border,
-              backgroundColor: colors.card
-            }],
-            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
-            }],
-            onPress: handleLogoutAll,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.dangerButtonText, {
-                color: colors.destructive
-              }],
-              children: "Sign Out All Accounts"
+        }), sessionsWithUsers.length === 0 && /*#__PURE__*/_jsx(View, {
+          style: styles.section,
+          children: /*#__PURE__*/_jsx(View, {
+            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
+            children: /*#__PURE__*/_jsxs(View, {
+              style: styles.emptyStateContainer,
+              children: [/*#__PURE__*/_jsx(OxyIcon, {
+                name: "person-outline",
+                size: 48,
+                color: "#ccc"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.emptyStateTitle,
+                children: "No saved accounts"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.emptyStateDescription,
+                children: "Add another account to switch between them quickly"
+              }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                style: styles.addAccountButton,
+                onPress: () => navigate?.('SignIn'),
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.addAccountButtonText,
+                  children: "Add Account"
+                })
+              })]
             })
-          })]
+          })
         })]
       })
     })]
@@ -627,193 +580,202 @@ const ModernAccountSwitcherScreen = ({
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
+    backgroundColor: '#f2f2f2'
   },
   header: {
+    paddingHorizontal: 20,
+    paddingTop: 60,
+    paddingBottom: 16,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 20,
-    paddingTop: 20,
-    paddingBottom: 10
+    alignItems: 'center'
+  },
+  headerTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#000'
   },
   backButton: {
     padding: 8
   },
-  backButtonText: {
-    fontSize: 18,
-    fontFamily: fontFamilies.phuduMedium
+  closeButton: {
+    padding: 8
   },
-  title: {
+  closeButtonText: {
     fontSize: 24,
-    fontFamily: fontFamilies.phuduBold,
-    textAlign: 'center'
-  },
-  headerSpacer: {
-    width: 40
+    color: '#000',
+    fontWeight: '300'
   },
   content: {
     flex: 1,
-    paddingHorizontal: 20
+    padding: 16
   },
-  scrollContent: {
-    paddingBottom: 40
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingTop: 60
-  },
-  loadingText: {
-    marginTop: 16,
-    fontSize: 16,
-    fontFamily: fontFamilies.phudu
+  section: {
+    marginBottom: 24
   },
   sectionTitle: {
-    fontSize: 20,
-    fontFamily: fontFamilies.phuduSemiBold,
-    marginBottom: 20,
-    marginTop: 10
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12
   },
-  emptyState: {
+  settingItem: {
+    backgroundColor: '#fff',
+    padding: 16,
+    flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 40
+    justifyContent: 'space-between',
+    marginBottom: 2
   },
-  emptyText: {
-    fontSize: 16,
-    fontFamily: fontFamilies.phudu,
-    textAlign: 'center'
+  firstSettingItem: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24
   },
-  sessionCard: {
-    borderRadius: 16,
-    marginBottom: 16,
-    padding: 20,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  sessionHeader: {
+  lastSettingItem: {
+    borderBottomLeftRadius: 24,
+    borderBottomRightRadius: 24,
+    marginBottom: 8
+  },
+  currentAccountCard: {
+    borderWidth: 2,
+    borderColor: '#007AFF',
+    backgroundColor: '#007AFF08'
+  },
+  settingInfo: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginBottom: 16
+    flex: 1
   },
-  avatarContainer: {
-    position: 'relative',
-    marginRight: 16
+  settingIcon: {
+    marginRight: 12
   },
-  avatar: {
-    width: 60,
-    height: 60,
-    borderRadius: 30
+  settingLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333',
+    marginBottom: 2
   },
-  avatarPlaceholder: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    justifyContent: 'center',
-    alignItems: 'center'
+  settingDescription: {
+    fontSize: 14,
+    color: '#666'
+  },
+  userIcon: {
+    marginRight: 12,
+    position: 'relative'
+  },
+  accountAvatarImage: {
+    width: 40,
+    height: 40,
+    borderRadius: 20
+  },
+  accountAvatarFallback: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#d169e5',
+    alignItems: 'center',
+    justifyContent: 'center'
   },
-  avatarText: {
-    fontSize: 24,
-    fontFamily: fontFamilies.phuduBold
+  accountAvatarText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold'
   },
   activeBadge: {
     position: 'absolute',
-    bottom: -2,
+    top: -2,
     right: -2,
-    width: 20,
-    height: 20,
-    borderRadius: 10,
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: '#34C759',
+    alignItems: 'center',
     justifyContent: 'center',
-    alignItems: 'center'
+    borderWidth: 2,
+    borderColor: '#fff'
   },
-  activeBadgeText: {
-    color: 'white',
-    fontSize: 12,
-    fontFamily: fontFamilies.phuduBold
-  },
-  userInfo: {
-    flex: 1,
-    justifyContent: 'center'
-  },
-  displayName: {
-    fontSize: 18,
-    fontFamily: fontFamilies.phuduSemiBold,
-    marginBottom: 4
-  },
-  username: {
-    fontSize: 14,
-    fontFamily: fontFamilies.phudu,
-    marginBottom: 4
+  currentBadge: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12
   },
-  lastActive: {
+  currentBadgeText: {
+    color: '#fff',
     fontSize: 12,
-    fontFamily: fontFamilies.phudu
+    fontWeight: '600'
   },
-  sessionActions: {
+  accountActions: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    gap: 12
+    alignItems: 'center',
+    gap: 8
   },
   switchButton: {
-    flex: 1,
-    paddingVertical: 12,
-    paddingHorizontal: 20,
-    borderWidth: 1,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center'
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 16,
+    minWidth: 60,
+    alignItems: 'center'
   },
   switchButtonText: {
+    color: '#fff',
     fontSize: 14,
-    fontFamily: fontFamilies.phuduSemiBold
+    fontWeight: '500'
   },
   removeButton: {
-    flex: 1,
-    paddingVertical: 12,
-    paddingHorizontal: 20,
+    padding: 8,
+    borderRadius: 16,
+    backgroundColor: '#fff',
     borderWidth: 1,
-    borderRadius: 8,
+    borderColor: '#FF3B30',
     alignItems: 'center',
     justifyContent: 'center'
   },
-  removeButtonText: {
-    fontSize: 14,
-    fontFamily: fontFamilies.phuduSemiBold
+  loadingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 20,
+    gap: 12
   },
-  actionsSection: {
-    marginTop: 40,
-    gap: 16
+  loadingText: {
+    fontSize: 16,
+    color: '#666'
   },
-  actionButton: {
-    paddingVertical: 16,
-    paddingHorizontal: 20,
-    borderWidth: 1,
-    borderRadius: 12,
+  emptyStateContainer: {
     alignItems: 'center',
-    justifyContent: 'center'
+    paddingVertical: 32,
+    paddingHorizontal: 20
   },
-  actionButtonText: {
-    fontSize: 16,
-    fontFamily: fontFamilies.phuduSemiBold
+  emptyStateTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginTop: 16,
+    marginBottom: 8
   },
-  dangerButton: {
-    // Additional styles for danger buttons if needed
+  emptyStateDescription: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 20
+  },
+  addAccountButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 20
   },
-  dangerButtonText: {
+  addAccountButtonText: {
+    color: '#fff',
     fontSize: 16,
-    fontFamily: fontFamilies.phuduSemiBold
-  },
-  deviceManagementSection: {
-    marginTop: 20,
-    padding: 16,
-    borderRadius: 12,
-    borderWidth: 1
+    fontWeight: '600'
   }
 });
 export default ModernAccountSwitcherScreen;