@oxyhq/services 22.12.1 → 22.12.2

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

@@ -88,6 +88,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     selectMode = false,
     multiSelect = false,
     onSelect,
+    onPicked,
     onConfirmSelection,
     initialSelectedIds = [],
     maxSelection,
@@ -305,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);
@@ -315,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;
@@ -336,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;
@@ -427,6 +434,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         multiSelect,
         afterSelect,
         onSelect,
+        onPicked,
         goBack,
         onClose,
         selectedIds,
@@ -999,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

package/src/ui/screens/fileManagement/hooks/useFileUploadState.ts

@@ -58,6 +58,8 @@ export interface UseFileUploadStateParams {
     multiSelect: boolean;
     afterSelect: 'close' | 'back' | 'none';
     onSelect?: (file: FileMetadata) => void;
+    /** Forward-navigation picker: see {@link FileManagementScreenProps.onPicked}. */
+    onPicked?: (file: FileMetadata) => void;
     goBack?: () => void;
     onClose?: () => void;
     selectedIds: Set<string>;
@@ -94,6 +96,7 @@ export const useFileUploadState = ({
     multiSelect,
     afterSelect,
     onSelect,
+    onPicked,
     goBack,
     onClose,
     selectedIds,
@@ -335,12 +338,19 @@ export const useFileUploadState = ({
                 setTimeout(() => {
                     const fileToSelect = uploadedFiles[0];
                     if (!multiSelect && fileToSelect) {
-                        // Single select mode - directly call onSelect callback
-                        onSelect?.(fileToSelect);
-                        if (afterSelect === 'back') {
-                            goBack?.();
-                        } else if (afterSelect === 'close') {
-                            onClose?.();
+                        if (onPicked) {
+                            // Forward-navigation picker (avatar flow): hand the
+                            // freshly-uploaded file onward (to the cropper). No
+                            // dismiss/close — the picker frame stays below.
+                            onPicked(fileToSelect);
+                        } else {
+                            // Single select mode - directly call onSelect callback
+                            onSelect?.(fileToSelect);
+                            if (afterSelect === 'back') {
+                                goBack?.();
+                            } else if (afterSelect === 'close') {
+                                onClose?.();
+                            }
                         }
                     } else if (multiSelect) {
                         // Multi-select mode - add all uploaded files to selection

package/src/ui/types/fileManagement.ts

@@ -14,6 +14,16 @@ export interface FileManagementScreenProps extends BaseScreenProps {
     multiSelect?: boolean;
     // Callback when a file is selected (single select mode)
     onSelect?: (file: FileMetadata) => void;
+    /**
+     * Forward-navigation picker: called with the picked file in single-select
+     * mode when the picker is one FRAME of a larger in-surface flow. Unlike
+     * {@link onSelect}, the caller is expected to NAVIGATE the surface onward
+     * (e.g. the avatar flow pushes the cropper on top of this picker) — so on
+     * select the picker neither dismisses nor closes the session, and its
+     * Cancel/back pops THIS frame (returning to the frame that opened the picker)
+     * rather than closing. Takes precedence over `onSelect`/`dismiss` when set.
+     */
+    onPicked?: (file: FileMetadata) => void;
     // Callback when confirm pressed in multi-select mode
     onConfirmSelection?: OnConfirmFileSelection;
     // Initial selected file IDs for multi-select