@oxyhq/services 6.9.45 → 6.10.1

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

@@ -6,18 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
-var _fonts = require("../styles/fonts.js");
-var _sonner = require("../../lib/sonner");
-var _prompt = _interopRequireWildcard(require("@oxyhq/bloom/prompt"));
-var Prompt = _prompt;
+var _core = require("@oxyhq/core");
+var _bloom = require("@oxyhq/bloom");
 var _OxyIcon = _interopRequireDefault(require("../components/icon/OxyIcon.js"));
 var _index = require("../components/index.js");
+var _settingsList = require("@oxyhq/bloom/settings-list");
+var _SettingsIcon = require("../components/SettingsIcon.js");
 var _useI18n = require("../hooks/useI18n.js");
 var _theme = require("@oxyhq/bloom/theme");
 var _OxyContext = require("../context/OxyContext.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ModernAccountSwitcherScreen = ({
   onClose,
   theme,
@@ -58,14 +57,16 @@ const ModernAccountSwitcherScreen = ({
   const [pendingRemoteLogout, setPendingRemoteLogout] = (0, _react.useState)(null);
 
   // Prompt controls
-  const removeSessionPrompt = (0, _prompt.usePromptControl)();
-  const logoutAllPrompt = (0, _prompt.usePromptControl)();
-  const remoteLogoutPrompt = (0, _prompt.usePromptControl)();
-  const logoutAllDevicesPrompt = (0, _prompt.usePromptControl)();
+  const removeSessionDialog = (0, _bloom.useDialogControl)();
+  const logoutAllDialog = (0, _bloom.useDialogControl)();
+  const remoteLogoutDialog = (0, _bloom.useDialogControl)();
+  const logoutAllDevicesDialog = (0, _bloom.useDialogControl)();
   const screenWidth = _reactNative.Dimensions.get('window').width;
   const {
-    t
+    t,
+    locale
   } = (0, _useI18n.useI18n)();
+  const styles = (0, _react.useMemo)(() => createStyles(bloomTheme.colors), [bloomTheme.colors]);
 
   // Refresh sessions when screen loads
   (0, _react.useEffect)(() => {
@@ -77,6 +78,18 @@ const ModernAccountSwitcherScreen = ({
   // Memoize session IDs to prevent unnecessary re-renders
   const sessionIds = (0, _react.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 = (0, _react.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
   (0, _react.useEffect)(() => {
@@ -135,7 +148,7 @@ const ModernAccountSwitcherScreen = ({
     return () => {
       cancelled = true;
     };
-  }, [sessionIds, oxyServices, sessions]);
+  }, [sessionIds, oxyServices, sessions, activeUserSignature]);
   const handleSwitchSession = (0, _react.useCallback)(async sessionId => {
     if (sessionId === (activeSessionId ?? null)) return; // Already active session
     if (switchingToUserId) return; // Already switching
@@ -143,7 +156,7 @@ const ModernAccountSwitcherScreen = ({
     setSwitchingToUserId(sessionId);
     try {
       await switchSession(sessionId);
-      _sonner.toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Account switched successfully!');
+      _bloom.toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Account switched successfully!');
       if (onClose) {
         onClose();
       }
@@ -151,7 +164,7 @@ const ModernAccountSwitcherScreen = ({
       if (__DEV__) {
         console.error('Switch session failed:', error);
       }
-      _sonner.toast.error(t('accountSwitcher.toasts.switchFailed') || 'There was a problem switching accounts. Please try again.');
+      _bloom.toast.error(t('accountSwitcher.toasts.switchFailed') || 'There was a problem switching accounts. Please try again.');
     } finally {
       setSwitchingToUserId(null);
     }
@@ -162,8 +175,8 @@ const ModernAccountSwitcherScreen = ({
       sessionId,
       displayName
     });
-    removeSessionPrompt.open();
-  }, [removingUserId, removeSessionPrompt]);
+    removeSessionDialog.open();
+  }, [removingUserId, removeSessionDialog]);
   const handleRemoveSession = (0, _react.useCallback)(async () => {
     if (!pendingRemoveSession) return;
     const {
@@ -172,24 +185,24 @@ const ModernAccountSwitcherScreen = ({
     setRemovingUserId(sessionId);
     try {
       await removeSession(sessionId);
-      _sonner.toast.success(t('accountSwitcher.toasts.removeSuccess') || 'Account removed successfully!');
+      _bloom.toast.success(t('accountSwitcher.toasts.removeSuccess') || 'Account removed successfully!');
     } catch (error) {
       if (__DEV__) {
         console.error('Remove session failed:', error);
       }
-      _sonner.toast.error(t('accountSwitcher.toasts.removeFailed') || 'There was a problem removing the account. Please try again.');
+      _bloom.toast.error(t('accountSwitcher.toasts.removeFailed') || 'There was a problem removing the account. Please try again.');
     } finally {
       setRemovingUserId(null);
       setPendingRemoveSession(null);
     }
   }, [pendingRemoveSession, removeSession, t]);
   const confirmLogoutAll = (0, _react.useCallback)(() => {
-    logoutAllPrompt.open();
-  }, [logoutAllPrompt]);
+    logoutAllDialog.open();
+  }, [logoutAllDialog]);
   const handleLogoutAll = (0, _react.useCallback)(async () => {
     try {
       await logoutAll();
-      _sonner.toast.success(t('accountSwitcher.toasts.signOutAllSuccess') || 'All accounts signed out successfully!');
+      _bloom.toast.success(t('accountSwitcher.toasts.signOutAllSuccess') || 'All accounts signed out successfully!');
       if (onClose) {
         onClose();
       }
@@ -198,7 +211,7 @@ const ModernAccountSwitcherScreen = ({
         console.error('Logout all failed:', error);
       }
       const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-      _sonner.toast.error(t('accountSwitcher.toasts.signOutAllFailed', {
+      _bloom.toast.error(t('accountSwitcher.toasts.signOutAllFailed', {
         error: errorMessage
       }) || `There was a problem signing out: ${errorMessage}`);
     }
@@ -210,20 +223,20 @@ const ModernAccountSwitcherScreen = ({
     setSwitchingManagedId(accountId);
     try {
       setActingAs(accountId);
-      _sonner.toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched identity successfully!');
+      _bloom.toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Switched identity successfully!');
       onClose?.();
     } catch (error) {
       if (__DEV__) {
         console.error('Switch managed account failed:', error);
       }
-      _sonner.toast.error('Failed to switch identity. Please try again.');
+      _bloom.toast.error('Failed to switch identity. Please try again.');
     } finally {
       setSwitchingManagedId(null);
     }
   }, [actingAs, switchingManagedId, setActingAs, t, onClose]);
   const handleSwitchBackToPrimary = (0, _react.useCallback)(() => {
     setActingAs(null);
-    _sonner.toast.success('Switched back to primary account');
+    _bloom.toast.success('Switched back to primary account');
   }, [setActingAs]);
 
   // Device session management functions - optimized with useCallback
@@ -238,7 +251,7 @@ const ModernAccountSwitcherScreen = ({
       if (__DEV__) {
         console.error('Failed to load device sessions:', error);
       }
-      _sonner.toast.error(t('accountSwitcher.toasts.deviceLoadFailed') || 'Failed to load device sessions. Please try again.');
+      _bloom.toast.error(t('accountSwitcher.toasts.deviceLoadFailed') || 'Failed to load device sessions. Please try again.');
     } finally {
       setLoadingDeviceSessions(false);
     }
@@ -249,8 +262,8 @@ const ModernAccountSwitcherScreen = ({
       sessionId,
       deviceName
     });
-    remoteLogoutPrompt.open();
-  }, [remotingLogoutSessionId, remoteLogoutPrompt]);
+    remoteLogoutDialog.open();
+  }, [remotingLogoutSessionId, remoteLogoutDialog]);
   const handleRemoteSessionLogout = (0, _react.useCallback)(async () => {
     if (!pendingRemoteLogout) return;
     const {
@@ -260,14 +273,14 @@ const ModernAccountSwitcherScreen = ({
     try {
       await oxyServices?.logoutSession((activeSessionId ?? null) || '', sessionId);
       await loadAllDeviceSessions();
-      _sonner.toast.success(t('accountSwitcher.toasts.remoteSignOutSuccess', {
+      _bloom.toast.success(t('accountSwitcher.toasts.remoteSignOutSuccess', {
         deviceName: pendingRemoteLogout.deviceName
       }) || `Signed out from ${pendingRemoteLogout.deviceName} successfully!`);
     } catch (error) {
       if (__DEV__) {
         console.error('Remote logout failed:', error);
       }
-      _sonner.toast.error(t('accountSwitcher.toasts.remoteSignOutFailed') || 'There was a problem signing out from the device. Please try again.');
+      _bloom.toast.error(t('accountSwitcher.toasts.remoteSignOutFailed') || 'There was a problem signing out from the device. Please try again.');
     } finally {
       setRemoteLogoutSessionId(null);
       setPendingRemoteLogout(null);
@@ -276,23 +289,23 @@ const ModernAccountSwitcherScreen = ({
   const confirmLogoutAllDevices = (0, _react.useCallback)(() => {
     const otherDevicesCount = deviceSessions.filter(session => !session.isCurrent).length;
     if (otherDevicesCount === 0) {
-      _sonner.toast.info(t('accountSwitcher.toasts.noOtherDeviceSessions') || 'No other device sessions found to sign out from.');
+      _bloom.toast.info(t('accountSwitcher.toasts.noOtherDeviceSessions') || 'No other device sessions found to sign out from.');
       return;
     }
     if (loggingOutAllDevices) return;
-    logoutAllDevicesPrompt.open();
-  }, [deviceSessions, loggingOutAllDevices, logoutAllDevicesPrompt, t]);
+    logoutAllDevicesDialog.open();
+  }, [deviceSessions, loggingOutAllDevices, logoutAllDevicesDialog, t]);
   const handleLogoutAllDevices = (0, _react.useCallback)(async () => {
     setLoggingOutAllDevices(true);
     try {
       await oxyServices?.logoutAllDeviceSessions((activeSessionId ?? null) || '');
       await loadAllDeviceSessions();
-      _sonner.toast.success(t('accountSwitcher.toasts.signOutOthersSuccess') || 'Signed out from all other devices successfully!');
+      _bloom.toast.success(t('accountSwitcher.toasts.signOutOthersSuccess') || 'Signed out from all other devices successfully!');
     } catch (error) {
       if (__DEV__) {
         console.error('Logout all devices failed:', error);
       }
-      _sonner.toast.error(t('accountSwitcher.toasts.signOutOthersFailed') || 'There was a problem signing out from other devices. Please try again.');
+      _bloom.toast.error(t('accountSwitcher.toasts.signOutOthersFailed') || 'There was a problem signing out from other devices. Please try again.');
     } finally {
       setLoggingOutAllDevices(false);
     }
@@ -320,56 +333,61 @@ const ModernAccountSwitcherScreen = ({
       style: styles.content,
       children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LoadingState, {
         message: t('accountSwitcher.loading') || 'Loading accounts...',
-        color: "#007AFF"
+        color: bloomTheme.colors.info
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [isAuthenticated && user && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.section,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.sectionTitle,
-            children: t('accountSwitcher.sections.current') || 'Current Account'
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard],
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.userIcon,
-              children: [user.avatar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-                source: {
-                  uri: oxyServices.getFileDownloadUrl(user.avatar, 'thumb')
-                },
-                style: styles.accountAvatarImage
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: styles.accountAvatarFallback,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: styles.accountAvatarText,
-                  children: (typeof user.name === 'string' ? user.name : user.name?.first || user.username)?.charAt(0).toUpperCase()
+        children: [isAuthenticated && user && (() => {
+          const currentDisplayName = (0, _core.getAccountDisplayName)(user, locale);
+          const currentHandle = (0, _core.getAccountFallbackHandle)(user);
+          const avatarInitial = currentDisplayName.charAt(0).toUpperCase();
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.section,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.sectionTitle,
+              children: t('accountSwitcher.sections.current') || 'Current Account'
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.userIcon,
+                children: [user.avatar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                  source: {
+                    uri: oxyServices.getFileDownloadUrl(user.avatar, 'thumb')
+                  },
+                  style: styles.accountAvatarImage
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.accountAvatarFallback,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.accountAvatarText,
+                    children: avatarInitial
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.activeBadge,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                    name: "checkmark",
+                    size: 12,
+                    color: bloomTheme.colors.negativeForeground
+                  })
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.settingInfo,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.settingLabel,
+                    children: currentDisplayName
+                  }), user.email || currentHandle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.settingDescription,
+                    children: user.email || (currentHandle && user.username ? `@${currentHandle}` : currentHandle)
+                  }) : null]
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: styles.activeBadge,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
-                  name: "checkmark",
-                  size: 12,
-                  color: "#fff"
+                style: styles.currentBadge,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.currentBadgeText,
+                  children: t('accountSwitcher.currentBadge') || 'Current'
                 })
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.settingInfo,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: styles.settingLabel,
-                  children: typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: styles.settingDescription,
-                  children: user.email || user.username
-                })]
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.currentBadge,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.currentBadgeText,
-                children: t('accountSwitcher.currentBadge') || 'Current'
-              })
             })]
-          })]
-        }), otherSessions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          });
+        })(), otherSessions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.section,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.sectionTitle,
@@ -385,7 +403,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 = (0, _core.getAccountDisplayName)(userProfile, locale);
+            const fallbackHandle = (0, _core.getAccountFallbackHandle)(userProfile);
             return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: [styles.settingItem, isFirst && styles.firstSettingItem, isLast && styles.lastSettingItem],
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -394,7 +417,7 @@ const ModernAccountSwitcherScreen = ({
                   style: styles.accountAvatarFallback,
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
                     size: "small",
-                    color: "#007AFF"
+                    color: bloomTheme.colors.info
                   })
                 }) : userProfile?.avatar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
                   source: {
@@ -414,10 +437,10 @@ const ModernAccountSwitcherScreen = ({
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                     style: styles.settingLabel,
                     children: displayName
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                  }), fallbackHandle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                     style: styles.settingDescription,
-                    children: ["@", userProfile?.username || 'unknown']
-                  })]
+                    children: userProfile?.username ? `@${fallbackHandle}` : fallbackHandle
+                  }) : null]
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                 style: styles.accountActions,
@@ -427,7 +450,7 @@ const ModernAccountSwitcherScreen = ({
                   disabled: isSwitching || isRemoving,
                   children: isSwitching ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
                     size: "small",
-                    color: "#007AFF"
+                    color: bloomTheme.colors.info
                   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                     style: styles.switchButtonText,
                     children: "Switch"
@@ -438,11 +461,11 @@ const ModernAccountSwitcherScreen = ({
                   disabled: isSwitching || isRemoving,
                   children: isRemoving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
                     size: "small",
-                    color: "#FF3B30"
+                    color: bloomTheme.colors.error
                   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
                     name: "trash",
                     size: 16,
-                    color: "#FF3B30"
+                    color: bloomTheme.colors.error
                   })
                 })]
               })]
@@ -486,7 +509,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 = (0, _core.getAccountDisplayName)(account, locale);
 
             // Determine the manager role for badge display
             const myRole = managed.managers?.find(m => m.userId === user?.id)?.role ?? 'owner';
@@ -513,7 +536,7 @@ const ModernAccountSwitcherScreen = ({
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
                     name: "checkmark",
                     size: 12,
-                    color: "#fff"
+                    color: bloomTheme.colors.negativeForeground
                   })
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -522,10 +545,13 @@ const ModernAccountSwitcherScreen = ({
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                     style: styles.settingLabel,
                     children: managedDisplayName
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                    style: styles.settingDescription,
-                    children: ["@", account.username]
-                  })]
+                  }), (() => {
+                    const handle = (0, _core.getAccountFallbackHandle)(account);
+                    return handle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      style: styles.settingDescription,
+                      children: account.username ? `@${handle}` : handle
+                    }) : null;
+                  })()]
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                 style: styles.accountActions,
@@ -547,7 +573,7 @@ const ModernAccountSwitcherScreen = ({
                   disabled: isSwitching,
                   children: isSwitching ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
                     size: "small",
-                    color: "#fff"
+                    color: bloomTheme.colors.negativeForeground
                   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                     style: styles.switchButtonText,
                     children: "Act As"
@@ -565,19 +591,19 @@ const ModernAccountSwitcherScreen = ({
               style: styles.userIcon,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: [styles.accountAvatarFallback, {
-                  backgroundColor: '#007AFF20'
+                  backgroundColor: bloomTheme.colors.primarySubtle
                 }],
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
                   name: "add",
                   size: 20,
-                  color: "#007AFF"
+                  color: bloomTheme.colors.info
                 })
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: styles.settingInfo,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.settingLabel, {
-                  color: '#007AFF'
+                  color: bloomTheme.colors.info
                 }],
                 children: "Create New Identity"
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -599,19 +625,19 @@ const ModernAccountSwitcherScreen = ({
               style: styles.userIcon,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 style: [styles.accountAvatarFallback, {
-                  backgroundColor: '#007AFF20'
+                  backgroundColor: bloomTheme.colors.primarySubtle
                 }],
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
                   name: "add",
                   size: 20,
-                  color: "#007AFF"
+                  color: bloomTheme.colors.info
                 })
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: styles.settingInfo,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.settingLabel, {
-                  color: '#007AFF'
+                  color: bloomTheme.colors.info
                 }],
                 children: "Create New Identity"
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -620,108 +646,114 @@ const ModernAccountSwitcherScreen = ({
               })]
             })]
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.section,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.sectionTitle,
-            children: "Quick Actions"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GroupedSection, {
-            items: [{
-              id: 'add-account',
-              icon: 'account-plus',
-              iconColor: '#007AFF',
-              title: 'Add Another Account',
-              subtitle: 'Sign in with a different account',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_settingsList.SettingsListGroup, {
+            title: "Quick Actions",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.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__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.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__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.section,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.sectionTitle,
             children: t('accountSwitcher.sections.deviceSessions') || 'Device Sessions'
-          }), loadingDeviceSessions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GroupedSection, {
-            items: [{
-              id: 'loading-device-sessions',
-              icon: 'sync',
-              iconColor: '#007AFF',
+          }), loadingDeviceSessions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.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__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+              rightElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
                 size: "small",
-                color: "#007AFF",
-                style: {
-                  marginRight: 16
-                }
-              })
-            }]
-          }) : deviceSessions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GroupedSection, {
-            items: [{
-              id: 'no-device-sessions',
-              icon: 'cellphone',
-              iconColor: '#ccc',
+                color: bloomTheme.colors.info
+              }),
+              showChevron: false
+            })
+          }) : deviceSessions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.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__*/(0, _jsxRuntime.jsx)(_index.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__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
+            children: deviceSessions.map(session => /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              showChevron: false,
+              rightElement: !session.isCurrent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
                 style: styles.removeButton,
                 onPress: () => confirmRemoteSessionLogout(session.sessionId, session.deviceName),
                 disabled: remotingLogoutSessionId === session.sessionId,
                 children: remotingLogoutSessionId === session.sessionId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
                   size: "small",
-                  color: "#FF3B30"
+                  color: bloomTheme.colors.error
                 }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
                   name: "log-out",
                   size: 16,
-                  color: "#FF3B30"
+                  color: bloomTheme.colors.error
                 })
               }) : undefined
-            }))
+            }, `device-session-${session.sessionId}`))
           })]
         }), sessionsWithUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.section,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GroupedSection, {
-            items: [{
-              id: 'empty-state',
-              icon: 'account-outline',
-              iconColor: '#ccc',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              rightElement: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                 style: styles.emptyStateContainer,
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
                   name: "person-outline",
                   size: 48,
-                  color: "#ccc"
+                  color: bloomTheme.colors.textTertiary
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                   style: styles.emptyStateTitle,
                   children: t('accountSwitcher.empty.title') || 'No saved accounts'
@@ -736,52 +768,73 @@ const ModernAccountSwitcherScreen = ({
                     children: t('accountCenter.sections.addAccount') || 'Add Account'
                   })
                 })]
-              })
-            }]
+              }),
+              showChevron: false
+            })
           })
         })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Prompt.Basic, {
-      control: removeSessionPrompt,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bloom.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__*/(0, _jsxRuntime.jsx)(Prompt.Basic, {
-      control: logoutAllPrompt,
+      actions: [{
+        label: t('common.remove') || 'Remove',
+        color: 'destructive',
+        onPress: handleRemoveSession
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bloom.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_bloom.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__*/(0, _jsxRuntime.jsx)(Prompt.Basic, {
-      control: logoutAllDevicesPrompt,
+      actions: [{
+        label: t('common.signOut') || 'Sign Out',
+        color: 'destructive',
+        onPress: handleRemoteSessionLogout
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bloom.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 = _reactNative.StyleSheet.create({
+const createStyles = colors => _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f2f2f2'
+    backgroundColor: colors.background
   },
   content: {
     flex: 1,
@@ -793,11 +846,10 @@ const styles = _reactNative.StyleSheet.create({
   sectionTitle: {
     fontSize: 16,
     fontWeight: _reactNative.Platform.OS === 'web' ? '600' : undefined,
-    fontFamily: _fonts.fontFamilies.interSemiBold,
-    color: '#333'
+    color: colors.text
   },
   settingItem: {
-    backgroundColor: '#fff',
+    backgroundColor: colors.card,
     padding: 16,
     flexDirection: 'row',
     alignItems: 'center',
@@ -815,8 +867,8 @@ const styles = _reactNative.StyleSheet.create({
   },
   currentAccountCard: {
     borderWidth: 2,
-    borderColor: '#007AFF',
-    backgroundColor: '#007AFF08'
+    borderColor: colors.info,
+    backgroundColor: colors.primarySubtle
   },
   settingInfo: {
     flexDirection: 'row',
@@ -826,12 +878,12 @@ const styles = _reactNative.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,
@@ -846,12 +898,12 @@ const styles = _reactNative.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'
   },
@@ -862,20 +914,20 @@ const styles = _reactNative.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'
   },
@@ -885,7 +937,7 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   switchButton: {
-    backgroundColor: '#007AFF',
+    backgroundColor: colors.info,
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 16,
@@ -893,16 +945,16 @@ const styles = _reactNative.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'
   },
@@ -914,61 +966,61 @@ const styles = _reactNative.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'
   }