@oxyhq/services 14.1.0 → 15.0.0

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import {
     View,
     Platform,
@@ -16,12 +16,14 @@ import { H1, Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { normalizeTheme } from '@oxyhq/core';
+import type { User } from '@oxyhq/core';
 import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 import { useProfileEditing } from '../hooks/useProfileEditing';
 import { toast } from '@oxyhq/bloom';
-import { EMAIL_REGEX } from '@oxyhq/core';
+import { EMAIL_REGEX, isValidDisplayName } from '@oxyhq/core';
+import { getLinkTitle, getLinkDescription, linksToListItems } from './linkFormat';
 
 /**
  * Field types supported by EditProfileFieldScreen
@@ -71,8 +73,82 @@ type EditableListItem = {
     coordinates?: { lat: number; lon: number };
 };
 
-const getLinkTitle = (url: string) => url.replace(/^https?:\/\//, '').replace(/\/$/, '');
-const getLinkDescription = (url: string) => `Link to ${url}`;
+
+/**
+ * Pure seeding function: derives the initial `fieldValues` / `listItems` for a
+ * given field type from the active account snapshot. Called ONCE per state via
+ * lazy `useState` initializers — never from an effect — so a background
+ * `refreshSessions()` / `useCurrentUser()` swap of the `user` reference can't
+ * wipe in-progress typing. Each editor mounts with a fixed `fieldType`, so the
+ * seed is stable for the lifetime of the mount.
+ */
+function buildInitialProfileState(
+    user: User | null,
+    fieldType: ProfileFieldType,
+): { fieldValues: Record<string, string>; listItems: EditableListItem[] } {
+    if (!user) {
+        return { fieldValues: {}, listItems: [] };
+    }
+    const userData = user;
+
+    if (fieldType === 'locations') {
+        const locations = Array.isArray(userData.locations) ? userData.locations : [];
+        return {
+            fieldValues: {},
+            listItems: locations.map((loc, i) => ({
+                id: String(loc.id || `location-${i}`),
+                name: String(loc.name || ''),
+                ...loc,
+            })),
+        };
+    }
+
+    if (fieldType === 'links') {
+        const linksMetadata = Array.isArray(userData.linksMetadata) ? userData.linksMetadata : [];
+        const links = Array.isArray(userData.links) ? userData.links : [];
+        // Prefer rich link metadata; fall back to the plain links array.
+        if (linksMetadata.length > 0) {
+            return {
+                fieldValues: {},
+                listItems: linksMetadata.map((link, i) => ({
+                    ...link,
+                    id: String(link.id || `link-${i}`),
+                    url: String(link.url || ''),
+                    title: String(link.title || getLinkTitle(String(link.url || ''))),
+                    description: String(link.description || getLinkDescription(String(link.url || ''))),
+                })),
+            };
+        }
+        return {
+            fieldValues: {},
+            listItems: linksToListItems(links),
+        };
+    }
+
+    // Scalar fields: seed only the keys this field type edits.
+    const fieldValues: Record<string, string> = {};
+    switch (fieldType) {
+        case 'displayName':
+            fieldValues.firstName = String(userData.name?.first || '');
+            fieldValues.lastName = String(userData.lastName || userData.name?.last || '');
+            break;
+        case 'birthday':
+            fieldValues.birthday = String(userData.birthday || userData.dateOfBirth || '');
+            break;
+        case 'address':
+            fieldValues.address = String(userData.address || '');
+            break;
+        case 'username':
+        case 'email':
+        case 'bio':
+        case 'phone':
+            fieldValues[fieldType] = String(userData[fieldType] || '');
+            break;
+        default:
+            break;
+    }
+    return { fieldValues, listItems: [] };
+}
 
 /**
  * EditProfileFieldScreen - A dedicated screen for editing profile fields
@@ -98,12 +174,18 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
     const bloomTheme = useTheme();
     const normalizedTheme = normalizeTheme(theme);
 
-    // State for field values
-    const [fieldValues, setFieldValues] = useState<Record<string, string>>({});
+    // State for field values — seeded ONCE from the active account snapshot at
+    // mount via lazy initializers. See buildInitialProfileState: no effect
+    // reseeds these, so a background user-ref swap never wipes typing.
+    const [fieldValues, setFieldValues] = useState<Record<string, string>>(
+        () => buildInitialProfileState(user, fieldType).fieldValues,
+    );
     const [fieldErrors, setFieldErrors] = useState<Record<string, string | undefined>>({});
 
-    // State for list fields (locations, links)
-    const [listItems, setListItems] = useState<EditableListItem[]>([]);
+    // State for list fields (locations, links) — same one-time mount seeding.
+    const [listItems, setListItems] = useState<EditableListItem[]>(
+        () => buildInitialProfileState(user, fieldType).listItems,
+    );
     const [newItemValue, setNewItemValue] = useState('');
 
     // Get field configuration based on fieldType
@@ -118,11 +200,21 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                             key: 'firstName',
                             label: t('editProfile.items.displayName.firstName') || 'First Name',
                             placeholder: t('editProfile.items.displayName.firstNamePlaceholder') || 'Enter first name',
+                            validation: (value) =>
+                                isValidDisplayName(value)
+                                    ? undefined
+                                    : (t('editProfile.items.displayName.invalidChars')
+                                        || 'Use letters and spaces only'),
                         },
                         {
                             key: 'lastName',
                             label: t('editProfile.items.displayName.lastName') || 'Last Name',
                             placeholder: t('editProfile.items.displayName.lastNamePlaceholder') || 'Enter last name (optional)',
+                            validation: (value) =>
+                                isValidDisplayName(value)
+                                    ? undefined
+                                    : (t('editProfile.items.displayName.invalidChars')
+                                        || 'Use letters and spaces only'),
                         },
                     ],
                 };
@@ -266,62 +358,6 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
         }
     }, [fieldType, t]);
 
-    // Initialize field values from the active account's data
-    useEffect(() => {
-        if (!user) return;
-
-        const userData = user;
-
-        if (fieldConfig.isList) {
-            if (fieldType === 'locations') {
-                const locations = Array.isArray(userData.locations) ? userData.locations : [];
-                setListItems(locations.map((loc, i) => ({
-                    id: String(loc.id || `location-${i}`),
-                    name: String(loc.name || ''),
-                    ...loc,
-                })));
-            } else if (fieldType === 'links') {
-                const linksMetadata = Array.isArray(userData.linksMetadata) ? userData.linksMetadata : [];
-                const links = Array.isArray(userData.links) ? userData.links : [];
-                // Use linksMetadata if available, otherwise convert links array
-                if (linksMetadata.length > 0) {
-                    setListItems(linksMetadata.map((link, i) => ({
-                        ...link,
-                        id: String(link.id || `link-${i}`),
-                        url: String(link.url || ''),
-                        title: String(link.title || getLinkTitle(String(link.url || ''))),
-                        description: String(link.description || getLinkDescription(String(link.url || ''))),
-                    })));
-                } else {
-                    setListItems(links.map((item, i) => {
-                        return {
-                            id: `link-${i}`,
-                            url: item,
-                            title: getLinkTitle(item),
-                            description: getLinkDescription(item),
-                        };
-                    }));
-                }
-            }
-        } else {
-            const initialValues: Record<string, string> = {};
-            fieldConfig.fields.forEach(field => {
-                if (field.key === 'firstName') {
-                    initialValues[field.key] = String(userData.name?.first || '');
-                } else if (field.key === 'lastName') {
-                    initialValues[field.key] = String(userData.lastName || userData.name?.last || '');
-                } else if (field.key === 'birthday') {
-                    initialValues[field.key] = String(userData.birthday || userData.dateOfBirth || '');
-                } else if (field.key === 'address') {
-                    initialValues[field.key] = String(userData.address || userData.location || '');
-                } else {
-                    initialValues[field.key] = String(userData[field.key] || '');
-                }
-            });
-            setFieldValues(initialValues);
-        }
-    }, [user, fieldConfig, fieldType]);
-
     // Field change handler
     const handleFieldChange = useCallback((key: string, value: string) => {
         setFieldValues(prev => ({ ...prev, [key]: value }));
@@ -335,7 +371,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
         const errors: Record<string, string | undefined> = {};
         let isValid = true;
 
-        fieldConfig.fields.forEach(field => {
+        for (const field of fieldConfig.fields) {
             if (field.validation) {
                 const error = field.validation(fieldValues[field.key] || '');
                 if (error) {
@@ -343,7 +379,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                     isValid = false;
                 }
             }
-        });
+        }
 
         setFieldErrors(errors);
         return isValid;

package/src/ui/screens/EditProfileScreen.tsx

@@ -0,0 +1,155 @@
+import type React from 'react';
+import { useMemo } from 'react';
+import { View, ScrollView } from 'react-native';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { H4, Text } from '@oxyhq/bloom/typography';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { getAccountDisplayName } from '@oxyhq/core';
+import type { BaseScreenProps } from '../types/navigation';
+import Header from '../components/Header';
+import Avatar from '../components/Avatar';
+import { SettingsIcon } from '../components/SettingsIcon';
+import { useOxy } from '../context/OxyContext';
+import { useI18n } from '../hooks/useI18n';
+import type { ProfileFieldType } from './EditProfileFieldScreen';
+
+/**
+ * EditProfileScreen — the profile-editing HUB.
+ *
+ * Lists every editable profile field as its own row; each row deep-links into
+ * {@link EditProfileFieldScreen} with the matching `fieldType`. The avatar row
+ * reuses the exact same `openAvatarPicker` entry point that
+ * {@link ManageAccountScreen} uses. This is the single entry into per-field
+ * editing — reached from ManageAccount's "Edit profile" row.
+ */
+const EditProfileScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate }) => {
+    const bloomTheme = useTheme();
+    const { t, locale } = useI18n();
+    const { user, oxyServices, openAvatarPicker } = useOxy();
+
+    const displayName = useMemo(() => getAccountDisplayName(user, locale), [user, locale]);
+    const avatarUri = useMemo(
+        () => (user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined),
+        [user?.avatar, oxyServices],
+    );
+
+    const notSet = t('editProfile.notSet') || 'Not set';
+
+    // Current value previews for each row. Typed User fields resolve directly;
+    // `locations` is only reachable via the User index signature (typed
+    // `unknown`), so it is narrowed defensively.
+    const linkPreview = user?.linksMetadata?.[0]?.url ?? user?.links?.[0] ?? notSet;
+    const locationPreview = ((): string => {
+        const locations = user?.locations;
+        const first: unknown = Array.isArray(locations) ? locations[0] : undefined;
+        if (first && typeof first === 'object' && 'name' in first && typeof first.name === 'string' && first.name) {
+            return first.name;
+        }
+        return notSet;
+    })();
+
+    const goToField = (fieldType: ProfileFieldType) => navigate?.('EditProfileField', { fieldType });
+
+    return (
+        <View className="flex-1 bg-bg">
+            <Header
+                title={t('editProfile.title') || 'Edit Profile'}
+                onBack={goBack || onClose}
+                elevation="subtle"
+            />
+            <ScrollView
+                className="flex-1"
+                contentContainerClassName="px-screen-margin pb-space-24"
+                showsVerticalScrollIndicator={false}
+            >
+                {/* Profile card */}
+                <View className="items-center bg-fill-secondary rounded-radius-20 px-space-20 py-space-24 mb-space-16">
+                    <Avatar uri={avatarUri} name={displayName} size={72} />
+                    <H4 className="text-text mt-space-12" numberOfLines={1}>
+                        {displayName}
+                    </H4>
+                    {user?.username ? (
+                        <Text className="text-text-secondary text-sm mt-space-2" numberOfLines={1}>
+                            @{user.username}
+                        </Text>
+                    ) : null}
+                </View>
+
+                {/* Profile picture */}
+                <SettingsListGroup title={t('editProfile.sections.profilePicture') || 'Profile Picture'}>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="camera" color={bloomTheme.colors.primary} />}
+                        title={t('editProfile.changeAvatar') || 'Change avatar'}
+                        description={t('editProfile.items.avatar.subtitle') || 'Update your profile photo'}
+                        onPress={openAvatarPicker}
+                        rightElement={<Avatar uri={avatarUri} name={displayName} size={32} />}
+                    />
+                </SettingsListGroup>
+
+                {/* Basic information */}
+                <SettingsListGroup title={t('editProfile.sections.basicInfo') || 'Basic Information'}>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="account" color={bloomTheme.colors.primary} />}
+                        title={t('editProfile.items.displayName.title') || 'Display Name'}
+                        description={displayName || notSet}
+                        onPress={() => goToField('displayName')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="at" color={bloomTheme.colors.info} />}
+                        title={t('editProfile.items.username.title') || 'Username'}
+                        description={user?.username ? `@${user.username}` : notSet}
+                        onPress={() => goToField('username')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="email" color={bloomTheme.colors.success} />}
+                        title={t('editProfile.items.email.title') || 'Email'}
+                        description={user?.email || notSet}
+                        onPress={() => goToField('email')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="phone" color={bloomTheme.colors.warning} />}
+                        title={t('editProfile.items.phone.title') || 'Phone Number'}
+                        description={user?.phone || notSet}
+                        onPress={() => goToField('phone')}
+                    />
+                </SettingsListGroup>
+
+                {/* About you */}
+                <SettingsListGroup title={t('editProfile.sections.about') || 'About You'}>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="text" color={bloomTheme.colors.primary} />}
+                        title={t('editProfile.items.bio.title') || 'Bio'}
+                        description={user?.bio || notSet}
+                        onPress={() => goToField('bio')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="map-marker" color={bloomTheme.colors.info} />}
+                        title={t('editProfile.items.address.title') || 'Address'}
+                        description={user?.address || notSet}
+                        onPress={() => goToField('address')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="cake-variant" color={bloomTheme.colors.warning} />}
+                        title={t('editProfile.items.birthday.title') || 'Birthday'}
+                        description={user?.birthday || notSet}
+                        onPress={() => goToField('birthday')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="link-variant" color={bloomTheme.colors.success} />}
+                        title={t('editProfile.items.links.title') || 'Links'}
+                        description={linkPreview}
+                        onPress={() => goToField('links')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="map-marker-multiple" color={bloomTheme.colors.primary} />}
+                        title={t('editProfile.items.locations.title') || 'Locations'}
+                        description={locationPreview}
+                        onPress={() => goToField('locations')}
+                    />
+                </SettingsListGroup>
+            </ScrollView>
+        </View>
+    );
+};
+
+export default EditProfileScreen;

package/src/ui/screens/ManageAccountScreen.tsx

@@ -78,7 +78,7 @@ const formatRelative = (dateString?: string): string => {
  * Replaces AccountOverview + AccountSettings + the per-account half of
  * SessionManagement. Lists ONLY the active user's profile, sessions on this
  * device, and security/destructive actions for THIS account. Multi-account
- * surface lives in {@link AccountMenu} — keep these concerns separate.
+ * surface lives in {@link AccountSwitcher} — keep these concerns separate.
  */
 const ManageAccountScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -384,9 +384,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                             t('manageAccount.items.editProfile.subtitle')
                             || 'Name, username, bio, links'
                         }
-                        onPress={() =>
-                            navigate?.('EditProfileField', { field: 'username' })
-                        }
+                        onPress={() => navigate?.('EditProfile')}
                     />
                     <SettingsListItem
                         icon={
@@ -400,9 +398,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                             t('manageAccount.items.theme.subtitle')
                             || 'Personalize your Bloom color'
                         }
-                        onPress={() =>
-                            navigate?.('EditProfileField', { field: 'color' })
-                        }
+                        onPress={() => navigate?.('Preferences')}
                     />
                     <SettingsListItem
                         icon={