@oxyhq/services 5.7.5 → 5.8.2

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

@@ -1,15 +1,14 @@
 "use strict";
 
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, TextInput, Animated } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, TextInput, Animated, Platform, Image } from 'react-native';
 import { useOxy } from '../context/OxyContext';
-import Avatar from '../components/Avatar';
 import OxyIcon from '../components/icon/OxyIcon';
-import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { fontFamilies } from '../styles/fonts';
 import { confirmAction } from '../utils/confirmAction';
 import { useAuthStore } from '../stores/authStore';
+import { Header, GroupedSection } from '../components';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const AccountSettingsScreen = ({
   onClose,
@@ -51,6 +50,17 @@ const AccountSettingsScreen = ({
   const [tempBio, setTempBio] = useState('');
   const [tempLocation, setTempLocation] = useState('');
   const [tempLinks, setTempLinks] = useState([]);
+  const [tempLinksWithMetadata, setTempLinksWithMetadata] = useState([]);
+  const [isAddingLink, setIsAddingLink] = useState(false);
+  const [newLinkUrl, setNewLinkUrl] = useState('');
+  const [isFetchingMetadata, setIsFetchingMetadata] = useState(false);
+
+  // Location management state
+  const [tempLocations, setTempLocations] = useState([]);
+  const [isAddingLocation, setIsAddingLocation] = useState(false);
+  const [newLocationQuery, setNewLocationQuery] = useState('');
+  const [locationSearchResults, setLocationSearchResults] = useState([]);
+  const [isSearchingLocations, setIsSearchingLocations] = useState(false);
 
   // Memoize theme-related calculations to prevent unnecessary recalculations
   const themeStyles = useMemo(() => {
@@ -66,7 +76,7 @@ const AccountSettingsScreen = ({
   const animateSaveButton = useCallback(toValue => {
     Animated.spring(saveButtonScale, {
       toValue,
-      useNativeDriver: true,
+      useNativeDriver: Platform.OS !== 'web',
       tension: 150,
       friction: 8
     }).start();
@@ -83,7 +93,59 @@ const AccountSettingsScreen = ({
       setEmail(user.email || '');
       setBio(user.bio || '');
       setLocation(user.location || '');
-      setLinks(Array.isArray(user.links) ? user.links.map(l => typeof l === 'string' ? l : l.link).filter(Boolean) : user.website ? [user.website] : []);
+
+      // 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([]);
+      }
       setAvatarUrl(user.avatar?.url || '');
     }
   }, [user]);
@@ -97,9 +159,14 @@ const AccountSettingsScreen = ({
         username,
         email,
         bio,
-        location,
-        links
+        location: tempLocations.length > 0 ? tempLocations[0].name : '',
+        // Keep backward compatibility
+        locations: tempLocations.length > 0 ? tempLocations : undefined,
+        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) {
@@ -154,10 +221,11 @@ const AccountSettingsScreen = ({
         setTempBio(currentValue);
         break;
       case 'location':
-        setTempLocation(currentValue);
+        // Don't reset the locations - keep the existing data
         break;
       case 'links':
-        setTempLinks([...links]);
+        // Don't reset the metadata - keep the existing rich metadata
+        // The tempLinksWithMetadata should already contain the rich data from the database
         break;
     }
     setEditingField(type);
@@ -180,10 +248,13 @@ const AccountSettingsScreen = ({
         setBio(tempBio);
         break;
       case 'location':
-        setLocation(tempLocation);
+        // Locations are handled in the main save function
         break;
       case 'links':
-        setLinks(tempLinks);
+        // Save both URLs and metadata
+        setLinks(tempLinksWithMetadata.map(link => link.url));
+        // Store full metadata for database
+        setTempLinksWithMetadata(tempLinksWithMetadata);
         break;
     }
 
@@ -196,91 +267,439 @@ const AccountSettingsScreen = ({
   const cancelEditing = () => {
     setEditingField(null);
   };
-  const getFieldLabel = type => {
-    const labels = {
-      displayName: 'Display Name',
-      username: 'Username',
-      email: 'Email',
-      bio: 'Bio',
-      location: 'Location',
-      links: 'Links'
-    };
-    return labels[type] || 'Field';
+  const fetchLinkMetadata = async url => {
+    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);
+      return {
+        ...metadata,
+        id: Date.now().toString()
+      };
+    } catch (error) {
+      console.error('Error fetching metadata:', error);
+      // Fallback to basic metadata
+      return {
+        url: url.startsWith('http') ? url : 'https://' + url,
+        title: url.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+        description: 'Link',
+        image: undefined,
+        id: Date.now().toString()
+      };
+    } finally {
+      setIsFetchingMetadata(false);
+    }
   };
-  const getFieldIcon = type => {
-    const icons = {
-      displayName: {
-        name: 'person',
-        color: '#007AFF'
-      },
-      username: {
-        name: 'at',
-        color: '#5856D6'
-      },
-      email: {
-        name: 'mail',
-        color: '#FF9500'
-      },
-      bio: {
-        name: 'document-text',
-        color: '#34C759'
-      },
-      location: {
-        name: 'location',
-        color: '#FF3B30'
-      },
-      links: {
-        name: 'link',
-        color: '#32D74B'
+  const searchLocations = async query => {
+    if (!query.trim() || query.length < 3) {
+      setLocationSearchResults([]);
+      return;
+    }
+    try {
+      setIsSearchingLocations(true);
+      const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=5&addressdetails=1`);
+      const data = await response.json();
+      setLocationSearchResults(data);
+    } catch (error) {
+      console.error('Error searching locations:', error);
+      setLocationSearchResults([]);
+    } finally {
+      setIsSearchingLocations(false);
+    }
+  };
+  const addLocation = locationData => {
+    const newLocation = {
+      id: Date.now().toString(),
+      name: locationData.display_name,
+      label: locationData.type === 'city' ? 'City' : locationData.type === 'country' ? 'Country' : locationData.type === 'state' ? 'State' : 'Location',
+      coordinates: {
+        lat: parseFloat(locationData.lat),
+        lon: parseFloat(locationData.lon)
       }
     };
-    return icons[type] || {
-      name: 'person',
-      color: '#007AFF'
-    };
+    setTempLocations(prev => [...prev, newLocation]);
+    setNewLocationQuery('');
+    setLocationSearchResults([]);
+    setIsAddingLocation(false);
+  };
+  const removeLocation = id => {
+    setTempLocations(prev => prev.filter(loc => loc.id !== id));
+  };
+  const moveLocation = (fromIndex, toIndex) => {
+    setTempLocations(prev => {
+      const newLocations = [...prev];
+      const [movedLocation] = newLocations.splice(fromIndex, 1);
+      newLocations.splice(toIndex, 0, movedLocation);
+      return newLocations;
+    });
+  };
+  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);
+  };
+  const removeLink = id => {
+    setTempLinksWithMetadata(prev => prev.filter(link => link.id !== id));
+  };
+  const moveLink = (fromIndex, toIndex) => {
+    setTempLinksWithMetadata(prev => {
+      const newLinks = [...prev];
+      const [movedLink] = newLinks.splice(fromIndex, 1);
+      newLinks.splice(toIndex, 0, movedLink);
+      return newLinks;
+    });
   };
   const renderEditingField = type => {
     if (type === 'displayName') {
       return /*#__PURE__*/_jsx(View, {
-        style: styles.editingFieldContainer,
+        style: [styles.editingFieldContainer, {
+          backgroundColor: themeStyles.backgroundColor
+        }],
         children: /*#__PURE__*/_jsx(View, {
           style: styles.editingFieldContent,
           children: /*#__PURE__*/_jsxs(View, {
-            style: [styles.newValueSection, {
-              flexDirection: 'row',
-              gap: 12
-            }],
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: {
-                flex: 1
-              },
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.editingFieldLabel,
-                children: "First Name"
-              }), /*#__PURE__*/_jsx(TextInput, {
-                style: styles.editingFieldInput,
-                value: tempDisplayName,
-                onChangeText: setTempDisplayName,
-                placeholder: "Enter your first name",
-                placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
-                autoFocus: true,
-                selectionColor: themeStyles.primaryColor
-              })]
+            style: styles.newValueSection,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.editingFieldHeader,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.editingFieldLabel, {
+                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                }],
+                children: "Edit Display Name"
+              })
             }), /*#__PURE__*/_jsxs(View, {
               style: {
-                flex: 1
+                flexDirection: 'row',
+                gap: 12
               },
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.editingFieldLabel,
-                children: "Last Name"
-              }), /*#__PURE__*/_jsx(TextInput, {
-                style: styles.editingFieldInput,
-                value: tempLastName,
-                onChangeText: setTempLastName,
-                placeholder: "Enter your last name",
-                placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
-                selectionColor: themeStyles.primaryColor
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: {
+                  flex: 1
+                },
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.editingFieldLabel,
+                  children: "First Name"
+                }), /*#__PURE__*/_jsx(TextInput, {
+                  style: styles.editingFieldInput,
+                  value: tempDisplayName,
+                  onChangeText: setTempDisplayName,
+                  placeholder: "Enter your first name",
+                  placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                  autoFocus: true,
+                  selectionColor: themeStyles.primaryColor
+                })]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: {
+                  flex: 1
+                },
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.editingFieldLabel,
+                  children: "Last Name"
+                }), /*#__PURE__*/_jsx(TextInput, {
+                  style: styles.editingFieldInput,
+                  value: tempLastName,
+                  onChangeText: setTempLastName,
+                  placeholder: "Enter your last name",
+                  placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                  selectionColor: themeStyles.primaryColor
+                })]
+              })]
+            })]
+          })
+        })
+      });
+    }
+    if (type === 'location') {
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.editingFieldContainer, {
+          backgroundColor: themeStyles.backgroundColor
+        }],
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.editingFieldContent,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.newValueSection,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.editingFieldHeader,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.editingFieldLabel, {
+                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                }],
+                children: "Manage Your Locations"
+              })
+            }), isAddingLocation ? /*#__PURE__*/_jsxs(View, {
+              style: styles.addLocationSection,
+              children: [/*#__PURE__*/_jsxs(Text, {
+                style: styles.addLocationLabel,
+                children: ["Add New Location", isSearchingLocations && /*#__PURE__*/_jsx(Text, {
+                  style: styles.searchingText,
+                  children: " \u2022 Searching..."
+                })]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.addLocationInputContainer,
+                children: [/*#__PURE__*/_jsx(TextInput, {
+                  style: styles.addLocationInput,
+                  value: newLocationQuery,
+                  onChangeText: text => {
+                    setNewLocationQuery(text);
+                    searchLocations(text);
+                  },
+                  placeholder: "Search for a location...",
+                  placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                  autoFocus: true,
+                  selectionColor: themeStyles.primaryColor
+                }), /*#__PURE__*/_jsx(View, {
+                  style: styles.addLocationButtons,
+                  children: /*#__PURE__*/_jsx(TouchableOpacity, {
+                    style: [styles.addLocationButton, styles.cancelButton],
+                    onPress: () => {
+                      setIsAddingLocation(false);
+                      setNewLocationQuery('');
+                      setLocationSearchResults([]);
+                    },
+                    children: /*#__PURE__*/_jsx(Text, {
+                      style: styles.cancelButtonText,
+                      children: "Cancel"
+                    })
+                  })
+                })]
+              }), locationSearchResults.length > 0 && /*#__PURE__*/_jsx(View, {
+                style: styles.searchResults,
+                children: locationSearchResults.map(result => /*#__PURE__*/_jsxs(TouchableOpacity, {
+                  style: styles.searchResultItem,
+                  onPress: () => addLocation(result),
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.searchResultName,
+                    numberOfLines: 2,
+                    children: result.display_name
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.searchResultType,
+                    children: result.type
+                  })]
+                }, result.place_id))
+              })]
+            }) : /*#__PURE__*/_jsxs(TouchableOpacity, {
+              style: styles.addLocationTrigger,
+              onPress: () => setIsAddingLocation(true),
+              children: [/*#__PURE__*/_jsx(OxyIcon, {
+                name: "add",
+                size: 20,
+                color: themeStyles.primaryColor
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.addLocationTriggerText,
+                children: "Add a new location"
               })]
+            }), tempLocations.length > 0 && /*#__PURE__*/_jsxs(View, {
+              style: styles.locationsList,
+              children: [/*#__PURE__*/_jsxs(Text, {
+                style: styles.locationsListTitle,
+                children: ["Your Locations (", tempLocations.length, ")"]
+              }), tempLocations.map((location, index) => /*#__PURE__*/_jsxs(View, {
+                style: styles.locationItem,
+                children: [/*#__PURE__*/_jsxs(View, {
+                  style: styles.locationItemContent,
+                  children: [/*#__PURE__*/_jsx(View, {
+                    style: styles.locationItemDragHandle,
+                    children: /*#__PURE__*/_jsxs(View, {
+                      style: styles.reorderButtons,
+                      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                        style: [styles.reorderButton, index === 0 && styles.reorderButtonDisabled],
+                        onPress: () => index > 0 && moveLocation(index, index - 1),
+                        disabled: index === 0,
+                        children: /*#__PURE__*/_jsx(OxyIcon, {
+                          name: "chevron-up",
+                          size: 12,
+                          color: index === 0 ? "#ccc" : "#666"
+                        })
+                      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                        style: [styles.reorderButton, index === tempLocations.length - 1 && styles.reorderButtonDisabled],
+                        onPress: () => index < tempLocations.length - 1 && moveLocation(index, index + 1),
+                        disabled: index === tempLocations.length - 1,
+                        children: /*#__PURE__*/_jsx(OxyIcon, {
+                          name: "chevron-down",
+                          size: 12,
+                          color: index === tempLocations.length - 1 ? "#ccc" : "#666"
+                        })
+                      })]
+                    })
+                  }), /*#__PURE__*/_jsxs(View, {
+                    style: styles.locationItemInfo,
+                    children: [/*#__PURE__*/_jsxs(View, {
+                      style: styles.locationItemHeader,
+                      children: [/*#__PURE__*/_jsx(Text, {
+                        style: styles.locationItemName,
+                        numberOfLines: 1,
+                        children: location.name
+                      }), location.label && /*#__PURE__*/_jsx(View, {
+                        style: styles.locationLabel,
+                        children: /*#__PURE__*/_jsx(Text, {
+                          style: styles.locationLabelText,
+                          children: location.label
+                        })
+                      })]
+                    }), location.coordinates && /*#__PURE__*/_jsxs(Text, {
+                      style: styles.locationCoordinates,
+                      children: [location.coordinates.lat.toFixed(4), ", ", location.coordinates.lon.toFixed(4)]
+                    })]
+                  }), /*#__PURE__*/_jsx(View, {
+                    style: styles.locationItemActions,
+                    children: /*#__PURE__*/_jsx(TouchableOpacity, {
+                      style: styles.locationItemButton,
+                      onPress: () => removeLocation(location.id),
+                      children: /*#__PURE__*/_jsx(OxyIcon, {
+                        name: "trash",
+                        size: 14,
+                        color: "#FF3B30"
+                      })
+                    })
+                  })]
+                }), index < tempLocations.length - 1 && /*#__PURE__*/_jsx(View, {
+                  style: styles.locationItemDivider
+                })]
+              }, location.id)), /*#__PURE__*/_jsx(View, {
+                style: styles.reorderHint,
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: styles.reorderHintText,
+                  children: "Use \u2191\u2193 buttons to reorder your locations"
+                })
+              })]
+            })]
+          })
+        })
+      });
+    }
+    if (type === 'links') {
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.editingFieldContainer, {
+          backgroundColor: themeStyles.backgroundColor
+        }],
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.editingFieldContent,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.newValueSection,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.editingFieldHeader,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.editingFieldLabel, {
+                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                }],
+                children: "Manage Your Links"
+              })
+            }), /*#__PURE__*/_jsx(GroupedSection, {
+              items: [
+              // Add new link item
+              ...(isAddingLink ? [{
+                id: 'add-link-input',
+                icon: 'add',
+                iconColor: '#32D74B',
+                title: 'Add New Link',
+                subtitle: isFetchingMetadata ? 'Fetching metadata...' : 'Enter URL to add a new link',
+                multiRow: true,
+                customContent: /*#__PURE__*/_jsxs(View, {
+                  style: styles.addLinkInputContainer,
+                  children: [/*#__PURE__*/_jsx(TextInput, {
+                    style: styles.addLinkInput,
+                    value: newLinkUrl,
+                    onChangeText: setNewLinkUrl,
+                    placeholder: "Enter URL (e.g., https://example.com)",
+                    placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                    keyboardType: "url",
+                    autoFocus: true,
+                    selectionColor: themeStyles.primaryColor
+                  }), /*#__PURE__*/_jsxs(View, {
+                    style: styles.addLinkButtons,
+                    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                      style: [styles.addLinkButton, styles.cancelButton],
+                      onPress: () => {
+                        setIsAddingLink(false);
+                        setNewLinkUrl('');
+                      },
+                      children: /*#__PURE__*/_jsx(Text, {
+                        style: styles.cancelButtonText,
+                        children: "Cancel"
+                      })
+                    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                      style: [styles.addLinkButton, styles.addButton, {
+                        opacity: isFetchingMetadata ? 0.5 : 1
+                      }],
+                      onPress: addLink,
+                      disabled: isFetchingMetadata,
+                      children: isFetchingMetadata ? /*#__PURE__*/_jsx(ActivityIndicator, {
+                        size: "small",
+                        color: "#fff"
+                      }) : /*#__PURE__*/_jsx(Text, {
+                        style: styles.addButtonText,
+                        children: "Add"
+                      })
+                    })]
+                  })]
+                })
+              }] : [{
+                id: 'add-link-trigger',
+                icon: 'add',
+                iconColor: '#32D74B',
+                title: 'Add a new link',
+                subtitle: 'Tap to add a new link to your profile',
+                onPress: () => setIsAddingLink(true)
+              }]),
+              // Existing links
+              ...tempLinksWithMetadata.map((link, index) => ({
+                id: link.id,
+                image: link.image || undefined,
+                imageSize: 32,
+                icon: link.image ? undefined : 'link',
+                iconColor: '#32D74B',
+                title: link.title || link.url,
+                subtitle: link.description && link.description !== link.title ? link.description : link.url,
+                multiRow: true,
+                customContent: /*#__PURE__*/_jsxs(View, {
+                  style: styles.linkItemActions,
+                  children: [/*#__PURE__*/_jsxs(View, {
+                    style: styles.reorderButtons,
+                    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+                      style: [styles.reorderButton, index === 0 && styles.reorderButtonDisabled],
+                      onPress: () => index > 0 && moveLink(index, index - 1),
+                      disabled: index === 0,
+                      children: /*#__PURE__*/_jsx(OxyIcon, {
+                        name: "chevron-up",
+                        size: 12,
+                        color: index === 0 ? "#ccc" : "#666"
+                      })
+                    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                      style: [styles.reorderButton, index === tempLinksWithMetadata.length - 1 && styles.reorderButtonDisabled],
+                      onPress: () => index < tempLinksWithMetadata.length - 1 && moveLink(index, index + 1),
+                      disabled: index === tempLinksWithMetadata.length - 1,
+                      children: /*#__PURE__*/_jsx(OxyIcon, {
+                        name: "chevron-down",
+                        size: 12,
+                        color: index === tempLinksWithMetadata.length - 1 ? "#ccc" : "#666"
+                      })
+                    })]
+                  }), /*#__PURE__*/_jsx(TouchableOpacity, {
+                    style: styles.linkItemButton,
+                    onPress: () => removeLink(link.id),
+                    children: /*#__PURE__*/_jsx(OxyIcon, {
+                      name: "trash",
+                      size: 14,
+                      color: "#FF3B30"
+                    })
+                  })]
+                })
+              }))],
+              theme: theme
+            }), tempLinksWithMetadata.length > 0 && /*#__PURE__*/_jsx(View, {
+              style: styles.reorderHint,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.reorderHintText,
+                children: "Use \u2191\u2193 buttons to reorder your links"
+              })
             })]
           })
         })
@@ -385,14 +804,21 @@ const AccountSettingsScreen = ({
       }
     };
     return /*#__PURE__*/_jsx(View, {
-      style: styles.editingFieldContainer,
+      style: [styles.editingFieldContainer, {
+        backgroundColor: themeStyles.backgroundColor
+      }],
       children: /*#__PURE__*/_jsx(View, {
         style: styles.editingFieldContent,
         children: /*#__PURE__*/_jsxs(View, {
           style: styles.newValueSection,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.editingFieldLabel,
-            children: `Enter ${config.label.toLowerCase()}:`
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.editingFieldHeader,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.editingFieldLabel, {
+                color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+              }],
+              children: `Enter ${config.label.toLowerCase()}:`
+            })
           }), /*#__PURE__*/_jsx(TextInput, {
             style: [config.multiline ? styles.editingFieldTextArea : styles.editingFieldInput, {
               backgroundColor: themeStyles.isDarkTheme ? '#333' : '#fff',
@@ -413,34 +839,6 @@ const AccountSettingsScreen = ({
       })
     });
   };
-  const renderField = (type, label, value, placeholder, icon, iconColor, multiline = false, keyboardType = 'default', isFirst = false, isLast = false) => {
-    const itemStyles = [styles.settingItem, isFirst && styles.firstSettingItem, isLast && styles.lastSettingItem];
-    return /*#__PURE__*/_jsxs(TouchableOpacity, {
-      style: itemStyles,
-      onPress: () => startEditing(type, value),
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.settingInfo,
-        children: [/*#__PURE__*/_jsx(OxyIcon, {
-          name: icon,
-          size: 20,
-          color: iconColor,
-          style: styles.settingIcon
-        }), /*#__PURE__*/_jsxs(View, {
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.settingLabel,
-            children: label
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.settingDescription,
-            children: value || placeholder
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(OxyIcon, {
-        name: "chevron-forward",
-        size: 16,
-        color: "#ccc"
-      })]
-    });
-  };
   if (authLoading || !isAuthenticated) {
     return /*#__PURE__*/_jsx(View, {
       style: [styles.container, {
@@ -457,93 +855,64 @@ const AccountSettingsScreen = ({
     style: [styles.container, {
       backgroundColor: themeStyles.backgroundColor
     }],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.header,
-      children: editingField ? /*#__PURE__*/_jsxs(View, {
-        style: styles.editingHeader,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.editingHeaderTop,
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.cancelButton,
-            onPress: cancelEditing,
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "close",
-              size: 24,
-              color: "#666"
-            })
-          }), /*#__PURE__*/_jsx(Animated.View, {
-            style: {
-              transform: [{
-                scale: saveButtonScale
-              }]
-            },
-            children: /*#__PURE__*/_jsx(TouchableOpacity, {
-              style: [styles.saveHeaderButton, {
-                opacity: isSaving ? 0.7 : 1,
-                backgroundColor: editingField ? getFieldIcon(editingField).color : '#007AFF'
-              }],
-              onPress: () => saveField(editingField),
-              disabled: isSaving,
-              children: isSaving ? /*#__PURE__*/_jsx(ActivityIndicator, {
-                size: "small",
-                color: "#fff"
-              }) : /*#__PURE__*/_jsx(Text, {
-                style: styles.saveButtonText,
-                children: "Save"
-              })
-            })
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.editingHeaderBottom,
-          children: /*#__PURE__*/_jsxs(View, {
-            style: styles.headerTitleWithIcon,
-            children: [/*#__PURE__*/_jsx(OxyIcon, {
-              name: getFieldIcon(editingField).name,
-              size: 50,
-              color: getFieldIcon(editingField).color,
-              style: styles.headerIcon
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.headerTitleLarge,
-              children: getFieldLabel(editingField)
-            })]
-          })
-        })]
-      }) : /*#__PURE__*/_jsxs(View, {
-        style: styles.normalHeader,
+    children: [editingField ? /*#__PURE__*/_jsxs(View, {
+      style: [styles.editingHeader, {
+        backgroundColor: '#FFFFFF',
+        borderBottomColor: themeStyles.isDarkTheme ? '#38383A' : '#E9ECEF'
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.editingHeaderContent,
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.cancelButton,
-          onPress: onClose || goBack,
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: "close",
-            size: 24,
-            color: "#666"
+          style: styles.editingBackButton,
+          onPress: cancelEditing,
+          children: /*#__PURE__*/_jsx(OxyIcon, {
+            name: "chevron-back",
+            size: 20,
+            color: themeStyles.primaryColor
           })
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.headerTitle,
-          children: "Account Settings"
-        }), /*#__PURE__*/_jsx(Animated.View, {
-          style: {
-            transform: [{
-              scale: saveButtonScale
-            }]
-          },
-          children: /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.saveIconButton, {
-              opacity: isSaving ? 0.7 : 1
-            }],
-            onPress: handleSave,
-            disabled: isSaving,
-            children: isSaving ? /*#__PURE__*/_jsx(ActivityIndicator, {
-              size: "small",
-              color: themeStyles.primaryColor
-            }) : /*#__PURE__*/_jsx(Ionicons, {
-              name: "checkmark",
-              size: 24,
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.editingTitleContainer
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.editingSaveButton, {
+            opacity: isSaving ? 0.5 : 1
+          }],
+          onPress: () => saveField(editingField),
+          disabled: isSaving,
+          children: isSaving ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: themeStyles.primaryColor
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: [styles.editingSaveButtonText, {
               color: themeStyles.primaryColor
-            })
+            }],
+            children: "Save"
           })
         })]
-      })
+      }), /*#__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
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.editingBottomTitle, {
+            color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+          }],
+          children: editingField === 'displayName' ? 'Display Name' : editingField === 'username' ? 'Username' : editingField === 'email' ? 'Email' : editingField === 'bio' ? 'Bio' : editingField === 'location' ? 'Location' : editingField === 'links' ? 'Links' : 'Field'
+        })]
+      })]
+    }) : /*#__PURE__*/_jsx(Header, {
+      title: "Edit Profile",
+      theme: theme,
+      onBack: goBack || onClose,
+      rightAction: {
+        icon: 'checkmark',
+        onPress: handleSave,
+        loading: isSaving,
+        disabled: isSaving
+      },
+      elevation: "subtle"
     }), /*#__PURE__*/_jsx(ScrollView, {
       style: editingField ? styles.contentEditing : styles.content,
       children: editingField ?
@@ -561,101 +930,162 @@ const AccountSettingsScreen = ({
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
             children: "Profile Picture"
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.settingItem, styles.firstSettingItem, styles.lastSettingItem],
-            onPress: handleAvatarUpdate,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.userIcon,
-              children: /*#__PURE__*/_jsx(Avatar, {
-                uri: avatarUrl,
-                name: displayName || username,
-                size: 50,
-                theme: theme
-              })
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.settingInfo,
-              children: /*#__PURE__*/_jsxs(View, {
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.settingLabel,
-                  children: "Profile Photo"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: styles.settingDescription,
-                  children: avatarUrl ? 'Tap to change your profile picture' : 'Tap to add a profile picture'
-                })]
-              })
-            }), /*#__PURE__*/_jsx(OxyIcon, {
-              name: "chevron-forward",
-              size: 16,
-              color: "#ccc"
-            })]
+          }), /*#__PURE__*/_jsx(GroupedSection, {
+            items: [{
+              id: 'profile-photo',
+              icon: avatarUrl ? undefined : 'person',
+              iconColor: '#007AFF',
+              image: avatarUrl || undefined,
+              imageSize: 40,
+              title: 'Profile Photo',
+              subtitle: avatarUrl ? 'Tap to change your profile picture' : 'Tap to add a profile picture',
+              onPress: handleAvatarUpdate
+            }],
+            theme: theme
           })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
             children: "Basic Information"
-          }), renderField('displayName', 'Display Name', [displayName, lastName].filter(Boolean).join(' '),
-          // Show full name
-          'Add your display name', 'person', '#007AFF', false, 'default', true, false), renderField('username', 'Username', username, 'Choose a username', 'at', '#5856D6', false, 'default', false, false), renderField('email', 'Email', email, 'Add your email address', 'mail', '#FF9500', false, 'email-address', false, true)]
+          }), /*#__PURE__*/_jsx(GroupedSection, {
+            items: [{
+              id: 'display-name',
+              icon: 'person',
+              iconColor: '#007AFF',
+              title: 'Display Name',
+              subtitle: [displayName, lastName].filter(Boolean).join(' ') || 'Add your display name',
+              onPress: () => startEditing('displayName', '')
+            }, {
+              id: 'username',
+              icon: 'at',
+              iconColor: '#5856D6',
+              title: 'Username',
+              subtitle: username || 'Choose a username',
+              onPress: () => startEditing('username', username)
+            }, {
+              id: 'email',
+              icon: 'mail',
+              iconColor: '#FF9500',
+              title: 'Email',
+              subtitle: email || 'Add your email address',
+              onPress: () => startEditing('email', email)
+            }],
+            theme: theme
+          })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
             children: "About You"
-          }), renderField('bio', 'Bio', bio, 'Tell people about yourself', 'document-text', '#34C759', true, 'default', true, false), renderField('location', 'Location', location, 'Add your location', 'location', '#FF3B30', false, 'default', false, false), renderField('links', 'Links', links.join(', '), 'Add your links', 'link', '#32D74B', false, 'url', false, true)]
+          }), /*#__PURE__*/_jsx(GroupedSection, {
+            items: [{
+              id: 'bio',
+              icon: 'document-text',
+              iconColor: '#34C759',
+              title: 'Bio',
+              subtitle: bio || 'Tell people about yourself',
+              onPress: () => startEditing('bio', bio)
+            }, {
+              id: 'locations',
+              icon: 'location',
+              iconColor: '#FF3B30',
+              title: 'Locations',
+              subtitle: tempLocations.length > 0 ? `${tempLocations.length} location${tempLocations.length !== 1 ? 's' : ''} added` : '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: 'Links',
+              subtitle: tempLinksWithMetadata.length > 0 ? `${tempLinksWithMetadata.length} link${tempLinksWithMetadata.length !== 1 ? 's' : ''} added` : '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
+          })]
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.section,
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.sectionTitle,
             children: "Quick Actions"
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.settingItem, styles.firstSettingItem],
-            onPress: () => toast.info('Privacy settings coming soon!'),
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.settingInfo,
-              children: [/*#__PURE__*/_jsx(OxyIcon, {
-                name: "shield-checkmark",
-                size: 20,
-                color: "#8E8E93",
-                style: styles.settingIcon
-              }), /*#__PURE__*/_jsxs(View, {
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.settingLabel,
-                  children: "Privacy Settings"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: styles.settingDescription,
-                  children: "Control who can see your profile"
-                })]
-              })]
-            }), /*#__PURE__*/_jsx(OxyIcon, {
-              name: "chevron-forward",
-              size: 16,
-              color: "#ccc"
-            })]
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.settingItem, styles.lastSettingItem],
-            onPress: () => toast.info('Account verification coming soon!'),
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: styles.settingInfo,
-              children: [/*#__PURE__*/_jsx(OxyIcon, {
-                name: "checkmark-circle",
-                size: 20,
-                color: "#30D158",
-                style: styles.settingIcon
-              }), /*#__PURE__*/_jsxs(View, {
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: styles.settingLabel,
-                  children: "Verify Account"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: styles.settingDescription,
-                  children: "Get a verified badge"
-                })]
-              })]
-            }), /*#__PURE__*/_jsx(OxyIcon, {
-              name: "chevron-forward",
-              size: 16,
-              color: "#ccc"
-            })]
+          }), /*#__PURE__*/_jsx(GroupedSection, {
+            items: [{
+              id: 'preview-profile',
+              icon: 'eye',
+              iconColor: '#007AFF',
+              title: 'Preview Profile',
+              subtitle: 'See how your profile looks to others',
+              onPress: () => navigate?.('Profile', {
+                userId: user?.id
+              })
+            }, {
+              id: 'privacy-settings',
+              icon: 'shield-checkmark',
+              iconColor: '#8E8E93',
+              title: 'Privacy Settings',
+              subtitle: 'Control who can see your profile',
+              onPress: () => toast.info('Privacy settings coming soon!')
+            }, {
+              id: 'verify-account',
+              icon: 'checkmark-circle',
+              iconColor: '#30D158',
+              title: 'Verify Account',
+              subtitle: 'Get a verified badge',
+              onPress: () => toast.info('Account verification coming soon!')
+            }],
+            theme: theme
           })]
         })]
       })
@@ -667,203 +1097,416 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#f2f2f2'
   },
-  header: {
-    paddingHorizontal: 20,
-    paddingVertical: 10,
+  content: {
+    flex: 1,
+    padding: 16
+  },
+  contentEditing: {
+    flex: 1,
+    padding: 0
+  },
+  section: {
+    marginBottom: 24
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12,
+    fontFamily: fontFamilies.phuduSemiBold
+  },
+  userIcon: {
+    marginRight: 12
+  },
+  // Editing-only mode styles
+  editingOnlyContainer: {
+    flex: 1
+  },
+  editingFieldContainer: {
     backgroundColor: '#fff',
-    borderBottomWidth: 1,
-    borderBottomColor: '#e0e0e0'
+    padding: 16,
+    flex: 1
+  },
+  editingFieldHeader: {
+    marginBottom: 8,
+    flexDirection: 'row',
+    alignItems: 'center'
   },
-  normalHeader: {
+  editingFieldTitleContainer: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center'
   },
+  editingFieldIcon: {
+    marginRight: 12
+  },
+  editingFieldTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#000'
+  },
+  editingFieldContent: {
+    flex: 1
+  },
+  newValueSection: {
+    flex: 1
+  },
+  editingFieldLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12,
+    fontFamily: fontFamilies.phuduSemiBold
+  },
+  editingFieldInput: {
+    backgroundColor: '#fff',
+    borderWidth: 2,
+    borderColor: '#e0e0e0',
+    borderRadius: 12,
+    padding: 16,
+    fontSize: 17,
+    minHeight: 52,
+    fontWeight: '400'
+  },
+  editingFieldTextArea: {
+    backgroundColor: '#fff',
+    borderWidth: 2,
+    borderColor: '#e0e0e0',
+    borderRadius: 12,
+    padding: 16,
+    fontSize: 17,
+    minHeight: 120,
+    textAlignVertical: 'top',
+    fontWeight: '400'
+  },
+  // Custom editing header styles
   editingHeader: {
-    flexDirection: 'column'
+    paddingTop: Platform.OS === 'ios' ? 50 : 16,
+    paddingBottom: 0,
+    borderBottomWidth: 1,
+    backgroundColor: '#fff'
   },
-  editingHeaderTop: {
+  editingHeaderContent: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: 16
+    paddingHorizontal: 16,
+    minHeight: 44
   },
-  editingHeaderBottom: {
-    flexDirection: 'row',
+  editingBackButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: '#F8F9FA',
     alignItems: 'center',
-    justifyContent: 'flex-start'
-  },
-  headerTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#000',
-    fontFamily: fontFamilies.phuduBold
+    justifyContent: 'center',
+    marginRight: 12
   },
-  headerTitleWithIcon: {
+  editingTitleContainer: {
+    flex: 1,
     flexDirection: 'column',
     alignItems: 'flex-start',
-    flex: 1,
-    justifyContent: 'flex-start',
-    maxWidth: '90%'
+    justifyContent: 'flex-end',
+    paddingBottom: 8
   },
-  headerTitleLarge: {
-    fontSize: 48,
-    fontWeight: '800',
-    color: '#000',
-    fontFamily: fontFamilies.phuduExtraBold,
-    textAlign: 'left'
+  editingTitleIcon: {
+    marginBottom: 4,
+    alignSelf: 'flex-start'
   },
-  headerIcon: {
-    marginBottom: 2
-  },
-  cancelButton: {
-    padding: 5
+  editingTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    fontFamily: fontFamilies.phuduBold,
+    letterSpacing: -0.3,
+    lineHeight: 22,
+    textAlign: 'left',
+    alignSelf: 'flex-start'
   },
-  saveHeaderButton: {
+  editingSaveButton: {
     paddingHorizontal: 16,
     paddingVertical: 8,
-    borderRadius: 20,
+    borderRadius: 18,
+    backgroundColor: '#F8F9FA',
     minWidth: 60,
     alignItems: 'center',
     justifyContent: 'center'
   },
-  saveIconButton: {
-    padding: 5
-  },
-  saveButtonText: {
-    color: '#fff',
+  editingSaveButtonText: {
     fontSize: 16,
     fontWeight: '600',
     fontFamily: fontFamilies.phuduSemiBold
   },
-  content: {
-    flex: 1,
-    padding: 16
+  editingHeaderBottom: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+    paddingTop: 8
   },
-  contentEditing: {
-    flex: 1,
-    padding: 0
+  editingBottomIcon: {
+    marginBottom: 8,
+    alignSelf: 'flex-start'
   },
-  section: {
-    marginBottom: 24
+  editingBottomTitle: {
+    fontSize: 32,
+    fontWeight: '700',
+    fontFamily: fontFamilies.phuduBold,
+    letterSpacing: -0.5,
+    lineHeight: 36,
+    textAlign: 'left',
+    alignSelf: 'flex-start'
   },
-  sectionTitle: {
-    fontSize: 16,
+  // Links management styles
+  addLinkSection: {
+    marginBottom: 16,
+    padding: 12,
+    backgroundColor: '#F8F9FA',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E9ECEF'
+  },
+  addLinkLabel: {
+    fontSize: 14,
     fontWeight: '600',
     color: '#333',
-    marginBottom: 12,
-    fontFamily: fontFamilies.phuduSemiBold
+    marginBottom: 8
+  },
+  addLinkInputContainer: {
+    gap: 8
   },
-  settingItem: {
+  addLinkInput: {
     backgroundColor: '#fff',
-    padding: 16,
+    borderWidth: 1,
+    borderColor: '#E9ECEF',
+    borderRadius: 6,
+    padding: 10,
+    fontSize: 14,
+    minHeight: 36
+  },
+  addLinkButtons: {
     flexDirection: 'row',
+    gap: 6
+  },
+  addLinkButton: {
+    flex: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 6,
     alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 2
+    justifyContent: 'center'
   },
-  firstSettingItem: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24
+  cancelButton: {
+    backgroundColor: '#F8F9FA',
+    borderWidth: 1,
+    borderColor: '#E9ECEF'
   },
-  lastSettingItem: {
-    borderBottomLeftRadius: 24,
-    borderBottomRightRadius: 24,
-    marginBottom: 8
+  cancelButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#6C757D'
   },
-  settingInfo: {
+  addButton: {
+    backgroundColor: '#007AFF'
+  },
+  addButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#fff'
+  },
+  addLinkTrigger: {
     flexDirection: 'row',
     alignItems: 'center',
-    flex: 1
+    padding: 12,
+    backgroundColor: '#F8F9FA',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E9ECEF',
+    borderStyle: 'dashed',
+    marginBottom: 16
   },
-  settingIcon: {
-    marginRight: 12
+  addLinkTriggerText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#007AFF',
+    marginLeft: 6
+  },
+  linksList: {
+    gap: 8
   },
-  settingLabel: {
+  linksListTitle: {
     fontSize: 16,
-    fontWeight: '500',
+    fontWeight: '700',
     color: '#333',
-    marginBottom: 2
+    marginBottom: 6
+  },
+  linkItem: {
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E9ECEF',
+    overflow: 'hidden'
+  },
+  linkItemContent: {
+    flexDirection: 'row',
+    padding: 12,
+    alignItems: 'center'
+  },
+  linkItemDragHandle: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 8
   },
-  settingDescription: {
+  linkItemInfo: {
+    flex: 1,
+    marginRight: 8
+  },
+  linkItemTitle: {
     fontSize: 14,
-    color: '#666'
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 2
   },
-  userIcon: {
-    marginRight: 12
+  linkItemDescription: {
+    fontSize: 12,
+    color: '#666',
+    marginBottom: 2
   },
-  // Inline editing styles
-  editingContainer: {
-    flex: 1
+  linkItemUrl: {
+    fontSize: 12,
+    color: '#6C757D'
   },
-  editingActions: {
+  linkItemActions: {
     flexDirection: 'row',
+    gap: 6
+  },
+  linkItemButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: '#F8F9FA',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  linkItemDivider: {
+    height: 1,
+    backgroundColor: '#E9ECEF',
+    marginHorizontal: 12
+  },
+  reorderHint: {
+    padding: 8,
     alignItems: 'center'
   },
-  editingButton: {
-    padding: 8
+  reorderHintText: {
+    fontSize: 12,
+    color: '#999',
+    fontStyle: 'italic'
   },
-  editingButtonText: {
-    fontSize: 16,
-    fontWeight: '500'
+  reorderButtons: {
+    flexDirection: 'column',
+    gap: 2
   },
-  inlineInput: {
-    backgroundColor: '#f8f8f8',
+  reorderButton: {
+    width: 20,
+    height: 16,
+    borderRadius: 3,
+    backgroundColor: '#F8F9FA',
+    alignItems: 'center',
+    justifyContent: 'center',
     borderWidth: 1,
-    borderColor: '#e0e0e0',
-    borderRadius: 8,
-    padding: 12,
-    fontSize: 16,
-    minHeight: 44
+    borderColor: '#E9ECEF'
   },
-  inlineTextArea: {
-    backgroundColor: '#f8f8f8',
-    borderWidth: 1,
-    borderColor: '#e0e0e0',
-    borderRadius: 8,
-    padding: 12,
-    fontSize: 16,
-    minHeight: 100,
-    textAlignVertical: 'top'
+  reorderButtonDisabled: {
+    opacity: 0.3
   },
-  // Editing-only mode styles
-  editingOnlyContainer: {
-    flex: 1
+  linkItemImage: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: '#007AFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 8
   },
-  editingFieldContainer: {
-    backgroundColor: '#fff',
-    padding: 16,
-    flex: 1
+  linkItemImageText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#fff'
   },
-  editingFieldHeader: {
-    marginBottom: 16
+  fetchingText: {
+    fontSize: 12,
+    color: '#007AFF',
+    fontStyle: 'italic'
   },
-  editingFieldTitleContainer: {
+  linksFieldContent: {
+    flex: 1,
+    marginLeft: 12
+  },
+  linksPreview: {
+    marginTop: 4,
+    flexDirection: 'column'
+  },
+  linksPreviewContainer: {
+    marginTop: 4,
+    flexDirection: 'column',
+    width: '100%'
+  },
+  linkPreviewItem: {
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
+    marginBottom: 4
   },
-  editingFieldIcon: {
-    marginRight: 12
+  linkPreviewImage: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: '#007AFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 6
   },
-  editingFieldTitle: {
-    fontSize: 20,
+  linkPreviewImageText: {
+    fontSize: 10,
     fontWeight: '600',
-    color: '#000'
+    color: '#fff'
   },
-  editingFieldContent: {
+  linkPreviewTitle: {
+    fontSize: 13,
+    color: '#666',
     flex: 1
   },
-  newValueSection: {
+  linkPreviewContent: {
     flex: 1
   },
-  editingFieldLabel: {
-    fontSize: 16,
+  linkPreviewSubtitle: {
+    fontSize: 11,
+    color: '#999',
+    marginTop: 1
+  },
+  linkPreviewMore: {
+    fontSize: 12,
+    color: '#999',
+    fontStyle: 'italic'
+  },
+  // Location management styles
+  addLocationSection: {
+    marginBottom: 16
+  },
+  addLocationLabel: {
+    fontSize: 14,
     fontWeight: '600',
     color: '#333',
-    marginBottom: 12,
+    marginBottom: 8,
     fontFamily: fontFamilies.phuduSemiBold
   },
-  editingFieldInput: {
+  searchingText: {
+    fontSize: 12,
+    color: '#007AFF',
+    fontStyle: 'italic'
+  },
+  addLocationInputContainer: {
+    marginBottom: 8
+  },
+  addLocationInput: {
     backgroundColor: '#fff',
     borderWidth: 2,
     borderColor: '#e0e0e0',
@@ -871,18 +1514,129 @@ const styles = StyleSheet.create({
     padding: 16,
     fontSize: 17,
     minHeight: 52,
-    fontWeight: '400'
+    fontWeight: '400',
+    marginBottom: 8
   },
-  editingFieldTextArea: {
+  addLocationButtons: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  addLocationButton: {
+    flex: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  addLocationTrigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: '#F8F9FA',
+    borderRadius: 8,
+    marginBottom: 16
+  },
+  addLocationTriggerText: {
+    marginLeft: 8,
+    fontSize: 16,
+    color: '#007AFF',
+    fontWeight: '500'
+  },
+  searchResults: {
     backgroundColor: '#fff',
-    borderWidth: 2,
+    borderWidth: 1,
     borderColor: '#e0e0e0',
-    borderRadius: 12,
-    padding: 16,
-    fontSize: 17,
-    minHeight: 120,
-    textAlignVertical: 'top',
-    fontWeight: '400'
+    borderRadius: 8,
+    maxHeight: 200
+  },
+  searchResultItem: {
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0'
+  },
+  searchResultName: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#333',
+    marginBottom: 2
+  },
+  searchResultType: {
+    fontSize: 12,
+    color: '#666',
+    textTransform: 'capitalize'
+  },
+  locationsList: {
+    marginTop: 8
+  },
+  locationsListTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 12,
+    fontFamily: fontFamilies.phuduSemiBold
+  },
+  locationItem: {
+    marginBottom: 8
+  },
+  locationItemContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    backgroundColor: '#F8F9FA',
+    borderRadius: 8
+  },
+  locationItemDragHandle: {
+    marginRight: 12
+  },
+  locationItemInfo: {
+    flex: 1
+  },
+  locationItemHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4
+  },
+  locationItemName: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#333',
+    flex: 1
+  },
+  locationLabel: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    marginLeft: 8
+  },
+  locationLabelText: {
+    fontSize: 10,
+    fontWeight: '600',
+    color: '#fff',
+    textTransform: 'uppercase'
+  },
+  locationCoordinates: {
+    fontSize: 12,
+    color: '#666',
+    fontFamily: 'monospace'
+  },
+  locationItemActions: {
+    marginLeft: 8
+  },
+  locationItemButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: '#F8F9FA',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  locationItemDivider: {
+    height: 1,
+    backgroundColor: '#E9ECEF',
+    marginHorizontal: 12
   }
 });
 export default /*#__PURE__*/React.memo(AccountSettingsScreen);