@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/AccountOverviewScreen.js

@@ -0,0 +1,648 @@
+"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;
+    };
+})();
+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 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const Avatar_1 = __importDefault(require("../components/Avatar"));
+const OxyIcon_1 = __importDefault(require("../components/icon/OxyIcon"));
+const fonts_1 = require("../styles/fonts");
+const sonner_1 = require("../../lib/sonner");
+const confirmAction_1 = require("../utils/confirmAction");
+const components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const userUtils_1 = require("../utils/userUtils");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const themeUtils_1 = require("../utils/themeUtils");
+const OxyContext_1 = require("../context/OxyContext");
+const useAccountQueries_1 = require("../hooks/queries/useAccountQueries");
+const spacing_1 = require("../constants/spacing");
+const modals_1 = require("../components/modals");
+// Optional Lottie import - gracefully handle if not available
+let LottieView = null;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    LottieView = require('lottie-react-native').default;
+}
+catch {
+    // Lottie not available, will use fallback
+}
+// Import Lottie animation - will be undefined if file doesn't exist
+let lottieAnimation = undefined;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    lottieAnimation = require('../assets/lottie/welcomeheader_background_op1.json');
+}
+catch {
+    // Animation file not available
+}
+/**
+ * AccountOverviewScreen - Optimized for performance
+ *
+ * Performance optimizations implemented:
+ * - useMemo for theme calculations (only recalculates when theme changes)
+ * - useMemo for additional accounts filtering (only recalculates when dependencies change)
+ * - useCallback for event handlers to prevent unnecessary re-renders
+ * - React.memo wrapper to prevent re-renders when props haven't changed
+ * - GroupedSection components for better organization and cleaner code
+ */
+const AccountOverviewScreen = ({ onClose, theme, navigate, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { user, logout, isLoading, sessions, activeSessionId, oxyServices, isAuthenticated, openAvatarPicker, } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const [showMoreAccounts, setShowMoreAccounts] = (0, react_1.useState)(false);
+    const [additionalAccountsData, setAdditionalAccountsData] = (0, react_1.useState)([]);
+    const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = (0, react_1.useState)(false);
+    const [showDeleteModal, setShowDeleteModal] = (0, react_1.useState)(false);
+    const lottieRef = (0, react_1.useRef)(null);
+    const hasPlayedRef = (0, react_1.useRef)(false);
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    // Use centralized theme styles hook for consistency
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const baseThemeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme, colorScheme);
+    const themeStyles = (0, react_1.useMemo)(() => ({
+        ...baseThemeStyles,
+        // AccountOverviewScreen uses a custom primary color (purple) instead of the default blue
+        primaryColor: '#d169e5',
+        // Keep custom icon color for this screen
+        iconColor: baseThemeStyles.isDarkTheme ? '#BBBBBB' : '#666666',
+    }), [baseThemeStyles]);
+    // Compute user data for display
+    const displayName = (0, react_1.useMemo)(() => (0, userUtils_1.getDisplayName)(user), [user]);
+    const shortDisplayName = (0, react_1.useMemo)(() => (0, userUtils_1.getShortDisplayName)(user), [user]);
+    const avatarUrl = (0, react_1.useMemo)(() => {
+        if (user?.avatar && oxyServices) {
+            return oxyServices.getFileDownloadUrl(user.avatar, 'thumb');
+        }
+        return undefined;
+    }, [user?.avatar, oxyServices]);
+    // Handle avatar press - use openAvatarPicker from context
+    const handleAvatarPress = (0, react_1.useCallback)(() => {
+        openAvatarPicker();
+    }, [openAvatarPicker]);
+    // Play Lottie animation once when component mounts
+    (0, react_1.useEffect)(() => {
+        if (hasPlayedRef.current || !LottieView || !lottieRef.current || !lottieAnimation)
+            return;
+        const timer = setTimeout(() => {
+            if (lottieRef.current && !hasPlayedRef.current) {
+                lottieRef.current.play();
+                hasPlayedRef.current = true;
+            }
+        }, 100);
+        return () => clearTimeout(timer);
+    }, []);
+    // Memoize additional accounts filtering to prevent recalculation on every render
+    const additionalAccounts = (0, react_1.useMemo)(() => (sessions || []).filter(session => session.sessionId !== activeSessionId && session.userId !== user?.id), [sessions, activeSessionId, user?.id]);
+    // Load user profiles for additional accounts using TanStack Query
+    const sessionIds = additionalAccounts.map(s => s.sessionId);
+    const { data: usersData, isLoading: isLoadingUsers } = (0, useAccountQueries_1.useUsersBySessions)(sessionIds, {
+        enabled: additionalAccounts.length > 0
+    });
+    react_1.default.useEffect(() => {
+        if (usersData && usersData.length > 0) {
+            const accountsData = usersData.map(({ sessionId, user: userProfile }) => {
+                if (!userProfile) {
+                    return {
+                        id: sessionId,
+                        sessionId,
+                        username: 'Unknown User',
+                        email: 'No email available',
+                        avatar: null,
+                        userProfile: null
+                    };
+                }
+                return {
+                    id: sessionId,
+                    sessionId,
+                    username: userProfile.username,
+                    email: userProfile.email,
+                    name: userProfile.name,
+                    avatar: userProfile.avatar,
+                    userProfile
+                };
+            });
+            setAdditionalAccountsData(accountsData);
+            setLoadingAdditionalAccounts(false);
+        }
+        else if (additionalAccounts.length === 0) {
+            setAdditionalAccountsData([]);
+            setLoadingAdditionalAccounts(false);
+        }
+        else if (!isLoadingUsers) {
+            setLoadingAdditionalAccounts(false);
+        }
+    }, [usersData, additionalAccounts.length, isLoadingUsers]);
+    // Feature settings (with mock values)
+    const features = {
+        safeSearch: false,
+        language: 'English',
+    };
+    // Memoize event handlers to prevent recreation on every render
+    const handleLogout = (0, react_1.useCallback)(async () => {
+        try {
+            await logout();
+            if (onClose) {
+                onClose();
+            }
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('Logout failed:', error);
+            }
+            sonner_1.toast.error(t('common.errors.signOutFailed'));
+        }
+    }, [logout, onClose]);
+    const confirmLogout = (0, react_1.useCallback)(() => {
+        (0, confirmAction_1.confirmAction)(t('common.confirms.signOut'), handleLogout);
+    }, [handleLogout]);
+    const handleAddAccount = (0, react_1.useCallback)(() => {
+        sonner_1.toast.info(t('accountOverview.addAccountComing'));
+    }, [t]);
+    const handleSignOutAll = (0, react_1.useCallback)(() => {
+        (0, confirmAction_1.confirmAction)(t('common.confirms.signOutAll'), handleLogout);
+    }, [handleLogout]);
+    const handleDownloadData = (0, react_1.useCallback)(async () => {
+        if (!oxyServices || !user) {
+            sonner_1.toast.error(t('accountOverview.items.downloadData.error') || 'Service not available');
+            return;
+        }
+        try {
+            react_native_1.Alert.alert(t('accountOverview.items.downloadData.confirmTitle') || 'Download Account Data', t('accountOverview.items.downloadData.confirmMessage') || 'Choose the format for your account data export:', [
+                {
+                    text: t('common.cancel') || 'Cancel',
+                    style: 'cancel',
+                },
+                {
+                    text: 'JSON',
+                    onPress: async () => {
+                        try {
+                            sonner_1.toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
+                            const blob = await oxyServices.downloadAccountData('json');
+                            // Create download link for web
+                            if (react_native_1.Platform.OS === 'web') {
+                                const url = URL.createObjectURL(blob);
+                                const link = document.createElement('a');
+                                link.href = url;
+                                link.download = `account-data-${Date.now()}.json`;
+                                document.body.appendChild(link);
+                                link.click();
+                                document.body.removeChild(link);
+                                URL.revokeObjectURL(url);
+                                sonner_1.toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
+                            }
+                            else {
+                                // For React Native, you'd need to use a library like expo-file-system
+                                sonner_1.toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
+                            }
+                        }
+                        catch (error) {
+                            if (__DEV__) {
+                                console.error('Failed to download data:', error);
+                            }
+                            sonner_1.toast.error((error instanceof Error ? error.message : null) || t('accountOverview.items.downloadData.error') || 'Failed to download data');
+                        }
+                    },
+                },
+                {
+                    text: 'CSV',
+                    onPress: async () => {
+                        try {
+                            sonner_1.toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
+                            const blob = await oxyServices.downloadAccountData('csv');
+                            // Create download link for web
+                            if (react_native_1.Platform.OS === 'web') {
+                                const url = URL.createObjectURL(blob);
+                                const link = document.createElement('a');
+                                link.href = url;
+                                link.download = `account-data-${Date.now()}.csv`;
+                                document.body.appendChild(link);
+                                link.click();
+                                document.body.removeChild(link);
+                                URL.revokeObjectURL(url);
+                                sonner_1.toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
+                            }
+                            else {
+                                // For React Native, you'd need to use a library like expo-file-system
+                                sonner_1.toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
+                            }
+                        }
+                        catch (error) {
+                            if (__DEV__) {
+                                console.error('Failed to download data:', error);
+                            }
+                            sonner_1.toast.error((error instanceof Error ? error.message : null) || t('accountOverview.items.downloadData.error') || 'Failed to download data');
+                        }
+                    },
+                },
+            ]);
+        }
+        catch (error) {
+            if (__DEV__) {
+                console.error('Failed to initiate download:', error);
+            }
+            sonner_1.toast.error((error instanceof Error ? error.message : null) || t('accountOverview.items.downloadData.error') || 'Failed to download data');
+        }
+    }, [oxyServices, user, t]);
+    const handleDeleteAccount = (0, react_1.useCallback)(() => {
+        if (!user) {
+            sonner_1.toast.error(t('accountOverview.items.deleteAccount.error') || 'User not available');
+            return;
+        }
+        setShowDeleteModal(true);
+    }, [user, t]);
+    const handleConfirmDelete = (0, react_1.useCallback)(async (password) => {
+        if (!oxyServices || !user) {
+            throw new Error(t('accountOverview.items.deleteAccount.error') || 'Service not available');
+        }
+        await oxyServices.deleteAccount(password);
+        sonner_1.toast.success(t('accountOverview.items.deleteAccount.success') || 'Account deleted successfully');
+        setShowDeleteModal(false);
+        await logout();
+        if (onClose) {
+            onClose();
+        }
+    }, [oxyServices, user, logout, onClose, t]);
+    if (!isAuthenticated) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.message, { color: themeStyles.textColor }], children: t('common.status.notSignedIn') }) }));
+    }
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor, justifyContent: 'center' }], children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: themeStyles.primaryColor }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.content, contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, children: [user && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.headerSection, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.avatarSectionWrapper, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.avatarContainer, children: [LottieView && lottieAnimation && ((0, jsx_runtime_1.jsx)(LottieView, { ref: lottieRef, source: lottieAnimation, style: styles.lottieBackground, loop: false, autoPlay: false })), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.avatarWrapper, onPress: handleAvatarPress, activeOpacity: 0.8, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { uri: avatarUrl, name: displayName, size: 100, theme: normalizedTheme }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.nameWrapper, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.welcomeText, { color: themeStyles.textColor }], children: displayName }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.welcomeSubtext, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }], children: "Manage your Oxy account." })] })] }) })), (0, jsx_runtime_1.jsx)(components_1.Section, { title: t('accountOverview.sections.profile'), isFirst: true, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                {
+                                    id: 'profile-info',
+                                    icon: 'account',
+                                    iconColor: baseThemeStyles.colors.iconSecurity,
+                                    title: displayName,
+                                    subtitle: user ? (user.email || user.username) : (t('common.status.loading') || 'Loading...'),
+                                    onPress: () => navigate?.('AccountSettings', { activeTab: 'profile' }),
+                                },
+                            ] }) }), (0, jsx_runtime_1.jsx)(components_1.Section, { title: t('accountOverview.sections.accountSettings'), children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                {
+                                    id: 'edit-profile',
+                                    icon: 'account-circle',
+                                    iconColor: baseThemeStyles.colors.iconPersonalInfo,
+                                    title: t('accountOverview.items.editProfile.title'),
+                                    subtitle: t('accountOverview.items.editProfile.subtitle'),
+                                    onPress: () => navigate?.('AccountSettings', { activeTab: 'profile' }),
+                                },
+                                {
+                                    id: 'security-privacy',
+                                    icon: 'shield-check',
+                                    iconColor: baseThemeStyles.colors.iconSecurity,
+                                    title: t('accountOverview.items.security.title'),
+                                    subtitle: t('accountOverview.items.security.subtitle'),
+                                    onPress: () => navigate?.('AccountSettings', { activeTab: 'password' }),
+                                },
+                                {
+                                    id: 'notifications',
+                                    icon: 'bell',
+                                    iconColor: baseThemeStyles.colors.iconStorage,
+                                    title: t('accountOverview.items.notifications.title'),
+                                    subtitle: t('accountOverview.items.notifications.subtitle'),
+                                    onPress: () => navigate?.('AccountSettings', { activeTab: 'notifications' }),
+                                },
+                                {
+                                    id: 'premium-subscription',
+                                    icon: 'star',
+                                    iconColor: baseThemeStyles.colors.iconPayments,
+                                    title: t('accountOverview.items.premium.title'),
+                                    subtitle: user?.isPremium ? t('accountOverview.items.premium.manage') : t('accountOverview.items.premium.upgrade'),
+                                    onPress: () => navigate?.('PremiumSubscription'),
+                                },
+                                ...(user?.isPremium ? [{
+                                        id: 'billing-management',
+                                        icon: 'card',
+                                        iconColor: baseThemeStyles.colors.iconPersonalInfo,
+                                        title: t('accountOverview.items.billing.title'),
+                                        subtitle: t('accountOverview.items.billing.subtitle'),
+                                        onPress: () => sonner_1.toast.info(t('accountOverview.items.billing.coming')),
+                                    }] : []),
+                            ] }) }), showMoreAccounts && ((0, jsx_runtime_1.jsx)(components_1.Section, { title: `${t('accountOverview.sections.additionalAccounts') || 'Additional Accounts'}${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`, children: loadingAdditionalAccounts ? ((0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                {
+                                    id: 'loading-accounts',
+                                    icon: 'sync',
+                                    iconColor: baseThemeStyles.colors.iconSecurity,
+                                    title: t('accountOverview.loadingAdditional.title') || 'Loading accounts...',
+                                    subtitle: t('accountOverview.loadingAdditional.subtitle') || 'Please wait while we load your additional accounts',
+                                    customContent: ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.loadingContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: baseThemeStyles.colors.iconSecurity }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingText, children: t('accountOverview.loadingAdditional.title') || 'Loading accounts...' })] })),
+                                },
+                            ] })) : additionalAccountsData.length > 0 ? ((0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: additionalAccountsData.map((account, index) => ({
+                                id: `account-${account.id}`,
+                                icon: 'account',
+                                iconColor: baseThemeStyles.colors.iconData,
+                                title: typeof account.name === 'object'
+                                    ? account.name?.full || account.name?.first || account.username
+                                    : account.name || account.username,
+                                subtitle: account.email || account.username,
+                                onPress: () => {
+                                    sonner_1.toast.info(t('accountOverview.items.accountSwitcher.switchPrompt', { username: account.username }) || `Switch to ${account.username}?`);
+                                },
+                                customContent: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.userIcon, children: account.avatar ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: oxyServices.getFileDownloadUrl(account.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: account.username?.charAt(0).toUpperCase() || '?' }) })) }), (0, jsx_runtime_1.jsx)(OxyIcon_1.default, { name: "chevron-forward", size: 16, color: "#ccc" })] })),
+                            })) })) : ((0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                {
+                                    id: 'no-accounts',
+                                    icon: 'account-outline',
+                                    iconColor: '#ccc',
+                                    title: t('accountOverview.additional.noAccounts.title') || 'No other accounts',
+                                    subtitle: t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them',
+                                },
+                            ] })) })), showMoreAccounts && ((0, jsx_runtime_1.jsx)(components_1.Section, { title: t('accountOverview.sections.accountManagement') || 'Account Management', children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                {
+                                    id: 'add-account',
+                                    icon: 'add',
+                                    iconColor: baseThemeStyles.colors.iconSecurity,
+                                    title: t('accountOverview.items.addAccount.title') || 'Add Another Account',
+                                    subtitle: t('accountOverview.items.addAccount.subtitle') || 'Sign in with a different account',
+                                    onPress: handleAddAccount,
+                                },
+                                {
+                                    id: 'sign-out-all',
+                                    icon: 'logout',
+                                    iconColor: baseThemeStyles.colors.iconSharing,
+                                    title: t('accountOverview.items.signOutAll.title') || 'Sign out of all accounts',
+                                    subtitle: t('accountOverview.items.signOutAll.subtitle') || 'Remove all accounts from this device',
+                                    onPress: handleSignOutAll,
+                                },
+                            ] }) })), (0, jsx_runtime_1.jsx)(components_1.Section, { title: t('accountOverview.sections.quickActions'), children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                {
+                                    id: 'account-switcher',
+                                    icon: 'account-group',
+                                    iconColor: baseThemeStyles.colors.iconData,
+                                    title: showMoreAccounts
+                                        ? t('accountOverview.items.accountSwitcher.titleHide')
+                                        : t('accountOverview.items.accountSwitcher.titleShow'),
+                                    subtitle: showMoreAccounts
+                                        ? t('accountOverview.items.accountSwitcher.subtitleHide')
+                                        : additionalAccountsData.length > 0
+                                            ? t('accountOverview.items.accountSwitcher.subtitleSwitchBetween', { count: String(additionalAccountsData.length + 1) })
+                                            : loadingAdditionalAccounts
+                                                ? t('accountOverview.items.accountSwitcher.subtitleLoading')
+                                                : t('accountOverview.items.accountSwitcher.subtitleManageMultiple'),
+                                    onPress: () => setShowMoreAccounts(!showMoreAccounts),
+                                },
+                                {
+                                    id: 'history-view',
+                                    icon: 'clock',
+                                    iconColor: baseThemeStyles.colors.iconSecurity,
+                                    title: t('accountOverview.items.history.title') || 'History',
+                                    subtitle: t('accountOverview.items.history.subtitle') || 'View and manage your search history',
+                                    onPress: () => navigate?.('HistoryView'),
+                                },
+                                {
+                                    id: 'saves-collections',
+                                    icon: 'bookmark',
+                                    iconColor: baseThemeStyles.colors.iconStorage,
+                                    title: t('accountOverview.items.saves.title') || 'Saves & Collections',
+                                    subtitle: t('accountOverview.items.saves.subtitle') || 'View your saved items and collections',
+                                    onPress: () => navigate?.('SavesCollections'),
+                                },
+                                {
+                                    id: 'download-data',
+                                    icon: 'download',
+                                    iconColor: baseThemeStyles.colors.iconPersonalInfo,
+                                    title: t('accountOverview.items.downloadData.title'),
+                                    subtitle: t('accountOverview.items.downloadData.subtitle'),
+                                    onPress: handleDownloadData,
+                                },
+                                {
+                                    id: 'delete-account',
+                                    icon: 'delete',
+                                    iconColor: baseThemeStyles.colors.iconSharing,
+                                    title: t('accountOverview.items.deleteAccount.title'),
+                                    subtitle: t('accountOverview.items.deleteAccount.subtitle'),
+                                    onPress: handleDeleteAccount,
+                                },
+                            ] }) }), (0, jsx_runtime_1.jsx)(components_1.Section, { title: t('accountOverview.sections.support'), children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                {
+                                    id: 'search-settings',
+                                    icon: 'magnify',
+                                    iconColor: baseThemeStyles.colors.iconSecurity,
+                                    title: t('accountOverview.items.searchSettings.title') || 'Search Settings',
+                                    subtitle: t('accountOverview.items.searchSettings.subtitle') || 'SafeSearch and personalization',
+                                    onPress: () => navigate?.('SearchSettings'),
+                                },
+                                {
+                                    id: 'language-settings',
+                                    icon: 'translate',
+                                    iconColor: baseThemeStyles.colors.iconPersonalInfo,
+                                    title: t('accountOverview.items.language.title') || 'Language',
+                                    subtitle: t('accountOverview.items.language.subtitle') || 'Choose your preferred language',
+                                    onPress: () => navigate?.('LanguageSelector'),
+                                },
+                                {
+                                    id: 'account-preferences',
+                                    icon: 'cog',
+                                    iconColor: '#8E8E93',
+                                    title: t('accountOverview.items.preferences.title'),
+                                    subtitle: t('accountOverview.items.preferences.subtitle'),
+                                    onPress: () => sonner_1.toast.info(t('accountOverview.items.preferences.coming')),
+                                },
+                                {
+                                    id: 'help-support',
+                                    icon: 'help-circle',
+                                    iconColor: baseThemeStyles.colors.iconSecurity,
+                                    title: t('accountOverview.items.help.title'),
+                                    subtitle: t('accountOverview.items.help.subtitle'),
+                                    onPress: () => navigate?.('HelpSupport'),
+                                },
+                                {
+                                    id: 'privacy-policy',
+                                    icon: 'shield-check',
+                                    iconColor: baseThemeStyles.colors.iconPersonalInfo,
+                                    title: t('accountOverview.items.privacyPolicy.title') || 'Privacy Policy',
+                                    subtitle: t('accountOverview.items.privacyPolicy.subtitle') || 'How we handle your data',
+                                    onPress: () => navigate?.('LegalDocuments', { initialStep: 1 }),
+                                },
+                                {
+                                    id: 'terms-of-service',
+                                    icon: 'file-document',
+                                    iconColor: baseThemeStyles.colors.iconSecurity,
+                                    title: t('accountOverview.items.termsOfService.title') || 'Terms of Service',
+                                    subtitle: t('accountOverview.items.termsOfService.subtitle') || 'Terms and conditions of use',
+                                    onPress: () => navigate?.('LegalDocuments', { initialStep: 2 }),
+                                },
+                                {
+                                    id: 'connected-apps',
+                                    icon: 'link',
+                                    iconColor: baseThemeStyles.colors.iconPersonalInfo,
+                                    title: t('accountOverview.items.connectedApps.title'),
+                                    subtitle: t('accountOverview.items.connectedApps.subtitle'),
+                                    onPress: () => sonner_1.toast.info(t('accountOverview.items.connectedApps.coming')),
+                                },
+                                {
+                                    id: 'about',
+                                    icon: 'information',
+                                    iconColor: '#8E8E93',
+                                    title: t('accountOverview.items.about.title'),
+                                    subtitle: t('accountOverview.items.about.subtitle'),
+                                    onPress: () => navigate?.('AppInfo'),
+                                },
+                            ] }) }), (0, jsx_runtime_1.jsx)(components_1.Section, { title: t('accountOverview.sections.actions'), children: (0, jsx_runtime_1.jsx)(components_1.GroupedItem, { icon: "logout", iconColor: "#FF3B30", title: t('accountOverview.items.signOut.title'), subtitle: t('accountOverview.items.signOut.subtitle'), onPress: confirmLogout, isFirst: true, isLast: true, showChevron: false }) })] }), user && ((0, jsx_runtime_1.jsx)(modals_1.DeleteAccountModal, { visible: showDeleteModal, username: user.username || '', onClose: () => setShowDeleteModal(false), onDelete: handleConfirmDelete, colors: {
+                    background: themeStyles.backgroundColor,
+                    text: themeStyles.textColor,
+                    secondaryText: themeStyles.isDarkTheme ? '#888888' : '#666666',
+                    border: themeStyles.borderColor,
+                    danger: '#FF3B30',
+                    inputBackground: themeStyles.isDarkTheme ? '#333333' : '#F5F5F5',
+                }, t: t }))] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+    },
+    scrollContent: (0, spacing_1.createScreenContentStyle)(spacing_1.HEADER_PADDING_TOP_OVERVIEW),
+    headerSection: {
+        alignItems: 'center',
+        marginBottom: spacing_1.SECTION_GAP,
+        paddingTop: spacing_1.HEADER_PADDING_TOP_OVERVIEW,
+    },
+    avatarSectionWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+    },
+    avatarContainer: {
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        maxWidth: 600,
+        minHeight: 100,
+        overflow: 'hidden',
+        alignSelf: 'center',
+        aspectRatio: 6,
+    },
+    lottieBackground: {
+        position: 'absolute',
+        width: '100%',
+        maxWidth: 600,
+        minHeight: 100,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 0,
+        aspectRatio: 6,
+    },
+    avatarWrapper: {
+        zIndex: 1,
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 100,
+        height: 100,
+        left: '50%',
+        marginLeft: -50,
+        top: 0,
+    },
+    nameWrapper: {
+        marginTop: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    welcomeText: {
+        fontSize: 28,
+        fontWeight: '600',
+        marginBottom: 8,
+        fontFamily: fonts_1.fontFamilies.interBold,
+        maxWidth: '90%',
+    },
+    welcomeSubtext: {
+        fontSize: 16,
+        fontWeight: '400',
+        opacity: 0.6,
+    },
+    userIcon: {
+        marginRight: 12,
+    },
+    manageButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 16,
+        // backgroundColor should be applied inline using colors.iconSecurity
+    },
+    manageButtonText: {
+        color: '#fff',
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    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',
+    },
+    message: {
+        fontSize: 16,
+        textAlign: 'center',
+        marginTop: 24,
+        color: '#333',
+    },
+    loadingContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 20,
+        gap: 12,
+    },
+    loadingText: {
+        fontSize: 16,
+        color: '#666',
+    },
+});
+exports.default = react_1.default.memo(AccountOverviewScreen);

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

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