@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/AccountSwitcherScreen.js

@@ -0,0 +1,482 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const fonts_1 = require("../styles/fonts");
+const sonner_1 = require("../../lib/sonner");
+const confirmAction_1 = require("../utils/confirmAction");
+const OxyIcon_1 = __importDefault(require("../components/icon/OxyIcon"));
+const components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const themeUtils_1 = require("../utils/themeUtils");
+const OxyContext_1 = require("../context/OxyContext");
+const ModernAccountSwitcherScreen = ({ onClose, theme, navigate, goBack, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { oxyServices, user, sessions = [], activeSessionId = null, switchSession, removeSession, logoutAll, refreshSessions, isLoading = false, isAuthenticated = false, } = (0, OxyContext_1.useOxy)();
+    const [sessionsWithUsers, setSessionsWithUsers] = (0, react_1.useState)([]);
+    const [switchingToUserId, setSwitchingToUserId] = (0, react_1.useState)(null);
+    const [removingUserId, setRemovingUserId] = (0, react_1.useState)(null);
+    // Device session management state
+    const [showDeviceManagement, setShowDeviceManagement] = (0, react_1.useState)(false);
+    const [deviceSessions, setDeviceSessions] = (0, react_1.useState)([]);
+    const [loadingDeviceSessions, setLoadingDeviceSessions] = (0, react_1.useState)(false);
+    const [remotingLogoutSessionId, setRemoteLogoutSessionId] = (0, react_1.useState)(null);
+    const [loggingOutAllDevices, setLoggingOutAllDevices] = (0, react_1.useState)(false);
+    const screenWidth = react_native_1.Dimensions.get('window').width;
+    const { t } = (0, useI18n_1.useI18n)();
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme, colorScheme);
+    // Modern color scheme - memoized for performance
+    // Uses themeStyles for base colors, with some custom additions for this screen
+    const colors = (0, react_1.useMemo)(() => ({
+        background: themeStyles.backgroundColor,
+        surface: themeStyles.secondaryBackgroundColor,
+        card: themeStyles.isDarkTheme ? '#2C2C2E' : '#FFFFFF',
+        text: themeStyles.textColor,
+        secondaryText: themeStyles.isDarkTheme ? '#8E8E93' : '#6D6D70',
+        accent: themeStyles.primaryColor,
+        destructive: themeStyles.dangerColor,
+        success: themeStyles.successColor,
+        border: themeStyles.borderColor,
+        activeCard: themeStyles.isDarkTheme ? '#0A84FF20' : '#007AFF15',
+        shadow: themeStyles.isDarkTheme ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)',
+    }), [themeStyles]);
+    // Refresh sessions when screen loads
+    (0, react_1.useEffect)(() => {
+        if (isAuthenticated && activeSessionId && refreshSessions) {
+            refreshSessions();
+        }
+    }, [isAuthenticated, activeSessionId, refreshSessions]);
+    // Memoize session IDs to prevent unnecessary re-renders
+    const sessionIds = (0, react_1.useMemo)(() => sessions.map(s => s.sessionId).join(','), [sessions]);
+    // Load user profiles for sessions
+    // Production-ready: Optimized with batching, memoization, and error handling
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        const loadUserProfiles = async () => {
+            if (!sessions.length || !oxyServices || cancelled)
+                return;
+            // Sessions are already deduplicated by userId at the core level (OxyContext)
+            const uniqueSessions = sessions;
+            // Initialize loading state
+            setSessionsWithUsers(uniqueSessions.map(session => ({
+                ...session,
+                isLoadingProfile: true,
+            })));
+            // Batch load profiles for better performance using batch endpoint
+            try {
+                const sessionIds = uniqueSessions.map(s => s.sessionId);
+                const batchResults = await oxyServices.getUsersBySessions(sessionIds);
+                // Create a map for O(1) lookup
+                const userProfileMap = new Map();
+                batchResults.forEach(({ sessionId, user }) => {
+                    userProfileMap.set(sessionId, user);
+                });
+                if (cancelled)
+                    return;
+                // Update sessions with loaded profiles - optimized with Map for O(1) lookup
+                setSessionsWithUsers(prev => {
+                    return prev.map(session => {
+                        const userProfile = userProfileMap.get(session.sessionId);
+                        return {
+                            ...session,
+                            userProfile: userProfile || undefined,
+                            isLoadingProfile: false,
+                        };
+                    });
+                });
+            }
+            catch (error) {
+                if (!cancelled && __DEV__) {
+                    console.error('Failed to load user profiles:', error);
+                }
+                if (!cancelled) {
+                    setSessionsWithUsers(prev => prev.map(s => ({ ...s, isLoadingProfile: false })));
+                }
+            }
+        };
+        loadUserProfiles();
+        return () => {
+            cancelled = true;
+        };
+    }, [sessionIds, oxyServices, sessions]);
+    const handleSwitchSession = (0, react_1.useCallback)(async (sessionId) => {
+        if (sessionId === (activeSessionId ?? null))
+            return; // Already active session
+        if (switchingToUserId)
+            return; // Already switching
+        setSwitchingToUserId(sessionId);
+        try {
+            await switchSession(sessionId);
+            sonner_1.toast.success(t('accountSwitcher.toasts.switchSuccess') || 'Account switched successfully!');
+            if (onClose) {
+                onClose();
+            }
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('Switch session failed:', error);
+            }
+            sonner_1.toast.error(t('accountSwitcher.toasts.switchFailed') || 'There was a problem switching accounts. Please try again.');
+        }
+        finally {
+            setSwitchingToUserId(null);
+        }
+    }, [activeSessionId, switchSession, onClose, t, switchingToUserId]);
+    const handleRemoveSession = (0, react_1.useCallback)(async (sessionId, displayName) => {
+        if (removingUserId)
+            return; // Already removing
+        (0, confirmAction_1.confirmAction)(t('accountSwitcher.confirms.remove', { displayName }) || `Are you sure you want to remove ${displayName} from this device? You'll need to sign in again to access this account.`, async () => {
+            setRemovingUserId(sessionId);
+            try {
+                await removeSession(sessionId);
+                sonner_1.toast.success(t('accountSwitcher.toasts.removeSuccess') || 'Account removed successfully!');
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('Remove session failed:', error);
+                }
+                sonner_1.toast.error(t('accountSwitcher.toasts.removeFailed') || 'There was a problem removing the account. Please try again.');
+            }
+            finally {
+                setRemovingUserId(null);
+            }
+        });
+    }, [removeSession, t, removingUserId]);
+    const handleLogoutAll = (0, react_1.useCallback)(() => {
+        (0, confirmAction_1.confirmAction)(t('accountSwitcher.confirms.logoutAll') || 'Are you sure you want to sign out of all accounts? This will remove all saved accounts from this device.', async () => {
+            try {
+                await logoutAll();
+                sonner_1.toast.success(t('accountSwitcher.toasts.signOutAllSuccess') || 'All accounts signed out successfully!');
+                if (onClose) {
+                    onClose();
+                }
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('Logout all failed:', error);
+                }
+                const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+                sonner_1.toast.error(t('accountSwitcher.toasts.signOutAllFailed', { error: errorMessage }) || `There was a problem signing out: ${errorMessage}`);
+            }
+        });
+    }, [logoutAll, onClose, t]);
+    // Device session management functions - optimized with useCallback
+    const loadAllDeviceSessions = (0, react_1.useCallback)(async () => {
+        const currentActiveSessionId = activeSessionId ?? null;
+        if (!oxyServices || !currentActiveSessionId)
+            return;
+        setLoadingDeviceSessions(true);
+        try {
+            const allSessions = await oxyServices.getDeviceSessions(currentActiveSessionId);
+            setDeviceSessions(allSessions || []);
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('Failed to load device sessions:', error);
+            }
+            sonner_1.toast.error(t('accountSwitcher.toasts.deviceLoadFailed') || 'Failed to load device sessions. Please try again.');
+        }
+        finally {
+            setLoadingDeviceSessions(false);
+        }
+    }, [oxyServices, activeSessionId, t]);
+    const handleRemoteSessionLogout = (0, react_1.useCallback)((sessionId, deviceName) => {
+        if (remotingLogoutSessionId)
+            return; // Already processing
+        (0, confirmAction_1.confirmAction)(t('accountSwitcher.confirms.remoteLogout', { deviceName }) || `Are you sure you want to sign out from "${deviceName}"? This will end the session on that device.`, async () => {
+            setRemoteLogoutSessionId(sessionId);
+            try {
+                await oxyServices?.logoutSession((activeSessionId ?? null) || '', sessionId);
+                await loadAllDeviceSessions();
+                sonner_1.toast.success(t('accountSwitcher.toasts.remoteSignOutSuccess', { deviceName }) || `Signed out from ${deviceName} successfully!`);
+            }
+            catch (error) {
+                if (__DEV__) {
+                    console.error('Remote logout failed:', error);
+                }
+                sonner_1.toast.error(t('accountSwitcher.toasts.remoteSignOutFailed') || 'There was a problem signing out from the device. Please try again.');
+            }
+            finally {
+                setRemoteLogoutSessionId(null);
+            }
+        });
+    }, [activeSessionId, oxyServices, loadAllDeviceSessions, t, remotingLogoutSessionId]);
+    const handleLogoutAllDevices = (0, react_1.useCallback)(() => {
+        const otherDevicesCount = deviceSessions.filter(session => !session.isCurrent).length;
+        if (otherDevicesCount === 0) {
+            sonner_1.toast.info(t('accountSwitcher.toasts.noOtherDeviceSessions') || 'No other device sessions found to sign out from.');
+            return;
+        }
+        if (loggingOutAllDevices)
+            return; // Already processing
+        (0, confirmAction_1.confirmAction)(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.`, async () => {
+            setLoggingOutAllDevices(true);
+            try {
+                await oxyServices?.logoutAllDeviceSessions((activeSessionId ?? null) || '');
+                await loadAllDeviceSessions();
+                sonner_1.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_1.toast.error(t('accountSwitcher.toasts.signOutOthersFailed') || 'There was a problem signing out from other devices. Please try again.');
+            }
+            finally {
+                setLoggingOutAllDevices(false);
+            }
+        });
+    }, [deviceSessions, activeSessionId, oxyServices, loadAllDeviceSessions, t, loggingOutAllDevices]);
+    // Memoize filtered sessions for performance
+    const otherSessions = (0, react_1.useMemo)(() => sessionsWithUsers.filter(s => s.sessionId !== (activeSessionId ?? null)), [sessionsWithUsers, activeSessionId]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: '#f2f2f2' }], children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: t('accountSwitcher.title') || 'Account Switcher', onBack: goBack, onClose: onClose, showBackButton: true, showCloseButton: true, elevation: "subtle", rightAction: {
+                    icon: "refresh",
+                    onPress: refreshSessions
+                } }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.content, children: isLoading ? ((0, jsx_runtime_1.jsx)(components_1.LoadingState, { message: t('accountSwitcher.loading') || 'Loading accounts...', color: "#007AFF" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isAuthenticated && user && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: t('accountSwitcher.sections.current') || 'Current Account' }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem, styles.currentAccountCard], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.userIcon, children: [user.avatar ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: oxyServices.getFileDownloadUrl(user.avatar, 'thumb') }, style: styles.accountAvatarImage })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.accountAvatarFallback, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.accountAvatarText, children: (typeof user.name === 'string' ? user.name : user.name?.first || user.username)?.charAt(0).toUpperCase() }) })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.activeBadge, children: (0, jsx_runtime_1.jsx)(OxyIcon_1.default, { name: "checkmark", size: 12, color: "#fff" }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.settingInfo, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.settingLabel, children: typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.settingDescription, children: user.email || user.username })] }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.currentBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.currentBadgeText, children: t('accountSwitcher.currentBadge') || 'Current' }) })] })] })), otherSessions.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: t('accountSwitcher.sections.otherWithCount', { count: otherSessions.length }) || `Other Accounts (${otherSessions.length})` }), otherSessions.map((sessionWithUser, index, filteredArray) => {
+                                    const isFirst = index === 0;
+                                    const isLast = index === filteredArray.length - 1;
+                                    const isSwitching = switchingToUserId === sessionWithUser.sessionId;
+                                    const isRemoving = removingUserId === sessionWithUser.sessionId;
+                                    const { userProfile, isLoadingProfile } = sessionWithUser;
+                                    const displayName = typeof userProfile?.name === 'object'
+                                        ? userProfile.name.full || userProfile.name.first || userProfile.username
+                                        : userProfile?.name || userProfile?.username || 'Unknown User';
+                                    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                            styles.settingItem,
+                                            isFirst && styles.firstSettingItem,
+                                            isLast && styles.lastSettingItem,
+                                        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.userIcon, children: isLoadingProfile ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.accountAvatarFallback, children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#007AFF" }) })) : userProfile?.avatar ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: oxyServices.getFileDownloadUrl(userProfile.avatar, 'thumb') }, style: styles.accountAvatarImage })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.accountAvatarFallback, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.accountAvatarText, children: displayName.charAt(0).toUpperCase() }) })) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.settingInfo, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.settingLabel, children: displayName }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.settingDescription, children: ["@", userProfile?.username || 'unknown'] })] }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.accountActions, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.switchButton, onPress: () => handleSwitchSession(sessionWithUser.sessionId), disabled: isSwitching || isRemoving, children: isSwitching ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#007AFF" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.switchButtonText, children: "Switch" })) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.removeButton, onPress: () => handleRemoveSession(sessionWithUser.sessionId, displayName), disabled: isSwitching || isRemoving, children: isRemoving ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FF3B30" })) : ((0, jsx_runtime_1.jsx)(OxyIcon_1.default, { name: "trash", size: 16, color: "#FF3B30" })) })] })] }, `session-${sessionWithUser.sessionId}-${index}`));
+                                })] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: "Quick Actions" }), (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                        {
+                                            id: 'add-account',
+                                            icon: 'account-plus',
+                                            iconColor: '#007AFF',
+                                            title: 'Add Another Account',
+                                            subtitle: 'Sign in with a different account',
+                                            onPress: () => navigate?.('OxyAuth'),
+                                        },
+                                        {
+                                            id: 'device-management',
+                                            icon: 'cellphone',
+                                            iconColor: '#5856D6',
+                                            title: `${showDeviceManagement ? 'Hide' : 'Manage'} Device Sessions`,
+                                            subtitle: 'View and manage sessions on other devices',
+                                            onPress: () => setShowDeviceManagement(!showDeviceManagement),
+                                        },
+                                        {
+                                            id: 'sign-out-all',
+                                            icon: 'logout',
+                                            iconColor: '#FF3B30',
+                                            title: 'Sign Out All Accounts',
+                                            subtitle: 'Remove all accounts from this device',
+                                            onPress: handleLogoutAll,
+                                            disabled: sessionsWithUsers.length === 0,
+                                        },
+                                    ] })] }), showDeviceManagement && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.section, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: t('accountSwitcher.sections.deviceSessions') || 'Device Sessions' }), loadingDeviceSessions ? ((0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                        {
+                                            id: 'loading-device-sessions',
+                                            icon: 'sync',
+                                            iconColor: '#007AFF',
+                                            title: t('accountSwitcher.device.loadingTitle') || 'Loading device sessions...',
+                                            subtitle: t('accountSwitcher.device.loadingSubtitle') || 'Please wait while we fetch your device sessions',
+                                            disabled: true,
+                                            customContent: ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#007AFF", style: { marginRight: 16 } })),
+                                        },
+                                    ] })) : deviceSessions.length === 0 ? ((0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                        {
+                                            id: 'no-device-sessions',
+                                            icon: 'cellphone',
+                                            iconColor: '#ccc',
+                                            title: t('accountSwitcher.device.noneTitle') || 'No device sessions found',
+                                            subtitle: t('accountSwitcher.device.noneSubtitle') || 'Device session management not available',
+                                            disabled: true,
+                                        },
+                                    ] })) : ((0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: deviceSessions.map((session, index) => ({
+                                        id: `device-session-${session.sessionId}`,
+                                        icon: session.isCurrent ? 'cellphone' : 'cellphone-basic',
+                                        iconColor: session.isCurrent ? '#34C759' : '#8E8E93',
+                                        title: `${session.deviceName} ${session.isCurrent ? `(${t('accountSwitcher.device.thisDevice') || 'This device'})` : ''}`,
+                                        subtitle: t('accountSwitcher.device.lastActive', { date: new Date(session.lastActive).toLocaleDateString() }) || `Last active: ${new Date(session.lastActive).toLocaleDateString()}`,
+                                        onPress: session.isCurrent ? undefined : () => handleRemoteSessionLogout(session.sessionId, session.deviceName),
+                                        disabled: session.isCurrent || remotingLogoutSessionId === session.sessionId,
+                                        customContent: !session.isCurrent ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.removeButton, onPress: () => handleRemoteSessionLogout(session.sessionId, session.deviceName), disabled: remotingLogoutSessionId === session.sessionId, children: remotingLogoutSessionId === session.sessionId ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#FF3B30" })) : ((0, jsx_runtime_1.jsx)(OxyIcon_1.default, { name: "log-out", size: 16, color: "#FF3B30" })) })) : undefined,
+                                    })) }))] })), sessionsWithUsers.length === 0 && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.section, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                    {
+                                        id: 'empty-state',
+                                        icon: 'account-outline',
+                                        iconColor: '#ccc',
+                                        title: t('accountSwitcher.empty.title') || 'No saved accounts',
+                                        subtitle: t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly',
+                                        onPress: () => navigate?.('OxyAuth'),
+                                        customContent: ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.emptyStateContainer, children: [(0, jsx_runtime_1.jsx)(OxyIcon_1.default, { name: "person-outline", size: 48, color: "#ccc" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyStateTitle, children: t('accountSwitcher.empty.title') || 'No saved accounts' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyStateDescription, children: t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly' }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.addAccountButton, onPress: () => navigate?.('OxyAuth'), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.addAccountButtonText, children: t('accountCenter.sections.addAccount') || 'Add Account' }) })] })),
+                                    },
+                                ] }) }))] })) })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#f2f2f2',
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    section: {
+        marginBottom: 24,
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: react_native_1.Platform.OS === 'web' ? '600' : undefined,
+        fontFamily: fonts_1.fontFamilies.interSemiBold,
+        color: '#333',
+    },
+    settingItem: {
+        backgroundColor: '#fff',
+        padding: 16,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 2,
+    },
+    firstSettingItem: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    lastSettingItem: {
+        borderBottomLeftRadius: 24,
+        borderBottomRightRadius: 24,
+        marginBottom: 8,
+    },
+    currentAccountCard: {
+        borderWidth: 2,
+        borderColor: '#007AFF',
+        backgroundColor: '#007AFF08',
+    },
+    settingInfo: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+    },
+    settingLabel: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#333',
+        marginBottom: 2,
+    },
+    settingDescription: {
+        fontSize: 14,
+        color: '#666',
+    },
+    userIcon: {
+        marginRight: 12,
+        position: 'relative',
+    },
+    accountAvatarImage: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+    },
+    accountAvatarFallback: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#d169e5',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    accountAvatarText: {
+        color: 'white',
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
+    activeBadge: {
+        position: 'absolute',
+        top: -2,
+        right: -2,
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        backgroundColor: '#34C759',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 2,
+        borderColor: '#fff',
+    },
+    currentBadge: {
+        backgroundColor: '#007AFF',
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 12,
+    },
+    currentBadgeText: {
+        color: '#fff',
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    accountActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    switchButton: {
+        backgroundColor: '#007AFF',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 16,
+        minWidth: 60,
+        alignItems: 'center',
+    },
+    switchButtonText: {
+        color: '#fff',
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    removeButton: {
+        padding: 8,
+        borderRadius: 16,
+        backgroundColor: '#fff',
+        borderWidth: 1,
+        borderColor: '#FF3B30',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyStateContainer: {
+        alignItems: 'center',
+        paddingVertical: 32,
+        paddingHorizontal: 20,
+    },
+    emptyStateTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#333',
+        marginTop: 16,
+        marginBottom: 8,
+    },
+    emptyStateDescription: {
+        fontSize: 14,
+        color: '#666',
+        textAlign: 'center',
+        marginBottom: 24,
+        lineHeight: 20,
+    },
+    addAccountButton: {
+        backgroundColor: '#007AFF',
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 20,
+    },
+    addAccountButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});
+exports.default = ModernAccountSwitcherScreen;

package/src/ui/screens/AccountVerificationScreen.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+declare const _default: React.NamedExoticComponent<BaseScreenProps>;
+export default _default;

package/src/ui/screens/AccountVerificationScreen.js

@@ -0,0 +1,164 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const sonner_1 = require("../../lib/sonner");
+const components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const themeUtils_1 = require("../utils/themeUtils");
+const OxyContext_1 = require("../context/OxyContext");
+const AccountVerificationScreen = ({ onClose, theme, goBack, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { oxyServices, user } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const [reason, setReason] = (0, react_1.useState)('');
+    const [evidence, setEvidence] = (0, react_1.useState)('');
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const baseThemeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme);
+    const themeStyles = (0, react_1.useMemo)(() => ({
+        ...baseThemeStyles,
+        inputBackgroundColor: baseThemeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7',
+        inputTextColor: baseThemeStyles.textColor,
+        placeholderTextColor: baseThemeStyles.mutedTextColor,
+    }), [baseThemeStyles]);
+    const handleSubmit = (0, react_1.useCallback)(async () => {
+        if (!reason.trim()) {
+            sonner_1.toast.error(t('accountVerification.reasonRequired') || 'Please provide a reason for verification');
+            return;
+        }
+        if (!oxyServices) {
+            sonner_1.toast.error(t('accountVerification.error') || 'Service not available');
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            const result = await oxyServices.requestAccountVerification(reason.trim(), evidence.trim() || undefined);
+            react_native_1.Alert.alert(t('accountVerification.successTitle') || 'Request Submitted', t('accountVerification.successMessage') || `Your verification request has been submitted. Request ID: ${result.requestId}`, [
+                {
+                    text: t('accountVerification.ok') || 'OK',
+                    onPress: () => {
+                        setReason('');
+                        setEvidence('');
+                        goBack?.();
+                    },
+                },
+            ]);
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('Failed to submit verification request:', error);
+            }
+            sonner_1.toast.error((error instanceof Error ? error.message : null) || t('accountVerification.submitError') || 'Failed to submit verification request');
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [reason, evidence, oxyServices, t, goBack]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: t('accountVerification.title') || 'Account Verification', onBack: goBack || onClose, variant: "minimal", elevation: "subtle" }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.content, children: [(0, jsx_runtime_1.jsx)(components_1.Section, { isFirst: true, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.description, { color: themeStyles.mutedTextColor }], children: t('accountVerification.description') || 'Request a verified badge for your account. Verified accounts help establish authenticity and credibility.' }) }), (0, jsx_runtime_1.jsxs)(components_1.Section, { title: t('accountVerification.sections.request') || 'VERIFICATION REQUEST', children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.inputGroup, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: themeStyles.textColor }], children: t('accountVerification.reasonLabel') || 'Reason for Verification *' }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [
+                                            styles.textInput,
+                                            styles.textArea,
+                                            {
+                                                backgroundColor: themeStyles.inputBackgroundColor,
+                                                color: themeStyles.inputTextColor,
+                                                borderColor: themeStyles.borderColor,
+                                            },
+                                        ], value: reason, onChangeText: setReason, placeholder: t('accountVerification.reasonPlaceholder') || 'Explain why you need a verified badge (e.g., public figure, brand, organization)', placeholderTextColor: themeStyles.placeholderTextColor, multiline: true, numberOfLines: 4, textAlignVertical: "top", editable: !isSubmitting })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.inputGroup, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: themeStyles.textColor }], children: t('accountVerification.evidenceLabel') || 'Evidence (Optional)' }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [
+                                            styles.textInput,
+                                            styles.textArea,
+                                            {
+                                                backgroundColor: themeStyles.inputBackgroundColor,
+                                                color: themeStyles.inputTextColor,
+                                                borderColor: themeStyles.borderColor,
+                                            },
+                                        ], value: evidence, onChangeText: setEvidence, placeholder: t('accountVerification.evidencePlaceholder') || 'Provide any supporting documentation or links (e.g., official website, social media profiles)', placeholderTextColor: themeStyles.placeholderTextColor, multiline: true, numberOfLines: 4, textAlignVertical: "top", editable: !isSubmitting })] })] }), (0, jsx_runtime_1.jsx)(components_1.Section, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                                styles.submitButton,
+                                { backgroundColor: isSubmitting ? themeStyles.mutedTextColor : '#007AFF' },
+                            ], onPress: handleSubmit, disabled: isSubmitting || !reason.trim(), children: isSubmitting ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: "#FFFFFF" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.submitButtonText, children: t('accountVerification.submit') || 'Submit Request' })) }) }), (0, jsx_runtime_1.jsx)(components_1.Section, { children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.note, { color: themeStyles.mutedTextColor }], children: t('accountVerification.note') || 'Note: Verification requests are reviewed manually and may take several days. We will notify you once your request has been reviewed.' }) })] })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    description: {
+        fontSize: 16,
+        lineHeight: 24,
+        marginBottom: 8,
+    },
+    inputGroup: {
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: 16,
+        fontWeight: '500',
+        marginBottom: 8,
+    },
+    textInput: {
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 12,
+        fontSize: 16,
+        minHeight: 44,
+    },
+    textArea: {
+        minHeight: 100,
+        paddingTop: 12,
+    },
+    submitButton: {
+        borderRadius: 8,
+        padding: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 50,
+    },
+    submitButtonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    note: {
+        fontSize: 14,
+        lineHeight: 20,
+        fontStyle: 'italic',
+    },
+});
+exports.default = react_1.default.memo(AccountVerificationScreen);

package/src/ui/screens/AppInfoScreen.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+declare const AppInfoScreen: React.FC<BaseScreenProps>;
+export default AppInfoScreen;