@oxyhq/services 6.9.46 → 6.10.2

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

@@ -2,10 +2,8 @@
 
 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, LoadingState } from "../components/index.js";
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
@@ -54,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(() => {
@@ -73,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(() => {
@@ -131,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
@@ -158,8 +170,8 @@ const ModernAccountSwitcherScreen = ({
       sessionId,
       displayName
     });
-    removeSessionPrompt.open();
-  }, [removingUserId, removeSessionPrompt]);
+    removeSessionDialog.open();
+  }, [removingUserId, removeSessionDialog]);
   const handleRemoveSession = useCallback(async () => {
     if (!pendingRemoveSession) return;
     const {
@@ -180,8 +192,8 @@ const ModernAccountSwitcherScreen = ({
     }
   }, [pendingRemoveSession, removeSession, t]);
   const confirmLogoutAll = useCallback(() => {
-    logoutAllPrompt.open();
-  }, [logoutAllPrompt]);
+    logoutAllDialog.open();
+  }, [logoutAllDialog]);
   const handleLogoutAll = useCallback(async () => {
     try {
       await logoutAll();
@@ -245,8 +257,8 @@ const ModernAccountSwitcherScreen = ({
       sessionId,
       deviceName
     });
-    remoteLogoutPrompt.open();
-  }, [remotingLogoutSessionId, remoteLogoutPrompt]);
+    remoteLogoutDialog.open();
+  }, [remotingLogoutSessionId, remoteLogoutDialog]);
   const handleRemoteSessionLogout = useCallback(async () => {
     if (!pendingRemoteLogout) return;
     const {
@@ -276,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 {
@@ -316,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,
@@ -381,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, {
@@ -390,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: {
@@ -410,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,
@@ -423,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"
@@ -434,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
                   })
                 })]
               })]
@@ -482,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';
@@ -509,7 +531,7 @@ const ModernAccountSwitcherScreen = ({
                   children: /*#__PURE__*/_jsx(OxyIcon, {
                     name: "checkmark",
                     size: 12,
-                    color: "#fff"
+                    color: bloomTheme.colors.negativeForeground
                   })
                 })]
               }), /*#__PURE__*/_jsx(View, {
@@ -518,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,
@@ -543,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"
@@ -561,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, {
@@ -595,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, {
@@ -623,7 +648,7 @@ const ModernAccountSwitcherScreen = ({
             children: [/*#__PURE__*/_jsx(SettingsListItem, {
               icon: /*#__PURE__*/_jsx(SettingsIcon, {
                 name: "account-plus",
-                color: "#007AFF"
+                color: bloomTheme.colors.info
               }),
               title: "Add Another Account",
               description: "Sign in with a different account",
@@ -631,7 +656,7 @@ const ModernAccountSwitcherScreen = ({
             }), /*#__PURE__*/_jsx(SettingsListItem, {
               icon: /*#__PURE__*/_jsx(SettingsIcon, {
                 name: "cellphone",
-                color: "#5856D6"
+                color: bloomTheme.colors.secondary
               }),
               title: `${showDeviceManagement ? 'Hide' : 'Manage'} Device Sessions`,
               description: "View and manage sessions on other devices",
@@ -639,7 +664,7 @@ const ModernAccountSwitcherScreen = ({
             }), /*#__PURE__*/_jsx(SettingsListItem, {
               icon: /*#__PURE__*/_jsx(SettingsIcon, {
                 name: "logout",
-                color: "#FF3B30"
+                color: bloomTheme.colors.error
               }),
               title: "Sign Out All Accounts",
               description: "Remove all accounts from this device",
@@ -657,14 +682,14 @@ const ModernAccountSwitcherScreen = ({
             children: /*#__PURE__*/_jsx(SettingsListItem, {
               icon: /*#__PURE__*/_jsx(SettingsIcon, {
                 name: "sync",
-                color: "#007AFF"
+                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: /*#__PURE__*/_jsx(ActivityIndicator, {
                 size: "small",
-                color: "#007AFF"
+                color: bloomTheme.colors.info
               }),
               showChevron: false
             })
@@ -672,7 +697,7 @@ const ModernAccountSwitcherScreen = ({
             children: /*#__PURE__*/_jsx(SettingsListItem, {
               icon: /*#__PURE__*/_jsx(SettingsIcon, {
                 name: "cellphone",
-                color: "#ccc"
+                color: bloomTheme.colors.textTertiary
               }),
               title: t('accountSwitcher.device.noneTitle') || 'No device sessions found',
               description: t('accountSwitcher.device.noneSubtitle') || 'Device session management not available',
@@ -683,7 +708,7 @@ const ModernAccountSwitcherScreen = ({
             children: deviceSessions.map(session => /*#__PURE__*/_jsx(SettingsListItem, {
               icon: /*#__PURE__*/_jsx(SettingsIcon, {
                 name: session.isCurrent ? 'cellphone' : 'cellphone-basic',
-                color: session.isCurrent ? '#34C759' : '#8E8E93'
+                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', {
@@ -698,11 +723,11 @@ const ModernAccountSwitcherScreen = ({
                 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}`))
@@ -713,7 +738,7 @@ const ModernAccountSwitcherScreen = ({
             children: /*#__PURE__*/_jsx(SettingsListItem, {
               icon: /*#__PURE__*/_jsx(SettingsIcon, {
                 name: "account-outline",
-                color: "#ccc"
+                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',
@@ -723,7 +748,7 @@ const ModernAccountSwitcherScreen = ({
                 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'
@@ -744,47 +769,67 @@ const ModernAccountSwitcherScreen = ({
           })
         })]
       })
-    }), /*#__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,
@@ -796,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',
@@ -818,8 +862,8 @@ const styles = StyleSheet.create({
   },
   currentAccountCard: {
     borderWidth: 2,
-    borderColor: '#007AFF',
-    backgroundColor: '#007AFF08'
+    borderColor: colors.info,
+    backgroundColor: colors.primarySubtle
   },
   settingInfo: {
     flexDirection: 'row',
@@ -829,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,
@@ -849,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'
   },
@@ -865,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'
   },
@@ -888,7 +932,7 @@ const styles = StyleSheet.create({
     gap: 8
   },
   switchButton: {
-    backgroundColor: '#007AFF',
+    backgroundColor: colors.info,
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 16,
@@ -896,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'
   },
@@ -917,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'
   }