@oxyhq/services 5.16.23 → 5.16.24

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

@@ -0,0 +1,2163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _OxyIcon = _interopRequireDefault(require("../components/icon/OxyIcon"));
+var _vectorIcons = require("@expo/vector-icons");
+var _sonner = require("../../lib/sonner");
+var _fonts = require("../styles/fonts");
+var _confirmAction = require("../utils/confirmAction");
+var _authStore = require("../stores/authStore");
+var _components = require("../components");
+var _useI18n = require("../hooks/useI18n");
+var _useThemeStyles = require("../hooks/useThemeStyles");
+var _useColorScheme = require("../hooks/use-color-scheme");
+var _theme = require("../constants/theme");
+var _themeUtils = require("../utils/themeUtils");
+var _useHapticPress = require("../hooks/use-haptic-press");
+var _EditDisplayNameModal = require("../components/profile/EditDisplayNameModal");
+var _EditUsernameModal = require("../components/profile/EditUsernameModal");
+var _EditEmailModal = require("../components/profile/EditEmailModal");
+var _EditBioModal = require("../components/profile/EditBioModal");
+var _EditLocationModal = require("../components/profile/EditLocationModal");
+var _EditLinksModal = require("../components/profile/EditLinksModal");
+var _userUtils = require("../utils/user-utils");
+var _cache = require("../../utils/cache");
+var _OxyContext = require("../context/OxyContext");
+var _useAccountQueries = require("../hooks/queries/useAccountQueries");
+var _useAccountMutations = require("../hooks/mutations/useAccountMutations");
+var _spacing = require("../constants/spacing");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+
+// Caches for link metadata and location searches
+const linkMetadataCache = new _cache.TTLCache(30 * 60 * 1000); // 30 minutes cache for link metadata
+const locationSearchCache = new _cache.TTLCache(60 * 60 * 1000); // 1 hour cache for location searches
+(0, _cache.registerCacheForCleanup)(linkMetadataCache);
+(0, _cache.registerCacheForCleanup)(locationSearchCache);
+const AccountSettingsScreen = ({
+  onClose,
+  theme,
+  goBack,
+  navigate,
+  initialField,
+  initialSection,
+  scrollTo
+}) => {
+  // Use useOxy() hook for OxyContext values
+  const {
+    oxyServices,
+    isAuthenticated,
+    activeSessionId
+  } = (0, _OxyContext.useOxy)();
+  const {
+    t
+  } = (0, _useI18n.useI18n)();
+  const normalizedTheme = (0, _themeUtils.normalizeTheme)(theme);
+
+  // Use TanStack Query for user data
+  const {
+    data: user,
+    isLoading: userLoading
+  } = (0, _useAccountQueries.useCurrentUser)({
+    enabled: isAuthenticated
+  });
+  const updateProfileMutation = (0, _useAccountMutations.useUpdateProfile)();
+  const uploadAvatarMutation = (0, _useAccountMutations.useUploadAvatar)();
+
+  // Fallback to store for backward compatibility
+  const userFromStore = (0, _authStore.useAuthStore)(state => state.user);
+  const finalUser = user || userFromStore;
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const isSaving = updateProfileMutation.isPending;
+  const isUpdatingAvatar = uploadAvatarMutation.isPending;
+  const [optimisticAvatarId, setOptimisticAvatarId] = (0, _react.useState)(null);
+  const scrollViewRef = (0, _react.useRef)(null);
+  const avatarSectionRef = (0, _react.useRef)(null);
+  const [avatarSectionY, setAvatarSectionY] = (0, _react.useState)(null);
+
+  // Section refs for navigation
+  const profilePictureSectionRef = (0, _react.useRef)(null);
+  const basicInfoSectionRef = (0, _react.useRef)(null);
+  const aboutSectionRef = (0, _react.useRef)(null);
+  const quickActionsSectionRef = (0, _react.useRef)(null);
+  const securitySectionRef = (0, _react.useRef)(null);
+
+  // Section Y positions for scrolling
+  const [profilePictureSectionY, setProfilePictureSectionY] = (0, _react.useState)(null);
+  const [basicInfoSectionY, setBasicInfoSectionY] = (0, _react.useState)(null);
+  const [aboutSectionY, setAboutSectionY] = (0, _react.useState)(null);
+  const [quickActionsSectionY, setQuickActionsSectionY] = (0, _react.useState)(null);
+  const [securitySectionY, setSecuritySectionY] = (0, _react.useState)(null);
+
+  // Animation refs
+  const saveButtonScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+
+  // Form state
+  const [displayName, setDisplayName] = (0, _react.useState)('');
+  const [lastName, setLastName] = (0, _react.useState)('');
+  const [username, setUsername] = (0, _react.useState)('');
+  const [email, setEmail] = (0, _react.useState)('');
+  const [bio, setBio] = (0, _react.useState)('');
+  const [location, setLocation] = (0, _react.useState)('');
+  const [links, setLinks] = (0, _react.useState)([]);
+  const [avatarFileId, setAvatarFileId] = (0, _react.useState)('');
+
+  // Modal visibility states
+  const [showEditDisplayNameModal, setShowEditDisplayNameModal] = (0, _react.useState)(false);
+  const [showEditUsernameModal, setShowEditUsernameModal] = (0, _react.useState)(false);
+  const [showEditEmailModal, setShowEditEmailModal] = (0, _react.useState)(false);
+  const [showEditBioModal, setShowEditBioModal] = (0, _react.useState)(false);
+  const [showEditLocationModal, setShowEditLocationModal] = (0, _react.useState)(false);
+  const [showEditLinksModal, setShowEditLinksModal] = (0, _react.useState)(false);
+
+  // Location and links state (for display only - modals handle editing)
+  const [locations, setLocations] = (0, _react.useState)([]);
+  const [linksMetadata, setLinksMetadata] = (0, _react.useState)([]);
+
+  // State for inline editing (used by old renderEditingField code)
+  const [editingField, setEditingField] = (0, _react.useState)(null);
+  const [tempDisplayName, setTempDisplayName] = (0, _react.useState)('');
+  const [tempLastName, setTempLastName] = (0, _react.useState)('');
+  const [tempUsername, setTempUsername] = (0, _react.useState)('');
+  const [tempEmail, setTempEmail] = (0, _react.useState)('');
+  const [tempBio, setTempBio] = (0, _react.useState)('');
+  const [tempLocation, setTempLocation] = (0, _react.useState)('');
+  const [tempLinks, setTempLinks] = (0, _react.useState)([]);
+  const [tempLocations, setTempLocations] = (0, _react.useState)([]);
+  const [tempLinksWithMetadata, setTempLinksWithMetadata] = (0, _react.useState)([]);
+  const [isAddingLocation, setIsAddingLocation] = (0, _react.useState)(false);
+  const [isSearchingLocations, setIsSearchingLocations] = (0, _react.useState)(false);
+  const [locationSearchResults, setLocationSearchResults] = (0, _react.useState)([]);
+  const [newLocationQuery, setNewLocationQuery] = (0, _react.useState)('');
+  const [isAddingLink, setIsAddingLink] = (0, _react.useState)(false);
+  const [isFetchingMetadata, setIsFetchingMetadata] = (0, _react.useState)(false);
+  const [newLinkUrl, setNewLinkUrl] = (0, _react.useState)('');
+
+  // Get theme colors using centralized hook
+  const colorScheme = (0, _useColorScheme.useColorScheme)();
+  const themeStyles = (0, _useThemeStyles.useThemeStyles)(theme || 'light', colorScheme);
+  const handlePressIn = (0, _useHapticPress.useHapticPress)();
+
+  // Extract colors for convenience - ensure it's always defined
+  // useThemeStyles always returns colors, but add safety check for edge cases
+  const colors = themeStyles.colors || _theme.Colors[(0, _themeUtils.normalizeColorScheme)(colorScheme, theme || 'light')];
+
+  // Memoize onBack handler to provide stable reference for Reanimated
+  const handleBack = (0, _react.useMemo)(() => {
+    return goBack || onClose || undefined;
+  }, [goBack, onClose]);
+
+  // Memoize animation function to prevent recreation on every render
+  const animateSaveButton = (0, _react.useCallback)((toValue, onComplete) => {
+    _reactNative.Animated.spring(saveButtonScale, {
+      toValue,
+      useNativeDriver: _reactNative.Platform.OS !== 'web',
+      tension: 150,
+      friction: 8
+    }).start(onComplete ? finished => {
+      if (finished) {
+        onComplete();
+      }
+    } : undefined);
+  }, [saveButtonScale]);
+
+  // Track initialization to prevent unnecessary resets
+  const isInitializedRef = (0, _react.useRef)(false);
+  const previousUserIdRef = (0, _react.useRef)(null);
+  const previousAvatarRef = (0, _react.useRef)(null);
+
+  // Load user data - only reset fields when user actually changes (not just avatar)
+  (0, _react.useEffect)(() => {
+    if (finalUser) {
+      const currentUserId = finalUser.id;
+      const currentAvatar = typeof finalUser.avatar === 'string' ? finalUser.avatar : '';
+      const isNewUser = previousUserIdRef.current !== currentUserId;
+      const isAvatarOnlyUpdate = !isNewUser && previousUserIdRef.current === currentUserId && previousAvatarRef.current !== currentAvatar && previousAvatarRef.current !== null;
+      const shouldInitialize = !isInitializedRef.current || isNewUser;
+
+      // Only reset all fields if it's a new user or first load
+      // Skip reset if it's just an avatar update
+      if (shouldInitialize && !isAvatarOnlyUpdate) {
+        const userDisplayName = typeof finalUser.name === 'string' ? finalUser.name : finalUser.name?.first || finalUser.name?.full || '';
+        const userLastName = typeof finalUser.name === 'object' ? finalUser.name?.last || '' : '';
+        setDisplayName(userDisplayName);
+        setLastName(userLastName);
+        setUsername(finalUser.username || '');
+        setEmail(finalUser.email || '');
+        setBio(finalUser.bio || '');
+        setLocation(finalUser.location || '');
+
+        // Handle locations - convert single location to array format
+        if (finalUser.locations && Array.isArray(finalUser.locations)) {
+          setLocations(finalUser.locations.map((loc, index) => ({
+            id: loc.id || `existing-${index}`,
+            name: loc.name,
+            label: loc.label,
+            coordinates: loc.coordinates
+          })));
+        } else if (finalUser.location) {
+          // Convert single location string to array format
+          setLocations([{
+            id: 'existing-0',
+            name: finalUser.location,
+            label: 'Location'
+          }]);
+        } else {
+          setLocations([]);
+        }
+
+        // Handle links - simple and direct like other fields
+        if (finalUser.linksMetadata && Array.isArray(finalUser.linksMetadata)) {
+          const urls = finalUser.linksMetadata.map(l => l.url);
+          setLinks(urls);
+          const metadataWithIds = finalUser.linksMetadata.map((link, index) => ({
+            ...link,
+            id: link.id || `existing-${index}`
+          }));
+          setLinksMetadata(metadataWithIds);
+        } else if (Array.isArray(finalUser.links)) {
+          const simpleLinks = finalUser.links.map(l => typeof l === 'string' ? l : l.link).filter(Boolean);
+          setLinks(simpleLinks);
+          const linksWithMetadata = simpleLinks.map((url, index) => ({
+            url,
+            title: url.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+            description: `Link to ${url}`,
+            image: undefined,
+            id: `existing-${index}`
+          }));
+          setLinksMetadata(linksWithMetadata);
+        } else if (finalUser.website) {
+          setLinks([finalUser.website]);
+          setLinksMetadata([{
+            url: finalUser.website,
+            title: finalUser.website.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+            description: `Link to ${finalUser.website}`,
+            image: undefined,
+            id: 'existing-0'
+          }]);
+        } else {
+          setLinks([]);
+          setLinksMetadata([]);
+        }
+        isInitializedRef.current = true;
+      }
+
+      // Update avatar only if it changed and we're not in optimistic/updating state
+      // This allows the server response to update the avatar without resetting other fields
+      // But don't override if we have a pending optimistic update
+      if (currentAvatar !== avatarFileId && !isUpdatingAvatar && !optimisticAvatarId) {
+        setAvatarFileId(currentAvatar);
+      }
+
+      // If we just finished updating and the server avatar matches our optimistic one, clear optimistic state
+      // Also clear if the server avatar matches our current avatarFileId (update completed)
+      if (isUpdatingAvatar === false && optimisticAvatarId) {
+        if (currentAvatar === optimisticAvatarId || currentAvatar === avatarFileId) {
+          setOptimisticAvatarId(null);
+        }
+      }
+      previousUserIdRef.current = currentUserId;
+      previousAvatarRef.current = currentAvatar;
+    }
+  }, [finalUser, avatarFileId, isUpdatingAvatar, optimisticAvatarId]);
+
+  // Set initial editing field if provided via props (e.g., from navigation)
+  // Use a ref to track if we've already set the initial field to avoid loops
+  const hasSetInitialFieldRef = (0, _react.useRef)(false);
+  const previousInitialFieldRef = (0, _react.useRef)(undefined);
+  const initialFieldTimeoutRef = (0, _react.useRef)(null);
+
+  // Delay constant for scroll completion
+  const SCROLL_DELAY_MS = 600;
+
+  // Helper functions for inline editing (legacy support)
+  const startEditing = (0, _react.useCallback)((field, initialValue) => {
+    setEditingField(field);
+    switch (field) {
+      case 'displayName':
+        setTempDisplayName(initialValue || displayName);
+        setTempLastName(lastName);
+        break;
+      case 'username':
+        setTempUsername(initialValue || username);
+        break;
+      case 'email':
+        setTempEmail(initialValue || email);
+        break;
+      case 'bio':
+        setTempBio(initialValue || bio);
+        break;
+      case 'location':
+        setTempLocations([...locations]);
+        break;
+      case 'links':
+        setTempLinksWithMetadata([...linksMetadata]);
+        break;
+    }
+  }, [displayName, lastName, username, email, bio, locations, linksMetadata]);
+  const cancelEditing = (0, _react.useCallback)(() => {
+    setEditingField(null);
+    setTempDisplayName('');
+    setTempLastName('');
+    setTempUsername('');
+    setTempEmail('');
+    setTempBio('');
+    setTempLocation('');
+    setTempLinks([]);
+    setTempLocations([]);
+    setTempLinksWithMetadata([]);
+    setIsAddingLocation(false);
+    setIsSearchingLocations(false);
+    setLocationSearchResults([]);
+    setNewLocationQuery('');
+    setIsAddingLink(false);
+    setIsFetchingMetadata(false);
+    setNewLinkUrl('');
+  }, []);
+  const saveField = (0, _react.useCallback)(async field => {
+    if (!field) return;
+    try {
+      switch (field) {
+        case 'displayName':
+          await updateProfileMutation.mutateAsync({
+            name: {
+              first: tempDisplayName,
+              last: tempLastName
+            }
+          });
+          setDisplayName(tempDisplayName);
+          setLastName(tempLastName);
+          break;
+        case 'username':
+          await updateProfileMutation.mutateAsync({
+            username: tempUsername
+          });
+          setUsername(tempUsername);
+          break;
+        case 'email':
+          await updateProfileMutation.mutateAsync({
+            email: tempEmail
+          });
+          setEmail(tempEmail);
+          break;
+        case 'bio':
+          await updateProfileMutation.mutateAsync({
+            bio: tempBio
+          });
+          setBio(tempBio);
+          break;
+        case 'location':
+          await updateProfileMutation.mutateAsync({
+            locations: tempLocations
+          });
+          setLocations(tempLocations);
+          break;
+        case 'links':
+          await updateProfileMutation.mutateAsync({
+            linksMetadata: tempLinksWithMetadata
+          });
+          setLinksMetadata(tempLinksWithMetadata);
+          setLinks(tempLinksWithMetadata.map(l => l.url));
+          break;
+      }
+      setEditingField(null);
+      _sonner.toast.success(t('editProfile.toasts.saved') || 'Saved');
+    } catch (error) {
+      // Error is already handled by mutation's onError
+    }
+  }, [tempDisplayName, tempLastName, tempUsername, tempEmail, tempBio, tempLocations, tempLinksWithMetadata, updateProfileMutation, t]);
+
+  // Helper to get current value for a field
+  const getFieldCurrentValue = (0, _react.useCallback)(field => {
+    switch (field) {
+      case 'displayName':
+        return displayName;
+      case 'username':
+        return username;
+      case 'email':
+        return email;
+      case 'bio':
+        return bio;
+      case 'location':
+      case 'links':
+      default:
+        return '';
+    }
+  }, [displayName, username, email, bio]);
+
+  // Handle initialSection prop to scroll to specific section
+  const hasScrolledToSectionRef = (0, _react.useRef)(false);
+  const previousInitialSectionRef = (0, _react.useRef)(undefined);
+  const SCROLL_OFFSET = 100; // Offset to show section near top of viewport
+
+  // Map section names to their Y positions
+  const sectionYPositions = (0, _react.useMemo)(() => ({
+    profilePicture: profilePictureSectionY,
+    basicInfo: basicInfoSectionY,
+    about: aboutSectionY,
+    quickActions: quickActionsSectionY,
+    security: securitySectionY
+  }), [profilePictureSectionY, basicInfoSectionY, aboutSectionY, quickActionsSectionY, securitySectionY]);
+  (0, _react.useEffect)(() => {
+    // If initialSection changed, reset the flag
+    if (previousInitialSectionRef.current !== initialSection) {
+      hasScrolledToSectionRef.current = false;
+      previousInitialSectionRef.current = initialSection;
+    }
+
+    // Scroll to the specified section if initialSection is provided and we haven't scrolled yet
+    if (initialSection && !hasScrolledToSectionRef.current) {
+      const sectionY = sectionYPositions[initialSection];
+      if (sectionY !== null && sectionY !== undefined && scrollTo) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            scrollTo(Math.max(0, sectionY - SCROLL_OFFSET), true);
+            hasScrolledToSectionRef.current = true;
+          });
+        });
+      }
+    }
+  }, [initialSection, sectionYPositions]);
+  const handleSave = async () => {
+    if (!finalUser) return;
+    try {
+      animateSaveButton(0.95); // Scale down slightly for animation
+
+      const updates = {
+        username,
+        email,
+        bio,
+        location: locations.length > 0 ? locations[0].name : '',
+        // Keep backward compatibility
+        locations: locations.length > 0 ? locations : undefined,
+        links,
+        linksMetadata: linksMetadata.length > 0 ? linksMetadata : undefined
+      };
+
+      // Handle name field
+      if (displayName || lastName) {
+        updates.name = {
+          first: displayName,
+          last: lastName
+        };
+      }
+
+      // Handle avatar
+      if (avatarFileId !== (typeof finalUser.avatar === 'string' ? finalUser.avatar : '')) {
+        updates.avatar = avatarFileId;
+      }
+      await updateProfileMutation.mutateAsync(updates);
+      _sonner.toast.success(t('editProfile.toasts.profileUpdated') || 'Profile updated successfully');
+      animateSaveButton(1); // Scale back to normal
+
+      if (onClose) {
+        onClose();
+      } else if (goBack) {
+        goBack();
+      }
+    } catch (error) {
+      // Error is already handled by mutation's onError
+      animateSaveButton(1); // Scale back to normal on error
+    }
+  };
+  const handleAvatarRemove = () => {
+    (0, _confirmAction.confirmAction)(t('editProfile.confirms.removeAvatar') || 'Remove your profile picture?', () => {
+      setAvatarFileId('');
+      _sonner.toast.success(t('editProfile.toasts.avatarRemoved') || 'Avatar removed');
+    });
+  };
+  const {
+    openAvatarPicker
+  } = (0, _OxyContext.useOxy)();
+
+  // Handlers to open modals
+  const handleOpenDisplayNameModal = (0, _react.useCallback)(() => setShowEditDisplayNameModal(true), []);
+  const handleOpenUsernameModal = (0, _react.useCallback)(() => setShowEditUsernameModal(true), []);
+  const handleOpenEmailModal = (0, _react.useCallback)(() => setShowEditEmailModal(true), []);
+  const handleOpenBioModal = (0, _react.useCallback)(() => setShowEditBioModal(true), []);
+  const handleOpenLocationModal = (0, _react.useCallback)(() => setShowEditLocationModal(true), []);
+  const handleOpenLinksModal = (0, _react.useCallback)(() => setShowEditLinksModal(true), []);
+
+  // Handler to refresh data after modal saves
+  // Note: Access user directly from store when invoked to get latest value,
+  // not from closure which may be stale after modal saves update the backend
+  const handleModalSave = (0, _react.useCallback)(() => {
+    // Get fresh user data from store to ensure we have the latest values
+    // after the modal's save operation updates the backend
+    // Read from store directly (not from closure) to avoid stale data
+    const currentUser = _authStore.useAuthStore.getState().user;
+
+    // Reload user data to reflect changes
+    if (currentUser) {
+      const userDisplayName = typeof currentUser.name === 'string' ? currentUser.name : currentUser.name?.first || currentUser.name?.full || '';
+      const userLastName = typeof currentUser.name === 'object' ? currentUser.name?.last || '' : '';
+      setDisplayName(userDisplayName);
+      setLastName(userLastName);
+      setUsername(currentUser.username || '');
+      setEmail(currentUser.email || '');
+      setBio(currentUser.bio || '');
+
+      // Reload locations and links
+      if (currentUser.locations && Array.isArray(currentUser.locations)) {
+        setLocations(currentUser.locations.map((loc, index) => ({
+          id: loc.id || `existing-${index}`,
+          name: loc.name,
+          label: loc.label,
+          coordinates: loc.coordinates
+        })));
+      } else if (currentUser.location) {
+        setLocations([{
+          id: 'existing-0',
+          name: currentUser.location,
+          label: 'Location'
+        }]);
+      } else {
+        setLocations([]);
+      }
+      if (currentUser.linksMetadata && Array.isArray(currentUser.linksMetadata)) {
+        setLinksMetadata(currentUser.linksMetadata.map((link, index) => ({
+          ...link,
+          id: link.id || `existing-${index}`
+        })));
+      } else {
+        setLinksMetadata([]);
+      }
+    }
+  }, []); // Empty dependency array - callback reads fresh data from store at call time
+
+  // Handle initialField prop - open appropriate modal
+  (0, _react.useEffect)(() => {
+    if (initialField) {
+      // Special handling for avatar - open avatar picker directly
+      if (initialField === 'avatar') {
+        setTimeout(() => {
+          openAvatarPicker();
+        }, 300);
+      } else {
+        // Open appropriate modal
+        setTimeout(() => {
+          switch (initialField) {
+            case 'displayName':
+              setShowEditDisplayNameModal(true);
+              break;
+            case 'username':
+              setShowEditUsernameModal(true);
+              break;
+            case 'email':
+              setShowEditEmailModal(true);
+              break;
+            case 'bio':
+              setShowEditBioModal(true);
+              break;
+            case 'location':
+              setShowEditLocationModal(true);
+              break;
+            case 'links':
+              setShowEditLinksModal(true);
+              break;
+          }
+        }, 300);
+      }
+    }
+  }, [initialField, openAvatarPicker]);
+
+  // Removed fetchLinkMetadata - now handled by EditLinksModal
+  const _fetchLinkMetadata = async url => {
+    // Check cache first
+    const cacheKey = url.toLowerCase().trim();
+    const cached = linkMetadataCache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    try {
+      setIsFetchingMetadata(true);
+
+      // Use the backend API to fetch metadata
+      const metadata = await oxyServices.fetchLinkMetadata(url);
+      const result = {
+        ...metadata,
+        id: Date.now().toString()
+      };
+
+      // Cache the result
+      linkMetadataCache.set(cacheKey, result);
+      return result;
+    } catch (error) {
+      // Fallback to basic metadata
+      const fallback = {
+        url: url.startsWith('http') ? url : 'https://' + url,
+        title: url.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+        description: 'Link',
+        image: undefined,
+        id: Date.now().toString()
+      };
+      // Cache fallback too (shorter TTL)
+      linkMetadataCache.set(cacheKey, fallback, 5 * 60 * 1000); // 5 minutes for fallbacks
+      return fallback;
+    } finally {
+      setIsFetchingMetadata(false);
+    }
+  };
+
+  // Helper functions for inline editing (legacy support - still used by renderEditingField)
+  const searchLocations = async query => {
+    if (!query.trim() || query.length < 3) {
+      setLocationSearchResults([]);
+      return;
+    }
+
+    // Check cache first
+    const cacheKey = query.toLowerCase().trim();
+    const cached = locationSearchCache.get(cacheKey);
+    if (cached) {
+      setLocationSearchResults(cached);
+      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();
+
+      // Cache the results
+      locationSearchCache.set(cacheKey, data);
+      setLocationSearchResults(data);
+    } catch (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: Number.parseFloat(locationData.lat),
+        lon: Number.parseFloat(locationData.lon)
+      }
+    };
+    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();
+    const metadata = await _fetchLinkMetadata(url);
+    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;
+    });
+  };
+
+  // Memoize display name for avatar
+  const displayNameForAvatar = (0, _react.useMemo)(() => (0, _userUtils.getDisplayName)(finalUser), [finalUser]);
+
+  // Legacy renderEditingField function (fallback)
+  const renderEditingField = type => {
+    if (!type) return null;
+    if (type === 'displayName') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.editingFieldContainer, {
+          backgroundColor: colors.background
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.editingFieldContent,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.newValueSection,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.editingFieldHeader,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.editingFieldLabel, {
+                  color: colors.text
+                }],
+                children: "Edit Full Name"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: {
+                flexDirection: 'row',
+                gap: 12
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: {
+                  flex: 1
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.editingFieldLabel,
+                  children: "First Name"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+                  style: styles.editingFieldInput,
+                  value: tempDisplayName,
+                  onChangeText: setTempDisplayName,
+                  placeholder: "Enter your first name",
+                  placeholderTextColor: colors.secondaryText,
+                  autoFocus: true,
+                  selectionColor: themeStyles.primaryColor
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: {
+                  flex: 1
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.editingFieldLabel,
+                  children: "Last Name"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+                  style: styles.editingFieldInput,
+                  value: tempLastName,
+                  onChangeText: setTempLastName,
+                  placeholder: "Enter your last name",
+                  placeholderTextColor: colors.secondaryText,
+                  selectionColor: themeStyles.primaryColor
+                })]
+              })]
+            })]
+          })
+        })
+      });
+    }
+    if (type === 'location') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.editingFieldContainer, {
+          backgroundColor: colors.background
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.editingFieldContent,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.newValueSection,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.editingFieldHeader,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.editingFieldLabel, {
+                  color: colors.text
+                }],
+                children: "Manage Your Locations"
+              })
+            }), isAddingLocation ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.addLocationSection,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                style: styles.addLocationLabel,
+                children: ["Add New Location", isSearchingLocations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.searchingText, {
+                    color: colors.iconSecurity
+                  }],
+                  children: " \u2022 Searching..."
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.addLocationInputContainer,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+                  style: styles.addLocationInput,
+                  value: newLocationQuery,
+                  onChangeText: text => {
+                    setNewLocationQuery(text);
+                    searchLocations(text);
+                  },
+                  placeholder: "Search for a location...",
+                  placeholderTextColor: colors.secondaryText,
+                  autoFocus: true,
+                  selectionColor: themeStyles.primaryColor
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.addLocationButtons,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                    style: [styles.addLocationButton, styles.cancelButton],
+                    onPress: () => {
+                      setIsAddingLocation(false);
+                      setNewLocationQuery('');
+                      setLocationSearchResults([]);
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      style: styles.cancelButtonText,
+                      children: "Cancel"
+                    })
+                  })
+                })]
+              }), locationSearchResults.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.searchResults,
+                children: locationSearchResults.map(result => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+                  style: styles.searchResultItem,
+                  onPress: () => addLocation(result),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.searchResultName,
+                    numberOfLines: 2,
+                    children: result.display_name
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.searchResultType,
+                    children: result.type
+                  })]
+                }, result.place_id))
+              })]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              style: styles.addLocationTrigger,
+              onPress: () => setIsAddingLocation(true),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                name: "add",
+                size: 20,
+                color: themeStyles.primaryColor
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.addLocationTriggerText, {
+                  color: colors.iconSecurity
+                }],
+                children: "Add a new location"
+              })]
+            }), tempLocations.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.locationsList,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                style: styles.locationsListTitle,
+                children: ["Your Locations (", tempLocations.length, ")"]
+              }), tempLocations.map((location, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.locationItem,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.locationItemContent,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    style: styles.locationItemDragHandle,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                      style: styles.reorderButtons,
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                        style: [styles.reorderButton, index === 0 && styles.reorderButtonDisabled],
+                        onPress: () => index > 0 && moveLocation(index, index - 1),
+                        disabled: index === 0,
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                          name: "chevron-up",
+                          size: 12,
+                          color: index === 0 ? "#ccc" : "#666"
+                        })
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                          name: "chevron-down",
+                          size: 12,
+                          color: index === tempLocations.length - 1 ? "#ccc" : "#666"
+                        })
+                      })]
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                    style: styles.locationItemInfo,
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                      style: styles.locationItemHeader,
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                        style: styles.locationItemName,
+                        numberOfLines: 1,
+                        children: location.name
+                      }), location.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                        style: [styles.locationLabel, {
+                          backgroundColor: colors.iconSecurity
+                        }],
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                          style: styles.locationLabelText,
+                          children: location.label
+                        })
+                      })]
+                    }), location.coordinates && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                      style: styles.locationCoordinates,
+                      children: [location.coordinates.lat.toFixed(4), ", ", location.coordinates.lon.toFixed(4)]
+                    })]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    style: styles.locationItemActions,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                      style: styles.locationItemButton,
+                      onPress: () => removeLocation(location.id),
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                        name: "trash",
+                        size: 14,
+                        color: "#FF3B30"
+                      })
+                    })
+                  })]
+                }), index < tempLocations.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: styles.locationItemDivider
+                })]
+              }, location.id)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.reorderHint,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.reorderHintText,
+                  children: "Use \u2191\u2193 buttons to reorder your locations"
+                })
+              })]
+            })]
+          })
+        })
+      });
+    }
+    if (type === 'links') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.editingFieldContainer, {
+          backgroundColor: colors.background
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.editingFieldContent,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.newValueSection,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.editingFieldHeader,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.editingFieldLabel, {
+                  color: colors.text
+                }],
+                children: "Manage Your Links"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+              items: [
+              // Add new link item
+              ...(isAddingLink ? [{
+                id: 'add-link-input',
+                icon: 'plus',
+                iconColor: colors.sidebarIconSharing,
+                title: 'Add New Link',
+                subtitle: isFetchingMetadata ? 'Fetching metadata...' : 'Enter URL to add a new link',
+                customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.addLinkInputContainer,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+                    style: styles.addLinkInput,
+                    value: newLinkUrl,
+                    onChangeText: setNewLinkUrl,
+                    placeholder: "Enter URL (e.g., https://example.com)",
+                    placeholderTextColor: colors.secondaryText,
+                    keyboardType: "url",
+                    autoFocus: true,
+                    selectionColor: themeStyles.primaryColor
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                    style: styles.addLinkButtons,
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                      style: [styles.addLinkButton, styles.cancelButton],
+                      onPress: () => {
+                        setIsAddingLink(false);
+                        setNewLinkUrl('');
+                      },
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                        style: styles.cancelButtonText,
+                        children: "Cancel"
+                      })
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                      style: [styles.addLinkButton, styles.addButton, {
+                        backgroundColor: colors.iconSecurity,
+                        opacity: isFetchingMetadata ? 0.5 : 1
+                      }],
+                      onPress: addLink,
+                      disabled: isFetchingMetadata,
+                      children: isFetchingMetadata ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+                        size: "small",
+                        color: "#fff"
+                      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                        style: styles.addButtonText,
+                        children: "Add"
+                      })
+                    })]
+                  })]
+                })
+              }] : [{
+                id: 'add-link-trigger',
+                icon: 'plus',
+                iconColor: colors.sidebarIconSharing,
+                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,
+                customIcon: link.image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                  source: {
+                    uri: link.image
+                  },
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: 18
+                  }
+                }) : undefined,
+                icon: !link.image ? 'link-variant' : undefined,
+                iconColor: colors.sidebarIconSharing,
+                title: link.title || link.url,
+                subtitle: link.description && link.description !== link.title ? link.description : link.url,
+                customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.linkItemActions,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                    style: styles.reorderButtons,
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                      style: [styles.reorderButton, index === 0 && styles.reorderButtonDisabled],
+                      onPress: () => index > 0 && moveLink(index, index - 1),
+                      disabled: index === 0,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                        name: "chevron-up",
+                        size: 12,
+                        color: index === 0 ? "#ccc" : "#666"
+                      })
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                        name: "chevron-down",
+                        size: 12,
+                        color: index === tempLinksWithMetadata.length - 1 ? "#ccc" : "#666"
+                      })
+                    })]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                    style: styles.linkItemButton,
+                    onPress: () => removeLink(link.id),
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyIcon.default, {
+                      name: "trash",
+                      size: 14,
+                      color: "#FF3B30"
+                    })
+                  })]
+                })
+              }))]
+            }), tempLinksWithMetadata.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.reorderHint,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.reorderHintText,
+                children: "Use \u2191\u2193 buttons to reorder your links"
+              })
+            })]
+          })
+        })
+      });
+    }
+    const fieldConfig = {
+      displayName: {
+        label: 'Display Name',
+        value: displayName,
+        placeholder: 'Enter your display name',
+        icon: 'account',
+        color: colors.iconPersonalInfo,
+        multiline: false,
+        keyboardType: 'default'
+      },
+      username: {
+        label: 'Username',
+        value: username,
+        placeholder: 'Choose a username',
+        icon: 'at',
+        color: colors.iconData,
+        multiline: false,
+        keyboardType: 'default'
+      },
+      email: {
+        label: 'Email',
+        value: email,
+        placeholder: 'Enter your email address',
+        icon: 'mail',
+        color: colors.iconStorage,
+        multiline: false,
+        keyboardType: 'email-address'
+      },
+      bio: {
+        label: 'Bio',
+        value: bio,
+        placeholder: 'Tell people about yourself...',
+        icon: 'file-document',
+        color: colors.iconPersonalInfo,
+        multiline: true,
+        keyboardType: 'default'
+      },
+      location: {
+        label: 'Location',
+        value: location,
+        placeholder: 'Enter your location',
+        icon: 'location',
+        color: colors.iconSharing,
+        multiline: false,
+        keyboardType: 'default'
+      },
+      links: {
+        label: 'Links',
+        value: links.join(', '),
+        placeholder: 'Enter your links (comma separated)',
+        icon: 'link',
+        color: colors.iconPersonalInfo,
+        multiline: false,
+        keyboardType: 'url'
+      }
+    };
+    const config = fieldConfig[type];
+    if (!config) return null;
+    const tempValue = (() => {
+      switch (type) {
+        case 'displayName':
+          return tempDisplayName;
+        case 'username':
+          return tempUsername;
+        case 'email':
+          return tempEmail;
+        case 'bio':
+          return tempBio;
+        case 'location':
+          return tempLocation;
+        case 'links':
+          return tempLinks.join(', ');
+        default:
+          return '';
+      }
+    })();
+    const setTempValue = text => {
+      switch (type) {
+        case 'displayName':
+          setTempDisplayName(text);
+          break;
+        case 'username':
+          setTempUsername(text);
+          break;
+        case 'email':
+          setTempEmail(text);
+          break;
+        case 'bio':
+          setTempBio(text);
+          break;
+        case 'location':
+          setTempLocation(text);
+          break;
+        case 'links':
+          setTempLinks(text.split(',').map(s => s.trim()).filter(Boolean));
+          break;
+      }
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.editingFieldContainer, {
+        backgroundColor: colors.background
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.editingFieldContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.newValueSection,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.editingFieldHeader,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.editingFieldLabel, {
+                color: colors.text
+              }],
+              children: config.label
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            style: [config.multiline ? styles.editingFieldTextArea : styles.editingFieldInput, {
+              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 ? '#636366' : '#8E8E93',
+            multiline: config.multiline,
+            numberOfLines: config.multiline ? 6 : 1,
+            keyboardType: config.keyboardType,
+            autoFocus: true,
+            selectionColor: themeStyles.primaryColor
+          })]
+        })
+      })
+    });
+  };
+  if (userLoading || !isAuthenticated) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.container, {
+        backgroundColor: themeStyles.backgroundColor,
+        justifyContent: 'center'
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        size: "large",
+        color: themeStyles.primaryColor
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: themeStyles.backgroundColor
+    }],
+    children: [editingField ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.editingHeader, {
+        backgroundColor: colors.background,
+        borderBottomColor: colors.border
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.editingHeaderContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: [styles.editingBackButton, {
+            backgroundColor: colors.card
+          }],
+          onPress: cancelEditing,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "chevron-back",
+            size: 20,
+            color: colors.tint
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.editingTitleContainer
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: [styles.editingSaveButton, {
+            opacity: isSaving ? 0.5 : 1,
+            backgroundColor: colors.card
+          }],
+          onPress: () => saveField(editingField),
+          disabled: isSaving,
+          children: isSaving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+            size: "small",
+            color: colors.tint
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.editingSaveButtonText, {
+              color: colors.tint
+            }],
+            children: "Save"
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.editingHeaderBottom,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.editingIconContainer, {
+            backgroundColor: editingField === 'displayName' ? `${colors.sidebarIconPersonalInfo}20` : editingField === 'username' ? `${colors.sidebarIconData}20` : editingField === 'email' ? `${colors.sidebarIconSecurity}20` : editingField === 'bio' ? `${colors.sidebarIconPersonalInfo}20` : editingField === 'location' ? `${colors.sidebarIconSharing}20` : editingField === 'links' ? `${colors.sidebarIconPersonalInfo}20` : `${colors.tint}20`
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.MaterialCommunityIcons, {
+            name: editingField === 'displayName' ? 'account-outline' : editingField === 'username' ? 'at' : editingField === 'email' ? 'email-outline' : editingField === 'bio' ? 'text-box-outline' : editingField === 'location' ? 'map-marker-outline' : editingField === 'links' ? 'link-variant' : 'account-outline',
+            size: 28,
+            color: editingField === 'displayName' ? colors.sidebarIconPersonalInfo : editingField === 'username' ? colors.sidebarIconData : editingField === 'email' ? colors.sidebarIconSecurity : editingField === 'bio' ? colors.sidebarIconPersonalInfo : editingField === 'location' ? colors.sidebarIconSharing : editingField === 'links' ? colors.sidebarIconPersonalInfo : colors.tint
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.editingBottomTitle, {
+            color: colors.text
+          }],
+          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'
+        })]
+      })]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      ref: scrollViewRef,
+      style: editingField ? styles.contentEditing : styles.content,
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      children: editingField ?
+      /*#__PURE__*/
+      // Show only the editing interface when editing
+      (0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.editingOnlyContainer,
+        children: renderEditingField(editingField)
+      }) :
+      /*#__PURE__*/
+      // Show all settings when not editing
+      (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.headerContainer, styles.headerSection],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.modernTitle, {
+              color: themeStyles.textColor,
+              marginBottom: 0,
+              marginTop: 0
+            }],
+            children: t('accountOverview.items.editProfile.title') || t('editProfile.title') || 'Edit Profile'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.modernSubtitle, {
+              color: colors.secondaryText,
+              marginBottom: 0,
+              marginTop: 0
+            }],
+            children: t('accountOverview.items.editProfile.subtitle') || t('editProfile.subtitle') || 'Manage your profile and preferences'
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          ref: ref => {
+            avatarSectionRef.current = ref;
+            profilePictureSectionRef.current = ref;
+          },
+          style: styles.section,
+          onLayout: event => {
+            const {
+              y
+            } = event.nativeEvent.layout;
+            setAvatarSectionY(y);
+            setProfilePictureSectionY(y);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.sectionTitle, {
+              color: colors.secondaryText
+            }],
+            children: t('editProfile.sections.profilePicture') || 'PROFILE PICTURE'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.groupedSectionWrapper,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+              items: [{
+                id: 'profile-photo',
+                customIcon: optimisticAvatarId || avatarFileId ? isUpdatingAvatar ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+                  style: {
+                    position: 'relative',
+                    width: 36,
+                    height: 36
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Image, {
+                    source: {
+                      uri: oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb')
+                    },
+                    style: {
+                      width: 36,
+                      height: 36,
+                      borderRadius: 18,
+                      opacity: 0.6
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    style: {
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      backgroundColor: colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.7)',
+                      borderRadius: 18
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+                      size: "small",
+                      color: colors.tint
+                    })
+                  })]
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                  source: {
+                    uri: oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb')
+                  },
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: 18
+                  }
+                }) : undefined,
+                icon: !(optimisticAvatarId || avatarFileId) ? 'account-outline' : undefined,
+                iconColor: colors.sidebarIconPersonalInfo,
+                title: 'Profile Photo',
+                subtitle: isUpdatingAvatar ? 'Updating profile picture...' : avatarFileId ? 'Tap to change your profile picture' : 'Tap to add a profile picture',
+                onPress: isUpdatingAvatar ? undefined : openAvatarPicker,
+                disabled: isUpdatingAvatar
+              }, ...(avatarFileId && !isUpdatingAvatar ? [{
+                id: 'remove-profile-photo',
+                icon: 'delete-outline',
+                iconColor: colors.sidebarIconSharing,
+                title: 'Remove Photo',
+                subtitle: 'Delete current profile picture',
+                onPress: handleAvatarRemove
+              }] : [])]
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          ref: basicInfoSectionRef,
+          style: styles.section,
+          onLayout: event => {
+            const {
+              y
+            } = event.nativeEvent.layout;
+            setBasicInfoSectionY(y);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.sectionTitle, {
+              color: colors.secondaryText
+            }],
+            children: t('editProfile.sections.basicInfo') || 'BASIC INFORMATION'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.groupedSectionWrapper,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+              items: [{
+                id: 'display-name',
+                icon: 'account-outline',
+                iconColor: colors.sidebarIconPersonalInfo,
+                title: t('editProfile.items.displayName.title') || 'Display Name',
+                subtitle: [displayName, lastName].filter(Boolean).join(' ') || t('editProfile.items.displayName.add') || 'Add your display name',
+                onPress: handleOpenDisplayNameModal
+              }, {
+                id: 'username',
+                icon: 'at',
+                iconColor: colors.sidebarIconData,
+                title: t('editProfile.items.username.title') || 'Username',
+                subtitle: username || t('editProfile.items.username.choose') || 'Choose a username',
+                onPress: handleOpenUsernameModal
+              }, {
+                id: 'email',
+                icon: 'email-outline',
+                iconColor: colors.sidebarIconSecurity,
+                title: t('editProfile.items.email.title') || 'Email',
+                subtitle: email || t('editProfile.items.email.add') || 'Add your email address',
+                onPress: handleOpenEmailModal
+              }]
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          ref: aboutSectionRef,
+          style: styles.section,
+          onLayout: event => {
+            const {
+              y
+            } = event.nativeEvent.layout;
+            setAboutSectionY(y);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.sectionTitle, {
+              color: colors.secondaryText
+            }],
+            children: t('editProfile.sections.about') || 'ABOUT YOU'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.groupedSectionWrapper,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+              items: [{
+                id: 'bio',
+                icon: 'text-box-outline',
+                iconColor: colors.sidebarIconPersonalInfo,
+                title: t('editProfile.items.bio.title') || 'Bio',
+                subtitle: bio || t('editProfile.items.bio.placeholder') || 'Tell people about yourself',
+                onPress: handleOpenBioModal
+              }, {
+                id: 'locations',
+                icon: 'map-marker-outline',
+                iconColor: colors.sidebarIconSharing,
+                title: t('editProfile.items.locations.title') || 'Locations',
+                subtitle: locations.length > 0 ? locations.length === 1 ? t('editProfile.items.locations.count', {
+                  count: locations.length
+                }) || `${locations.length} location added` : t('editProfile.items.locations.count_plural', {
+                  count: locations.length
+                }) || `${locations.length} locations added` : t('editProfile.items.locations.add') || 'Add your locations',
+                onPress: handleOpenLocationModal
+              }, {
+                id: 'links',
+                icon: 'link-variant',
+                iconColor: colors.sidebarIconSharing,
+                title: t('editProfile.items.links.title') || 'Links',
+                subtitle: linksMetadata.length > 0 ? linksMetadata.length === 1 ? t('editProfile.items.links.count', {
+                  count: linksMetadata.length
+                }) || `${linksMetadata.length} link added` : t('editProfile.items.links.count_plural', {
+                  count: linksMetadata.length
+                }) || `${linksMetadata.length} links added` : t('editProfile.items.links.add') || 'Add your links',
+                onPress: handleOpenLinksModal
+              }]
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          ref: quickActionsSectionRef,
+          style: styles.section,
+          onLayout: event => {
+            const {
+              y
+            } = event.nativeEvent.layout;
+            setQuickActionsSectionY(y);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.sectionTitle, {
+              color: colors.secondaryText
+            }],
+            children: t('editProfile.sections.quickActions') || 'QUICK ACTIONS'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.groupedSectionWrapper,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
+              items: [{
+                id: 'preview-profile',
+                icon: 'eye',
+                iconColor: colors.sidebarIconHome,
+                title: t('editProfile.items.previewProfile.title') || 'Preview Profile',
+                subtitle: t('editProfile.items.previewProfile.subtitle') || 'See how your profile looks to others',
+                onPress: () => navigate?.('Profile', {
+                  userId: finalUser?.id
+                })
+              }, {
+                id: 'privacy-settings',
+                icon: 'shield-check',
+                iconColor: colors.sidebarIconSecurity,
+                title: t('editProfile.items.privacySettings.title') || 'Privacy Settings',
+                subtitle: t('editProfile.items.privacySettings.subtitle') || 'Control who can see your profile',
+                onPress: () => navigate?.('PrivacySettings')
+              }, {
+                id: 'verify-account',
+                icon: 'check-circle',
+                iconColor: colors.sidebarIconPersonalInfo,
+                title: t('editProfile.items.verifyAccount.title') || 'Verify Account',
+                subtitle: t('editProfile.items.verifyAccount.subtitle') || 'Get a verified badge',
+                onPress: () => navigate?.('AccountVerification')
+              }]
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          ref: securitySectionRef,
+          style: styles.section,
+          onLayout: event => {
+            const {
+              y
+            } = event.nativeEvent.layout;
+            setSecuritySectionY(y);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.sectionTitle, {
+              color: colors.secondaryText
+            }],
+            children: t('editProfile.sections.security') || 'SECURITY'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.groupedSectionWrapper
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditDisplayNameModal.EditDisplayNameModal, {
+      visible: showEditDisplayNameModal,
+      onClose: () => setShowEditDisplayNameModal(false),
+      initialDisplayName: displayName,
+      initialLastName: lastName,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditUsernameModal.EditUsernameModal, {
+      visible: showEditUsernameModal,
+      onClose: () => setShowEditUsernameModal(false),
+      initialValue: username,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditEmailModal.EditEmailModal, {
+      visible: showEditEmailModal,
+      onClose: () => setShowEditEmailModal(false),
+      initialValue: email,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditBioModal.EditBioModal, {
+      visible: showEditBioModal,
+      onClose: () => setShowEditBioModal(false),
+      initialValue: bio,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditLocationModal.EditLocationModal, {
+      visible: showEditLocationModal,
+      onClose: () => setShowEditLocationModal(false),
+      initialLocations: locations,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditLinksModal.EditLinksModal, {
+      visible: showEditLinksModal,
+      onClose: () => setShowEditLinksModal(false),
+      initialLinks: linksMetadata,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    })]
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexShrink: 1,
+    width: '100%'
+  },
+  content: {
+    flexShrink: 1
+  },
+  scrollView: {
+    flexShrink: 1
+  },
+  contentEditing: {
+    flex: 1,
+    padding: 0
+  },
+  scrollContent: (0, _spacing.createScreenContentStyle)(_spacing.HEADER_PADDING_TOP_SETTINGS),
+  headerContainer: {
+    width: '100%',
+    maxWidth: 420,
+    alignSelf: 'center',
+    marginBottom: _spacing.SECTION_GAP_LARGE
+  },
+  headerSection: {
+    alignItems: 'flex-start',
+    width: '100%',
+    gap: _spacing.COMPONENT_GAP
+  },
+  modernTitle: {
+    fontFamily: _fonts.fontFamilies.phuduBold,
+    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 50.4,
+    // 42 * 1.2
+    textAlign: 'left',
+    letterSpacing: -0.5
+  },
+  modernSubtitle: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    maxWidth: 320,
+    alignSelf: 'flex-start',
+    opacity: 0.8
+  },
+  section: {
+    marginBottom: _spacing.SECTION_GAP_LARGE
+  },
+  sectionTitle: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#8E8E93',
+    marginBottom: 8,
+    marginTop: 4,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    fontFamily: _fonts.fontFamilies.phuduSemiBold
+  },
+  groupedSectionWrapper: {
+    backgroundColor: 'transparent'
+  },
+  userIcon: {
+    marginRight: 12
+  },
+  // Editing-only mode styles
+  editingOnlyContainer: {
+    flex: 1
+  },
+  editingFieldContainer: {
+    backgroundColor: '#fff',
+    padding: 16,
+    flex: 1
+  },
+  editingFieldHeader: {
+    marginBottom: 8,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  editingFieldTitleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  editingFieldIcon: {
+    marginRight: 12
+  },
+  editingFieldTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#000'
+  },
+  editingFieldContent: {
+    flex: 1
+  },
+  newValueSection: {
+    flex: 1
+  },
+  editingFieldLabel: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 8,
+    fontFamily: _fonts.fontFamilies.phuduSemiBold,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5
+  },
+  editingFieldInput: {
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderRadius: 14,
+    padding: 16,
+    fontSize: 17,
+    minHeight: 52,
+    fontWeight: '400',
+    letterSpacing: -0.2
+  },
+  editingFieldDescription: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 16
+  },
+  primaryButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    // backgroundColor should be applied inline using colors.iconSecurity
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 10
+  },
+  primaryButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  editingFieldTextArea: {
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderRadius: 14,
+    padding: 16,
+    fontSize: 17,
+    minHeight: 120,
+    textAlignVertical: 'top',
+    fontWeight: '400',
+    letterSpacing: -0.2
+  },
+  // Custom editing header styles
+  editingHeader: {
+    paddingTop: _reactNative.Platform.OS === 'ios' ? 50 : 16,
+    paddingBottom: 0,
+    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
+  },
+  editingHeaderContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    minHeight: 44
+  },
+  editingBackButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12
+  },
+  editingTitleContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-end',
+    paddingBottom: 8
+  },
+  editingTitleIcon: {
+    marginBottom: 4,
+    alignSelf: 'flex-start'
+  },
+  editingTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    fontFamily: _fonts.fontFamilies.phuduBold,
+    letterSpacing: -0.3,
+    lineHeight: 22,
+    textAlign: 'left',
+    alignSelf: 'flex-start'
+  },
+  editingSaveButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    minWidth: 60,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  editingSaveButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    fontFamily: _fonts.fontFamilies.phuduSemiBold
+  },
+  editingHeaderBottom: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    paddingHorizontal: 20,
+    paddingBottom: 20,
+    paddingTop: 24
+  },
+  editingIconContainer: {
+    width: 64,
+    height: 64,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 16
+  },
+  editingBottomTitle: {
+    fontSize: 28,
+    fontWeight: '700',
+    fontFamily: _fonts.fontFamilies.phuduBold,
+    letterSpacing: -0.5,
+    lineHeight: 34,
+    textAlign: 'left',
+    alignSelf: 'flex-start'
+  },
+  // Links management styles
+  addLinkSection: {
+    marginBottom: 16,
+    padding: 12,
+    backgroundColor: '#F8F9FA',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E9ECEF'
+  },
+  addLinkLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8
+  },
+  addLinkInputContainer: {
+    gap: 8
+  },
+  addLinkInput: {
+    backgroundColor: '#fff',
+    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: 'center'
+  },
+  cancelButton: {
+    backgroundColor: '#F8F9FA',
+    borderWidth: 1,
+    borderColor: '#E9ECEF'
+  },
+  cancelButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#6C757D'
+  },
+  addButton: {
+    // backgroundColor should be applied inline using colors.iconSecurity
+  },
+  addButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#fff'
+  },
+  addLinkTrigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    backgroundColor: '#F8F9FA',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E9ECEF',
+    borderStyle: 'dashed',
+    marginBottom: 16
+  },
+  addLinkTriggerText: {
+    fontSize: 14,
+    fontWeight: '600',
+    // color should be applied inline using colors.iconSecurity
+    marginLeft: 6
+  },
+  linksList: {
+    gap: 8
+  },
+  linksListTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#333',
+    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
+  },
+  linkItemInfo: {
+    flex: 1,
+    marginRight: 8
+  },
+  linkItemTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 2
+  },
+  linkItemDescription: {
+    fontSize: 12,
+    color: '#666',
+    marginBottom: 2
+  },
+  linkItemUrl: {
+    fontSize: 12,
+    color: '#6C757D'
+  },
+  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'
+  },
+  reorderHintText: {
+    fontSize: 12,
+    color: '#999',
+    fontStyle: 'italic'
+  },
+  reorderButtons: {
+    flexDirection: 'column',
+    gap: 2
+  },
+  reorderButton: {
+    width: 20,
+    height: 16,
+    borderRadius: 3,
+    backgroundColor: '#F8F9FA',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E9ECEF'
+  },
+  reorderButtonDisabled: {
+    opacity: 0.3
+  },
+  linkItemImage: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    // backgroundColor should be applied inline using colors.iconSecurity
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 8
+  },
+  linkItemImageText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#fff'
+  },
+  fetchingText: {
+    fontSize: 12,
+    // color should be applied inline using colors.iconSecurity
+    fontStyle: 'italic'
+  },
+  linksFieldContent: {
+    flex: 1,
+    marginLeft: 12
+  },
+  linksPreview: {
+    marginTop: 4,
+    flexDirection: 'column'
+  },
+  linksPreviewContainer: {
+    marginTop: 4,
+    flexDirection: 'column',
+    width: '100%'
+  },
+  linkPreviewItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4
+  },
+  linkPreviewImage: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    // backgroundColor should be applied inline using colors.iconSecurity
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 6
+  },
+  linkPreviewImageText: {
+    fontSize: 10,
+    fontWeight: '600',
+    color: '#fff'
+  },
+  linkPreviewTitle: {
+    fontSize: 13,
+    color: '#666',
+    flex: 1
+  },
+  linkPreviewContent: {
+    flex: 1
+  },
+  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: 8,
+    fontFamily: _fonts.fontFamilies.phuduSemiBold
+  },
+  searchingText: {
+    fontSize: 12,
+    // color should be applied inline using colors.iconSecurity
+    fontStyle: 'italic'
+  },
+  addLocationInputContainer: {
+    marginBottom: 8
+  },
+  addLocationInput: {
+    backgroundColor: '#fff',
+    borderWidth: 2,
+    borderColor: '#e0e0e0',
+    borderRadius: 12,
+    padding: 16,
+    fontSize: 17,
+    minHeight: 52,
+    fontWeight: '400',
+    marginBottom: 8
+  },
+  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 should be applied inline using colors.iconSecurity
+    fontWeight: '500'
+  },
+  searchResults: {
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    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: _fonts.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 should be applied inline using colors.iconSecurity
+    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
+  }
+});
+var _default = exports.default = /*#__PURE__*/_react.default.memo(AccountSettingsScreen);
+//# sourceMappingURL=AccountSettingsScreen.js.map