@oxyhq/services 5.3.2 → 5.3.3

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -8,17 +8,26 @@ import {
     ScrollView,
     Alert,
     Platform,
+    Image,
+    Dimensions,
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { SecureClientSession } from '../../models/secureSession';
 import { fontFamilies } from '../styles/fonts';
+import { User } from '../../models/interfaces';
+
+interface SessionWithUser extends SecureClientSession {
+    userProfile?: User;
+    isLoadingProfile?: boolean;
+}
 
 const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
     navigate,
     goBack,
+    oxyServices,
 }) => {
     const { 
         user, 
@@ -30,17 +39,68 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         isLoading 
     } = useOxy();
 
+    const [sessionsWithUsers, setSessionsWithUsers] = useState<SessionWithUser[]>([]);
     const [switchingToUserId, setSwitchingToUserId] = useState<string | null>(null);
     const [removingUserId, setRemovingUserId] = useState<string | null>(null);
 
+    const screenWidth = Dimensions.get('window').width;
     const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
-    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-    const primaryColor = '#0066CC';
-    const dangerColor = '#D32F2F';
-    const successColor = '#2E7D32';
+    
+    // Modern color scheme
+    const colors = {
+        background: isDarkTheme ? '#000000' : '#FFFFFF',
+        surface: isDarkTheme ? '#1C1C1E' : '#F2F2F7',
+        card: isDarkTheme ? '#2C2C2E' : '#FFFFFF',
+        text: isDarkTheme ? '#FFFFFF' : '#000000',
+        secondaryText: isDarkTheme ? '#8E8E93' : '#6D6D70',
+        accent: '#007AFF',
+        destructive: '#FF3B30',
+        success: '#34C759',
+        border: isDarkTheme ? '#38383A' : '#C6C6C8',
+        activeCard: isDarkTheme ? '#0A84FF20' : '#007AFF15',
+        shadow: isDarkTheme ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)',
+    };
+
+    // Load user profiles for sessions
+    useEffect(() => {
+        const loadUserProfiles = async () => {
+            if (!sessions.length || !oxyServices) return;
+
+            const updatedSessions: SessionWithUser[] = sessions.map(session => ({
+                ...session,
+                isLoadingProfile: true,
+            }));
+            setSessionsWithUsers(updatedSessions);
+
+            // 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
@@ -134,20 +194,20 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 style={[
                     styles.userItem,
                     {
-                        backgroundColor: isActive ? primaryColor + '20' : secondaryBackgroundColor,
-                        borderColor: isActive ? primaryColor : borderColor,
+                        backgroundColor: isActive ? colors.activeCard : colors.surface,
+                        borderColor: isActive ? colors.accent : colors.border,
                     },
                 ]}
             >
                 <View style={styles.userInfo}>
-                    <Text style={[styles.username, { color: textColor }]}>
+                    <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: successColor }]}>
+                        <View style={[styles.activeBadge, { backgroundColor: colors.success }]}>
                             <Text style={styles.activeBadgeText}>Active</Text>
                         </View>
                     )}
@@ -156,27 +216,27 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 <View style={styles.userActions}>
                     {!isActive && (
                         <TouchableOpacity
-                            style={[styles.switchButton, { borderColor: primaryColor }]}
+                            style={[styles.switchButton, { borderColor: colors.accent }]}
                             onPress={() => handleSwitchSession(session.sessionId)}
                             disabled={isSwitching || isRemoving}
                         >
                             {isSwitching ? (
-                                <ActivityIndicator color={primaryColor} size="small" />
+                                <ActivityIndicator color={colors.accent} size="small" />
                             ) : (
-                                <Text style={[styles.switchButtonText, { color: primaryColor }]}>Switch</Text>
+                                <Text style={[styles.switchButtonText, { color: colors.accent }]}>Switch</Text>
                             )}
                         </TouchableOpacity>
                     )}
 
                     <TouchableOpacity
-                        style={[styles.removeButton, { borderColor: dangerColor }]}
+                        style={[styles.removeButton, { borderColor: colors.destructive }]}
                         onPress={() => handleRemoveSession(session.sessionId)}
                         disabled={isSwitching || isRemoving || sessions.length === 1}
                     >
                         {isRemoving ? (
-                            <ActivityIndicator color={dangerColor} size="small" />
+                            <ActivityIndicator color={colors.destructive} size="small" />
                         ) : (
-                            <Text style={[styles.removeButtonText, { color: dangerColor }]}>Remove</Text>
+                            <Text style={[styles.removeButtonText, { color: colors.destructive }]}>Remove</Text>
                         )}
                     </TouchableOpacity>
                 </View>
@@ -185,12 +245,12 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
+        <View style={[styles.container, { backgroundColor: colors.background }]}>
             <View style={styles.header}>
                 <TouchableOpacity style={styles.backButton} onPress={goBack}>
-                    <Text style={[styles.backButtonText, { color: primaryColor }]}>‹ Back</Text>
+                    <Text style={[styles.backButtonText, { color: colors.accent }]}>‹ Back</Text>
                 </TouchableOpacity>
-                <Text style={[styles.title, { color: textColor }]}>Account Switcher</Text>
+                <Text style={[styles.title, { color: colors.text }]}>Account Switcher</Text>
                 <View style={styles.placeholder} />
             </View>
 
@@ -202,7 +262,7 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 </View>
 
                 <View style={styles.usersContainer}>
-                    <Text style={[styles.sectionTitle, { color: textColor }]}>
+                    <Text style={[styles.sectionTitle, { color: colors.text }]}>
                         Sessions ({sessions.length})
                     </Text>
                     
@@ -211,10 +271,10 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                 <View style={styles.actionsContainer}>
                     <TouchableOpacity
-                        style={[styles.actionButton, { borderColor }]}
+                        style={[styles.actionButton, { borderColor: colors.border }]}
                         onPress={() => navigate('SignIn')}
                     >
-                        <Text style={[styles.actionButtonText, { color: textColor }]}>
+                        <Text style={[styles.actionButtonText, { color: colors.text }]}>
                             Add Another Account
                         </Text>
                     </TouchableOpacity>
@@ -226,9 +286,9 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                             disabled={isLoading}
                         >
                             {isLoading ? (
-                                <ActivityIndicator color={dangerColor} size="small" />
+                                <ActivityIndicator color={colors.destructive} size="small" />
                             ) : (
-                                <Text style={[styles.dangerButtonText, { color: dangerColor }]}>
+                                <Text style={[styles.dangerButtonText, { color: colors.destructive }]}>
                                     Sign Out All Sessions
                                 </Text>
                             )}