@oxyhq/services 10.2.0 → 10.2.2

package/src/ui/components/AccountMenu.tsx

@@ -14,31 +14,61 @@ import {
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { toast, useDialogControl, Dialog } from '@oxyhq/bloom';
+import { Divider } from '@oxyhq/bloom/divider';
 import { useTheme } from '@oxyhq/bloom/theme';
 import Avatar from './Avatar';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { logger as loggerUtil } from '@oxyhq/core';
 import { buildAccountRows, type AccountRow } from './accountMenuRows';
+import { useDeviceAccounts } from '../hooks/useDeviceAccounts';
+
+/**
+ * Web-only anchor for the popover panel. Each field anchors the panel against
+ * one viewport edge, so the popover can be placed against ANY corner: a
+ * top-right avatar chip opens downward/right-aligned (`{ top, right }`), while a
+ * bottom-left account button opens upward/left-aligned (`{ bottom, left }`).
+ *
+ * Callers MUST supply at most one vertical edge (`top` XOR `bottom`) and at most
+ * one horizontal edge (`left` XOR `right`). The panel has a fixed width and
+ * `maxHeight`, so a single vertical + single horizontal edge fully positions it.
+ * Supplying both opposite edges (e.g. `top` AND `bottom`) would stretch the
+ * panel on RN-Web and is unsupported.
+ */
+export interface AccountMenuAnchor {
+    /** Distance from the viewport top, when anchoring the panel's TOP edge. */
+    top?: number;
+    /** Distance from the viewport bottom, when anchoring the panel's BOTTOM edge (opens upward). */
+    bottom?: number;
+    /** Distance from the viewport left, when anchoring the panel's LEFT edge. */
+    left?: number;
+    /** Distance from the viewport right, when anchoring the panel's RIGHT edge. */
+    right?: number;
+}
 
 export interface AccountMenuProps {
     open: boolean;
     onClose: () => void;
     onNavigateManage: () => void;
     onAddAccount: () => void;
-    /** Optional anchor coords (web only). Native ignores this and uses bottom-sheet style. */
-    anchor?: { top: number; right: number } | null;
+    /** Optional anchor (web only). Native ignores this and uses bottom-sheet style. */
+    anchor?: AccountMenuAnchor | null;
 }
 
 const isWeb = Platform.OS === 'web';
 
+/** Fixed popover width on web. Callers that compute an anchor (e.g. inbox's
+ * MailboxDrawer) key their gutter math off this — keep them consistent. */
+const PANEL_WIDTH = 360;
+
 /**
- * Reusable account menu modeled after the Google account chooser. Opens from
- * the avatar entry point (`AccountMenuButton`) or any other trigger.
+ * Unified, canonical account switcher for the Oxy ecosystem. Gmail-style: the
+ * accounts list sits at the top (current account first, with a checkmark), then
+ * "Add another account", "Manage account", and the sign-out actions.
  *
- * Reads everything it needs from `useOxy()` — never receive a session via
- * props. Renders as a popover anchored to the trigger on web, and as a
- * full-width bottom-sheet style modal on native.
+ * Reads everything it needs from `useOxy()` / `useDeviceAccounts()` — never
+ * receives a session via props. Renders as a popover anchored to the trigger on
+ * web, and as a full-width bottom-sheet style modal on native.
  */
 const AccountMenu: React.FC<AccountMenuProps> = ({
     open,
@@ -48,18 +78,25 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
     anchor,
 }) => {
     const {
-        user,
-        sessions,
         activeSessionId,
         switchSession,
         logout,
         logoutAll,
-        oxyServices,
+        removeSession,
     } = useOxy();
-    const { t, locale } = useI18n();
+    const { t } = useI18n();
     const bloomTheme = useTheme();
+    const colors = bloomTheme.colors;
+
+    // Source EVERY account's real name/email/avatar/color from the unified
+    // device-account hook (shared apex `refresh-all` path on `*.oxy.so`, local
+    // `useOxy()` fallback on cross-domain web / native). This also synthesises a
+    // live-user row when the probe is empty, so the signed-in user is always
+    // represented (no "Not signed in" false negative).
+    const { accounts: deviceAccounts } = useDeviceAccounts();
 
     const [busySessionId, setBusySessionId] = useState<string | null>(null);
+    const [removingSessionId, setRemovingSessionId] = useState<string | null>(null);
     const [signingOut, setSigningOut] = useState(false);
     const [signingOutAll, setSigningOutAll] = useState(false);
 
@@ -67,24 +104,27 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
     const signOutAllDialog = useDialogControl();
 
     const containerRef = useRef<View | null>(null);
-    const firstActionRef = useRef<View | null>(null);
-
-    const rows = useMemo<AccountRow[]>(() => buildAccountRows({
-        sessions,
-        activeSessionId,
-        user,
-        locale,
-        getAvatarUrl: (avatarId) => oxyServices.getFileDownloadUrl(avatarId, 'thumb'),
-    }), [sessions, activeSessionId, user, locale, oxyServices]);
 
-    const activeRow = useMemo<AccountRow | null>(() => {
-        return rows.find((r) => r.isActive) ?? null;
-    }, [rows]);
+    // Current account first, then the rest in their existing order — matching
+    // the Gmail-style chooser the inbox design ports from.
+    const rows = useMemo<AccountRow[]>(() => {
+        const built = buildAccountRows({ accounts: deviceAccounts });
+        const current = built.filter((row) => row.isActive);
+        const others = built.filter((row) => !row.isActive);
+        return [...current, ...others];
+    }, [deviceAccounts]);
 
-    const inactiveRows = useMemo<AccountRow[]>(() => {
-        return rows.filter((r) => !r.isActive);
-    }, [rows]);
+    const isSwitching = busySessionId !== null;
 
+    // Switch to a non-active account. We route ALL rows through
+    // `useOxy().switchSession(sessionId)` — the SDK's canonical switch path. On
+    // WEB it already performs the same silent activation the auth chooser uses:
+    // when the target `ClientSession` carries an `authuser` slot, it rotates that
+    // slot via `oxyServices.refreshTokenViaCookie({ authuser })` and plants the
+    // fresh access token before validating (see `useSessionManagement.switchSession`).
+    // On NATIVE it validates the session id directly. There is no separate
+    // "activate by authuser" SDK entry point, so reusing `switchSession`
+    // (rather than inventing a parallel mechanism) keeps a single source of truth.
     const handleSwitch = useCallback(async (sessionId: string) => {
         if (sessionId === activeSessionId || busySessionId) {
             return;
@@ -104,6 +144,27 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
         }
     }, [activeSessionId, busySessionId, switchSession, t, onClose]);
 
+    // Sign out a SPECIFIC inactive account from its per-row icon. `removeSession`
+    // is the SDK's canonical per-session sign-out: it targets the given session
+    // id (cookie-cleared logout via `authuser` slot on web, bearer logout
+    // otherwise) and removes ONLY that account without switching/clearing the
+    // active session. The menu stays open so the user can keep managing accounts.
+    const handleRemove = useCallback(async (sessionId: string) => {
+        if (sessionId === activeSessionId || removingSessionId) {
+            return;
+        }
+        setRemovingSessionId(sessionId);
+        try {
+            await removeSession(sessionId);
+            toast.success(t('common.actions.signedOut') || 'Signed out');
+        } catch (error) {
+            loggerUtil.warn('Remove account failed', { component: 'AccountMenu' }, error as unknown);
+            toast.error(t('common.errors.signOutFailed') || 'Failed to sign out');
+        } finally {
+            setRemovingSessionId(null);
+        }
+    }, [activeSessionId, removingSessionId, removeSession, t]);
+
     const performSignOut = useCallback(async () => {
         if (signingOut) {
             return;
@@ -161,200 +222,215 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
         ? styles.webOverlay
         : styles.nativeOverlay;
 
+    // Apply ONLY the edges the anchor supplies (so the panel never sets
+    // conflicting opposite edges). When no anchor is provided, fall back to the
+    // historical top-right placement used by `AccountMenuButton`.
+    const anchorStyle: ViewStyle = anchor
+        ? {
+            ...(anchor.top !== undefined ? { top: anchor.top } : null),
+            ...(anchor.bottom !== undefined ? { bottom: anchor.bottom } : null),
+            ...(anchor.left !== undefined ? { left: anchor.left } : null),
+            ...(anchor.right !== undefined ? { right: anchor.right } : null),
+        }
+        : { top: 64, right: 16 };
+
     const panelStyles: ViewStyle[] = isWeb
         ? [
             styles.panelBase,
             styles.panelWeb,
-            anchor
-                ? { top: anchor.top, right: anchor.right }
-                : { top: 64, right: 16 },
-            { backgroundColor: bloomTheme.colors.background, borderColor: bloomTheme.colors.border },
+            anchorStyle,
+            { backgroundColor: colors.background, borderColor: colors.border },
         ]
         : [
             styles.panelBase,
             styles.panelNative,
-            { backgroundColor: bloomTheme.colors.background },
+            { backgroundColor: colors.background },
         ];
 
+    const actionDisabled = isSwitching || signingOut || signingOutAll;
+
     const content = (
-        <View
+        <Pressable
             ref={containerRef}
+            // Swallow taps inside the panel so they never reach the overlay's
+            // outside-tap-to-close handler. (On web the panel is a direct,
+            // absolutely-positioned child of the overlay so the anchor resolves
+            // against the viewport.)
+            onPress={() => undefined}
             style={panelStyles}
             accessibilityRole="menu"
             accessibilityLabel={t('accountMenu.label') || 'Account menu'}
         >
-            {/* 1) Header */}
-            {activeRow ? (
-                <View style={styles.header}>
-                    <Avatar
-                        uri={activeRow.avatarUri}
-                        name={activeRow.displayName}
-                        size={64}
-                    />
-                    <Text
-                        style={[styles.headerName, { color: bloomTheme.colors.text }]}
-                        numberOfLines={1}
-                    >
-                        {activeRow.displayName}
-                    </Text>
-                    {activeRow.secondary ? (
-                        <Text
-                            style={[styles.headerSecondary, { color: bloomTheme.colors.textSecondary }]}
-                            numberOfLines={1}
-                        >
-                            {activeRow.secondary}
-                        </Text>
-                    ) : null}
-                </View>
-            ) : (
-                <View style={styles.header}>
-                    <Text style={[styles.headerName, { color: bloomTheme.colors.text }]}>
-                        {t('common.status.notSignedIn') || 'Not signed in'}
-                    </Text>
-                </View>
-            )}
-
-            {/* 2) Manage account */}
-            <TouchableOpacity
-                ref={firstActionRef as React.RefObject<View>}
-                accessibilityRole="menuitem"
-                accessibilityLabel={t('accountMenu.manage') || 'Manage your Oxy Account'}
-                style={[styles.primaryButton, { borderColor: bloomTheme.colors.border }]}
-                onPress={() => {
-                    onClose();
-                    onNavigateManage();
-                }}
+            <ScrollView
+                style={styles.scroll}
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
             >
-                <Text style={[styles.primaryButtonText, { color: bloomTheme.colors.primary }]}>
-                    {t('accountMenu.manage') || 'Manage your Oxy Account'}
-                </Text>
-            </TouchableOpacity>
-
-            {/* 3) Account list */}
-            {rows.length > 0 ? (
-                <ScrollView
-                    style={styles.list}
-                    contentContainerStyle={styles.listContent}
-                    showsVerticalScrollIndicator={false}
-                >
-                    {rows.map((row) => {
-                        const isBusy = busySessionId === row.sessionId;
-                        return (
-                            <TouchableOpacity
-                                key={`account-${row.sessionId}`}
-                                accessibilityRole="menuitem"
-                                accessibilityLabel={row.displayName}
-                                accessibilityState={{ selected: row.isActive }}
-                                onPress={() => handleSwitch(row.sessionId)}
-                                disabled={row.isActive || isBusy}
-                                style={[
-                                    styles.row,
-                                    row.isActive && {
-                                        backgroundColor: bloomTheme.colors.primarySubtle,
-                                    },
-                                ]}
-                            >
-                                <Avatar
-                                    uri={row.avatarUri}
-                                    name={row.displayName}
-                                    size={36}
-                                />
-                                <View style={styles.rowInfo}>
+                {/* 1) Accounts list — current first (checkmark), then others. */}
+                {rows.map((row) => {
+                    const isBusy = busySessionId === row.sessionId;
+                    const isRemoving = removingSessionId === row.sessionId;
+                    return (
+                        <TouchableOpacity
+                            key={`account-${row.sessionId}`}
+                            accessibilityRole="menuitem"
+                            accessibilityLabel={row.displayName}
+                            accessibilityState={{ selected: row.isActive }}
+                            onPress={() => handleSwitch(row.sessionId)}
+                            disabled={row.isActive || isBusy || isSwitching}
+                            activeOpacity={0.6}
+                            style={[
+                                styles.accountRow,
+                                row.isActive && { backgroundColor: colors.primarySubtle },
+                                isSwitching && !row.isActive && styles.rowDisabled,
+                            ]}
+                        >
+                            <Avatar
+                                uri={row.avatarUri}
+                                name={row.displayName}
+                                size={row.isActive ? 40 : 32}
+                            />
+                            <View style={styles.accountInfo}>
+                                <Text
+                                    style={[
+                                        styles.accountName,
+                                        { color: colors.text },
+                                        row.isActive && styles.accountNameActive,
+                                    ]}
+                                    numberOfLines={1}
+                                >
+                                    {row.displayName}
+                                </Text>
+                                {row.secondary ? (
                                     <Text
-                                        style={[styles.rowName, { color: bloomTheme.colors.text }]}
+                                        style={[styles.accountEmail, { color: colors.textSecondary }]}
                                         numberOfLines={1}
                                     >
-                                        {row.displayName}
+                                        {row.secondary}
                                     </Text>
-                                    {row.secondary ? (
-                                        <Text
-                                            style={[styles.rowSecondary, { color: bloomTheme.colors.textSecondary }]}
-                                            numberOfLines={1}
-                                        >
-                                            {row.secondary}
-                                        </Text>
-                                    ) : null}
-                                </View>
-                                {isBusy ? (
-                                    <ActivityIndicator color={bloomTheme.colors.primary} size="small" />
-                                ) : row.isActive ? (
+                                ) : null}
+                            </View>
+                            {isBusy ? (
+                                <ActivityIndicator color={colors.primary} size="small" />
+                            ) : row.isActive ? (
+                                <Ionicons name="checkmark" size={20} color={colors.primary} />
+                            ) : isRemoving ? (
+                                <ActivityIndicator color={colors.textSecondary} size="small" />
+                            ) : (
+                                <TouchableOpacity
+                                    accessibilityRole="button"
+                                    accessibilityLabel={
+                                        t('accountMenu.signOutAccount', { name: row.displayName })
+                                        || `Sign out ${row.displayName}`
+                                    }
+                                    onPress={() => handleRemove(row.sessionId)}
+                                    disabled={isSwitching || removingSessionId !== null}
+                                    activeOpacity={0.6}
+                                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                                    style={styles.rowSignOutButton}
+                                >
                                     <Ionicons
-                                        name="checkmark-circle"
-                                        size={20}
-                                        color={bloomTheme.colors.primary}
+                                        name="log-out-outline"
+                                        size={18}
+                                        color={colors.textSecondary}
                                     />
-                                ) : null}
-                            </TouchableOpacity>
-                        );
-                    })}
-                </ScrollView>
-            ) : null}
-
-            {/* 4) Add another account */}
-            <TouchableOpacity
-                accessibilityRole="menuitem"
-                accessibilityLabel={t('accountMenu.addAnother') || 'Add another account'}
-                onPress={() => {
-                    onClose();
-                    onAddAccount();
-                }}
-                style={[styles.row, styles.actionRow]}
-            >
-                <View
-                    style={[
-                        styles.actionIcon,
-                        { backgroundColor: bloomTheme.colors.primarySubtle },
-                    ]}
+                                </TouchableOpacity>
+                            )}
+                        </TouchableOpacity>
+                    );
+                })}
+
+                {/* 2) Switching indicator. */}
+                {isSwitching ? (
+                    <View style={styles.switchingRow}>
+                        <ActivityIndicator color={colors.textSecondary} size="small" />
+                        <Text style={[styles.switchingText, { color: colors.textSecondary }]}>
+                            {t('accountMenu.switching') || 'Switching account…'}
+                        </Text>
+                    </View>
+                ) : null}
+
+                <Divider color={colors.border} spacing={4} />
+
+                {/* 3) Add another account. */}
+                <TouchableOpacity
+                    accessibilityRole="menuitem"
+                    accessibilityLabel={t('accountMenu.addAnother') || 'Add another account'}
+                    onPress={() => {
+                        onClose();
+                        onAddAccount();
+                    }}
+                    disabled={actionDisabled}
+                    activeOpacity={0.6}
+                    style={[styles.actionRow, actionDisabled && styles.rowDisabled]}
                 >
-                    <Ionicons
-                        name="person-add-outline"
-                        size={18}
-                        color={bloomTheme.colors.primary}
-                    />
-                </View>
-                <View style={styles.rowInfo}>
-                    <Text style={[styles.rowName, { color: bloomTheme.colors.text }]}>
+                    <Ionicons name="person-add-outline" size={20} color={colors.icon} />
+                    <Text style={[styles.actionText, { color: colors.text }]}>
                         {t('accountMenu.addAnother') || 'Add another account'}
                     </Text>
-                </View>
-            </TouchableOpacity>
+                </TouchableOpacity>
+
+                <Divider color={colors.border} spacing={4} />
+
+                {/* 4) Manage account / Settings. */}
+                <TouchableOpacity
+                    accessibilityRole="menuitem"
+                    accessibilityLabel={t('accountMenu.manage') || 'Manage your Oxy Account'}
+                    onPress={() => {
+                        onClose();
+                        onNavigateManage();
+                    }}
+                    disabled={actionDisabled}
+                    activeOpacity={0.6}
+                    style={[styles.actionRow, actionDisabled && styles.rowDisabled]}
+                >
+                    <Ionicons name="settings-outline" size={18} color={colors.icon} />
+                    <Text style={[styles.actionText, { color: colors.text }]}>
+                        {t('accountMenu.manage') || 'Manage your Oxy Account'}
+                    </Text>
+                </TouchableOpacity>
 
-            {/* 5) Sign out + sign out of all */}
-            <View style={[styles.footer, { borderTopColor: bloomTheme.colors.border }]}>
+                {/* 5) Sign out (current). */}
                 <TouchableOpacity
                     accessibilityRole="menuitem"
                     accessibilityLabel={t('common.actions.signOut') || 'Sign out'}
                     onPress={() => signOutDialog.open()}
-                    disabled={signingOut || signingOutAll}
-                    style={styles.footerButton}
+                    disabled={actionDisabled}
+                    activeOpacity={0.6}
+                    style={[styles.actionRow, actionDisabled && styles.rowDisabled]}
                 >
                     {signingOut ? (
-                        <ActivityIndicator color={bloomTheme.colors.error} size="small" />
+                        <ActivityIndicator color={colors.error} size="small" />
                     ) : (
-                        <Text style={[styles.footerButtonText, { color: bloomTheme.colors.error }]}>
-                            {t('common.actions.signOut') || 'Sign out'}
-                        </Text>
+                        <Ionicons name="log-out-outline" size={18} color={colors.error} />
                     )}
+                    <Text style={[styles.actionText, { color: colors.error }]}>
+                        {t('common.actions.signOut') || 'Sign out'}
+                    </Text>
                 </TouchableOpacity>
+
+                {/* 6) Sign out of all accounts (only when >1 account). */}
                 {rows.length > 1 ? (
                     <TouchableOpacity
                         accessibilityRole="menuitem"
                         accessibilityLabel={t('accountMenu.signOutAll') || 'Sign out of all accounts'}
                         onPress={() => signOutAllDialog.open()}
-                        disabled={signingOut || signingOutAll}
-                        style={styles.footerButton}
+                        disabled={actionDisabled}
+                        activeOpacity={0.6}
+                        style={[styles.actionRow, actionDisabled && styles.rowDisabled]}
                     >
                         {signingOutAll ? (
-                            <ActivityIndicator color={bloomTheme.colors.error} size="small" />
+                            <ActivityIndicator color={colors.error} size="small" />
                         ) : (
-                            <Text style={[styles.footerButtonText, { color: bloomTheme.colors.error }]}>
-                                {t('accountMenu.signOutAll') || 'Sign out of all accounts'}
-                            </Text>
+                            <Ionicons name="log-out-outline" size={18} color={colors.error} />
                         )}
+                        <Text style={[styles.actionText, { color: colors.error }]}>
+                            {t('accountMenu.signOutAll') || 'Sign out of all accounts'}
+                        </Text>
                     </TouchableOpacity>
                 ) : null}
-            </View>
-        </View>
+            </ScrollView>
+        </Pressable>
     );
 
     return (
@@ -370,10 +446,15 @@ const AccountMenu: React.FC<AccountMenuProps> = ({
                 onPress={onClose}
                 style={overlayStyles}
             >
-                {/* Stop propagation: tapping the panel must not close it. */}
-                <Pressable onPress={() => undefined} style={styles.panelTouchable}>
-                    {content}
-                </Pressable>
+                {/*
+                 * Web: the panel is `position: absolute` and rendered as a DIRECT
+                 * child of the full-viewport overlay, so its anchor edges resolve
+                 * against the viewport. The panel swallows its own taps.
+                 *
+                 * Native: the overlay is `justify-content: flex-end`, so the
+                 * (statically positioned) panel docks to the bottom as a sheet.
+                 */}
+                {content}
             </Pressable>
 
             <Dialog
@@ -410,18 +491,19 @@ const styles = StyleSheet.create({
     webOverlay: {
         flex: 1,
         backgroundColor: 'transparent',
+        // Explicit positioning context: the absolutely-positioned panel is a
+        // direct child and resolves its anchor edges (top/bottom/left/right)
+        // against this full-viewport overlay — matching the trigger-rect math
+        // callers compute from `window.innerWidth` / `window.innerHeight`.
+        position: 'relative',
     },
     nativeOverlay: {
         flex: 1,
         backgroundColor: 'rgba(0,0,0,0.32)',
         justifyContent: 'flex-end',
     },
-    panelTouchable: {
-        // Pressable wrapper that owns no styling — just absorbs taps.
-    },
     panelBase: {
-        borderRadius: 24,
-        paddingVertical: 12,
+        borderRadius: 12,
         shadowColor: '#000',
         shadowOpacity: 0.18,
         shadowRadius: 24,
@@ -431,103 +513,79 @@ const styles = StyleSheet.create({
     },
     panelWeb: {
         position: 'absolute',
-        width: 360,
+        width: PANEL_WIDTH,
         maxHeight: '85%',
         borderWidth: 1,
     },
     panelNative: {
         marginHorizontal: 0,
-        borderTopLeftRadius: 28,
-        borderTopRightRadius: 28,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0,
-        paddingTop: 20,
-        paddingBottom: 24,
+        paddingBottom: 12,
         maxHeight: '85%',
     },
-    header: {
-        alignItems: 'center',
-        paddingHorizontal: 20,
-        paddingVertical: 16,
-    },
-    headerName: {
-        fontSize: 18,
-        fontWeight: '600',
-        marginTop: 12,
-        textAlign: 'center',
+    scroll: {
+        flexGrow: 0,
     },
-    headerSecondary: {
-        fontSize: 14,
-        marginTop: 4,
-        textAlign: 'center',
+    scrollContent: {
+        paddingVertical: 4,
     },
-    primaryButton: {
-        marginHorizontal: 20,
-        marginBottom: 12,
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-        borderRadius: 999,
-        borderWidth: 1,
+    accountRow: {
+        flexDirection: 'row',
         alignItems: 'center',
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        gap: 10,
     },
-    primaryButtonText: {
-        fontSize: 14,
-        fontWeight: '600',
+    rowDisabled: {
+        opacity: 0.4,
     },
-    list: {
-        maxHeight: 280,
+    accountInfo: {
+        flex: 1,
+        minWidth: 0,
     },
-    listContent: {
-        paddingHorizontal: 12,
-        paddingBottom: 4,
+    accountName: {
+        fontSize: 13,
+        fontWeight: '500',
     },
-    row: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 10,
-        paddingHorizontal: 12,
-        borderRadius: 16,
-        marginVertical: 2,
+    accountNameActive: {
+        fontWeight: '600',
     },
-    actionRow: {
-        marginHorizontal: 12,
-        marginTop: 4,
+    accountEmail: {
+        fontSize: 11,
+        marginTop: 1,
     },
-    actionIcon: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
+    rowSignOutButton: {
+        width: 28,
+        height: 28,
         alignItems: 'center',
         justifyContent: 'center',
+        borderRadius: 14,
+        opacity: 0.6,
     },
-    rowInfo: {
-        flex: 1,
-        marginLeft: 12,
+    switchingRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 8,
+        gap: 8,
     },
-    rowName: {
-        fontSize: 15,
+    switchingText: {
+        fontSize: 12,
         fontWeight: '500',
     },
-    rowSecondary: {
-        fontSize: 13,
-        marginTop: 2,
-    },
-    footer: {
-        marginTop: 12,
-        paddingTop: 8,
-        paddingHorizontal: 12,
-        borderTopWidth: StyleSheet.hairlineWidth,
+    actionRow: {
         flexDirection: 'row',
-        flexWrap: 'wrap',
-        justifyContent: 'space-around',
-    },
-    footerButton: {
-        paddingVertical: 10,
-        paddingHorizontal: 12,
+        alignItems: 'center',
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        gap: 10,
     },
-    footerButtonText: {
-        fontSize: 14,
-        fontWeight: '600',
+    actionText: {
+        fontSize: 13,
+        fontWeight: '500',
     },
 });