@oxy.so/services 11.14.0 → 11.15.0

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

@@ -8,17 +8,21 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _Ionicons = _interopRequireDefault(require("../icons/Ionicons.js"));
 var _theme = require("@oxy.so/bloom/theme");
-var _typography = require("@oxy.so/bloom/typography");
 var _button = require("@oxy.so/bloom/button");
 var _textField = require("@oxy.so/bloom/text-field");
-var _select = require("@oxy.so/bloom/select");
-var _core = require("@oxy.so/core");
+var _phoneInput = require("@oxy.so/bloom/phone-input");
+var _textarea = require("@oxy.so/bloom/textarea");
+var _datePicker = require("@oxy.so/bloom/date-picker");
+var _field = require("@oxy.so/bloom/field");
+var _contracts = require("@oxy.so/contracts");
+var _useUsernameAvailability = require("../hooks/useUsernameAvailability.js");
+var _groupedSection = require("@oxy.so/bloom/grouped-section");
 var _useI18n = require("../hooks/useI18n.js");
 var _useSurfaceHeader = require("../hooks/useSurfaceHeader.js");
-var _SurfaceHeaderAction = require("../components/SurfaceHeaderAction.js");
-var _OxyContext = require("../context/OxyContext.js");
+var _oxyRuntimeContext = require("../context/oxyRuntimeContext.js");
 var _useProfileEditing = require("../hooks/useProfileEditing.js");
 var _toast = require("@oxy.so/bloom/toast");
+var _core = require("@oxy.so/core");
 var _linkFormat = require("./linkFormat.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -37,89 +41,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * value this picker can produce is never one the API would reject.
  */
 const MIN_BIRTH_YEAR = 1900;
-
-/** `MIN_BIRTH_YEAR` through the current year, most recent first. */
-function birthYearOptions() {
-  const currentYear = new Date().getUTCFullYear();
-  const years = [];
-  for (let year = currentYear; year >= MIN_BIRTH_YEAR; year--) {
-    years.push({
-      value: String(year),
-      label: String(year)
-    });
-  }
-  return years;
-}
-
-/**
- * Month names are not run through `t()` here: this SDK has no existing
- * calendar-month translation catalogue to hook into, and inventing one is out
- * of scope for wiring up the date picker itself. English month names are a
- * known, deliberate limitation of this pass.
- */
-const MONTH_OPTIONS = [{
-  value: '01',
-  label: 'January'
-}, {
-  value: '02',
-  label: 'February'
-}, {
-  value: '03',
-  label: 'March'
-}, {
-  value: '04',
-  label: 'April'
-}, {
-  value: '05',
-  label: 'May'
-}, {
-  value: '06',
-  label: 'June'
-}, {
-  value: '07',
-  label: 'July'
-}, {
-  value: '08',
-  label: 'August'
-}, {
-  value: '09',
-  label: 'September'
-}, {
-  value: '10',
-  label: 'October'
-}, {
-  value: '11',
-  label: 'November'
-}, {
-  value: '12',
-  label: 'December'
-}];
-
-/**
- * Real Gregorian days in `month` (1-12) of `year`, leap years included — the
- * same rule `dateOfBirthSchema` (`@oxy.so/contracts`) applies server-side,
- * written a second time here because a picker's OWN day list must bound
- * itself before the value ever reaches it.
- */
-function daysInMonth(year, month) {
-  const isLeapYear = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
-  const DAYS_PER_MONTH = [31, isLeapYear ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-  return DAYS_PER_MONTH[month - 1];
-}
-
-/** Day options for the current year/month selection — 31 while either is unset. */
-function dayOptions(year, month) {
-  const count = year && month ? daysInMonth(Number(year), Number(month)) : 31;
-  return Array.from({
-    length: count
-  }, (_, index) => {
-    const day = String(index + 1).padStart(2, '0');
-    return {
-      value: day,
-      label: day
-    };
-  });
-}
 /**
  * Pure seeding function: derives the initial `fieldValues` / `listItems` for a
  * given field type from the active account snapshot. Called ONCE per state via
@@ -213,7 +134,6 @@ function buildInitialProfileState(user, fieldType) {
 const EditProfileFieldScreen = ({
   goBack,
   onClose,
-  theme,
   fieldType = 'displayName'
 }) => {
   // Editing "my" profile targets the ACTIVE account — writes authenticate as
@@ -222,7 +142,7 @@ const EditProfileFieldScreen = ({
   // personal user).
   const {
     user
-  } = (0, _OxyContext.useOxy)();
+  } = (0, _oxyRuntimeContext.useOxy)();
   const {
     t
   } = (0, _useI18n.useI18n)();
@@ -232,7 +152,6 @@ const EditProfileFieldScreen = ({
     isSaving
   } = (0, _useProfileEditing.useProfileEditing)();
   const bloomTheme = (0, _theme.useTheme)();
-  const normalizedTheme = (0, _core.normalizeTheme)(theme);
 
   // State for field values — seeded ONCE from the active account snapshot at
   // mount via lazy initializers. See buildInitialProfileState: no effect
@@ -243,6 +162,14 @@ const EditProfileFieldScreen = ({
   // State for list fields (locations, links) — same one-time mount seeding.
   const [listItems, setListItems] = (0, _react.useState)(() => buildInitialProfileState(user, fieldType).listItems);
   const [newItemValue, setNewItemValue] = (0, _react.useState)('');
+  const [phoneCountry, setPhoneCountry] = (0, _react.useState)(() => {
+    const phone = fieldValues.phone?.replace(/[\s()-]/g, '') || '';
+    return [..._phoneInput.COUNTRIES].sort((a, b) => b.dial.length - a.dial.length).find(country => phone.startsWith(`+${country.dial}`))?.iso2 || 'US';
+  });
+  const phoneDial = (0, _phoneInput.findCountry)(phoneCountry)?.dial || '1';
+  const phoneValue = fieldValues.phone || '';
+  const phoneNumber = phoneValue.startsWith(`+${phoneDial}`) ? phoneValue.slice(phoneDial.length + 1).trimStart() : phoneValue;
+  const usernameCheck = (0, _useUsernameAvailability.useUsernameAvailability)(fieldValues.username || '', fieldType === 'username');
 
   // Get field configuration based on fieldType
   const fieldConfig = (0, _react.useMemo)(() => {
@@ -272,13 +199,8 @@ const EditProfileFieldScreen = ({
             label: t('editProfile.items.username.label') || 'Username',
             placeholder: t('editProfile.items.username.placeholder') || 'Choose a username',
             validation: value => {
-              if (!value.trim()) {
-                return t('editProfile.items.username.required') || 'Username is required';
-              }
-              if (value.length < 3) {
-                return t('editProfile.items.username.tooShort') || 'Username must be at least 3 characters';
-              }
-              return undefined;
+              const parsed = _contracts.usernameSchema.safeParse(value);
+              return parsed.success ? undefined : parsed.error.issues[0]?.message;
             },
             inputProps: {
               autoCapitalize: 'none',
@@ -337,10 +259,7 @@ const EditProfileFieldScreen = ({
         return {
           title: t('editProfile.items.birthday.title') || 'Birthday',
           subtitle: t('editProfile.items.birthday.subtitle') || 'Your date of birth',
-          // One entry, naming the field `handleSave`'s generic branch writes
-          // (`fieldConfig.fields[0]?.key`) — `renderBirthdayPicker` renders the
-          // actual day/month/year controls; this array is never mapped through
-          // `renderField` for this field type (see `isDatePicker` below).
+          // The shared date picker writes the same date-only API field.
           fields: [{
             key: 'dateOfBirth',
             label: t('editProfile.items.birthday.label') || 'Birthday',
@@ -384,48 +303,6 @@ const EditProfileFieldScreen = ({
     }
   }, [fieldErrors]);
 
-  // The birthday picker's three pieces, seeded once from the same
-  // one-time-mount value `fieldValues.dateOfBirth` already carries (empty
-  // string parts when unset). Kept separate from `fieldValues` because a
-  // `Select` needs its OWN current value per control; each change handler
-  // below composes the three back into the single `dateOfBirth` field
-  // `handleSave` actually writes, in the event handler itself rather than
-  // an effect.
-  const [dobYear, setDobYear] = (0, _react.useState)(() => (fieldValues.dateOfBirth || '').split('-')[0] || '');
-  const [dobMonth, setDobMonth] = (0, _react.useState)(() => (fieldValues.dateOfBirth || '').split('-')[1] || '');
-  const [dobDay, setDobDay] = (0, _react.useState)(() => (fieldValues.dateOfBirth || '').split('-')[2] || '');
-
-  // A partial selection (e.g. year and month but no day yet) writes ''`,
-  // which `updateField`/the API's `dateOfBirth` write path already treats
-  // as "clear" — the same behaviour a fully-erased text field would have
-  // had. There is deliberately no separate "incomplete date" error: the
-  // three controls are either all filled (a real date) or the field is
-  // unset, and both are valid states to save.
-  const commitDateOfBirth = (0, _react.useCallback)((year, month, day) => {
-    handleFieldChange('dateOfBirth', year && month && day ? `${year}-${month}-${day}` : '');
-  }, [handleFieldChange]);
-
-  // Changing the year or month can strand a selected day past the new
-  // month's length (31 March -> April has none) — clamped down to the new
-  // last day rather than left pointing at a day `dayOptions` no longer
-  // lists, the same way a native date picker behaves.
-  const handleDobYearChange = (0, _react.useCallback)(year => {
-    const clampedDay = dobDay && dobMonth && Number(dobDay) > daysInMonth(Number(year), Number(dobMonth)) ? String(daysInMonth(Number(year), Number(dobMonth))).padStart(2, '0') : dobDay;
-    setDobYear(year);
-    setDobDay(clampedDay);
-    commitDateOfBirth(year, dobMonth, clampedDay);
-  }, [dobMonth, dobDay, commitDateOfBirth]);
-  const handleDobMonthChange = (0, _react.useCallback)(month => {
-    const clampedDay = dobDay && dobYear && Number(dobDay) > daysInMonth(Number(dobYear), Number(month)) ? String(daysInMonth(Number(dobYear), Number(month))).padStart(2, '0') : dobDay;
-    setDobMonth(month);
-    setDobDay(clampedDay);
-    commitDateOfBirth(dobYear, month, clampedDay);
-  }, [dobYear, dobDay, commitDateOfBirth]);
-  const handleDobDayChange = (0, _react.useCallback)(day => {
-    setDobDay(day);
-    commitDateOfBirth(dobYear, dobMonth, day);
-  }, [dobYear, dobMonth, commitDateOfBirth]);
-
   // Validate all fields
   const validateFields = (0, _react.useCallback)(() => {
     const errors = {};
@@ -471,6 +348,7 @@ const EditProfileFieldScreen = ({
 
   // Save handler
   const handleSave = async () => {
+    if (isSaving || fieldType === 'username' && !usernameCheck.canSave) return;
     if (fieldConfig.isList) {
       let success = false;
       if (fieldType === 'locations') {
@@ -515,7 +393,7 @@ const EditProfileFieldScreen = ({
       } else {
         const key = fieldConfig.fields[0]?.key;
         if (key) {
-          success = await updateField(key, fieldValues[key]);
+          success = await updateField(key, key === 'username' ? usernameCheck.candidate : fieldValues[key]);
         }
       }
       if (success) {
@@ -524,130 +402,98 @@ const EditProfileFieldScreen = ({
       }
     }
   };
-
-  // Contribute the field title/subtitle + a Save action into the Dialog's own
-  // nav header (this screen renders no header of its own). `handleSave` closes
-  // over the live form values, so route it through a ref to keep the Save node
-  // stable across keystrokes (only re-created when the saving state flips).
-  const handleSaveRef = (0, _react.useRef)(handleSave);
-  handleSaveRef.current = handleSave;
-  const onSavePress = (0, _react.useCallback)(() => {
-    void handleSaveRef.current();
-  }, []);
-  const saveAction = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SurfaceHeaderAction.SurfaceHeaderAction, {
-    label: isSaving ? t('common.saving') || 'Saving…' : t('common.save') || 'Save',
-    onPress: onSavePress,
-    loading: isSaving,
-    disabled: isSaving
-  }), [isSaving, onSavePress, t]);
+  const saveDisabled = isSaving || fieldType === 'username' && !usernameCheck.canSave;
   (0, _useSurfaceHeader.useSurfaceHeader)({
     title: fieldConfig.title,
     subtitle: fieldConfig.subtitle,
-    right: saveAction
+    primaryAction: {
+      label: t('common.save') || 'Save',
+      onPress: () => void handleSave(),
+      loading: isSaving,
+      disabled: saveDisabled
+    }
   });
 
   // Render a single field input
   const renderField = (field, index) => {
-    const error = fieldErrors[field.key];
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      className: "gap-space-8",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextField, {
+    const error = fieldErrors[field.key] || (field.key === 'username' ? usernameCheck.status === 'invalid' ? usernameCheck.invalid : usernameCheck.status === 'taken' ? t('accounts.create.username.taken') : usernameCheck.status === 'error' ? t('accounts.create.username.checkFailed') : undefined : undefined);
+    if (field.key === 'phone') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_phoneInput.PhoneInput, {
+        label: field.label,
+        placeholder: field.placeholder,
+        country: phoneCountry,
+        value: phoneNumber,
+        disabled: isSaving,
+        isInvalid: Boolean(error),
+        hint: error,
+        onCountryChange: (iso2, country) => {
+          setPhoneCountry(iso2);
+          handleFieldChange('phone', phoneNumber.trim() ? `+${country.dial}${phoneNumber}` : '');
+        },
+        onValueChange: value => {
+          const trimmed = value.trim();
+          if (trimmed.startsWith('+')) {
+            const international = trimmed.replace(/[\s()-]/g, '');
+            const country = [..._phoneInput.COUNTRIES].sort((a, b) => b.dial.length - a.dial.length).find(candidate => international.startsWith(`+${candidate.dial}`));
+            if (country) setPhoneCountry(country.iso2);
+            handleFieldChange('phone', international);
+          } else {
+            handleFieldChange('phone', trimmed ? `+${phoneDial}${value}` : '');
+          }
+        }
+      }, field.key);
+    }
+    if (field.type === 'textarea') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_textarea.Textarea, {
+        label: field.label,
+        placeholder: field.placeholder,
+        value: fieldValues[field.key] || '',
+        onValueChange: value => handleFieldChange(field.key, value),
+        rows: field.key === 'bio' ? 6 : 3,
+        disabled: isSaving,
         isInvalid: Boolean(error),
+        hint: error,
+        autoFocus: index === 0
+      }, field.key);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.Field, {
+      label: field.label,
+      error: error,
+      disabled: isSaving,
+      description: field.key === 'username' ? usernameCheck.status === 'checking' ? t('editProfile.items.username.checking') : usernameCheck.status === 'available' ? t('accounts.create.username.available') : _contracts.USERNAME_INVALID_MESSAGE : undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextField, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextFieldInput, {
-          floatingLabel: true,
           label: field.label,
+          placeholder: field.placeholder,
           value: fieldValues[field.key] || '',
           onChangeText: value => handleFieldChange(field.key, value),
           isInvalid: Boolean(error),
           autoFocus: index === 0,
           ...field.inputProps
         })
-      }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-        className: "text-caption px-space-4",
-        style: {
-          color: bloomTheme.colors.negative
-        },
-        children: error
-      })]
+      })
     }, field.key);
   };
 
-  // Render the birthday picker: three `Select`s (day, month, year) rather
-  // than a native date-picker dependency. Neither this app nor
-  // `@oxy.so/bloom` has one installed, and `Select` is already this
-  // design system's cross-platform choice control (a bottom sheet on
-  // native, an anchored dropdown on web — see its own docs) with no new
-  // dependency to add and no native linking to carry across platforms.
-  const renderBirthdayPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    className: "flex-row gap-space-8",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      className: "flex-1",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_select.Select, {
-        value: dobMonth,
-        onValueChange: handleDobMonthChange,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_select.SelectTrigger, {
-          label: t('editProfile.items.birthday.month') || 'Month',
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectValue, {
-            placeholder: t('editProfile.items.birthday.month') || 'Month'
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectIcon, {})]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectContent, {
-          label: t('editProfile.items.birthday.month') || 'Month',
-          items: MONTH_OPTIONS,
-          renderItem: item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_select.SelectItem, {
-            value: item.value,
-            label: item.label,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectItemIndicator, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectItemText, {
-              children: item.label
-            })]
-          })
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      className: "flex-1",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_select.Select, {
-        value: dobDay,
-        onValueChange: handleDobDayChange,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_select.SelectTrigger, {
-          label: t('editProfile.items.birthday.day') || 'Day',
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectValue, {
-            placeholder: t('editProfile.items.birthday.day') || 'Day'
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectIcon, {})]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectContent, {
-          label: t('editProfile.items.birthday.day') || 'Day',
-          items: dayOptions(dobYear, dobMonth),
-          renderItem: item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_select.SelectItem, {
-            value: item.value,
-            label: item.label,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectItemIndicator, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectItemText, {
-              children: item.label
-            })]
-          })
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      className: "flex-1",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_select.Select, {
-        value: dobYear,
-        onValueChange: handleDobYearChange,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_select.SelectTrigger, {
-          label: t('editProfile.items.birthday.year') || 'Year',
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectValue, {
-            placeholder: t('editProfile.items.birthday.year') || 'Year'
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectIcon, {})]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectContent, {
-          label: t('editProfile.items.birthday.year') || 'Year',
-          items: birthYearOptions(),
-          renderItem: item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_select.SelectItem, {
-            value: item.value,
-            label: item.label,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectItemIndicator, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.SelectItemText, {
-              children: item.label
-            })]
-          })
-        })]
-      })
-    })]
-  });
+  // Keep birthdays date-only: local calendar components avoid UTC day shifts.
+  const renderBirthdayPicker = () => {
+    const value = fieldValues.dateOfBirth;
+    const parts = value ? value.split('-').map(Number) : null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: "gap-space-8",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextFieldLabel, {
+        children: fieldConfig.title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_datePicker.DatePicker, {
+        value: parts ? new Date(parts[0], parts[1] - 1, parts[2]) : null,
+        minDate: new Date(MIN_BIRTH_YEAR, 0, 1),
+        maxDate: new Date(),
+        accessibilityLabel: fieldConfig.title,
+        placeholder: fieldConfig.fields[0].placeholder,
+        disabled: isSaving,
+        onChange: date => handleFieldChange('dateOfBirth', date ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}` : '')
+      })]
+    });
+  };
 
   // Render list content (locations or links)
   const renderListContent = () => {
@@ -656,11 +502,13 @@ const EditProfileFieldScreen = ({
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         className: "flex-row items-center gap-space-8",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           className: "flex-1",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextField, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextFieldLabel, {
+            children: addLabel
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextField, {
+            disabled: isSaving,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextFieldInput, {
-              floatingLabel: true,
               label: addLabel,
               value: newItemValue,
               onChangeText: setNewItemValue,
@@ -670,10 +518,10 @@ const EditProfileFieldScreen = ({
               returnKeyType: "done",
               keyboardType: fieldType === 'links' ? 'url' : 'default'
             })
-          })
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
           onPress: handleAddItem,
-          disabled: !newItemValue.trim(),
+          disabled: isSaving || !newItemValue.trim(),
           accessibilityLabel: addLabel,
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
             name: "add",
@@ -684,49 +532,53 @@ const EditProfileFieldScreen = ({
           tone: "neutral",
           appearance: "outline"
         })]
-      }), listItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        className: "mt-space-8 gap-space-12",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.Text, {
-          className: "text-sectionTitle font-sectionTitle text-text",
-          children: [listTitle, " (", listItems.length, ")"]
-        }), listItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "flex-row items-center gap-space-12 p-space-16 rounded-radius-12 border-hairline border-border-image bg-fill",
-          children: [fieldType === 'links' && item.image && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      }), listItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSection, {
+        title: `${listTitle} (${listItems.length})`,
+        children: listItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupedSection.GroupedSectionItem, {
+          title: String(fieldType === 'locations' ? item.name : item.title || item.url),
+          description: fieldType === 'links' ? String(item.url) : undefined,
+          icon: fieldType === 'links' && item.image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
             source: {
               uri: item.image
             },
             style: styles.linkImage
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            className: "flex-1 gap-space-4",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-              className: "text-subtitle font-subtitle text-text",
-              numberOfLines: 1,
-              children: fieldType === 'locations' ? item.name : item.title || item.url
-            }), fieldType === 'links' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-              className: "text-bodySmall font-bodySmall text-text-secondary",
-              numberOfLines: 1,
-              children: item.url
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          }) : undefined,
+          rightElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
             onPress: () => handleRemoveItem(item.id),
-            className: "p-space-8",
-            accessibilityRole: "button",
-            accessibilityLabel: t('common.remove') || 'Remove',
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
+            disabled: isSaving,
+            accessibilityLabel: `${t('common.remove') || 'Remove'} ${fieldType === 'locations' ? item.name : item.title || item.url}`,
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ionicons.default, {
               name: "trash-outline",
               size: 18,
               color: bloomTheme.colors.negative
-            })
-          })]
-        }, item.id))]
+            }),
+            iconOnly: true,
+            tone: "danger",
+            appearance: "plain"
+          })
+        }, item.id))
       })]
     });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     className: "px-screen-margin pt-space-16 pb-space-32 gap-space-24",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      className: "gap-space-16 p-space-16 rounded-radius-20 bg-fill",
-      children: fieldConfig.isList ? renderListContent() : fieldConfig.isDatePicker ? renderBirthdayPicker() : fieldConfig.fields.map(renderField)
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        gap: 20
+      },
+      children: [fieldConfig.isList ? renderListContent() : fieldConfig.isDatePicker ? renderBirthdayPicker() : fieldConfig.fields.map(renderField), fieldType === 'username' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          gap: 12
+        },
+        children: [usernameCheck.status === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+          appearance: "plain",
+          tone: "neutral",
+          onPress: usernameCheck.retry,
+          children: t('common.retry')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextFieldHint, {
+          children: t('editProfile.items.username.changeHint')
+        })]
+      })]
     })
   });
 };