@oxyhq/services 6.9.45 → 6.10.1

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

@@ -2,12 +2,12 @@
 
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Platform, Image, Dimensions } from 'react-native';
-import { fontFamilies } from "../styles/fonts.js";
-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.js";
-import { Header, GroupedSection, LoadingState } from "../components/index.js";
+import { Header, LoadingState } from "../components/index.js";
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from "../components/SettingsIcon.js";
 import { useI18n } from "../hooks/useI18n.js";
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from "../context/OxyContext.js";
@@ -52,14 +52,16 @@ const ModernAccountSwitcherScreen = ({
   const [pendingRemoteLogout, setPendingRemoteLogout] = useState(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
+    t,
+    locale
   } = useI18n();
+  const styles = useMemo(() => createStyles(bloomTheme.colors), [bloomTheme.colors]);
 
   // Refresh sessions when screen loads
   useEffect(() => {
@@ -71,6 +73,18 @@ const ModernAccountSwitcherScreen = ({
   // 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(() => {
@@ -129,7 +143,7 @@ const ModernAccountSwitcherScreen = ({
     return () => {
       cancelled = true;
     };
-  }, [sessionIds, oxyServices, sessions]);
+  }, [sessionIds, oxyServices, sessions, activeUserSignature]);
   const handleSwitchSession = useCallback(async sessionId => {
     if (sessionId === (activeSessionId ?? null)) return; // Already active session
     if (switchingToUserId) return; // Already switching
@@ -156,8 +170,8 @@ const ModernAccountSwitcherScreen = ({
       sessionId,
       displayName
     });
-    removeSessionPrompt.open();
-  }, [removingUserId, removeSessionPrompt]);
+    removeSessionDialog.open();
+  }, [removingUserId, removeSessionDialog]);
   const handleRemoveSession = useCallback(async () => {
     if (!pendingRemoveSession) return;
     const {
@@ -178,8 +192,8 @@ const ModernAccountSwitcherScreen = ({
     }
   }, [pendingRemoveSession, removeSession, t]);
   const confirmLogoutAll = useCallback(() => {
-    logoutAllPrompt.open();
-  }, [logoutAllPrompt]);
+    logoutAllDialog.open();
+  }, [logoutAllDialog]);
   const handleLogoutAll = useCallback(async () => {
     try {
       await logoutAll();
@@ -243,8 +257,8 @@ const ModernAccountSwitcherScreen = ({
       sessionId,
       deviceName
     });
-    remoteLogoutPrompt.open();
-  }, [remotingLogoutSessionId, remoteLogoutPrompt]);
+    remoteLogoutDialog.open();
+  }, [remotingLogoutSessionId, remoteLogoutDialog]);
   const handleRemoteSessionLogout = useCallback(async () => {
     if (!pendingRemoteLogout) return;
     const {
@@ -274,8 +288,8 @@ const ModernAccountSwitcherScreen = ({
       return;
     }
     if (loggingOutAllDevices) return;
-    logoutAllDevicesPrompt.open();
-  }, [deviceSessions, loggingOutAllDevices, logoutAllDevicesPrompt, t]);
+    logoutAllDevicesDialog.open();
+  }, [deviceSessions, loggingOutAllDevices, logoutAllDevicesDialog, t]);
   const handleLogoutAllDevices = useCallback(async () => {
     setLoggingOutAllDevices(true);
     try {
@@ -314,56 +328,61 @@ const ModernAccountSwitcherScreen = ({
       style: styles.content,
       children: isLoading ? /*#__PURE__*/_jsx(LoadingState, {
         message: t('accountSwitcher.loading') || 'Loading accounts...',
-        color: "#007AFF"
+        color: bloomTheme.colors.info
       }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [isAuthenticated && user && /*#__PURE__*/_jsxs(View, {
-          style: styles.section,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionTitle,
-            children: t('accountSwitcher.sections.current') || 'Current Account'
-          }), /*#__PURE__*/_jsxs(View, {
-            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard],
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.userIcon,
-              children: [user.avatar ? /*#__PURE__*/_jsx(Image, {
-                source: {
-                  uri: oxyServices.getFileDownloadUrl(user.avatar, 'thumb')
-                },
-                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()
+        children: [isAuthenticated && user && (() => {
+          const currentDisplayName = getAccountDisplayName(user, locale);
+          const currentHandle = getAccountFallbackHandle(user);
+          const avatarInitial = currentDisplayName.charAt(0).toUpperCase();
+          return /*#__PURE__*/_jsxs(View, {
+            style: styles.section,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.sectionTitle,
+              children: t('accountSwitcher.sections.current') || 'Current Account'
+            }), /*#__PURE__*/_jsxs(View, {
+              style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard],
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.userIcon,
+                children: [user.avatar ? /*#__PURE__*/_jsx(Image, {
+                  source: {
+                    uri: oxyServices.getFileDownloadUrl(user.avatar, 'thumb')
+                  },
+                  style: styles.accountAvatarImage
+                }) : /*#__PURE__*/_jsx(View, {
+                  style: styles.accountAvatarFallback,
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: styles.accountAvatarText,
+                    children: avatarInitial
+                  })
+                }), /*#__PURE__*/_jsx(View, {
+                  style: styles.activeBadge,
+                  children: /*#__PURE__*/_jsx(OxyIcon, {
+                    name: "checkmark",
+                    size: 12,
+                    color: bloomTheme.colors.negativeForeground
+                  })
+                })]
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.settingInfo,
+                children: /*#__PURE__*/_jsxs(View, {
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.settingLabel,
+                    children: currentDisplayName
+                  }), user.email || currentHandle ? /*#__PURE__*/_jsx(Text, {
+                    style: styles.settingDescription,
+                    children: user.email || (currentHandle && user.username ? `@${currentHandle}` : currentHandle)
+                  }) : null]
                 })
               }), /*#__PURE__*/_jsx(View, {
-                style: styles.activeBadge,
-                children: /*#__PURE__*/_jsx(OxyIcon, {
-                  name: "checkmark",
-                  size: 12,
-                  color: "#fff"
+                style: styles.currentBadge,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.currentBadgeText,
+                  children: t('accountSwitcher.currentBadge') || 'Current'
                 })
               })]
-            }), /*#__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: t('accountSwitcher.currentBadge') || 'Current'
-              })
             })]
-          })]
-        }), otherSessions.length > 0 && /*#__PURE__*/_jsxs(View, {
+          });
+        })(), otherSessions.length > 0 && /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
@@ -379,7 +398,12 @@ const ModernAccountSwitcherScreen = ({
               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 /*#__PURE__*/_jsxs(View, {
               style: [styles.settingItem, isFirst && styles.firstSettingItem, isLast && styles.lastSettingItem],
               children: [/*#__PURE__*/_jsx(View, {
@@ -388,7 +412,7 @@ const ModernAccountSwitcherScreen = ({
                   style: styles.accountAvatarFallback,
                   children: /*#__PURE__*/_jsx(ActivityIndicator, {
                     size: "small",
-                    color: "#007AFF"
+                    color: bloomTheme.colors.info
                   })
                 }) : userProfile?.avatar ? /*#__PURE__*/_jsx(Image, {
                   source: {
@@ -408,10 +432,10 @@ const ModernAccountSwitcherScreen = ({
                   children: [/*#__PURE__*/_jsx(Text, {
                     style: styles.settingLabel,
                     children: displayName
-                  }), /*#__PURE__*/_jsxs(Text, {
+                  }), fallbackHandle ? /*#__PURE__*/_jsx(Text, {
                     style: styles.settingDescription,
-                    children: ["@", userProfile?.username || 'unknown']
-                  })]
+                    children: userProfile?.username ? `@${fallbackHandle}` : fallbackHandle
+                  }) : null]
                 })
               }), /*#__PURE__*/_jsxs(View, {
                 style: styles.accountActions,
@@ -421,7 +445,7 @@ const ModernAccountSwitcherScreen = ({
                   disabled: isSwitching || isRemoving,
                   children: isSwitching ? /*#__PURE__*/_jsx(ActivityIndicator, {
                     size: "small",
-                    color: "#007AFF"
+                    color: bloomTheme.colors.info
                   }) : /*#__PURE__*/_jsx(Text, {
                     style: styles.switchButtonText,
                     children: "Switch"
@@ -432,11 +456,11 @@ const ModernAccountSwitcherScreen = ({
                   disabled: isSwitching || isRemoving,
                   children: isRemoving ? /*#__PURE__*/_jsx(ActivityIndicator, {
                     size: "small",
-                    color: "#FF3B30"
+                    color: bloomTheme.colors.error
                   }) : /*#__PURE__*/_jsx(OxyIcon, {
                     name: "trash",
                     size: 16,
-                    color: "#FF3B30"
+                    color: bloomTheme.colors.error
                   })
                 })]
               })]
@@ -480,7 +504,7 @@ const ModernAccountSwitcherScreen = ({
             const isSwitching = switchingManagedId === managed.accountId;
             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(m => m.userId === user?.id)?.role ?? 'owner';
@@ -507,7 +531,7 @@ const ModernAccountSwitcherScreen = ({
                   children: /*#__PURE__*/_jsx(OxyIcon, {
                     name: "checkmark",
                     size: 12,
-                    color: "#fff"
+                    color: bloomTheme.colors.negativeForeground
                   })
                 })]
               }), /*#__PURE__*/_jsx(View, {
@@ -516,10 +540,13 @@ const ModernAccountSwitcherScreen = ({
                   children: [/*#__PURE__*/_jsx(Text, {
                     style: styles.settingLabel,
                     children: managedDisplayName
-                  }), /*#__PURE__*/_jsxs(Text, {
-                    style: styles.settingDescription,
-                    children: ["@", account.username]
-                  })]
+                  }), (() => {
+                    const handle = getAccountFallbackHandle(account);
+                    return handle ? /*#__PURE__*/_jsx(Text, {
+                      style: styles.settingDescription,
+                      children: account.username ? `@${handle}` : handle
+                    }) : null;
+                  })()]
                 })
               }), /*#__PURE__*/_jsxs(View, {
                 style: styles.accountActions,
@@ -541,7 +568,7 @@ const ModernAccountSwitcherScreen = ({
                   disabled: isSwitching,
                   children: isSwitching ? /*#__PURE__*/_jsx(ActivityIndicator, {
                     size: "small",
-                    color: "#fff"
+                    color: bloomTheme.colors.negativeForeground
                   }) : /*#__PURE__*/_jsx(Text, {
                     style: styles.switchButtonText,
                     children: "Act As"
@@ -559,19 +586,19 @@ const ModernAccountSwitcherScreen = ({
               style: styles.userIcon,
               children: /*#__PURE__*/_jsx(View, {
                 style: [styles.accountAvatarFallback, {
-                  backgroundColor: '#007AFF20'
+                  backgroundColor: bloomTheme.colors.primarySubtle
                 }],
                 children: /*#__PURE__*/_jsx(OxyIcon, {
                   name: "add",
                   size: 20,
-                  color: "#007AFF"
+                  color: bloomTheme.colors.info
                 })
               })
             }), /*#__PURE__*/_jsxs(View, {
               style: styles.settingInfo,
               children: [/*#__PURE__*/_jsx(Text, {
                 style: [styles.settingLabel, {
-                  color: '#007AFF'
+                  color: bloomTheme.colors.info
                 }],
                 children: "Create New Identity"
               }), /*#__PURE__*/_jsx(Text, {
@@ -593,19 +620,19 @@ const ModernAccountSwitcherScreen = ({
               style: styles.userIcon,
               children: /*#__PURE__*/_jsx(View, {
                 style: [styles.accountAvatarFallback, {
-                  backgroundColor: '#007AFF20'
+                  backgroundColor: bloomTheme.colors.primarySubtle
                 }],
                 children: /*#__PURE__*/_jsx(OxyIcon, {
                   name: "add",
                   size: 20,
-                  color: "#007AFF"
+                  color: bloomTheme.colors.info
                 })
               })
             }), /*#__PURE__*/_jsxs(View, {
               style: styles.settingInfo,
               children: [/*#__PURE__*/_jsx(Text, {
                 style: [styles.settingLabel, {
-                  color: '#007AFF'
+                  color: bloomTheme.colors.info
                 }],
                 children: "Create New Identity"
               }), /*#__PURE__*/_jsx(Text, {
@@ -614,108 +641,114 @@ const ModernAccountSwitcherScreen = ({
               })]
             })]
           })]
-        }), /*#__PURE__*/_jsxs(View, {
+        }), /*#__PURE__*/_jsx(View, {
           style: styles.section,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionTitle,
-            children: "Quick Actions"
-          }), /*#__PURE__*/_jsx(GroupedSection, {
-            items: [{
-              id: 'add-account',
-              icon: 'account-plus',
-              iconColor: '#007AFF',
-              title: 'Add Another Account',
-              subtitle: 'Sign in with a different account',
+          children: /*#__PURE__*/_jsxs(SettingsListGroup, {
+            title: "Quick Actions",
+            children: [/*#__PURE__*/_jsx(SettingsListItem, {
+              icon: /*#__PURE__*/_jsx(SettingsIcon, {
+                name: "account-plus",
+                color: bloomTheme.colors.info
+              }),
+              title: "Add Another Account",
+              description: "Sign in with a different account",
               onPress: () => navigate?.('OxyAuth')
-            }, {
-              id: 'device-management',
-              icon: 'cellphone',
-              iconColor: '#5856D6',
+            }), /*#__PURE__*/_jsx(SettingsListItem, {
+              icon: /*#__PURE__*/_jsx(SettingsIcon, {
+                name: "cellphone",
+                color: bloomTheme.colors.secondary
+              }),
               title: `${showDeviceManagement ? 'Hide' : 'Manage'} Device Sessions`,
-              subtitle: 'View and manage sessions on other devices',
+              description: "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',
+            }), /*#__PURE__*/_jsx(SettingsListItem, {
+              icon: /*#__PURE__*/_jsx(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
-            }]
-          })]
+              disabled: sessionsWithUsers.length === 0,
+              destructive: true
+            })]
+          })
         }), showDeviceManagement && /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
             children: t('accountSwitcher.sections.deviceSessions') || 'Device Sessions'
-          }), loadingDeviceSessions ? /*#__PURE__*/_jsx(GroupedSection, {
-            items: [{
-              id: 'loading-device-sessions',
-              icon: 'sync',
-              iconColor: '#007AFF',
+          }), loadingDeviceSessions ? /*#__PURE__*/_jsx(SettingsListGroup, {
+            children: /*#__PURE__*/_jsx(SettingsListItem, {
+              icon: /*#__PURE__*/_jsx(SettingsIcon, {
+                name: "sync",
+                color: bloomTheme.colors.info
+              }),
               title: t('accountSwitcher.device.loadingTitle') || 'Loading device sessions...',
-              subtitle: t('accountSwitcher.device.loadingSubtitle') || 'Please wait while we fetch your device sessions',
+              description: t('accountSwitcher.device.loadingSubtitle') || 'Please wait while we fetch your device sessions',
               disabled: true,
-              customContent: /*#__PURE__*/_jsx(ActivityIndicator, {
+              rightElement: /*#__PURE__*/_jsx(ActivityIndicator, {
                 size: "small",
-                color: "#007AFF",
-                style: {
-                  marginRight: 16
-                }
-              })
-            }]
-          }) : deviceSessions.length === 0 ? /*#__PURE__*/_jsx(GroupedSection, {
-            items: [{
-              id: 'no-device-sessions',
-              icon: 'cellphone',
-              iconColor: '#ccc',
+                color: bloomTheme.colors.info
+              }),
+              showChevron: false
+            })
+          }) : deviceSessions.length === 0 ? /*#__PURE__*/_jsx(SettingsListGroup, {
+            children: /*#__PURE__*/_jsx(SettingsListItem, {
+              icon: /*#__PURE__*/_jsx(SettingsIcon, {
+                name: "cellphone",
+                color: bloomTheme.colors.textTertiary
+              }),
               title: t('accountSwitcher.device.noneTitle') || 'No device sessions found',
-              subtitle: t('accountSwitcher.device.noneSubtitle') || 'Device session management not available',
-              disabled: true
-            }]
-          }) : /*#__PURE__*/_jsx(GroupedSection, {
-            items: deviceSessions.map((session, index) => ({
-              id: `device-session-${session.sessionId}`,
-              icon: session.isCurrent ? 'cellphone' : 'cellphone-basic',
-              iconColor: session.isCurrent ? '#34C759' : '#8E8E93',
+              description: t('accountSwitcher.device.noneSubtitle') || 'Device session management not available',
+              disabled: true,
+              showChevron: false
+            })
+          }) : /*#__PURE__*/_jsx(SettingsListGroup, {
+            children: deviceSessions.map(session => /*#__PURE__*/_jsx(SettingsListItem, {
+              icon: /*#__PURE__*/_jsx(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'})` : ''}`,
-              subtitle: t('accountSwitcher.device.lastActive', {
+              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,
-              customContent: !session.isCurrent ? /*#__PURE__*/_jsx(TouchableOpacity, {
+              showChevron: false,
+              rightElement: !session.isCurrent ? /*#__PURE__*/_jsx(TouchableOpacity, {
                 style: styles.removeButton,
                 onPress: () => confirmRemoteSessionLogout(session.sessionId, session.deviceName),
                 disabled: remotingLogoutSessionId === session.sessionId,
                 children: remotingLogoutSessionId === session.sessionId ? /*#__PURE__*/_jsx(ActivityIndicator, {
                   size: "small",
-                  color: "#FF3B30"
+                  color: bloomTheme.colors.error
                 }) : /*#__PURE__*/_jsx(OxyIcon, {
                   name: "log-out",
                   size: 16,
-                  color: "#FF3B30"
+                  color: bloomTheme.colors.error
                 })
               }) : undefined
-            }))
+            }, `device-session-${session.sessionId}`))
           })]
         }), sessionsWithUsers.length === 0 && /*#__PURE__*/_jsx(View, {
           style: styles.section,
-          children: /*#__PURE__*/_jsx(GroupedSection, {
-            items: [{
-              id: 'empty-state',
-              icon: 'account-outline',
-              iconColor: '#ccc',
+          children: /*#__PURE__*/_jsx(SettingsListGroup, {
+            children: /*#__PURE__*/_jsx(SettingsListItem, {
+              icon: /*#__PURE__*/_jsx(SettingsIcon, {
+                name: "account-outline",
+                color: bloomTheme.colors.textTertiary
+              }),
               title: t('accountSwitcher.empty.title') || 'No saved accounts',
-              subtitle: t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly',
+              description: t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly',
               onPress: () => navigate?.('OxyAuth'),
-              customContent: /*#__PURE__*/_jsxs(View, {
+              rightElement: /*#__PURE__*/_jsxs(View, {
                 style: styles.emptyStateContainer,
                 children: [/*#__PURE__*/_jsx(OxyIcon, {
                   name: "person-outline",
                   size: 48,
-                  color: "#ccc"
+                  color: bloomTheme.colors.textTertiary
                 }), /*#__PURE__*/_jsx(Text, {
                   style: styles.emptyStateTitle,
                   children: t('accountSwitcher.empty.title') || 'No saved accounts'
@@ -730,52 +763,73 @@ const ModernAccountSwitcherScreen = ({
                     children: t('accountCenter.sections.addAccount') || 'Add Account'
                   })
                 })]
-              })
-            }]
+              }),
+              showChevron: false
+            })
           })
         })]
       })
-    }), /*#__PURE__*/_jsx(Prompt.Basic, {
-      control: removeSessionPrompt,
+    }), /*#__PURE__*/_jsx(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"
-    }), /*#__PURE__*/_jsx(Prompt.Basic, {
-      control: logoutAllPrompt,
+      actions: [{
+        label: t('common.remove') || 'Remove',
+        color: 'destructive',
+        onPress: handleRemoveSession
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
+    }), /*#__PURE__*/_jsx(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"
-    }), /*#__PURE__*/_jsx(Prompt.Basic, {
-      control: remoteLogoutPrompt,
+      actions: [{
+        label: t('common.signOutAll') || 'Sign Out All',
+        color: 'destructive',
+        onPress: handleLogoutAll
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
+    }), /*#__PURE__*/_jsx(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"
-    }), /*#__PURE__*/_jsx(Prompt.Basic, {
-      control: logoutAllDevicesPrompt,
+      actions: [{
+        label: t('common.signOut') || 'Sign Out',
+        color: 'destructive',
+        onPress: handleRemoteSessionLogout
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
+    }), /*#__PURE__*/_jsx(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'
+      }]
     })]
   });
 };
-const styles = StyleSheet.create({
+const createStyles = colors => StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f2f2f2'
+    backgroundColor: colors.background
   },
   content: {
     flex: 1,
@@ -787,11 +841,10 @@ const styles = StyleSheet.create({
   sectionTitle: {
     fontSize: 16,
     fontWeight: Platform.OS === 'web' ? '600' : undefined,
-    fontFamily: fontFamilies.interSemiBold,
-    color: '#333'
+    color: colors.text
   },
   settingItem: {
-    backgroundColor: '#fff',
+    backgroundColor: colors.card,
     padding: 16,
     flexDirection: 'row',
     alignItems: 'center',
@@ -809,8 +862,8 @@ const styles = StyleSheet.create({
   },
   currentAccountCard: {
     borderWidth: 2,
-    borderColor: '#007AFF',
-    backgroundColor: '#007AFF08'
+    borderColor: colors.info,
+    backgroundColor: colors.primarySubtle
   },
   settingInfo: {
     flexDirection: 'row',
@@ -820,12 +873,12 @@ const styles = StyleSheet.create({
   settingLabel: {
     fontSize: 16,
     fontWeight: '500',
-    color: '#333',
+    color: colors.text,
     marginBottom: 2
   },
   settingDescription: {
     fontSize: 14,
-    color: '#666'
+    color: colors.textSecondary
   },
   userIcon: {
     marginRight: 12,
@@ -840,12 +893,12 @@ const styles = StyleSheet.create({
     width: 40,
     height: 40,
     borderRadius: 20,
-    backgroundColor: '#d169e5',
+    backgroundColor: colors.primary,
     alignItems: 'center',
     justifyContent: 'center'
   },
   accountAvatarText: {
-    color: 'white',
+    color: colors.negativeForeground,
     fontSize: 18,
     fontWeight: 'bold'
   },
@@ -856,20 +909,20 @@ const styles = StyleSheet.create({
     width: 16,
     height: 16,
     borderRadius: 8,
-    backgroundColor: '#34C759',
+    backgroundColor: colors.success,
     alignItems: 'center',
     justifyContent: 'center',
     borderWidth: 2,
-    borderColor: '#fff'
+    borderColor: colors.card
   },
   currentBadge: {
-    backgroundColor: '#007AFF',
+    backgroundColor: colors.info,
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 12
   },
   currentBadgeText: {
-    color: '#fff',
+    color: colors.negativeForeground,
     fontSize: 12,
     fontWeight: '600'
   },
@@ -879,7 +932,7 @@ const styles = StyleSheet.create({
     gap: 8
   },
   switchButton: {
-    backgroundColor: '#007AFF',
+    backgroundColor: colors.info,
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 16,
@@ -887,16 +940,16 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   switchButtonText: {
-    color: '#fff',
+    color: colors.negativeForeground,
     fontSize: 14,
     fontWeight: '500'
   },
   removeButton: {
     padding: 8,
     borderRadius: 16,
-    backgroundColor: '#fff',
+    backgroundColor: colors.card,
     borderWidth: 1,
-    borderColor: '#FF3B30',
+    borderColor: colors.error,
     alignItems: 'center',
     justifyContent: 'center'
   },
@@ -908,61 +961,61 @@ const styles = StyleSheet.create({
   emptyStateTitle: {
     fontSize: 18,
     fontWeight: '600',
-    color: '#333',
+    color: colors.text,
     marginTop: 16,
     marginBottom: 8
   },
   emptyStateDescription: {
     fontSize: 14,
-    color: '#666',
+    color: colors.textSecondary,
     textAlign: 'center',
     marginBottom: 24,
     lineHeight: 20
   },
   addAccountButton: {
-    backgroundColor: '#007AFF',
+    backgroundColor: colors.info,
     paddingHorizontal: 24,
     paddingVertical: 12,
     borderRadius: 20
   },
   addAccountButtonText: {
-    color: '#fff',
+    color: colors.negativeForeground,
     fontSize: 16,
     fontWeight: '600'
   },
   sectionSubtitle: {
     fontSize: 13,
-    color: '#888',
+    color: colors.textTertiary,
     marginBottom: 12
   },
   managedAvatarFallback: {
-    backgroundColor: '#5856D6'
+    backgroundColor: colors.secondary
   },
   roleBadge: {
-    backgroundColor: '#F2F2F7',
+    backgroundColor: colors.backgroundSecondary,
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 8
   },
   roleBadgeText: {
-    color: '#666',
+    color: colors.textSecondary,
     fontSize: 11,
     fontWeight: '500',
     textTransform: 'capitalize'
   },
   actingAsBanner: {
     borderWidth: 2,
-    borderColor: '#FF9500',
-    backgroundColor: '#FF950010'
+    borderColor: colors.warning,
+    backgroundColor: colors.primarySubtle
   },
   switchBackButton: {
-    backgroundColor: '#FF9500',
+    backgroundColor: colors.warning,
     paddingHorizontal: 14,
     paddingVertical: 8,
     borderRadius: 16
   },
   switchBackButtonText: {
-    color: '#fff',
+    color: colors.negativeForeground,
     fontSize: 13,
     fontWeight: '600'
   }