@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/AccountSettingsScreen.js

@@ -0,0 +1,480 @@
+"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 fonts_1 = require("../styles/fonts");
+const confirmAction_1 = require("../utils/confirmAction");
+const authStore_1 = require("../stores/authStore");
+const components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const theme_1 = require("../constants/theme");
+const themeUtils_1 = require("../utils/themeUtils");
+const userUtils_1 = require("../utils/userUtils");
+const OxyContext_1 = require("../context/OxyContext");
+const useAccountQueries_1 = require("../hooks/queries/useAccountQueries");
+const useAccountMutations_1 = require("../hooks/mutations/useAccountMutations");
+const spacing_1 = require("../constants/spacing");
+const AccountSettingsScreen = ({ onClose, theme, goBack, navigate, initialField, initialSection, scrollTo, }) => {
+    // Use useOxy() hook for OxyContext values
+    const { oxyServices, isAuthenticated, } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    // Use TanStack Query for user data
+    const { data: user, isLoading: userLoading } = (0, useAccountQueries_1.useCurrentUser)({ enabled: isAuthenticated });
+    const uploadAvatarMutation = (0, useAccountMutations_1.useUploadAvatar)();
+    // Fallback to store for backward compatibility
+    const userFromStore = (0, authStore_1.useAuthStore)((state) => state.user);
+    const finalUser = user || userFromStore;
+    const isUpdatingAvatar = uploadAvatarMutation.isPending;
+    const [optimisticAvatarId, setOptimisticAvatarId] = (0, react_1.useState)(null);
+    const scrollViewRef = (0, react_1.useRef)(null);
+    const avatarSectionRef = (0, react_1.useRef)(null);
+    // Section refs for navigation
+    const profilePictureSectionRef = (0, react_1.useRef)(null);
+    const basicInfoSectionRef = (0, react_1.useRef)(null);
+    const aboutSectionRef = (0, react_1.useRef)(null);
+    const quickActionsSectionRef = (0, react_1.useRef)(null);
+    const securitySectionRef = (0, react_1.useRef)(null);
+    // Section Y positions for scrolling
+    const [profilePictureSectionY, setProfilePictureSectionY] = (0, react_1.useState)(null);
+    const [basicInfoSectionY, setBasicInfoSectionY] = (0, react_1.useState)(null);
+    const [aboutSectionY, setAboutSectionY] = (0, react_1.useState)(null);
+    const [quickActionsSectionY, setQuickActionsSectionY] = (0, react_1.useState)(null);
+    const [securitySectionY, setSecuritySectionY] = (0, react_1.useState)(null);
+    // Form state
+    const [displayName, setDisplayName] = (0, react_1.useState)('');
+    const [lastName, setLastName] = (0, react_1.useState)('');
+    const [username, setUsername] = (0, react_1.useState)('');
+    const [email, setEmail] = (0, react_1.useState)('');
+    const [bio, setBio] = (0, react_1.useState)('');
+    const [location, setLocation] = (0, react_1.useState)('');
+    const [links, setLinks] = (0, react_1.useState)([]);
+    const [avatarFileId, setAvatarFileId] = (0, react_1.useState)('');
+    // Navigation helper for editing fields
+    const navigateToEditField = (0, react_1.useCallback)((fieldType) => {
+        navigate?.('EditProfileField', { fieldType });
+    }, [navigate]);
+    // Location and links state (for display only - modals handle editing)
+    const [locations, setLocations] = (0, react_1.useState)([]);
+    const [linksMetadata, setLinksMetadata] = (0, react_1.useState)([]);
+    // Get theme colors using centralized hook
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(theme || 'light', colorScheme);
+    // Extract colors for convenience - ensure it's always defined
+    // useThemeStyles always returns colors, but add safety check for edge cases
+    const colors = themeStyles.colors || theme_1.Colors[(0, themeUtils_1.normalizeColorScheme)(colorScheme, theme || 'light')];
+    // Track initialization to prevent unnecessary resets
+    const isInitializedRef = (0, react_1.useRef)(false);
+    const previousUserIdRef = (0, react_1.useRef)(null);
+    const previousAvatarRef = (0, react_1.useRef)(null);
+    // Load user data - only reset fields when user actually changes (not just avatar)
+    (0, react_1.useEffect)(() => {
+        if (finalUser) {
+            const currentUserId = finalUser.id;
+            const currentAvatar = finalUser.avatar ?? '';
+            const isNewUser = previousUserIdRef.current !== currentUserId;
+            const isAvatarOnlyUpdate = !isNewUser && previousUserIdRef.current === currentUserId &&
+                previousAvatarRef.current !== currentAvatar &&
+                previousAvatarRef.current !== null;
+            const shouldInitialize = !isInitializedRef.current || isNewUser;
+            // Only reset all fields if it's a new user or first load
+            // Skip reset if it's just an avatar update
+            if (shouldInitialize && !isAvatarOnlyUpdate) {
+                const userDisplayName = typeof finalUser.name === 'string'
+                    ? finalUser.name
+                    : finalUser.name?.first || finalUser.name?.full || '';
+                const userLastName = typeof finalUser.name === 'object' ? finalUser.name?.last || '' : '';
+                setDisplayName(userDisplayName);
+                setLastName(userLastName);
+                setUsername(finalUser.username || '');
+                setEmail(finalUser.email || '');
+                setBio(finalUser.bio || '');
+                setLocation(finalUser.location || '');
+                // Handle locations - convert single location to array format
+                if (finalUser.locations && Array.isArray(finalUser.locations)) {
+                    setLocations(finalUser.locations.map((loc, index) => ({
+                        id: loc.id || `existing-${index}`,
+                        name: loc.name,
+                        label: loc.label,
+                        coordinates: loc.coordinates
+                    })));
+                }
+                else if (finalUser.location) {
+                    // Convert single location string to array format
+                    setLocations([{
+                            id: 'existing-0',
+                            name: finalUser.location,
+                            label: 'Location'
+                        }]);
+                }
+                else {
+                    setLocations([]);
+                }
+                // Handle links - simple and direct like other fields
+                if (finalUser.linksMetadata && Array.isArray(finalUser.linksMetadata)) {
+                    const urls = finalUser.linksMetadata.map((l) => l.url);
+                    setLinks(urls);
+                    const metadataWithIds = finalUser.linksMetadata.map((link, index) => ({
+                        ...link,
+                        id: link.id || `existing-${index}`
+                    }));
+                    setLinksMetadata(metadataWithIds);
+                }
+                else if (Array.isArray(finalUser.links)) {
+                    const simpleLinks = finalUser.links.map((l) => typeof l === 'string' ? l : l.link).filter(Boolean);
+                    setLinks(simpleLinks);
+                    const linksWithMetadata = simpleLinks.map((url, index) => ({
+                        url,
+                        title: url.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+                        description: `Link to ${url}`,
+                        image: undefined,
+                        id: `existing-${index}`
+                    }));
+                    setLinksMetadata(linksWithMetadata);
+                }
+                else if (finalUser.website) {
+                    setLinks([finalUser.website]);
+                    setLinksMetadata([{
+                            url: finalUser.website,
+                            title: finalUser.website.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+                            description: `Link to ${finalUser.website}`,
+                            image: undefined,
+                            id: 'existing-0'
+                        }]);
+                }
+                else {
+                    setLinks([]);
+                    setLinksMetadata([]);
+                }
+                isInitializedRef.current = true;
+            }
+            // Update avatar only if it changed and we're not in optimistic/updating state
+            // This allows the server response to update the avatar without resetting other fields
+            // But don't override if we have a pending optimistic update
+            if (currentAvatar !== avatarFileId && !isUpdatingAvatar && !optimisticAvatarId) {
+                setAvatarFileId(currentAvatar);
+            }
+            // If we just finished updating and the server avatar matches our optimistic one, clear optimistic state
+            // Also clear if the server avatar matches our current avatarFileId (update completed)
+            if (isUpdatingAvatar === false && optimisticAvatarId) {
+                if (currentAvatar === optimisticAvatarId || currentAvatar === avatarFileId) {
+                    setOptimisticAvatarId(null);
+                }
+            }
+            previousUserIdRef.current = currentUserId;
+            previousAvatarRef.current = currentAvatar;
+        }
+    }, [finalUser, avatarFileId, isUpdatingAvatar, optimisticAvatarId]);
+    // Set initial editing field if provided via props (e.g., from navigation)
+    // Handle initialSection prop to scroll to specific section
+    const hasScrolledToSectionRef = (0, react_1.useRef)(false);
+    const previousInitialSectionRef = (0, react_1.useRef)(undefined);
+    const SCROLL_OFFSET = 100; // Offset to show section near top of viewport
+    // Map section names to their Y positions
+    const sectionYPositions = (0, react_1.useMemo)(() => ({
+        profilePicture: profilePictureSectionY,
+        basicInfo: basicInfoSectionY,
+        about: aboutSectionY,
+        quickActions: quickActionsSectionY,
+        security: securitySectionY,
+    }), [profilePictureSectionY, basicInfoSectionY, aboutSectionY, quickActionsSectionY, securitySectionY]);
+    (0, react_1.useEffect)(() => {
+        // If initialSection changed, reset the flag
+        if (previousInitialSectionRef.current !== initialSection) {
+            hasScrolledToSectionRef.current = false;
+            previousInitialSectionRef.current = initialSection;
+        }
+        // Scroll to the specified section if initialSection is provided and we haven't scrolled yet
+        if (initialSection && !hasScrolledToSectionRef.current) {
+            const sectionY = sectionYPositions[initialSection];
+            if (sectionY !== null && sectionY !== undefined && scrollTo) {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        scrollTo(Math.max(0, sectionY - SCROLL_OFFSET), true);
+                        hasScrolledToSectionRef.current = true;
+                    });
+                });
+            }
+        }
+    }, [initialSection, sectionYPositions]);
+    const handleAvatarRemove = () => {
+        (0, confirmAction_1.confirmAction)(t('editProfile.confirms.removeAvatar') || 'Remove your profile picture?', () => {
+            setAvatarFileId('');
+            sonner_1.toast.success(t('editProfile.toasts.avatarRemoved') || 'Avatar removed');
+        });
+    };
+    const { openAvatarPicker } = (0, OxyContext_1.useOxy)();
+    // Handlers to navigate to edit screens
+    const handleOpenDisplayNameModal = (0, react_1.useCallback)(() => navigateToEditField('displayName'), [navigateToEditField]);
+    const handleOpenUsernameModal = (0, react_1.useCallback)(() => navigateToEditField('username'), [navigateToEditField]);
+    const handleOpenEmailModal = (0, react_1.useCallback)(() => navigateToEditField('email'), [navigateToEditField]);
+    const handleOpenBioModal = (0, react_1.useCallback)(() => navigateToEditField('bio'), [navigateToEditField]);
+    const handleOpenLocationModal = (0, react_1.useCallback)(() => navigateToEditField('locations'), [navigateToEditField]);
+    const handleOpenLinksModal = (0, react_1.useCallback)(() => navigateToEditField('links'), [navigateToEditField]);
+    // Handle initialField prop - navigate to appropriate edit screen
+    (0, react_1.useEffect)(() => {
+        if (initialField) {
+            // Special handling for avatar - open avatar picker directly
+            if (initialField === 'avatar') {
+                setTimeout(() => {
+                    openAvatarPicker();
+                }, 300);
+            }
+            else {
+                // Navigate to edit screen
+                setTimeout(() => {
+                    const fieldTypeMap = {
+                        displayName: 'displayName',
+                        username: 'username',
+                        email: 'email',
+                        bio: 'bio',
+                        location: 'locations',
+                        locations: 'locations',
+                        links: 'links',
+                    };
+                    const fieldType = fieldTypeMap[initialField];
+                    if (fieldType) {
+                        navigateToEditField(fieldType);
+                    }
+                }, 300);
+            }
+        }
+    }, [initialField, openAvatarPicker, navigateToEditField]);
+    // Memoize display name for avatar
+    const displayNameForAvatar = (0, react_1.useMemo)(() => (0, userUtils_1.getDisplayName)(finalUser), [finalUser]);
+    if (userLoading || !isAuthenticated) {
+        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.jsx)(react_native_1.View, { style: [styles.container, { backgroundColor: themeStyles.backgroundColor }], children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { ref: scrollViewRef, style: styles.content, contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.headerContainer, styles.headerSection], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.modernTitle, { color: themeStyles.textColor, marginBottom: 0, marginTop: 0 }], children: t('accountOverview.items.editProfile.title') || t('editProfile.title') || 'Edit Profile' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.modernSubtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }], children: t('accountOverview.items.editProfile.subtitle') || t('editProfile.subtitle') || 'Manage your profile and preferences' })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: (ref) => {
+                        avatarSectionRef.current = ref;
+                        profilePictureSectionRef.current = ref;
+                    }, style: styles.section, onLayout: (event) => {
+                        const { y } = event.nativeEvent.layout;
+                        setProfilePictureSectionY(y);
+                    }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: colors.secondaryText }], children: t('editProfile.sections.profilePicture') || 'PROFILE PICTURE' }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.groupedSectionWrapper, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                    {
+                                        id: 'profile-photo',
+                                        customIcon: (optimisticAvatarId || avatarFileId) ? (isUpdatingAvatar ? ((0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: { position: 'relative', width: 36, height: 36 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Animated.Image, { source: { uri: oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb') }, style: {
+                                                        width: 36,
+                                                        height: 36,
+                                                        borderRadius: 18,
+                                                        opacity: 0.6
+                                                    } }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                                                        position: 'absolute',
+                                                        top: 0,
+                                                        left: 0,
+                                                        right: 0,
+                                                        bottom: 0,
+                                                        justifyContent: 'center',
+                                                        alignItems: 'center',
+                                                        backgroundColor: colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.7)',
+                                                        borderRadius: 18,
+                                                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: colors.tint }) })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb') }, style: { width: 36, height: 36, borderRadius: 18 } }))) : undefined,
+                                        icon: !(optimisticAvatarId || avatarFileId) ? 'account-outline' : undefined,
+                                        iconColor: colors.sidebarIconPersonalInfo,
+                                        title: 'Profile Photo',
+                                        subtitle: isUpdatingAvatar
+                                            ? 'Updating profile picture...'
+                                            : (avatarFileId ? 'Tap to change your profile picture' : 'Tap to add a profile picture'),
+                                        onPress: isUpdatingAvatar ? undefined : openAvatarPicker,
+                                        disabled: isUpdatingAvatar,
+                                    },
+                                    ...(avatarFileId && !isUpdatingAvatar ? [
+                                        {
+                                            id: 'remove-profile-photo',
+                                            icon: 'delete-outline',
+                                            iconColor: colors.sidebarIconSharing,
+                                            title: 'Remove Photo',
+                                            subtitle: 'Delete current profile picture',
+                                            onPress: handleAvatarRemove,
+                                        }
+                                    ] : []),
+                                ] }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: basicInfoSectionRef, style: styles.section, onLayout: (event) => {
+                        const { y } = event.nativeEvent.layout;
+                        setBasicInfoSectionY(y);
+                    }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: colors.secondaryText }], children: t('editProfile.sections.basicInfo') || 'BASIC INFORMATION' }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.groupedSectionWrapper, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                    {
+                                        id: 'display-name',
+                                        icon: 'account-outline',
+                                        iconColor: colors.sidebarIconPersonalInfo,
+                                        title: t('editProfile.items.displayName.title') || 'Display Name',
+                                        subtitle: [displayName, lastName].filter(Boolean).join(' ') || (t('editProfile.items.displayName.add') || 'Add your display name'),
+                                        onPress: handleOpenDisplayNameModal,
+                                    },
+                                    {
+                                        id: 'username',
+                                        icon: 'at',
+                                        iconColor: colors.sidebarIconData,
+                                        title: t('editProfile.items.username.title') || 'Username',
+                                        subtitle: username || (t('editProfile.items.username.choose') || 'Choose a username'),
+                                        onPress: handleOpenUsernameModal,
+                                    },
+                                    {
+                                        id: 'email',
+                                        icon: 'email-outline',
+                                        iconColor: colors.sidebarIconSecurity,
+                                        title: t('editProfile.items.email.title') || 'Email',
+                                        subtitle: email || (t('editProfile.items.email.add') || 'Add your email address'),
+                                        onPress: handleOpenEmailModal,
+                                    },
+                                ] }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: aboutSectionRef, style: styles.section, onLayout: (event) => {
+                        const { y } = event.nativeEvent.layout;
+                        setAboutSectionY(y);
+                    }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: colors.secondaryText }], children: t('editProfile.sections.about') || 'ABOUT YOU' }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.groupedSectionWrapper, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                    {
+                                        id: 'bio',
+                                        icon: 'text-box-outline',
+                                        iconColor: colors.sidebarIconPersonalInfo,
+                                        title: t('editProfile.items.bio.title') || 'Bio',
+                                        subtitle: bio || (t('editProfile.items.bio.placeholder') || 'Tell people about yourself'),
+                                        onPress: handleOpenBioModal,
+                                    },
+                                    {
+                                        id: 'locations',
+                                        icon: 'map-marker-outline',
+                                        iconColor: colors.sidebarIconSharing,
+                                        title: t('editProfile.items.locations.title') || 'Locations',
+                                        subtitle: locations.length > 0
+                                            ? (locations.length === 1
+                                                ? (t('editProfile.items.locations.count', { count: locations.length }) || `${locations.length} location added`)
+                                                : (t('editProfile.items.locations.count_plural', { count: locations.length }) || `${locations.length} locations added`))
+                                            : (t('editProfile.items.locations.add') || 'Add your locations'),
+                                        onPress: handleOpenLocationModal,
+                                    },
+                                    {
+                                        id: 'links',
+                                        icon: 'link-variant',
+                                        iconColor: colors.sidebarIconSharing,
+                                        title: t('editProfile.items.links.title') || 'Links',
+                                        subtitle: linksMetadata.length > 0
+                                            ? (linksMetadata.length === 1
+                                                ? (t('editProfile.items.links.count', { count: linksMetadata.length }) || `${linksMetadata.length} link added`)
+                                                : (t('editProfile.items.links.count_plural', { count: linksMetadata.length }) || `${linksMetadata.length} links added`))
+                                            : (t('editProfile.items.links.add') || 'Add your links'),
+                                        onPress: handleOpenLinksModal,
+                                    },
+                                ] }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: quickActionsSectionRef, style: styles.section, onLayout: (event) => {
+                        const { y } = event.nativeEvent.layout;
+                        setQuickActionsSectionY(y);
+                    }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: colors.secondaryText }], children: t('editProfile.sections.quickActions') || 'QUICK ACTIONS' }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.groupedSectionWrapper, children: (0, jsx_runtime_1.jsx)(components_1.GroupedSection, { items: [
+                                    {
+                                        id: 'preview-profile',
+                                        icon: 'eye',
+                                        iconColor: colors.sidebarIconHome,
+                                        title: t('editProfile.items.previewProfile.title') || 'Preview Profile',
+                                        subtitle: t('editProfile.items.previewProfile.subtitle') || 'See how your profile looks to others',
+                                        onPress: () => navigate?.('Profile', { userId: finalUser?.id }),
+                                    },
+                                    {
+                                        id: 'privacy-settings',
+                                        icon: 'shield-check',
+                                        iconColor: colors.sidebarIconSecurity,
+                                        title: t('editProfile.items.privacySettings.title') || 'Privacy Settings',
+                                        subtitle: t('editProfile.items.privacySettings.subtitle') || 'Control who can see your profile',
+                                        onPress: () => navigate?.('PrivacySettings'),
+                                    },
+                                    {
+                                        id: 'verify-account',
+                                        icon: 'check-circle',
+                                        iconColor: colors.sidebarIconPersonalInfo,
+                                        title: t('editProfile.items.verifyAccount.title') || 'Verify Account',
+                                        subtitle: t('editProfile.items.verifyAccount.subtitle') || 'Get a verified badge',
+                                        onPress: () => navigate?.('AccountVerification'),
+                                    },
+                                ] }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: securitySectionRef, style: styles.section, onLayout: (event) => {
+                        const { y } = event.nativeEvent.layout;
+                        setSecuritySectionY(y);
+                    }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.sectionTitle, { color: colors.secondaryText }], children: t('editProfile.sections.security') || 'SECURITY' }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.groupedSectionWrapper })] })] }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexShrink: 1,
+        width: '100%',
+    },
+    content: {
+        flexShrink: 1,
+    },
+    scrollContent: (0, spacing_1.createScreenContentStyle)(spacing_1.HEADER_PADDING_TOP_SETTINGS),
+    headerContainer: {
+        width: '100%',
+        maxWidth: 420,
+        alignSelf: 'center',
+        marginBottom: spacing_1.SECTION_GAP_LARGE,
+    },
+    headerSection: {
+        alignItems: 'flex-start',
+        width: '100%',
+        gap: spacing_1.COMPONENT_GAP,
+    },
+    modernTitle: {
+        fontFamily: fonts_1.fontFamilies.interBold,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+        fontSize: 42,
+        lineHeight: 50.4, // 42 * 1.2
+        textAlign: 'left',
+        letterSpacing: -0.5,
+    },
+    modernSubtitle: {
+        fontSize: 18,
+        lineHeight: 24,
+        textAlign: 'left',
+        maxWidth: 320,
+        alignSelf: 'flex-start',
+        opacity: 0.8,
+    },
+    section: {
+        marginBottom: spacing_1.SECTION_GAP_LARGE,
+    },
+    sectionTitle: {
+        fontSize: 13,
+        fontWeight: '600',
+        marginBottom: 8,
+        marginTop: 4,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+        fontFamily: fonts_1.fontFamilies.interSemiBold,
+    },
+    groupedSectionWrapper: {
+        backgroundColor: 'transparent',
+    },
+});
+exports.default = react_1.default.memo(AccountSettingsScreen);

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

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