@oxyhq/services 22.12.0 → 22.12.2

package/src/ui/screens/ChangeAvatarScreen.tsx

@@ -4,11 +4,15 @@
  * Shows the current avatar large, then the four sources the user can pick from:
  * device gallery, camera, their existing Oxy files, and removing the current
  * photo. Every source that yields an image NAVIGATES WITHIN THIS SURFACE to
- * `AvatarCrop` (never presents it on top), so the panel morphs from this list's
- * size to the crop editor's and back — Cancel on the cropper returns here to
- * re-pick. One container reshaping, not two sheets. The forward morph is
- * flash-free because only the top frame renders and the cropper does all its own
- * async work (URL resolution + measurement), so this list is never left on screen
+ * `AvatarCrop` (never presents it on top), so the panel morphs from frame to
+ * frame instead of stacking sheets. The device / camera sources navigate straight
+ * to the cropper; the "My Oxy files" source first navigates to the `FileManagement`
+ * picker frame, which then forward-navigates to the cropper on selection — a real
+ * three-frame stack (this list → picker → cropper). So Cancel on the cropper
+ * returns to whichever frame opened it (the picker when re-picking from Oxy files,
+ * this list otherwise), and Cancel on the picker returns here. The forward morph
+ * is flash-free because only the top frame renders and the cropper does all its
+ * own async work (URL resolution + measurement), so no frame is left on screen
  * waiting.
  *
  * The surface resolves with an {@link AvatarCropResult} (the crop confirmed) or
@@ -37,10 +41,10 @@ import { surfaces as bloomSurfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { toast } from '@oxyhq/bloom';
 import { getAccountDisplayName, logger } from '@oxyhq/core';
+import type { FileMetadata } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
-import { openWithinOrPresent } from '../navigation/surfaces';
 import { SettingsIcon } from '../components/SettingsIcon';
 import type { BaseScreenProps } from '../types/navigation';
 
@@ -229,44 +233,47 @@ const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) =>
     );
 
     /**
-     * Pick from the files the user already has on Oxy. The image-only media
-     * selector MORPHS into this surface (a nested sub-flow) like every other
-     * screen and resolves with the chosen file; picking one then morphs on to the
-     * crop editor. When triggered with no surface open it presents cold instead.
+     * Forward the file the user picked from their Oxy library on to the crop
+     * editor. Given to the `FileManagement` picker as its `onPicked` handler, so
+     * SELECTING a file pushes the cropper ON TOP of the picker frame — the picker
+     * stays below, and Cancel on the cropper returns to it to re-pick.
+     *
+     * The file's ID is handed straight to the cropper WITHOUT resolving its
+     * (usually private) download URL here: the cropper resolves it and shows its
+     * own loading state on the dark canvas, so the picker never lingers for the
+     * network round-trip (the "flash back to the avatar screen" the resolve-here
+     * approach caused).
      */
-    const pickFromOxyFiles = useCallback(async () => {
-        if (busy) return;
-        setBusy(true);
-        try {
-            const file = await openWithinOrPresent('FileManagement', {
-                selectMode: true,
-                multiSelect: false,
-                disabledMimeTypes: NON_IMAGE_MIME_TYPES,
-            });
-            if (!file) return;
-
+    const handleOxyFilePicked = useCallback(
+        (file: FileMetadata) => {
+            // The image-only picker never surfaces non-images, but guard
+            // defensively — a non-image would break the cropper.
             if (!file.contentType?.startsWith('image/')) {
                 toast.error(t('editProfile.toasts.selectImage'));
                 return;
             }
-
-            // Hand the file's ID straight to the cropper WITHOUT resolving its
-            // (usually private) download URL here. The cropper resolves it — and
-            // shows its own loading state on the dark canvas while it does — so
-            // this source list is never left on screen for the network round-trip
-            // that resolution takes (the "goes back to the avatar screen" flash).
             goToCrop({ imageFileId: file.id });
-        } catch (err) {
-            logger.error(
-                'Oxy files pick failed',
-                err instanceof Error ? err : new Error(String(err)),
-                { component: LOG_COMPONENT },
-            );
-            toast.error(t('changeAvatar.errors.loadImageFailed'));
-        } finally {
-            setBusy(false);
-        }
-    }, [busy, goToCrop, t]);
+        },
+        [goToCrop, t],
+    );
+
+    /**
+     * Pick from the files the user already has on Oxy. Navigates WITHIN this
+     * surface to the image-only `FileManagement` picker as a real frame (not a
+     * resolve-and-pop sub-flow): selecting a file forward-navigates to the crop
+     * editor via {@link handleOxyFilePicked}, giving a three-frame stack
+     * (ChangeAvatar → picker → crop). Back from the cropper returns to the picker
+     * to re-pick; back from the picker returns here. The cropper's confirm
+     * resolves the whole avatar flow with the crop result.
+     */
+    const pickFromOxyFiles = useCallback(() => {
+        navigate?.('FileManagement', {
+            selectMode: true,
+            multiSelect: false,
+            disabledMimeTypes: NON_IMAGE_MIME_TYPES,
+            onPicked: handleOxyFilePicked,
+        });
+    }, [navigate, handleOxyFilePicked]);
 
     /** Confirm, then resolve the surface with the removal so the caller writes it. */
     const removeCurrentPhoto = useCallback(async () => {
@@ -341,7 +348,7 @@ const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) =>
                     title={t('changeAvatar.sources.files.title')}
                     description={t('changeAvatar.sources.files.description')}
                     disabled={busy}
-                    onPress={() => void pickFromOxyFiles()}
+                    onPress={() => pickFromOxyFiles()}
                 />
                 <SettingsListItem
                     icon={<SettingsIcon name="trash-can-outline" color={bloomTheme.colors.error} />}

package/src/ui/screens/CreateAccountScreen.tsx

@@ -1,10 +1,6 @@
 import type React from 'react';
-import { useState, useCallback, useRef, useEffect } from 'react';
-import {
-  View,
-  ActivityIndicator,
-  TouchableOpacity,
-} from 'react-native';
+import { useState, useCallback, useRef } from 'react';
+import { View, ActivityIndicator } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import type { AccountKind, CreateAccountInput, OrganizationCategory } from '@oxyhq/core';
 import { ORGANIZATION_CATEGORIES } from '@oxyhq/core';
@@ -15,6 +11,7 @@ import { useTheme } from '@oxyhq/bloom/theme';
 import { Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useOxy } from '../context/OxyContext';
 import { toast } from '@oxyhq/bloom';
 
@@ -172,15 +169,6 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
     checkUsername(cleaned);
   }, [checkUsername]);
 
-  // Cleanup debounce timer
-  useEffect(() => {
-    return () => {
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-    };
-  }, []);
-
   const canCreate = usernameStatus === 'available' && displayName.trim().length > 0 && !isCreating;
 
   const handleCreate = useCallback(async () => {
@@ -234,168 +222,136 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
   const title = t('accounts.create.title') || 'Create account';
 
   return (
-    <>
-
-      <View className="px-screen-margin pt-space-16 pb-space-32 gap-space-24">
-
-          {/* Kind picker */}
+    <View className="px-screen-margin pt-space-16 pb-space-32">
+
+      {/* Account type — canonical grouped selection rows (checkmark on the chosen one) */}
+      <SettingsListGroup title={t('accounts.create.typeSection') || 'Account type'}>
+        {KIND_OPTIONS.map((option) => {
+          const selected = option.value === kind;
+          return (
+            <SettingsListItem
+              key={option.value}
+              icon={(
+                <Ionicons
+                  name={option.icon}
+                  size={22}
+                  color={selected ? bloomTheme.colors.primary : bloomTheme.colors.icon}
+                />
+              )}
+              title={kindLabel(t, option.value)}
+              description={kindDescription(t, option.value)}
+              onPress={() => setKind(option.value)}
+              showChevron={false}
+              rightElement={selected ? (
+                <Ionicons name="checkmark-circle" size={20} color={bloomTheme.colors.primary} />
+              ) : undefined}
+              accessibilityLabel={kindLabel(t, option.value)}
+            />
+          );
+        })}
+      </SettingsListGroup>
+
+      {/* Organization category — grouped selection rows, shown only for organizations */}
+      {kind === 'organization' ? (
+        <SettingsListGroup title={t('accounts.create.organizationCategory.label')}>
+          {ORGANIZATION_CATEGORY_OPTIONS.map((option) => {
+            const selected = option === organizationCategory;
+            return (
+              <SettingsListItem
+                key={option}
+                title={organizationCategoryLabel(t, option)}
+                onPress={() => setOrganizationCategory(option)}
+                showChevron={false}
+                rightElement={selected ? (
+                  <Ionicons name="checkmark-circle" size={20} color={bloomTheme.colors.primary} />
+                ) : undefined}
+                accessibilityLabel={organizationCategoryLabel(t, option)}
+              />
+            );
+          })}
+        </SettingsListGroup>
+      ) : null}
+
+      {/* Details — a grouped section card hosting the form fields */}
+      <SettingsListGroup title={t('accounts.create.detailsSection') || 'Details'}>
+        <View className="p-space-16 gap-space-16">
+          {/* Username */}
           <View className="gap-space-8">
-            {KIND_OPTIONS.map((option) => {
-              const selected = option.value === kind;
-              return (
-                <TouchableOpacity
-                  key={option.value}
-                  accessibilityRole="radio"
-                  accessibilityState={{ selected }}
-                  accessibilityLabel={kindLabel(t, option.value)}
-                  onPress={() => setKind(option.value)}
-                  activeOpacity={0.7}
-                  className="flex-row items-center gap-space-12 p-space-16 rounded-radius-20"
-                  style={{
-                    backgroundColor: selected ? bloomTheme.colors.primarySubtle : bloomTheme.colors.card,
-                    borderWidth: 1,
-                    borderColor: selected ? bloomTheme.colors.primary : bloomTheme.colors.border,
-                  }}
-                >
-                  <Ionicons
-                    name={option.icon}
-                    size={22}
-                    color={selected ? bloomTheme.colors.primary : bloomTheme.colors.icon}
-                  />
-                  <View className="flex-1">
-                    <Text
-                      className="text-body font-bodyBold"
-                      style={{ color: selected ? bloomTheme.colors.primary : bloomTheme.colors.text }}
-                    >
-                      {kindLabel(t, option.value)}
-                    </Text>
-                    <Text className="text-caption font-caption text-text-secondary">
-                      {kindDescription(t, option.value)}
-                    </Text>
-                  </View>
-                  {selected ? (
-                    <Ionicons name="checkmark-circle" size={20} color={bloomTheme.colors.primary} />
-                  ) : null}
-                </TouchableOpacity>
-              );
-            })}
+            <TextField isInvalid={usernameIsInvalid}>
+              <TextFieldInput
+                floatingLabel
+                label={t('accounts.create.username.label') || 'Username'}
+                value={username}
+                onChangeText={handleUsernameChange}
+                isInvalid={usernameIsInvalid}
+                autoCapitalize="none"
+                autoCorrect={false}
+                autoComplete="off"
+                maxLength={USERNAME_MAX}
+              />
+            </TextField>
+            {(usernameStatus === 'checking' || usernameMessage) ? (
+              <View className="flex-row items-center gap-space-4 px-space-4">
+                {usernameStatus === 'checking' ? (
+                  <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
+                ) : usernameStatus === 'available' ? (
+                  <Ionicons name="checkmark-circle" size={16} color={bloomTheme.colors.success} />
+                ) : usernameIsInvalid ? (
+                  <Ionicons name="alert-circle" size={16} color={bloomTheme.colors.negative} />
+                ) : null}
+                {usernameMessage ? (
+                  <Text className="text-caption font-caption" style={{ color: statusColor }}>
+                    {usernameMessage}
+                  </Text>
+                ) : null}
+              </View>
+            ) : null}
           </View>
 
-          {kind === 'organization' ? (
-            <View className="gap-space-8">
-              <Text className="text-body font-bodyBold text-text">
-                {t('accounts.create.organizationCategory.label')}
-              </Text>
-              <View className="flex-row flex-wrap gap-space-8">
-                {ORGANIZATION_CATEGORY_OPTIONS.map((option) => {
-                  const selected = option === organizationCategory;
-                  return (
-                    <TouchableOpacity
-                      key={option}
-                      accessibilityRole="radio"
-                      accessibilityState={{ selected }}
-                      accessibilityLabel={organizationCategoryLabel(t, option)}
-                      onPress={() => setOrganizationCategory(option)}
-                      activeOpacity={0.7}
-                      className="px-space-12 py-space-8 rounded-radius-full"
-                      style={{
-                        backgroundColor: selected ? bloomTheme.colors.primarySubtle : bloomTheme.colors.card,
-                        borderWidth: 1,
-                        borderColor: selected ? bloomTheme.colors.primary : bloomTheme.colors.border,
-                      }}
-                    >
-                      <Text
-                        className="text-caption font-captionBold"
-                        style={{ color: selected ? bloomTheme.colors.primary : bloomTheme.colors.text }}
-                      >
-                        {organizationCategoryLabel(t, option)}
-                      </Text>
-                    </TouchableOpacity>
-                  );
-                })}
-              </View>
-            </View>
-          ) : null}
-
-          {/* Form Content */}
-          <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
-            {/* Username */}
-            <View className="gap-space-8">
-              <TextField isInvalid={usernameIsInvalid}>
-                <TextFieldInput
-                  floatingLabel
-                  label={t('accounts.create.username.label') || 'Username'}
-                  value={username}
-                  onChangeText={handleUsernameChange}
-                  isInvalid={usernameIsInvalid}
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                  autoComplete="off"
-                  maxLength={USERNAME_MAX}
-                />
-              </TextField>
-              {(usernameStatus === 'checking' || usernameMessage) ? (
-                <View className="flex-row items-center gap-space-4 px-space-4">
-                  {usernameStatus === 'checking' ? (
-                    <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
-                  ) : usernameStatus === 'available' ? (
-                    <Ionicons name="checkmark-circle" size={16} color={bloomTheme.colors.success} />
-                  ) : usernameIsInvalid ? (
-                    <Ionicons name="alert-circle" size={16} color={bloomTheme.colors.negative} />
-                  ) : null}
-                  {usernameMessage ? (
-                    <Text className="text-caption font-caption" style={{ color: statusColor }}>
-                      {usernameMessage}
-                    </Text>
-                  ) : null}
-                </View>
-              ) : null}
-            </View>
-
-            {/* Display Name */}
+          {/* Display Name */}
+          <TextField>
+            <TextFieldInput
+              floatingLabel
+              label={t('accounts.create.displayName.label') || 'Display name'}
+              value={displayName}
+              onChangeText={setDisplayName}
+              maxLength={DISPLAY_NAME_MAX}
+            />
+          </TextField>
+
+          {/* Bio */}
+          <View className="gap-space-4">
             <TextField>
               <TextFieldInput
                 floatingLabel
-                label={t('accounts.create.displayName.label') || 'Display name'}
-                value={displayName}
-                onChangeText={setDisplayName}
-                maxLength={DISPLAY_NAME_MAX}
+                label={t('accounts.create.bio.label') || 'Bio (optional)'}
+                value={bio}
+                onChangeText={setBio}
+                maxLength={BIO_MAX}
+                multiline
+                numberOfLines={3}
+                textAlignVertical="top"
               />
             </TextField>
-
-            {/* Bio */}
-            <View className="gap-space-4">
-              <TextField>
-                <TextFieldInput
-                  floatingLabel
-                  label={t('accounts.create.bio.label') || 'Bio (optional)'}
-                  value={bio}
-                  onChangeText={setBio}
-                  maxLength={BIO_MAX}
-                  multiline
-                  numberOfLines={3}
-                  textAlignVertical="top"
-                />
-              </TextField>
-              <Text className="text-caption font-caption text-text-tertiary px-space-4 text-right">
-                {bio.length}/{BIO_MAX}
-              </Text>
-            </View>
+            <Text className="text-caption font-caption text-text-tertiary px-space-4 text-right">
+              {bio.length}/{BIO_MAX}
+            </Text>
           </View>
-
-          {/* Create Button */}
-          <Button
-            variant="primary"
-            onPress={handleCreate}
-            disabled={!canCreate}
-            loading={isCreating}
-            accessibilityLabel={title}
-            className="w-full"
-          >
-            {title}
-          </Button>
         </View>
-    </>
+      </SettingsListGroup>
+
+      {/* Create Button */}
+      <Button
+        variant="primary"
+        onPress={handleCreate}
+        disabled={!canCreate}
+        loading={isCreating}
+        accessibilityLabel={title}
+        className="w-full"
+      >
+        {title}
+      </Button>
+    </View>
   );
 };
 

package/src/ui/screens/FileManagementScreen.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useCallback, useMemo, useRef } from 'react';
+import type React from 'react';
+import { useState, useCallback, useMemo, useRef } from 'react';
 import {
     View,
     Text,
@@ -87,6 +88,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     selectMode = false,
     multiSelect = false,
     onSelect,
+    onPicked,
     onConfirmSelection,
     initialSelectedIds = [],
     maxSelection,
@@ -304,7 +306,13 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
 
         if (!multiSelect) {
-            if (onSelect) {
+            if (onPicked) {
+                // Forward-navigation picker (e.g. the avatar flow): hand the file
+                // to the caller, which pushes the NEXT frame (the cropper) on top
+                // of this picker. The picker frame stays below so Back returns here
+                // to re-pick — no dismiss, no session close.
+                onPicked(file);
+            } else if (onSelect) {
                 // Legacy callback caller (inbox, WelcomeNewUser): keep the
                 // callback + afterSelect behaviour unchanged.
                 onSelect(file);
@@ -314,8 +322,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     onClose?.();
                 }
             } else {
-                // Promise-based picker (avatar picker): resolve the surface's
-                // present() promise with the picked file.
+                // Promise-based picker: resolve the surface's present() promise
+                // with the picked file.
                 dismiss?.(file);
             }
             return;
@@ -335,7 +343,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             return next;
         });
         scrollToSelectedFile(file.id);
-    }, [multiSelect, onSelect, onClose, goBack, dismiss, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext, t, scrollToSelectedFile]);
+    }, [multiSelect, onPicked, onSelect, onClose, goBack, dismiss, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext, t, scrollToSelectedFile]);
 
     const confirmMultiSelection = useCallback(async () => {
         if (!selectMode || !multiSelect) return;
@@ -426,6 +434,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         multiSelect,
         afterSelect,
         onSelect,
+        onPicked,
         goBack,
         onClose,
         selectedIds,
@@ -998,16 +1007,21 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const isOwner = user?.id === targetUserId;
     const allowUpload = isOwner && allowUploadInSelectMode;
 
-    // Cancel = the nav bar's back affordance. Legacy callback callers keep their
-    // close/back behaviour; the promise-based avatar picker dismisses its surface.
+    // Cancel = the nav bar's back affordance. A forward-nav picker (`onPicked`,
+    // e.g. the avatar flow) pops its own frame; legacy callback callers keep their
+    // close/back behaviour; a promise-based picker dismisses its surface.
     const pickerCancel = useCallback(() => {
-        if (onSelect || onConfirmSelection) {
+        if (onPicked) {
+            // Forward-nav picker: Cancel/back pops THIS frame, returning to the
+            // frame that opened the picker — never closes the whole session.
+            goBack?.();
+        } else if (onSelect || onConfirmSelection) {
             if (onClose) onClose();
             else goBack?.();
         } else {
             dismiss?.();
         }
-    }, [onSelect, onConfirmSelection, onClose, goBack, dismiss]);
+    }, [onPicked, onSelect, onConfirmSelection, onClose, goBack, dismiss]);
 
     // The picker's ONE trailing CTA, declared through the Dialog header's
     // `primaryAction` (a proper Bloom Button with loading/disabled) — the
@@ -1100,12 +1114,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     <Skeleton.Box width="100%" height={44} borderRadius={22} />
                 </View>
 
-                {/* Photo grid */}
+                {/* Photo grid — static skeleton placeholders; index keys are stable */}
                 <View style={{ padding: GRID_PADDING, gap: TILE_GAP }}>
                     {Array.from({ length: GRID_ROWS }, (_, row) => (
-                        <Skeleton.Row key={row} style={{ gap: TILE_GAP }}>
+                        // biome-ignore lint/suspicious/noArrayIndexKey: fixed-size skeleton grid, order never changes
+                        <Skeleton.Row key={`skeleton-row-${row}`} style={{ gap: TILE_GAP }}>
                             {Array.from({ length: GRID_COLUMNS }, (_, col) => (
-                                <Skeleton.Box key={col} width={tileSize} height={tileSize} borderRadius={6} />
+                                // biome-ignore lint/suspicious/noArrayIndexKey: fixed-size skeleton grid, order never changes
+                                <Skeleton.Box key={`skeleton-${row}-${col}`} width={tileSize} height={tileSize} borderRadius={6} />
                             ))}
                         </Skeleton.Row>
                     ))}