@oxyhq/services 6.9.45 → 6.10.1

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -13,15 +13,15 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import type { ClientSession } from '@oxyhq/core';
-import { fontFamilies } from '../styles/fonts';
 import type { User } from '@oxyhq/core';
-import { toast } from '../../lib/sonner';
-import * as Prompt from '@oxyhq/bloom/prompt';
-import { usePromptControl } from '@oxyhq/bloom/prompt';
+import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import OxyIcon from '../components/icon/OxyIcon';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
-import { Header, GroupedSection, LoadingState } from '../components';
+import { Header, LoadingState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
@@ -82,13 +82,14 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     const [pendingRemoteLogout, setPendingRemoteLogout] = useState<{ sessionId: string; deviceName: string } | null>(null);
 
     // Prompt controls
-    const removeSessionPrompt = usePromptControl();
-    const logoutAllPrompt = usePromptControl();
-    const remoteLogoutPrompt = usePromptControl();
-    const logoutAllDevicesPrompt = usePromptControl();
+    const removeSessionDialog = useDialogControl();
+    const logoutAllDialog = useDialogControl();
+    const remoteLogoutDialog = useDialogControl();
+    const logoutAllDevicesDialog = useDialogControl();
 
     const screenWidth = Dimensions.get('window').width;
-    const { t } = useI18n();
+    const { t, locale } = useI18n();
+    const styles = useMemo(() => createStyles(bloomTheme.colors), [bloomTheme.colors]);
 
     // Refresh sessions when screen loads
     useEffect(() => {
@@ -100,6 +101,22 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     // Memoize session IDs to prevent unnecessary re-renders
     const sessionIds = useMemo(() => sessions.map(s => s.sessionId).join(','), [sessions]);
 
+    // Re-load the session profiles whenever the active user's identity
+    // changes (e.g. the user just picked a username in the onboarding flow).
+    // Without this, the cached batch result still has the pre-username state
+    // and `@unknown` shows in the switcher even though the username is saved.
+    const activeUserSignature = useMemo(() => {
+        if (!user) return '';
+        const username = typeof user.username === 'string' ? user.username : '';
+        const avatar = typeof user.avatar === 'string' ? user.avatar : '';
+        const displayName = typeof user.name === 'string'
+            ? user.name
+            : typeof user.name === 'object' && user.name !== null
+                ? (user.name.full || user.name.first || '')
+                : '';
+        return `${username}|${avatar}|${displayName}`;
+    }, [user]);
+
     // Load user profiles for sessions
     // Production-ready: Optimized with batching, memoization, and error handling
     useEffect(() => {
@@ -124,7 +141,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                 // Create a map for O(1) lookup
                 const userProfileMap = new Map<string, User | null>();
-                batchResults.forEach(({ sessionId, user }: { sessionId: string; user: any }) => {
+                batchResults.forEach(({ sessionId, user }: { sessionId: string; user: User | null }) => {
                     userProfileMap.set(sessionId, user);
                 });
 
@@ -158,7 +175,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         return () => {
             cancelled = true;
         };
-    }, [sessionIds, oxyServices, sessions]);
+    }, [sessionIds, oxyServices, sessions, activeUserSignature]);
 
     const handleSwitchSession = useCallback(async (sessionId: string) => {
         if (sessionId === (activeSessionId ?? null)) return; // Already active session
@@ -184,8 +201,8 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     const confirmRemoveSession = useCallback((sessionId: string, displayName: string) => {
         if (removingUserId) return;
         setPendingRemoveSession({ sessionId, displayName });
-        removeSessionPrompt.open();
-    }, [removingUserId, removeSessionPrompt]);
+        removeSessionDialog.open();
+    }, [removingUserId, removeSessionDialog]);
 
     const handleRemoveSession = useCallback(async () => {
         if (!pendingRemoveSession) return;
@@ -206,8 +223,8 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     }, [pendingRemoveSession, removeSession, t]);
 
     const confirmLogoutAll = useCallback(() => {
-        logoutAllPrompt.open();
-    }, [logoutAllPrompt]);
+        logoutAllDialog.open();
+    }, [logoutAllDialog]);
 
     const handleLogoutAll = useCallback(async () => {
         try {
@@ -271,8 +288,8 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     const confirmRemoteSessionLogout = useCallback((sessionId: string, deviceName: string) => {
         if (remotingLogoutSessionId) return;
         setPendingRemoteLogout({ sessionId, deviceName });
-        remoteLogoutPrompt.open();
-    }, [remotingLogoutSessionId, remoteLogoutPrompt]);
+        remoteLogoutDialog.open();
+    }, [remotingLogoutSessionId, remoteLogoutDialog]);
 
     const handleRemoteSessionLogout = useCallback(async () => {
         if (!pendingRemoteLogout) return;
@@ -302,8 +319,8 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         }
 
         if (loggingOutAllDevices) return;
-        logoutAllDevicesPrompt.open();
-    }, [deviceSessions, loggingOutAllDevices, logoutAllDevicesPrompt, t]);
+        logoutAllDevicesDialog.open();
+    }, [deviceSessions, loggingOutAllDevices, logoutAllDevicesDialog, t]);
 
     const handleLogoutAllDevices = useCallback(async () => {
         setLoggingOutAllDevices(true);
@@ -353,44 +370,49 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 {isLoading ? (
                     <LoadingState
                         message={t('accountSwitcher.loading') || 'Loading accounts...'}
-                        color="#007AFF"
+                        color={bloomTheme.colors.info}
                     />
                 ) : (
                     <>
                         {/* Current Account */}
-                        {isAuthenticated && user && (
-                            <View style={styles.section}>
-                                <Text style={styles.sectionTitle}>{t('accountSwitcher.sections.current') || 'Current Account'}</Text>
-
-                                <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard]}>
-                                    <View style={styles.userIcon}>
-                                        {user.avatar ? (
-                                            <Image source={{ uri: oxyServices.getFileDownloadUrl(user.avatar, 'thumb') }} style={styles.accountAvatarImage} />
-                                        ) : (
-                                            <View style={styles.accountAvatarFallback}>
-                                                <Text style={styles.accountAvatarText}>
-                                                    {(typeof user.name === 'string' ? user.name : user.name?.first || user.username)?.charAt(0).toUpperCase()}
-                                                </Text>
+                        {isAuthenticated && user && (() => {
+                            const currentDisplayName = getAccountDisplayName(user, locale);
+                            const currentHandle = getAccountFallbackHandle(user);
+                            const avatarInitial = currentDisplayName.charAt(0).toUpperCase();
+                            return (
+                                <View style={styles.section}>
+                                    <Text style={styles.sectionTitle}>{t('accountSwitcher.sections.current') || 'Current Account'}</Text>
+
+                                    <View style={[styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard]}>
+                                        <View style={styles.userIcon}>
+                                            {user.avatar ? (
+                                                <Image source={{ uri: oxyServices.getFileDownloadUrl(user.avatar, 'thumb') }} style={styles.accountAvatarImage} />
+                                            ) : (
+                                                <View style={styles.accountAvatarFallback}>
+                                                    <Text style={styles.accountAvatarText}>{avatarInitial}</Text>
+                                                </View>
+                                            )}
+                                            <View style={styles.activeBadge}>
+                                                <OxyIcon name="checkmark" size={12} color={bloomTheme.colors.negativeForeground} />
                                             </View>
-                                        )}
-                                        <View style={styles.activeBadge}>
-                                            <OxyIcon name="checkmark" size={12} color="#fff" />
                                         </View>
-                                    </View>
-                                    <View style={styles.settingInfo}>
-                                        <View>
-                                            <Text style={styles.settingLabel}>
-                                                {typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username}
-                                            </Text>
-                                            <Text style={styles.settingDescription}>{user.email || user.username}</Text>
+                                        <View style={styles.settingInfo}>
+                                            <View>
+                                                <Text style={styles.settingLabel}>{currentDisplayName}</Text>
+                                                {user.email || currentHandle ? (
+                                                    <Text style={styles.settingDescription}>
+                                                        {user.email || (currentHandle && user.username ? `@${currentHandle}` : currentHandle)}
+                                                    </Text>
+                                                ) : null}
+                                            </View>
+                                        </View>
+                                        <View style={styles.currentBadge}>
+                                            <Text style={styles.currentBadgeText}>{t('accountSwitcher.currentBadge') || 'Current'}</Text>
                                         </View>
-                                    </View>
-                                    <View style={styles.currentBadge}>
-                                        <Text style={styles.currentBadgeText}>{t('accountSwitcher.currentBadge') || 'Current'}</Text>
                                     </View>
                                 </View>
-                            </View>
-                        )}
+                            );
+                        })()}
 
                         {/* Other Accounts */}
                         {otherSessions.length > 0 && (
@@ -406,9 +428,11 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                     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';
+                                    // Use the shared core helper so the fallback chain
+                                    // (name → username → publicKey → translated "Unnamed")
+                                    // is identical across every UI surface.
+                                    const displayName = getAccountDisplayName(userProfile, locale);
+                                    const fallbackHandle = getAccountFallbackHandle(userProfile);
 
                                     return (
                                         <View
@@ -422,7 +446,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                             <View style={styles.userIcon}>
                                                 {isLoadingProfile ? (
                                                     <View style={styles.accountAvatarFallback}>
-                                                        <ActivityIndicator size="small" color="#007AFF" />
+                                                        <ActivityIndicator size="small" color={bloomTheme.colors.info} />
                                                     </View>
                                                 ) : userProfile?.avatar ? (
                                                     <Image source={{ uri: oxyServices.getFileDownloadUrl(userProfile.avatar, 'thumb') }} style={styles.accountAvatarImage} />
@@ -437,9 +461,11 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                             <View style={styles.settingInfo}>
                                                 <View>
                                                     <Text style={styles.settingLabel}>{displayName}</Text>
-                                                    <Text style={styles.settingDescription}>
-                                                        @{userProfile?.username || 'unknown'}
-                                                    </Text>
+                                                    {fallbackHandle ? (
+                                                        <Text style={styles.settingDescription}>
+                                                            {userProfile?.username ? `@${fallbackHandle}` : fallbackHandle}
+                                                        </Text>
+                                                    ) : null}
                                                 </View>
                                             </View>
                                             <View style={styles.accountActions}>
@@ -449,7 +475,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                     disabled={isSwitching || isRemoving}
                                                 >
                                                     {isSwitching ? (
-                                                        <ActivityIndicator size="small" color="#007AFF" />
+                                                        <ActivityIndicator size="small" color={bloomTheme.colors.info} />
                                                     ) : (
                                                         <Text style={styles.switchButtonText}>Switch</Text>
                                                     )}
@@ -460,9 +486,9 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                     disabled={isSwitching || isRemoving}
                                                 >
                                                     {isRemoving ? (
-                                                        <ActivityIndicator size="small" color="#FF3B30" />
+                                                        <ActivityIndicator size="small" color={bloomTheme.colors.error} />
                                                     ) : (
-                                                        <OxyIcon name="trash" size={16} color="#FF3B30" />
+                                                        <OxyIcon name="trash" size={16} color={bloomTheme.colors.error} />
                                                     )}
                                                 </TouchableOpacity>
                                             </View>
@@ -506,9 +532,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                     const isFirst = index === 0;
                                     const isLast = index === managedAccounts.length - 1;
 
-                                    const managedDisplayName = typeof account.name === 'object'
-                                        ? account.name.full || account.name.first || account.username
-                                        : account.name || account.username || 'Unknown';
+                                    const managedDisplayName = getAccountDisplayName(account, locale);
 
                                     // Determine the manager role for badge display
                                     const myRole = managed.managers?.find(
@@ -540,14 +564,21 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                 )}
                                                 {isActive && (
                                                     <View style={styles.activeBadge}>
-                                                        <OxyIcon name="checkmark" size={12} color="#fff" />
+                                                        <OxyIcon name="checkmark" size={12} color={bloomTheme.colors.negativeForeground} />
                                                     </View>
                                                 )}
                                             </View>
                                             <View style={styles.settingInfo}>
                                                 <View>
                                                     <Text style={styles.settingLabel}>{managedDisplayName}</Text>
-                                                    <Text style={styles.settingDescription}>@{account.username}</Text>
+                                                    {(() => {
+                                                        const handle = getAccountFallbackHandle(account);
+                                                        return handle ? (
+                                                            <Text style={styles.settingDescription}>
+                                                                {account.username ? `@${handle}` : handle}
+                                                            </Text>
+                                                        ) : null;
+                                                    })()}
                                                 </View>
                                             </View>
                                             <View style={styles.accountActions}>
@@ -564,8 +595,8 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                         onPress={() => handleSwitchToManagedAccount(managed.accountId)}
                                                         disabled={isSwitching}
                                                     >
-                                                        {isSwitching ? (
-                                                            <ActivityIndicator size="small" color="#fff" />
+                                                                        {isSwitching ? (
+                                                            <ActivityIndicator size="small" color={bloomTheme.colors.negativeForeground} />
                                                         ) : (
                                                             <Text style={styles.switchButtonText}>Act As</Text>
                                                         )}
@@ -583,12 +614,12 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                     activeOpacity={0.7}
                                 >
                                     <View style={styles.userIcon}>
-                                        <View style={[styles.accountAvatarFallback, { backgroundColor: '#007AFF20' }]}>
-                                            <OxyIcon name="add" size={20} color="#007AFF" />
+                                        <View style={[styles.accountAvatarFallback, { backgroundColor: bloomTheme.colors.primarySubtle }]}>
+                                            <OxyIcon name="add" size={20} color={bloomTheme.colors.info} />
                                         </View>
                                     </View>
                                     <View style={styles.settingInfo}>
-                                        <Text style={[styles.settingLabel, { color: '#007AFF' }]}>Create New Identity</Text>
+                                        <Text style={[styles.settingLabel, { color: bloomTheme.colors.info }]}>Create New Identity</Text>
                                         <Text style={styles.settingDescription}>Add a managed sub-account</Text>
                                     </View>
                                 </TouchableOpacity>
@@ -605,12 +636,12 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                     activeOpacity={0.7}
                                 >
                                     <View style={styles.userIcon}>
-                                        <View style={[styles.accountAvatarFallback, { backgroundColor: '#007AFF20' }]}>
-                                            <OxyIcon name="add" size={20} color="#007AFF" />
+                                        <View style={[styles.accountAvatarFallback, { backgroundColor: bloomTheme.colors.primarySubtle }]}>
+                                            <OxyIcon name="add" size={20} color={bloomTheme.colors.info} />
                                         </View>
                                     </View>
                                     <View style={styles.settingInfo}>
-                                        <Text style={[styles.settingLabel, { color: '#007AFF' }]}>Create New Identity</Text>
+                                        <Text style={[styles.settingLabel, { color: bloomTheme.colors.info }]}>Create New Identity</Text>
                                         <Text style={styles.settingDescription}>Create a managed sub-account you control</Text>
                                     </View>
                                 </TouchableOpacity>
@@ -619,38 +650,28 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                         {/* Quick Actions */}
                         <View style={styles.section}>
-                            <Text style={styles.sectionTitle}>Quick Actions</Text>
-
-                            <GroupedSection
-                                items={[
-                                    {
-                                        id: 'add-account',
-                                        icon: 'account-plus',
-                                        iconColor: '#007AFF',
-                                        title: 'Add Another Account',
-                                        subtitle: 'Sign in with a different account',
-                                        onPress: () => navigate?.('OxyAuth'),
-                                    },
-                                    {
-                                        id: 'device-management',
-                                        icon: 'cellphone',
-                                        iconColor: '#5856D6',
-                                        title: `${showDeviceManagement ? 'Hide' : 'Manage'} Device Sessions`,
-                                        subtitle: 'View and manage sessions on other devices',
-                                        onPress: () => setShowDeviceManagement(!showDeviceManagement),
-                                    },
-                                    {
-                                        id: 'sign-out-all',
-                                        icon: 'logout',
-                                        iconColor: '#FF3B30',
-                                        title: 'Sign Out All Accounts',
-                                        subtitle: 'Remove all accounts from this device',
-                                        onPress: confirmLogoutAll,
-                                        disabled: sessionsWithUsers.length === 0,
-                                    },
-                                ]}
-
-                            />
+                            <SettingsListGroup title="Quick Actions">
+                                <SettingsListItem
+                                    icon={<SettingsIcon name="account-plus" color={bloomTheme.colors.info} />}
+                                    title="Add Another Account"
+                                    description="Sign in with a different account"
+                                    onPress={() => navigate?.('OxyAuth')}
+                                />
+                                <SettingsListItem
+                                    icon={<SettingsIcon name="cellphone" color={bloomTheme.colors.secondary} />}
+                                    title={`${showDeviceManagement ? 'Hide' : 'Manage'} Device Sessions`}
+                                    description="View and manage sessions on other devices"
+                                    onPress={() => setShowDeviceManagement(!showDeviceManagement)}
+                                />
+                                <SettingsListItem
+                                    icon={<SettingsIcon name="logout" color={bloomTheme.colors.error} />}
+                                    title="Sign Out All Accounts"
+                                    description="Remove all accounts from this device"
+                                    onPress={confirmLogoutAll}
+                                    disabled={sessionsWithUsers.length === 0}
+                                    destructive={true}
+                                />
+                            </SettingsListGroup>
                         </View>
 
                         {/* Device Management Section */}
@@ -659,62 +680,53 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                 <Text style={styles.sectionTitle}>{t('accountSwitcher.sections.deviceSessions') || 'Device Sessions'}</Text>
 
                                 {loadingDeviceSessions ? (
-                                    <GroupedSection
-                                        items={[
-                                            {
-                                                id: 'loading-device-sessions',
-                                                icon: 'sync',
-                                                iconColor: '#007AFF',
-                                                title: t('accountSwitcher.device.loadingTitle') || 'Loading device sessions...',
-                                                subtitle: t('accountSwitcher.device.loadingSubtitle') || 'Please wait while we fetch your device sessions',
-                                                disabled: true,
-                                                customContent: (
-                                                    <ActivityIndicator size="small" color="#007AFF" style={{ marginRight: 16 }} />
-                                                ),
-                                            },
-                                        ]}
-
-                                    />
+                                    <SettingsListGroup>
+                                        <SettingsListItem
+                                            icon={<SettingsIcon name="sync" color={bloomTheme.colors.info} />}
+                                            title={t('accountSwitcher.device.loadingTitle') || 'Loading device sessions...'}
+                                            description={t('accountSwitcher.device.loadingSubtitle') || 'Please wait while we fetch your device sessions'}
+                                            disabled={true}
+                                            rightElement={<ActivityIndicator size="small" color={bloomTheme.colors.info} />}
+                                            showChevron={false}
+                                        />
+                                    </SettingsListGroup>
                                 ) : deviceSessions.length === 0 ? (
-                                    <GroupedSection
-                                        items={[
-                                            {
-                                                id: 'no-device-sessions',
-                                                icon: 'cellphone',
-                                                iconColor: '#ccc',
-                                                title: t('accountSwitcher.device.noneTitle') || 'No device sessions found',
-                                                subtitle: t('accountSwitcher.device.noneSubtitle') || 'Device session management not available',
-                                                disabled: true,
-                                            },
-                                        ]}
-
-                                    />
+                                    <SettingsListGroup>
+                                        <SettingsListItem
+                                            icon={<SettingsIcon name="cellphone" color={bloomTheme.colors.textTertiary} />}
+                                            title={t('accountSwitcher.device.noneTitle') || 'No device sessions found'}
+                                            description={t('accountSwitcher.device.noneSubtitle') || 'Device session management not available'}
+                                            disabled={true}
+                                            showChevron={false}
+                                        />
+                                    </SettingsListGroup>
                                 ) : (
-                                    <GroupedSection
-                                        items={deviceSessions.map((session, index) => ({
-                                            id: `device-session-${session.sessionId}`,
-                                            icon: session.isCurrent ? 'cellphone' : 'cellphone-basic',
-                                            iconColor: session.isCurrent ? '#34C759' : '#8E8E93',
-                                            title: `${session.deviceName} ${session.isCurrent ? `(${t('accountSwitcher.device.thisDevice') || 'This device'})` : ''}`,
-                                            subtitle: t('accountSwitcher.device.lastActive', { date: new Date(session.lastActive).toLocaleDateString() }) || `Last active: ${new Date(session.lastActive).toLocaleDateString()}`,
-                                            onPress: session.isCurrent ? undefined : () => confirmRemoteSessionLogout(session.sessionId, session.deviceName),
-                                            disabled: session.isCurrent || remotingLogoutSessionId === session.sessionId,
-                                            customContent: !session.isCurrent ? (
-                                                <TouchableOpacity
-                                                    style={styles.removeButton}
-                                                    onPress={() => confirmRemoteSessionLogout(session.sessionId, session.deviceName)}
-                                                    disabled={remotingLogoutSessionId === session.sessionId}
-                                                >
-                                                    {remotingLogoutSessionId === session.sessionId ? (
-                                                        <ActivityIndicator size="small" color="#FF3B30" />
-                                                    ) : (
-                                                        <OxyIcon name="log-out" size={16} color="#FF3B30" />
-                                                    )}
-                                                </TouchableOpacity>
-                                            ) : undefined,
-                                        }))}
-
-                                    />
+                                    <SettingsListGroup>
+                                        {deviceSessions.map((session) => (
+                                            <SettingsListItem
+                                                key={`device-session-${session.sessionId}`}
+                                                icon={<SettingsIcon name={session.isCurrent ? 'cellphone' : 'cellphone-basic'} color={session.isCurrent ? bloomTheme.colors.success : bloomTheme.colors.textTertiary} />}
+                                                title={`${session.deviceName} ${session.isCurrent ? `(${t('accountSwitcher.device.thisDevice') || 'This device'})` : ''}`}
+                                                description={t('accountSwitcher.device.lastActive', { date: new Date(session.lastActive).toLocaleDateString() }) || `Last active: ${new Date(session.lastActive).toLocaleDateString()}`}
+                                                onPress={session.isCurrent ? undefined : () => confirmRemoteSessionLogout(session.sessionId, session.deviceName)}
+                                                disabled={session.isCurrent || remotingLogoutSessionId === session.sessionId}
+                                                showChevron={false}
+                                                rightElement={!session.isCurrent ? (
+                                                    <TouchableOpacity
+                                                        style={styles.removeButton}
+                                                        onPress={() => confirmRemoteSessionLogout(session.sessionId, session.deviceName)}
+                                                        disabled={remotingLogoutSessionId === session.sessionId}
+                                                    >
+                                                        {remotingLogoutSessionId === session.sessionId ? (
+                                                            <ActivityIndicator size="small" color={bloomTheme.colors.error} />
+                                                        ) : (
+                                                            <OxyIcon name="log-out" size={16} color={bloomTheme.colors.error} />
+                                                        )}
+                                                    </TouchableOpacity>
+                                                ) : undefined}
+                                            />
+                                        ))}
+                                    </SettingsListGroup>
                                 )}
                             </View>
                         )}
@@ -722,270 +734,270 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                         {/* Empty State */}
                         {sessionsWithUsers.length === 0 && (
                             <View style={styles.section}>
-                                <GroupedSection
-                                    items={[
-                                        {
-                                            id: 'empty-state',
-                                            icon: 'account-outline',
-                                            iconColor: '#ccc',
-                                            title: t('accountSwitcher.empty.title') || 'No saved accounts',
-                                            subtitle: t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly',
-                                            onPress: () => navigate?.('OxyAuth'),
-                                            customContent: (
-                                                <View style={styles.emptyStateContainer}>
-                                                    <OxyIcon name="person-outline" size={48} color="#ccc" />
-                                                    <Text style={styles.emptyStateTitle}>{t('accountSwitcher.empty.title') || 'No saved accounts'}</Text>
-                                                    <Text style={styles.emptyStateDescription}>
-                                                        {t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly'}
-                                                    </Text>
-                                                    <TouchableOpacity
-                                                        style={styles.addAccountButton}
-                                                        onPress={() => navigate?.('OxyAuth')}
-                                                    >
-                                                        <Text style={styles.addAccountButtonText}>{t('accountCenter.sections.addAccount') || 'Add Account'}</Text>
-                                                    </TouchableOpacity>
-                                                </View>
-                                            ),
-                                        },
-                                    ]}
-
-                                />
+                                <SettingsListGroup>
+                                    <SettingsListItem
+                                        icon={<SettingsIcon name="account-outline" color={bloomTheme.colors.textTertiary} />}
+                                        title={t('accountSwitcher.empty.title') || 'No saved accounts'}
+                                        description={t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly'}
+                                        onPress={() => navigate?.('OxyAuth')}
+                                        rightElement={
+                                            <View style={styles.emptyStateContainer}>
+                                                <OxyIcon name="person-outline" size={48} color={bloomTheme.colors.textTertiary} />
+                                                <Text style={styles.emptyStateTitle}>{t('accountSwitcher.empty.title') || 'No saved accounts'}</Text>
+                                                <Text style={styles.emptyStateDescription}>
+                                                    {t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly'}
+                                                </Text>
+                                                <TouchableOpacity
+                                                    style={styles.addAccountButton}
+                                                    onPress={() => navigate?.('OxyAuth')}
+                                                >
+                                                    <Text style={styles.addAccountButtonText}>{t('accountCenter.sections.addAccount') || 'Add Account'}</Text>
+                                                </TouchableOpacity>
+                                            </View>
+                                        }
+                                        showChevron={false}
+                                    />
+                                </SettingsListGroup>
                             </View>
                         )}
                     </>
                 )}
             </ScrollView>
-            <Prompt.Basic
-                control={removeSessionPrompt}
+            <Dialog
+                control={removeSessionDialog}
                 title={t('accountSwitcher.confirms.removeTitle') || 'Remove Account'}
                 description={pendingRemoveSession ? (t('accountSwitcher.confirms.remove', { displayName: pendingRemoveSession.displayName }) || `Are you sure you want to remove ${pendingRemoveSession.displayName} from this device? You'll need to sign in again to access this account.`) : ''}
-                onConfirm={handleRemoveSession}
-                confirmButtonCta={t('common.remove') || 'Remove'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('common.remove') || 'Remove', color: 'destructive', onPress: handleRemoveSession },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Basic
-                control={logoutAllPrompt}
+            <Dialog
+                control={logoutAllDialog}
                 title={t('accountSwitcher.confirms.logoutAllTitle') || 'Sign Out All'}
                 description={t('accountSwitcher.confirms.logoutAll') || 'Are you sure you want to sign out of all accounts? This will remove all saved accounts from this device.'}
-                onConfirm={handleLogoutAll}
-                confirmButtonCta={t('common.signOutAll') || 'Sign Out All'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('common.signOutAll') || 'Sign Out All', color: 'destructive', onPress: handleLogoutAll },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Basic
-                control={remoteLogoutPrompt}
+            <Dialog
+                control={remoteLogoutDialog}
                 title={t('accountSwitcher.confirms.remoteLogoutTitle') || 'Remote Sign Out'}
                 description={pendingRemoteLogout ? (t('accountSwitcher.confirms.remoteLogout', { deviceName: pendingRemoteLogout.deviceName }) || `Are you sure you want to sign out from "${pendingRemoteLogout.deviceName}"? This will end the session on that device.`) : ''}
-                onConfirm={handleRemoteSessionLogout}
-                confirmButtonCta={t('common.signOut') || 'Sign Out'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('common.signOut') || 'Sign Out', color: 'destructive', onPress: handleRemoteSessionLogout },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Basic
-                control={logoutAllDevicesPrompt}
+            <Dialog
+                control={logoutAllDevicesDialog}
                 title={t('accountSwitcher.confirms.logoutOthersTitle') || 'Sign Out Other Devices'}
                 description={t('accountSwitcher.confirms.logoutOthers', { count: otherDevicesCount }) || `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.`}
-                onConfirm={handleLogoutAllDevices}
-                confirmButtonCta={t('common.signOutAll') || 'Sign Out All'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('common.signOutAll') || 'Sign Out All', color: 'destructive', onPress: handleLogoutAllDevices },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
         </View>
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#f2f2f2',
-    },
-
-    content: {
-        flex: 1,
-        padding: 16,
-    },
-    section: {
-        marginBottom: 24,
-    },
-    sectionTitle: {
-        fontSize: 16,
-        fontWeight: Platform.OS === 'web' ? '600' : undefined,
-        fontFamily: fontFamilies.interSemiBold,
-        color: '#333',
-    },
-    settingItem: {
-        backgroundColor: '#fff',
-        padding: 16,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 2,
-    },
-    firstSettingItem: {
-        borderTopLeftRadius: 24,
-        borderTopRightRadius: 24,
-    },
-    lastSettingItem: {
-        borderBottomLeftRadius: 24,
-        borderBottomRightRadius: 24,
-        marginBottom: 8,
-    },
-    currentAccountCard: {
-        borderWidth: 2,
-        borderColor: '#007AFF',
-        backgroundColor: '#007AFF08',
-    },
-    settingInfo: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        flex: 1,
-    },
-    settingLabel: {
-        fontSize: 16,
-        fontWeight: '500',
-        color: '#333',
-        marginBottom: 2,
-    },
-    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',
-    },
-    accountAvatarText: {
-        color: 'white',
-        fontSize: 18,
-        fontWeight: 'bold',
-    },
-    activeBadge: {
-        position: 'absolute',
-        top: -2,
-        right: -2,
-        width: 16,
-        height: 16,
-        borderRadius: 8,
-        backgroundColor: '#34C759',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 2,
-        borderColor: '#fff',
-    },
-    currentBadge: {
-        backgroundColor: '#007AFF',
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 12,
-    },
-    currentBadgeText: {
-        color: '#fff',
-        fontSize: 12,
-        fontWeight: '600',
-    },
-    accountActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    switchButton: {
-        backgroundColor: '#007AFF',
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 16,
-        minWidth: 60,
-        alignItems: 'center',
-    },
-    switchButtonText: {
-        color: '#fff',
-        fontSize: 14,
-        fontWeight: '500',
-    },
-    removeButton: {
-        padding: 8,
-        borderRadius: 16,
-        backgroundColor: '#fff',
-        borderWidth: 1,
-        borderColor: '#FF3B30',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    emptyStateContainer: {
-        alignItems: 'center',
-        paddingVertical: 32,
-        paddingHorizontal: 20,
-    },
-    emptyStateTitle: {
-        fontSize: 18,
-        fontWeight: '600',
-        color: '#333',
-        marginTop: 16,
-        marginBottom: 8,
-    },
-    emptyStateDescription: {
-        fontSize: 14,
-        color: '#666',
-        textAlign: 'center',
-        marginBottom: 24,
-        lineHeight: 20,
-    },
-    addAccountButton: {
-        backgroundColor: '#007AFF',
-        paddingHorizontal: 24,
-        paddingVertical: 12,
-        borderRadius: 20,
-    },
-    addAccountButtonText: {
-        color: '#fff',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    sectionSubtitle: {
-        fontSize: 13,
-        color: '#888',
-        marginBottom: 12,
-    },
-    managedAvatarFallback: {
-        backgroundColor: '#5856D6',
-    },
-    roleBadge: {
-        backgroundColor: '#F2F2F7',
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 8,
-    },
-    roleBadgeText: {
-        color: '#666',
-        fontSize: 11,
-        fontWeight: '500',
-        textTransform: 'capitalize',
-    },
-    actingAsBanner: {
-        borderWidth: 2,
-        borderColor: '#FF9500',
-        backgroundColor: '#FF950010',
-    },
-    switchBackButton: {
-        backgroundColor: '#FF9500',
-        paddingHorizontal: 14,
-        paddingVertical: 8,
-        borderRadius: 16,
-    },
-    switchBackButtonText: {
-        color: '#fff',
-        fontSize: 13,
-        fontWeight: '600',
-    },
-});
+const createStyles = (colors: ReturnType<typeof useTheme>['colors']) =>
+    StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: colors.background,
+        },
+
+        content: {
+            flex: 1,
+            padding: 16,
+        },
+        section: {
+            marginBottom: 24,
+        },
+        sectionTitle: {
+            fontSize: 16,
+            fontWeight: Platform.OS === 'web' ? '600' : undefined,
+            color: colors.text,
+        },
+        settingItem: {
+            backgroundColor: colors.card,
+            padding: 16,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: 2,
+        },
+        firstSettingItem: {
+            borderTopLeftRadius: 24,
+            borderTopRightRadius: 24,
+        },
+        lastSettingItem: {
+            borderBottomLeftRadius: 24,
+            borderBottomRightRadius: 24,
+            marginBottom: 8,
+        },
+        currentAccountCard: {
+            borderWidth: 2,
+            borderColor: colors.info,
+            backgroundColor: colors.primarySubtle,
+        },
+        settingInfo: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            flex: 1,
+        },
+        settingLabel: {
+            fontSize: 16,
+            fontWeight: '500',
+            color: colors.text,
+            marginBottom: 2,
+        },
+        settingDescription: {
+            fontSize: 14,
+            color: colors.textSecondary,
+        },
+        userIcon: {
+            marginRight: 12,
+            position: 'relative',
+        },
+        accountAvatarImage: {
+            width: 40,
+            height: 40,
+            borderRadius: 20,
+        },
+        accountAvatarFallback: {
+            width: 40,
+            height: 40,
+            borderRadius: 20,
+            backgroundColor: colors.primary,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        accountAvatarText: {
+            color: colors.negativeForeground,
+            fontSize: 18,
+            fontWeight: 'bold',
+        },
+        activeBadge: {
+            position: 'absolute',
+            top: -2,
+            right: -2,
+            width: 16,
+            height: 16,
+            borderRadius: 8,
+            backgroundColor: colors.success,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderWidth: 2,
+            borderColor: colors.card,
+        },
+        currentBadge: {
+            backgroundColor: colors.info,
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+            borderRadius: 12,
+        },
+        currentBadgeText: {
+            color: colors.negativeForeground,
+            fontSize: 12,
+            fontWeight: '600',
+        },
+        accountActions: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        },
+        switchButton: {
+            backgroundColor: colors.info,
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+            borderRadius: 16,
+            minWidth: 60,
+            alignItems: 'center',
+        },
+        switchButtonText: {
+            color: colors.negativeForeground,
+            fontSize: 14,
+            fontWeight: '500',
+        },
+        removeButton: {
+            padding: 8,
+            borderRadius: 16,
+            backgroundColor: colors.card,
+            borderWidth: 1,
+            borderColor: colors.error,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        emptyStateContainer: {
+            alignItems: 'center',
+            paddingVertical: 32,
+            paddingHorizontal: 20,
+        },
+        emptyStateTitle: {
+            fontSize: 18,
+            fontWeight: '600',
+            color: colors.text,
+            marginTop: 16,
+            marginBottom: 8,
+        },
+        emptyStateDescription: {
+            fontSize: 14,
+            color: colors.textSecondary,
+            textAlign: 'center',
+            marginBottom: 24,
+            lineHeight: 20,
+        },
+        addAccountButton: {
+            backgroundColor: colors.info,
+            paddingHorizontal: 24,
+            paddingVertical: 12,
+            borderRadius: 20,
+        },
+        addAccountButtonText: {
+            color: colors.negativeForeground,
+            fontSize: 16,
+            fontWeight: '600',
+        },
+        sectionSubtitle: {
+            fontSize: 13,
+            color: colors.textTertiary,
+            marginBottom: 12,
+        },
+        managedAvatarFallback: {
+            backgroundColor: colors.secondary,
+        },
+        roleBadge: {
+            backgroundColor: colors.backgroundSecondary,
+            paddingHorizontal: 8,
+            paddingVertical: 3,
+            borderRadius: 8,
+        },
+        roleBadgeText: {
+            color: colors.textSecondary,
+            fontSize: 11,
+            fontWeight: '500',
+            textTransform: 'capitalize',
+        },
+        actingAsBanner: {
+            borderWidth: 2,
+            borderColor: colors.warning,
+            backgroundColor: colors.primarySubtle,
+        },
+        switchBackButton: {
+            backgroundColor: colors.warning,
+            paddingHorizontal: 14,
+            paddingVertical: 8,
+            borderRadius: 16,
+        },
+        switchBackButtonText: {
+            color: colors.negativeForeground,
+            fontSize: 13,
+            fontWeight: '600',
+        },
+    });
 
 export default ModernAccountSwitcherScreen;