@oxyhq/services 5.13.4 → 5.13.11

package/lib/module/ui/screens/AccountSettingsScreen.js

@@ -27,7 +27,7 @@ const AccountSettingsScreen = ({
   navigate
 }) => {
   const {
-    user,
+    user: userFromContext,
     oxyServices,
     isLoading: authLoading,
     isAuthenticated,
@@ -38,8 +38,15 @@ const AccountSettingsScreen = ({
     t
   } = useI18n();
   const updateUser = useAuthStore(state => state.updateUser);
+  // Get user directly from store to ensure reactivity to avatar changes
+  const user = useAuthStore(state => state.user) || userFromContext;
   const [isLoading, setIsLoading] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
+  const [isUpdatingAvatar, setIsUpdatingAvatar] = useState(false);
+  const [optimisticAvatarId, setOptimisticAvatarId] = useState(null);
+  const scrollViewRef = useRef(null);
+  const avatarSectionRef = useRef(null);
+  const [avatarSectionY, setAvatarSectionY] = useState(null);
 
   // Two-Factor (TOTP) state
   const [totpSetupUrl, setTotpSetupUrl] = useState(null);
@@ -64,8 +71,6 @@ const AccountSettingsScreen = ({
 
   // Editing states
   const [editingField, setEditingField] = useState(null);
-
-  // Temporary input states for inline editing
   const [tempDisplayName, setTempDisplayName] = useState('');
   const [tempLastName, setTempLastName] = useState('');
   const [tempUsername, setTempUsername] = useState('');
@@ -96,82 +101,118 @@ const AccountSettingsScreen = ({
   }, [theme]);
 
   // Memoize animation function to prevent recreation on every render
-  const animateSaveButton = useCallback(toValue => {
+  const animateSaveButton = useCallback((toValue, onComplete) => {
     Animated.spring(saveButtonScale, {
       toValue,
       useNativeDriver: Platform.OS !== 'web',
       tension: 150,
       friction: 8
-    }).start();
+    }).start(onComplete ? finished => {
+      if (finished) {
+        onComplete();
+      }
+    } : undefined);
   }, [saveButtonScale]);
 
-  // Load user data
+  // Track initialization to prevent unnecessary resets
+  const isInitializedRef = useRef(false);
+  const previousUserIdRef = useRef(null);
+  const previousAvatarRef = useRef(null);
+
+  // Load user data - only reset fields when user actually changes (not just avatar)
   useEffect(() => {
     if (user) {
-      const userDisplayName = typeof user.name === 'string' ? user.name : user.name?.first || user.name?.full || '';
-      const userLastName = typeof user.name === 'object' ? user.name?.last || '' : '';
-      setDisplayName(userDisplayName);
-      setLastName(userLastName);
-      setUsername(user.username || '');
-      setEmail(user.email || '');
-      setBio(user.bio || '');
-      setLocation(user.location || '');
+      const currentUserId = user.id;
+      const currentAvatar = typeof user.avatar === 'string' ? user.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 user.name === 'string' ? user.name : user.name?.first || user.name?.full || '';
+        const userLastName = typeof user.name === 'object' ? user.name?.last || '' : '';
+        setDisplayName(userDisplayName);
+        setLastName(userLastName);
+        setUsername(user.username || '');
+        setEmail(user.email || '');
+        setBio(user.bio || '');
+        setLocation(user.location || '');
 
-      // Handle locations - convert single location to array format
-      if (user.locations && Array.isArray(user.locations)) {
-        setTempLocations(user.locations.map((loc, index) => ({
-          id: loc.id || `existing-${index}`,
-          name: loc.name,
-          label: loc.label,
-          coordinates: loc.coordinates
-        })));
-      } else if (user.location) {
-        // Convert single location string to array format
-        setTempLocations([{
-          id: 'existing-0',
-          name: user.location,
-          label: 'Location'
-        }]);
-      } else {
-        setTempLocations([]);
+        // Handle locations - convert single location to array format
+        if (user.locations && Array.isArray(user.locations)) {
+          setTempLocations(user.locations.map((loc, index) => ({
+            id: loc.id || `existing-${index}`,
+            name: loc.name,
+            label: loc.label,
+            coordinates: loc.coordinates
+          })));
+        } else if (user.location) {
+          // Convert single location string to array format
+          setTempLocations([{
+            id: 'existing-0',
+            name: user.location,
+            label: 'Location'
+          }]);
+        } else {
+          setTempLocations([]);
+        }
+
+        // Handle links - simple and direct like other fields
+        if (user.linksMetadata && Array.isArray(user.linksMetadata)) {
+          const urls = user.linksMetadata.map(l => l.url);
+          setLinks(urls);
+          const metadataWithIds = user.linksMetadata.map((link, index) => ({
+            ...link,
+            id: link.id || `existing-${index}`
+          }));
+          setTempLinksWithMetadata(metadataWithIds);
+        } else if (Array.isArray(user.links)) {
+          const simpleLinks = user.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}`
+          }));
+          setTempLinksWithMetadata(linksWithMetadata);
+        } else if (user.website) {
+          setLinks([user.website]);
+          setTempLinksWithMetadata([{
+            url: user.website,
+            title: user.website.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+            description: `Link to ${user.website}`,
+            image: undefined,
+            id: 'existing-0'
+          }]);
+        } else {
+          setLinks([]);
+          setTempLinksWithMetadata([]);
+        }
+        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);
       }
 
-      // Handle links - simple and direct like other fields
-      if (user.linksMetadata && Array.isArray(user.linksMetadata)) {
-        const urls = user.linksMetadata.map(l => l.url);
-        setLinks(urls);
-        const metadataWithIds = user.linksMetadata.map((link, index) => ({
-          ...link,
-          id: link.id || `existing-${index}`
-        }));
-        setTempLinksWithMetadata(metadataWithIds);
-      } else if (Array.isArray(user.links)) {
-        const simpleLinks = user.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}`
-        }));
-        setTempLinksWithMetadata(linksWithMetadata);
-      } else if (user.website) {
-        setLinks([user.website]);
-        setTempLinksWithMetadata([{
-          url: user.website,
-          title: user.website.replace(/^https?:\/\//, '').replace(/\/$/, ''),
-          description: `Link to ${user.website}`,
-          image: undefined,
-          id: 'existing-0'
-        }]);
-      } else {
-        setLinks([]);
-        setTempLinksWithMetadata([]);
+      // 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);
+        }
       }
-      setAvatarFileId(typeof user.avatar === 'string' ? user.avatar : '');
+      previousUserIdRef.current = currentUserId;
+      previousAvatarRef.current = currentAvatar;
     }
-  }, [user]);
+  }, [user, avatarFileId, isUpdatingAvatar, optimisticAvatarId]);
   const handleSave = async () => {
     if (!user) return;
     try {
@@ -188,8 +229,6 @@ const AccountSettingsScreen = ({
         links,
         linksMetadata: tempLinksWithMetadata.length > 0 ? tempLinksWithMetadata : undefined
       };
-      console.log('Saving updates:', updates);
-      console.log('Links metadata being saved:', tempLinksWithMetadata);
 
       // Handle name field
       if (displayName || lastName) {
@@ -242,33 +281,74 @@ const AccountSettingsScreen = ({
             toast.info?.(t('editProfile.toasts.avatarUnchanged') || 'Avatar unchanged');
             return;
           }
+
+          // Optimistically update UI immediately
+          setOptimisticAvatarId(file.id);
           setAvatarFileId(file.id);
-          toast.success(t('editProfile.toasts.avatarSelected') || 'Avatar selected');
+
           // Auto-save avatar immediately (does not close edit profile screen)
           (async () => {
             try {
-              console.log('[AccountSettings] Auto-saving avatar', file.id);
-              setIsSaving(true);
+              setIsUpdatingAvatar(true);
 
               // Update file visibility to public for avatar
               try {
                 await oxyServices.assetUpdateVisibility(file.id, 'public');
-                console.log('[AccountSettings] Avatar visibility updated to public');
               } catch (visError) {
-                console.warn('[AccountSettings] Failed to update avatar visibility, continuing anyway:', visError);
                 // Continue with avatar update even if visibility update fails
               }
-              await updateUser({
+
+              // Update on server directly without using updateUser (which triggers fetchUser)
+              // This prevents the entire component from re-rendering
+              await oxyServices.updateProfile({
                 avatar: file.id
-              }, oxyServices);
-              // Force refresh current user cache (updateUser already does a fetch with force=true internally)
-              // Extra safeguard: ensure avatarFileId reflects saved id (already set) and trigger any dependent UI.
+              });
+
+              // Update the user object in store directly without triggering fetchUser
+              // This prevents isLoading from being set to true, which would show loading screen
+              const currentUser = useAuthStore.getState().user;
+              if (currentUser) {
+                useAuthStore.setState({
+                  user: {
+                    ...currentUser,
+                    avatar: file.id
+                  }
+                  // Don't update lastUserFetch to avoid cache issues
+                });
+              }
+
+              // Update local state - keep avatarFileId set to the new value
+              // Don't clear optimisticAvatarId yet - let it persist until user object updates
+              // This ensures the avatar displays correctly
+              setAvatarFileId(file.id);
               toast.success(t('editProfile.toasts.avatarUpdated') || 'Avatar updated');
+
+              // Scroll to avatar section after a brief delay to ensure UI is updated
+              requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                  if (avatarSectionY !== null) {
+                    scrollViewRef.current?.scrollTo({
+                      y: Math.max(0, avatarSectionY - 100),
+                      // Offset to show section near top
+                      animated: true
+                    });
+                  } else {
+                    // Fallback: scroll to approximate position
+                    scrollViewRef.current?.scrollTo({
+                      y: 200,
+                      // Approximate position of avatar section
+                      animated: true
+                    });
+                  }
+                });
+              });
             } catch (e) {
-              console.error('[AccountSettings] Failed to auto-save avatar', e);
+              // Revert optimistic update on error
+              setAvatarFileId(typeof user?.avatar === 'string' ? user.avatar : '');
+              setOptimisticAvatarId(null);
               toast.error(e.message || t('editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
             } finally {
-              setIsSaving(false);
+              setIsUpdatingAvatar(false);
             }
           })();
         },
@@ -276,7 +356,7 @@ const AccountSettingsScreen = ({
         disabledMimeTypes: ['video/', 'audio/', 'application/pdf']
       }
     });
-  }, [showBottomSheet, oxyServices, avatarFileId, updateUser]);
+  }, [showBottomSheet, oxyServices, avatarFileId, updateUser, user]);
   const startEditing = (type, currentValue) => {
     switch (type) {
       case 'displayName':
@@ -335,11 +415,10 @@ const AccountSettingsScreen = ({
         break;
     }
 
-    // Brief delay for animation, then reset and close editing
-    setTimeout(() => {
-      animateSaveButton(1);
+    // Complete animation, then reset and close editing
+    animateSaveButton(1, () => {
       setEditingField(null);
-    }, 150);
+    });
   };
   const cancelEditing = () => {
     setEditingField(null);
@@ -353,11 +432,9 @@ const AccountSettingsScreen = ({
     }
     try {
       setIsFetchingMetadata(true);
-      console.log('Fetching metadata for URL:', url);
 
       // Use the backend API to fetch metadata
       const metadata = await oxyServices.fetchLinkMetadata(url);
-      console.log('Received metadata:', metadata);
       const result = {
         ...metadata,
         id: Date.now().toString()
@@ -367,7 +444,6 @@ const AccountSettingsScreen = ({
       linkMetadataCache.set(cacheKey, result);
       return result;
     } catch (error) {
-      console.error('Error fetching metadata:', error);
       // Fallback to basic metadata
       const fallback = {
         url: url.startsWith('http') ? url : 'https://' + url,
@@ -405,7 +481,6 @@ const AccountSettingsScreen = ({
       locationSearchCache.set(cacheKey, data);
       setLocationSearchResults(data);
     } catch (error) {
-      console.error('Error searching locations:', error);
       setLocationSearchResults([]);
     } finally {
       setIsSearchingLocations(false);
@@ -440,9 +515,7 @@ const AccountSettingsScreen = ({
   const addLink = async () => {
     if (!newLinkUrl.trim()) return;
     const url = newLinkUrl.trim();
-    console.log('Adding link:', url);
     const metadata = await fetchLinkMetadata(url);
-    console.log('Final metadata for adding:', metadata);
     setTempLinksWithMetadata(prev => [...prev, metadata]);
     setNewLinkUrl('');
     setIsAddingLink(false);
@@ -518,7 +591,7 @@ const AccountSettingsScreen = ({
                   style: {
                     padding: 16,
                     backgroundColor: '#fff',
-                    borderRadius: 12
+                    borderRadius: 16
                   },
                   children: /*#__PURE__*/_jsx(QRCode, {
                     value: totpSetupUrl,
@@ -647,7 +720,7 @@ const AccountSettingsScreen = ({
                 style: [styles.editingFieldLabel, {
                   color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
                 }],
-                children: "Edit Display Name"
+                children: "Edit Full Name"
               })
             }), /*#__PURE__*/_jsxs(View, {
               style: {
@@ -1079,7 +1152,7 @@ const AccountSettingsScreen = ({
     };
     return /*#__PURE__*/_jsx(View, {
       style: [styles.editingFieldContainer, {
-        backgroundColor: themeStyles.backgroundColor
+        backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#FFFFFF'
       }],
       children: /*#__PURE__*/_jsx(View, {
         style: styles.editingFieldContent,
@@ -1089,20 +1162,20 @@ const AccountSettingsScreen = ({
             style: styles.editingFieldHeader,
             children: /*#__PURE__*/_jsx(Text, {
               style: [styles.editingFieldLabel, {
-                color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                color: themeStyles.isDarkTheme ? '#FFFFFF' : '#000000'
               }],
-              children: `Enter ${config.label.toLowerCase()}:`
+              children: config.label
             })
           }), /*#__PURE__*/_jsx(TextInput, {
             style: [config.multiline ? styles.editingFieldTextArea : styles.editingFieldInput, {
-              backgroundColor: themeStyles.isDarkTheme ? '#333' : '#fff',
-              color: themeStyles.isDarkTheme ? '#fff' : '#000',
-              borderColor: themeStyles.primaryColor
+              backgroundColor: themeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7',
+              color: themeStyles.isDarkTheme ? '#FFFFFF' : '#000000',
+              borderColor: themeStyles.isDarkTheme ? '#38383A' : '#E5E5EA'
             }],
             value: tempValue,
             onChangeText: setTempValue,
             placeholder: config.placeholder,
-            placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+            placeholderTextColor: themeStyles.isDarkTheme ? '#636366' : '#8E8E93',
             multiline: config.multiline,
             numberOfLines: config.multiline ? 6 : 1,
             keyboardType: config.keyboardType,
@@ -1116,7 +1189,7 @@ const AccountSettingsScreen = ({
   if (authLoading || !isAuthenticated) {
     return /*#__PURE__*/_jsx(View, {
       style: [styles.container, {
-        backgroundColor: themeStyles.backgroundColor,
+        backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#F5F5F7',
         justifyContent: 'center'
       }],
       children: /*#__PURE__*/_jsx(ActivityIndicator, {
@@ -1127,19 +1200,21 @@ const AccountSettingsScreen = ({
   }
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, {
-      backgroundColor: themeStyles.backgroundColor
+      backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#F5F5F7'
     }],
     children: [editingField ? /*#__PURE__*/_jsxs(View, {
       style: [styles.editingHeader, {
-        backgroundColor: '#FFFFFF',
-        borderBottomColor: themeStyles.isDarkTheme ? '#38383A' : '#E9ECEF'
+        backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#FFFFFF',
+        borderBottomColor: themeStyles.isDarkTheme ? '#38383A' : '#E5E5EA'
       }],
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.editingHeaderContent,
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.editingBackButton,
+          style: [styles.editingBackButton, {
+            backgroundColor: themeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7'
+          }],
           onPress: cancelEditing,
-          children: /*#__PURE__*/_jsx(OxyIcon, {
+          children: /*#__PURE__*/_jsx(Ionicons, {
             name: "chevron-back",
             size: 20,
             color: themeStyles.primaryColor
@@ -1148,7 +1223,8 @@ const AccountSettingsScreen = ({
           style: styles.editingTitleContainer
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
           style: [styles.editingSaveButton, {
-            opacity: isSaving ? 0.5 : 1
+            opacity: isSaving ? 0.5 : 1,
+            backgroundColor: themeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7'
           }],
           onPress: () => saveField(editingField),
           disabled: isSaving,
@@ -1164,14 +1240,18 @@ const AccountSettingsScreen = ({
         })]
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.editingHeaderBottom,
-        children: [/*#__PURE__*/_jsx(OxyIcon, {
-          name: editingField === 'displayName' ? 'person' : editingField === 'username' ? 'at' : editingField === 'email' ? 'mail' : editingField === 'bio' ? 'document-text' : editingField === 'location' ? 'location' : editingField === 'links' ? 'link' : 'person',
-          size: 56,
-          color: editingField === 'displayName' ? '#007AFF' : editingField === 'username' ? '#5856D6' : editingField === 'email' ? '#FF9500' : editingField === 'bio' ? '#34C759' : editingField === 'location' ? '#FF3B30' : editingField === 'links' ? '#32D74B' : '#007AFF',
-          style: styles.editingBottomIcon
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.editingIconContainer, {
+            backgroundColor: editingField === 'displayName' ? '#007AFF20' : editingField === 'username' ? '#5856D620' : editingField === 'email' ? '#FF950020' : editingField === 'bio' ? '#34C75920' : editingField === 'location' ? '#FF3B3020' : editingField === 'links' ? '#32D74B20' : '#007AFF20'
+          }],
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: editingField === 'displayName' ? 'person' : editingField === 'username' ? 'at' : editingField === 'email' ? 'mail' : editingField === 'bio' ? 'document-text' : editingField === 'location' ? 'location' : editingField === 'links' ? 'link' : 'person',
+            size: 28,
+            color: editingField === 'displayName' ? '#007AFF' : editingField === 'username' ? '#5856D6' : editingField === 'email' ? '#FF9500' : editingField === 'bio' ? '#34C759' : editingField === 'location' ? '#FF3B30' : editingField === 'links' ? '#32D74B' : '#007AFF'
+          })
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.editingBottomTitle, {
-            color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+            color: themeStyles.isDarkTheme ? '#FFFFFF' : '#000000'
           }],
           children: editingField === 'displayName' ? t('editProfile.items.displayName.title') || 'Display Name' : editingField === 'username' ? t('editProfile.items.username.title') || 'Username' : editingField === 'email' ? t('editProfile.items.email.title') || 'Email' : editingField === 'bio' ? t('editProfile.items.bio.title') || 'Bio' : editingField === 'location' ? t('editProfile.items.locations.title') || 'Location' : editingField === 'links' ? t('editProfile.items.links.title') || 'Links' : 'Field'
         })]
@@ -1188,6 +1268,7 @@ const AccountSettingsScreen = ({
       },
       elevation: "subtle"
     }), /*#__PURE__*/_jsx(ScrollView, {
+      ref: scrollViewRef,
       style: editingField ? styles.contentEditing : styles.content,
       children: editingField ?
       /*#__PURE__*/
@@ -1214,7 +1295,7 @@ const AccountSettingsScreen = ({
           children: /*#__PURE__*/_jsxs(View, {
             style: {
               backgroundColor: '#fff',
-              borderRadius: 16,
+              borderRadius: 20,
               padding: 20,
               maxHeight: '80%'
             },
@@ -1246,7 +1327,7 @@ const AccountSettingsScreen = ({
               }), /*#__PURE__*/_jsx(View, {
                 style: {
                   backgroundColor: '#F8F9FA',
-                  borderRadius: 8,
+                  borderRadius: 12,
                   padding: 12
                 },
                 children: generatedBackupCodes.map((c, idx) => /*#__PURE__*/_jsx(Text, {
@@ -1272,7 +1353,7 @@ const AccountSettingsScreen = ({
               }), /*#__PURE__*/_jsx(View, {
                 style: {
                   backgroundColor: '#F8F9FA',
-                  borderRadius: 8,
+                  borderRadius: 12,
                   padding: 12
                 },
                 children: /*#__PURE__*/_jsx(Text, {
@@ -1304,198 +1385,265 @@ const AccountSettingsScreen = ({
             })]
           })
         }), /*#__PURE__*/_jsxs(View, {
+          ref: avatarSectionRef,
           style: styles.section,
+          onLayout: event => {
+            const {
+              y
+            } = event.nativeEvent.layout;
+            setAvatarSectionY(y);
+          },
           children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionTitle,
-            children: t('editProfile.sections.profilePicture') || 'Profile Picture'
-          }), /*#__PURE__*/_jsx(GroupedSection, {
-            items: [{
-              id: 'profile-photo',
-              icon: avatarFileId ? undefined : 'person',
-              iconColor: '#007AFF',
-              // Use download URL (includes token + fallback) instead of raw stream for reliability
-              image: avatarFileId ? oxyServices.getFileDownloadUrl(avatarFileId, 'thumb') : undefined,
-              imageSize: 40,
-              title: 'Profile Photo',
-              subtitle: avatarFileId ? 'Tap to change your profile picture' : 'Tap to add a profile picture',
-              onPress: openAvatarPicker
-            }, ...(avatarFileId ? [{
-              id: 'remove-profile-photo',
-              icon: 'trash',
-              iconColor: '#FF3B30',
-              title: 'Remove Photo',
-              subtitle: 'Delete current profile picture',
-              onPress: handleAvatarRemove
-            }] : [])],
-            theme: theme
+            style: [styles.sectionTitle, {
+              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+            }],
+            children: t('editProfile.sections.profilePicture') || 'PROFILE PICTURE'
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.groupedSectionWrapper,
+            children: /*#__PURE__*/_jsx(GroupedSection, {
+              items: [{
+                id: 'profile-photo',
+                icon: avatarFileId ? undefined : 'person',
+                iconColor: '#007AFF',
+                // Use optimistic avatar ID if available, otherwise use saved one
+                image: optimisticAvatarId || avatarFileId ? oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb') : undefined,
+                imageSize: 40,
+                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,
+                customIcon: isUpdatingAvatar ? /*#__PURE__*/_jsxs(Animated.View, {
+                  style: {
+                    position: 'relative',
+                    width: 40,
+                    height: 40
+                  },
+                  children: [(optimisticAvatarId || avatarFileId) && /*#__PURE__*/_jsx(Animated.Image, {
+                    source: {
+                      uri: oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb')
+                    },
+                    style: {
+                      width: 40,
+                      height: 40,
+                      borderRadius: 22,
+                      opacity: 0.6
+                    }
+                  }), /*#__PURE__*/_jsx(View, {
+                    style: {
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      backgroundColor: themeStyles.isDarkTheme ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.7)',
+                      borderRadius: 22
+                    },
+                    children: /*#__PURE__*/_jsx(ActivityIndicator, {
+                      size: "small",
+                      color: themeStyles.primaryColor
+                    })
+                  })]
+                }) : undefined
+              }, ...(avatarFileId && !isUpdatingAvatar ? [{
+                id: 'remove-profile-photo',
+                icon: 'trash',
+                iconColor: '#FF3B30',
+                title: 'Remove Photo',
+                subtitle: 'Delete current profile picture',
+                onPress: handleAvatarRemove
+              }] : [])],
+              theme: theme
+            })
           })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionTitle,
-            children: t('editProfile.sections.basicInfo') || 'Basic Information'
-          }), /*#__PURE__*/_jsx(GroupedSection, {
-            items: [{
-              id: 'display-name',
-              icon: 'person',
-              iconColor: '#007AFF',
-              title: t('editProfile.items.displayName.title') || 'Display Name',
-              subtitle: [displayName, lastName].filter(Boolean).join(' ') || t('editProfile.items.displayName.add') || 'Add your display name',
-              onPress: () => startEditing('displayName', '')
-            }, {
-              id: 'username',
-              icon: 'at',
-              iconColor: '#5856D6',
-              title: t('editProfile.items.username.title') || 'Username',
-              subtitle: username || t('editProfile.items.username.choose') || 'Choose a username',
-              onPress: () => startEditing('username', username)
-            }, {
-              id: 'email',
-              icon: 'mail',
-              iconColor: '#FF9500',
-              title: t('editProfile.items.email.title') || 'Email',
-              subtitle: email || t('editProfile.items.email.add') || 'Add your email address',
-              onPress: () => startEditing('email', email)
+            style: [styles.sectionTitle, {
+              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
             }],
-            theme: theme
+            children: t('editProfile.sections.basicInfo') || 'BASIC INFORMATION'
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.groupedSectionWrapper,
+            children: /*#__PURE__*/_jsx(GroupedSection, {
+              items: [{
+                id: 'display-name',
+                icon: 'person',
+                iconColor: '#007AFF',
+                title: t('editProfile.items.displayName.title') || 'Display Name',
+                subtitle: [displayName, lastName].filter(Boolean).join(' ') || t('editProfile.items.displayName.add') || 'Add your display name',
+                onPress: () => startEditing('displayName', '')
+              }, {
+                id: 'username',
+                icon: 'at',
+                iconColor: '#5856D6',
+                title: t('editProfile.items.username.title') || 'Username',
+                subtitle: username || t('editProfile.items.username.choose') || 'Choose a username',
+                onPress: () => startEditing('username', username)
+              }, {
+                id: 'email',
+                icon: 'mail',
+                iconColor: '#FF9500',
+                title: t('editProfile.items.email.title') || 'Email',
+                subtitle: email || t('editProfile.items.email.add') || 'Add your email address',
+                onPress: () => startEditing('email', email)
+              }],
+              theme: theme
+            })
           })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionTitle,
-            children: t('editProfile.sections.about') || 'About You'
-          }), /*#__PURE__*/_jsx(GroupedSection, {
-            items: [{
-              id: 'bio',
-              icon: 'document-text',
-              iconColor: '#34C759',
-              title: t('editProfile.items.bio.title') || 'Bio',
-              subtitle: bio || t('editProfile.items.bio.placeholder') || 'Tell people about yourself',
-              onPress: () => startEditing('bio', bio)
-            }, {
-              id: 'locations',
-              icon: 'location',
-              iconColor: '#FF3B30',
-              title: t('editProfile.items.locations.title') || 'Locations',
-              subtitle: tempLocations.length > 0 ? tempLocations.length === 1 ? t('editProfile.items.locations.count', {
-                count: tempLocations.length
-              }) || `${tempLocations.length} location added` : t('editProfile.items.locations.count_plural', {
-                count: tempLocations.length
-              }) || `${tempLocations.length} locations added` : t('editProfile.items.locations.add') || 'Add your locations',
-              onPress: () => startEditing('location', ''),
-              customContentBelow: tempLocations.length > 0 && /*#__PURE__*/_jsxs(View, {
-                style: styles.linksPreviewContainer,
-                children: [tempLocations.slice(0, 2).map((location, index) => /*#__PURE__*/_jsxs(View, {
-                  style: styles.linkPreviewItem,
-                  children: [/*#__PURE__*/_jsx(View, {
-                    style: styles.linkPreviewImage,
-                    children: /*#__PURE__*/_jsx(Text, {
-                      style: styles.linkPreviewImageText,
-                      children: location.name.charAt(0).toUpperCase()
-                    })
-                  }), /*#__PURE__*/_jsxs(View, {
-                    style: styles.linkPreviewContent,
-                    children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.sectionTitle, {
+              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+            }],
+            children: t('editProfile.sections.about') || 'ABOUT YOU'
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.groupedSectionWrapper,
+            children: /*#__PURE__*/_jsx(GroupedSection, {
+              items: [{
+                id: 'bio',
+                icon: 'document-text',
+                iconColor: '#34C759',
+                title: t('editProfile.items.bio.title') || 'Bio',
+                subtitle: bio || t('editProfile.items.bio.placeholder') || 'Tell people about yourself',
+                onPress: () => startEditing('bio', bio)
+              }, {
+                id: 'locations',
+                icon: 'location',
+                iconColor: '#FF3B30',
+                title: t('editProfile.items.locations.title') || 'Locations',
+                subtitle: tempLocations.length > 0 ? tempLocations.length === 1 ? t('editProfile.items.locations.count', {
+                  count: tempLocations.length
+                }) || `${tempLocations.length} location added` : t('editProfile.items.locations.count_plural', {
+                  count: tempLocations.length
+                }) || `${tempLocations.length} locations added` : t('editProfile.items.locations.add') || 'Add your locations',
+                onPress: () => startEditing('location', ''),
+                customContentBelow: tempLocations.length > 0 && /*#__PURE__*/_jsxs(View, {
+                  style: styles.linksPreviewContainer,
+                  children: [tempLocations.slice(0, 2).map((location, index) => /*#__PURE__*/_jsxs(View, {
+                    style: styles.linkPreviewItem,
+                    children: [/*#__PURE__*/_jsx(View, {
+                      style: styles.linkPreviewImage,
+                      children: /*#__PURE__*/_jsx(Text, {
+                        style: styles.linkPreviewImageText,
+                        children: location.name.charAt(0).toUpperCase()
+                      })
+                    }), /*#__PURE__*/_jsxs(View, {
+                      style: styles.linkPreviewContent,
+                      children: [/*#__PURE__*/_jsx(Text, {
+                        style: styles.linkPreviewTitle,
+                        numberOfLines: 1,
+                        children: location.name
+                      }), location.label && /*#__PURE__*/_jsx(Text, {
+                        style: styles.linkPreviewSubtitle,
+                        children: location.label
+                      })]
+                    })]
+                  }, location.id || index)), tempLocations.length > 2 && /*#__PURE__*/_jsxs(Text, {
+                    style: styles.linkPreviewMore,
+                    children: ["+", tempLocations.length - 2, " more"]
+                  })]
+                })
+              }, {
+                id: 'links',
+                icon: 'link',
+                iconColor: '#32D74B',
+                title: t('editProfile.items.links.title') || 'Links',
+                subtitle: tempLinksWithMetadata.length > 0 ? tempLinksWithMetadata.length === 1 ? t('editProfile.items.links.count', {
+                  count: tempLinksWithMetadata.length
+                }) || `${tempLinksWithMetadata.length} link added` : t('editProfile.items.links.count_plural', {
+                  count: tempLinksWithMetadata.length
+                }) || `${tempLinksWithMetadata.length} links added` : t('editProfile.items.links.add') || 'Add your links',
+                onPress: () => startEditing('links', ''),
+                multiRow: true,
+                customContentBelow: tempLinksWithMetadata.length > 0 && /*#__PURE__*/_jsxs(View, {
+                  style: styles.linksPreviewContainer,
+                  children: [tempLinksWithMetadata.slice(0, 2).map((link, index) => /*#__PURE__*/_jsxs(View, {
+                    style: styles.linkPreviewItem,
+                    children: [link.image ? /*#__PURE__*/_jsx(Image, {
+                      source: {
+                        uri: link.image
+                      },
+                      style: styles.linkPreviewImage
+                    }) : /*#__PURE__*/_jsx(View, {
+                      style: styles.linkPreviewImage,
+                      children: /*#__PURE__*/_jsx(Text, {
+                        style: styles.linkPreviewImageText,
+                        children: link.title?.charAt(0).toUpperCase() || link.url.charAt(0).toUpperCase()
+                      })
+                    }), /*#__PURE__*/_jsx(Text, {
                       style: styles.linkPreviewTitle,
                       numberOfLines: 1,
-                      children: location.name
-                    }), location.label && /*#__PURE__*/_jsx(Text, {
-                      style: styles.linkPreviewSubtitle,
-                      children: location.label
+                      children: link.title || link.url
                     })]
+                  }, link.id || index)), tempLinksWithMetadata.length > 2 && /*#__PURE__*/_jsxs(Text, {
+                    style: styles.linkPreviewMore,
+                    children: ["+", tempLinksWithMetadata.length - 2, " more"]
                   })]
-                }, location.id || index)), tempLocations.length > 2 && /*#__PURE__*/_jsxs(Text, {
-                  style: styles.linkPreviewMore,
-                  children: ["+", tempLocations.length - 2, " more"]
-                })]
-              })
-            }, {
-              id: 'links',
-              icon: 'link',
-              iconColor: '#32D74B',
-              title: t('editProfile.items.links.title') || 'Links',
-              subtitle: tempLinksWithMetadata.length > 0 ? tempLinksWithMetadata.length === 1 ? t('editProfile.items.links.count', {
-                count: tempLinksWithMetadata.length
-              }) || `${tempLinksWithMetadata.length} link added` : t('editProfile.items.links.count_plural', {
-                count: tempLinksWithMetadata.length
-              }) || `${tempLinksWithMetadata.length} links added` : t('editProfile.items.links.add') || 'Add your links',
-              onPress: () => startEditing('links', ''),
-              multiRow: true,
-              customContentBelow: tempLinksWithMetadata.length > 0 && /*#__PURE__*/_jsxs(View, {
-                style: styles.linksPreviewContainer,
-                children: [tempLinksWithMetadata.slice(0, 2).map((link, index) => /*#__PURE__*/_jsxs(View, {
-                  style: styles.linkPreviewItem,
-                  children: [link.image ? /*#__PURE__*/_jsx(Image, {
-                    source: {
-                      uri: link.image
-                    },
-                    style: styles.linkPreviewImage
-                  }) : /*#__PURE__*/_jsx(View, {
-                    style: styles.linkPreviewImage,
-                    children: /*#__PURE__*/_jsx(Text, {
-                      style: styles.linkPreviewImageText,
-                      children: link.title?.charAt(0).toUpperCase() || link.url.charAt(0).toUpperCase()
-                    })
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: styles.linkPreviewTitle,
-                    numberOfLines: 1,
-                    children: link.title || link.url
-                  })]
-                }, link.id || index)), tempLinksWithMetadata.length > 2 && /*#__PURE__*/_jsxs(Text, {
-                  style: styles.linkPreviewMore,
-                  children: ["+", tempLinksWithMetadata.length - 2, " more"]
-                })]
-              })
-            }],
-            theme: theme
+                })
+              }],
+              theme: theme
+            })
           })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionTitle,
-            children: t('editProfile.sections.quickActions') || 'Quick Actions'
-          }), /*#__PURE__*/_jsx(GroupedSection, {
-            items: [{
-              id: 'preview-profile',
-              icon: 'eye',
-              iconColor: '#007AFF',
-              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: user?.id
-              })
-            }, {
-              id: 'privacy-settings',
-              icon: 'shield-checkmark',
-              iconColor: '#8E8E93',
-              title: t('editProfile.items.privacySettings.title') || 'Privacy Settings',
-              subtitle: t('editProfile.items.privacySettings.subtitle') || 'Control who can see your profile',
-              onPress: () => toast.info(t('editProfile.items.privacySettings.coming') || 'Privacy settings coming soon!')
-            }, {
-              id: 'verify-account',
-              icon: 'checkmark-circle',
-              iconColor: '#30D158',
-              title: t('editProfile.items.verifyAccount.title') || 'Verify Account',
-              subtitle: t('editProfile.items.verifyAccount.subtitle') || 'Get a verified badge',
-              onPress: () => toast.info(t('editProfile.items.verifyAccount.coming') || 'Account verification coming soon!')
+            style: [styles.sectionTitle, {
+              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
             }],
-            theme: theme
+            children: t('editProfile.sections.quickActions') || 'QUICK ACTIONS'
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.groupedSectionWrapper,
+            children: /*#__PURE__*/_jsx(GroupedSection, {
+              items: [{
+                id: 'preview-profile',
+                icon: 'eye',
+                iconColor: '#007AFF',
+                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: user?.id
+                })
+              }, {
+                id: 'privacy-settings',
+                icon: 'shield-checkmark',
+                iconColor: '#8E8E93',
+                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: 'checkmark-circle',
+                iconColor: '#30D158',
+                title: t('editProfile.items.verifyAccount.title') || 'Verify Account',
+                subtitle: t('editProfile.items.verifyAccount.subtitle') || 'Get a verified badge',
+                onPress: () => navigate?.('AccountVerification')
+              }],
+              theme: theme
+            })
           })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.sectionTitle,
-            children: t('editProfile.sections.security') || 'Security'
-          }), /*#__PURE__*/_jsx(GroupedSection, {
-            items: [{
-              id: 'two-factor',
-              icon: 'shield-checkmark',
-              iconColor: '#007AFF',
-              title: t('editProfile.items.twoFactor.title') || 'Two‑Factor Authentication',
-              subtitle: user?.privacySettings?.twoFactorEnabled ? t('editProfile.items.twoFactor.enabled') || 'Enabled' : t('editProfile.items.twoFactor.disabled') || 'Disabled (recommended)',
-              onPress: () => startEditing('twoFactor', '')
+            style: [styles.sectionTitle, {
+              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
             }],
-            theme: theme
+            children: t('editProfile.sections.security') || 'SECURITY'
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.groupedSectionWrapper,
+            children: /*#__PURE__*/_jsx(GroupedSection, {
+              items: [{
+                id: 'two-factor',
+                icon: 'shield-checkmark',
+                iconColor: '#007AFF',
+                title: t('editProfile.items.twoFactor.title') || 'Two‑Factor Authentication',
+                subtitle: user?.privacySettings?.twoFactorEnabled ? t('editProfile.items.twoFactor.enabled') || 'Enabled' : t('editProfile.items.twoFactor.disabled') || 'Disabled (recommended)',
+                onPress: () => startEditing('twoFactor', '')
+              }],
+              theme: theme
+            })
           })]
         })]
       })
@@ -1504,27 +1652,35 @@ const AccountSettingsScreen = ({
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: '#f2f2f2'
+    flex: 1
   },
   content: {
     flex: 1,
-    padding: 16
+    paddingTop: 8,
+    paddingBottom: 24
   },
   contentEditing: {
     flex: 1,
     padding: 0
   },
   section: {
-    marginBottom: 24
+    marginBottom: 32
   },
   sectionTitle: {
-    fontSize: 16,
+    fontSize: 13,
     fontWeight: '600',
-    color: '#333',
-    marginBottom: 12,
+    color: '#8E8E93',
+    marginBottom: 8,
+    marginTop: 4,
+    marginHorizontal: 16,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
     fontFamily: fontFamilies.phuduSemiBold
   },
+  groupedSectionWrapper: {
+    marginHorizontal: 16,
+    backgroundColor: 'transparent'
+  },
   userIcon: {
     marginRight: 12
   },
@@ -1561,21 +1717,21 @@ const styles = StyleSheet.create({
     flex: 1
   },
   editingFieldLabel: {
-    fontSize: 16,
+    fontSize: 13,
     fontWeight: '600',
-    color: '#333',
-    marginBottom: 12,
-    fontFamily: fontFamilies.phuduSemiBold
+    marginBottom: 8,
+    fontFamily: fontFamilies.phuduSemiBold,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5
   },
   editingFieldInput: {
-    backgroundColor: '#fff',
-    borderWidth: 2,
-    borderColor: '#e0e0e0',
-    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 14,
     padding: 16,
     fontSize: 17,
     minHeight: 52,
-    fontWeight: '400'
+    fontWeight: '400',
+    letterSpacing: -0.2
   },
   editingFieldDescription: {
     fontSize: 14,
@@ -1598,22 +1754,20 @@ const styles = StyleSheet.create({
     fontWeight: '600'
   },
   editingFieldTextArea: {
-    backgroundColor: '#fff',
-    borderWidth: 2,
-    borderColor: '#e0e0e0',
-    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 14,
     padding: 16,
     fontSize: 17,
     minHeight: 120,
     textAlignVertical: 'top',
-    fontWeight: '400'
+    fontWeight: '400',
+    letterSpacing: -0.2
   },
   // Custom editing header styles
   editingHeader: {
     paddingTop: Platform.OS === 'ios' ? 50 : 16,
     paddingBottom: 0,
-    borderBottomWidth: 1,
-    backgroundColor: '#fff'
+    borderBottomWidth: StyleSheet.hairlineWidth
   },
   editingHeaderContent: {
     flexDirection: 'row',
@@ -1622,10 +1776,9 @@ const styles = StyleSheet.create({
     minHeight: 44
   },
   editingBackButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: '#F8F9FA',
+    width: 36,
+    height: 36,
+    borderRadius: 20,
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 12
@@ -1653,8 +1806,7 @@ const styles = StyleSheet.create({
   editingSaveButton: {
     paddingHorizontal: 16,
     paddingVertical: 8,
-    borderRadius: 18,
-    backgroundColor: '#F8F9FA',
+    borderRadius: 20,
     minWidth: 60,
     alignItems: 'center',
     justifyContent: 'center'
@@ -1667,20 +1819,24 @@ const styles = StyleSheet.create({
   editingHeaderBottom: {
     flexDirection: 'column',
     alignItems: 'flex-start',
-    paddingHorizontal: 16,
-    paddingBottom: 8,
-    paddingTop: 8
-  },
-  editingBottomIcon: {
-    marginBottom: 8,
-    alignSelf: 'flex-start'
+    paddingHorizontal: 20,
+    paddingBottom: 20,
+    paddingTop: 24
+  },
+  editingIconContainer: {
+    width: 64,
+    height: 64,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 16
   },
   editingBottomTitle: {
-    fontSize: 32,
+    fontSize: 28,
     fontWeight: '700',
     fontFamily: fontFamilies.phuduBold,
     letterSpacing: -0.5,
-    lineHeight: 36,
+    lineHeight: 34,
     textAlign: 'left',
     alignSelf: 'flex-start'
   },