@oxyhq/services 22.9.0 → 22.11.0

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -14,7 +14,7 @@ import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 import { useUpdateProfile } from '../hooks/mutations/useAccountMutations';
-import { updateAvatarVisibility, getAccountDisplayName } from '@oxyhq/core';
+import { getAccountDisplayName } from '@oxyhq/core';
 
 const GAP = 12;
 const INNER_GAP = 8;
@@ -58,7 +58,6 @@ const AnimatedProgressDot: React.FC<{
  * - Only when the user presses "Continue" do we invoke onAuthenticated to finish flow & close sheet
  */
 const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
-    navigate,
     onAuthenticated,
     theme,
     newUser,
@@ -67,7 +66,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     // the ACTIVE account (the personal user during onboarding, but read through
     // `user` so this stays correct everywhere), with the freshly
     // registered `newUser` as the pre-store-hydration fallback.
-    const { user, oxyServices } = useOxy();
+    const { user, oxyServices, openAvatarPicker: openChangeAvatarSurface } = useOxy();
     const { t, locale } = useI18n();
     const updateProfileMutation = useUpdateProfile();
     const currentUser = user || newUser; // fallback
@@ -83,24 +82,19 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     const fadeAnim = useRef(new Animated.Value(1)).current;
     const slideAnim = useRef(new Animated.Value(0)).current;
     const [currentStep, setCurrentStep] = useState(0);
-    // Track avatar separately to ensure it updates immediately after selection
-    const [selectedAvatarId, setSelectedAvatarId] = useState<string | undefined>(currentUser?.avatar);
     // Name form state for the conditional "set your name" step. Lazy initializers
     // seed from the current user once; no useEffect prop→state sync.
     const [firstName, setFirstName] = useState(() => (currentUser?.name?.first ?? '').trim());
     const [lastName, setLastName] = useState(() => (currentUser?.name?.last ?? '').trim());
     const [savingName, setSavingName] = useState(false);
 
-    // Update selectedAvatarId when the active account's avatar changes
-    useEffect(() => {
-        if (user?.avatar) {
-            setSelectedAvatarId(user.avatar);
-        } else if (newUser?.avatar) {
-            setSelectedAvatarId(newUser.avatar);
-        }
-    }, [user?.avatar, newUser?.avatar]);
-
-    const avatarUri = selectedAvatarId ? oxyServices.getFileDownloadUrl(selectedAvatarId, 'thumb') : undefined;
+    // Derived, not mirrored: `openAvatarPicker` writes through the shared avatar
+    // path, which updates the active account — including CLEARING it when the
+    // user removes their photo, which a "last non-empty value" mirror could not
+    // represent.
+    const avatarUri = currentUser?.avatar
+        ? oxyServices.getFileDownloadUrl(currentUser.avatar, 'thumb')
+        : undefined;
 
     // Steps content. Use the canonical helper so partially-onboarded accounts
     // (publicKey only) still get a friendly greeting instead of a blank one.
@@ -186,43 +180,19 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
             setSavingName(false);
         }
     }, [firstName, lastName, updateProfileMutation, animateToStepCallback, currentStep, t]);
+    /**
+     * Onboarding uses the SAME avatar flow as everywhere else — the ChangeAvatar
+     * surface (source list → crop → upload). It used to run its own
+     * pick-a-file-and-set-it path, which bypassed the cropper entirely.
+     */
     const openAvatarPicker = useCallback(() => {
-        // Ensure we're on the avatar step before opening picker
+        // Ensure we're on the avatar step, so the wizard shows the new photo
+        // when the surface closes.
         if (avatarStepIndex >= 0 && currentStep !== avatarStepIndex) {
             animateToStepCallback(avatarStepIndex);
         }
-
-        navigate?.('FileManagement', {
-            selectMode: true,
-            multiSelect: false,
-            disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
-            afterSelect: 'none', // Don't navigate away - stay on current screen
-            onSelect: async (file: any) => {
-                if (!file.contentType.startsWith('image/')) {
-                    toast.error(t('editProfile.toasts.selectImage') || 'Please select an image file');
-                    return;
-                }
-                try {
-                    // Update file visibility to public for avatar
-                    await updateAvatarVisibility(file.id, oxyServices, 'WelcomeNewUser');
-
-                    // Update the avatar immediately in local state
-                    setSelectedAvatarId(file.id);
-
-                    // Update user using TanStack Query mutation
-                    await updateProfileMutation.mutateAsync({ avatar: file.id });
-                    toast.success(t('editProfile.toasts.avatarUpdated') || 'Avatar updated');
-
-                    // Ensure we stay on the avatar step
-                    if (avatarStepIndex >= 0 && currentStep !== avatarStepIndex) {
-                        animateToStepCallback(avatarStepIndex);
-                    }
-                } catch (e: unknown) {
-                    toast.error((e instanceof Error ? e.message : null) || t('editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
-                }
-            }
-        });
-    }, [navigate, updateProfileMutation, oxyServices, currentStep, avatarStepIndex, animateToStepCallback, t]);
+        openChangeAvatarSurface();
+    }, [openChangeAvatarSurface, currentStep, avatarStepIndex, animateToStepCallback]);
 
     const step = steps[currentStep];
     const renderActionButtons = useCallback(() => {

package/src/ui/screens/fileManagement/FileLibraryError.tsx

@@ -0,0 +1,56 @@
+import type React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+export interface FileLibraryErrorProps {
+    title: string;
+    description: string;
+    retryLabel: string;
+    onRetry: () => void;
+    /** Failure icon tint. */
+    iconColor: string;
+    titleColor: string;
+    descriptionColor: string;
+    /** Retry button background (button label/icon are always white). */
+    buttonColor: string;
+}
+
+/**
+ * Terminal load-failure surface for the file library — rendered (INSTEAD of the
+ * "no files yet" empty state) when the list query errors with nothing cached, so
+ * a failed load never masquerades as an empty library. Pure presentational; the
+ * Retry action is wired to the query's `refetch()` by the caller. Themed via
+ * color props so it fits both the browse chrome and the dark picker backdrop.
+ */
+const FileLibraryError: React.FC<FileLibraryErrorProps> = ({
+    title,
+    description,
+    retryLabel,
+    onRetry,
+    iconColor,
+    titleColor,
+    descriptionColor,
+    buttonColor,
+}) => (
+    <View className="items-center py-[40px] px-[24px]">
+        <Ionicons name="cloud-offline-outline" size={64} color={iconColor} />
+        <Text className="text-[24px] font-bold mt-[16px] mb-[8px] text-center" style={{ color: titleColor }}>
+            {title}
+        </Text>
+        <Text className="text-[16px] text-center leading-[24px] mb-[32px]" style={{ color: descriptionColor }}>
+            {description}
+        </Text>
+        <TouchableOpacity
+            className="flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]"
+            style={{ backgroundColor: buttonColor }}
+            onPress={onRetry}
+            accessibilityRole="button"
+            accessibilityLabel={retryLabel}
+        >
+            <Ionicons name="refresh" size={20} color="#FFFFFF" />
+            <Text className="text-white text-[16px] font-semibold">{retryLabel}</Text>
+        </TouchableOpacity>
+    </View>
+);
+
+export default FileLibraryError;

package/src/ui/screens/fileManagement/PhotoPickerSection.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
     View,
     Text,
@@ -13,10 +13,10 @@ import {
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
-import { BREAKPOINTS } from '@oxyhq/bloom/styles';
 import * as Skeleton from '@oxyhq/bloom/skeleton';
 import type { FileMetadata } from '@oxyhq/core';
 import { computePhotoGridLayout } from './photoGridLayout';
+import FileLibraryError from './FileLibraryError';
 
 /**
  * Haptic feedback wrapper. `expo-haptics` is an optional dependency — when not
@@ -130,6 +130,10 @@ export interface PhotoPickerViewProps {
      * and container width, not the browse file-manager chrome.
      */
     loading: boolean;
+    /** Terminal load failure (nothing cached) — renders a distinct error state. */
+    loadError: boolean;
+    /** Retry the failed list load (wired to the query's refetch). */
+    onRetry: () => void;
     reduceMotion: boolean;
     getThumbUrl: (file: FileMetadata) => string | undefined;
     primaryColor: string;
@@ -217,38 +221,35 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: PhotoPickerCe
 
     const delay = Math.min(enterIndex * STAGGER_PER_CELL_MS, MAX_TOTAL_STAGGER_MS);
 
-    // Entrance fade, staggered by the cell's grid index. Reduce-motion pins
+    // Entrance fade, staggered by the cell's grid index. Started from the wrapper's
+    // ref callback (fires on mount) rather than an effect. Reduce-motion pins
     // opacity at 1 and never animates.
     const opacity = useRef(new Animated.Value(reduceMotion ? 1 : 0)).current;
-    useEffect(() => {
+    const startEntrance = useCallback((node: unknown) => {
+        if (!node) return; // unmount
         if (reduceMotion) {
             opacity.setValue(1);
             return;
         }
-        const entrance = Animated.timing(opacity, {
+        opacity.setValue(0);
+        Animated.timing(opacity, {
             toValue: 1,
             duration: ENTRANCE_DURATION_MS,
             delay,
             useNativeDriver: Platform.OS !== 'web',
-        });
-        entrance.start();
-        return () => entrance.stop();
+        }).start();
     }, [opacity, delay, reduceMotion]);
 
-    // Selection-ring pulse: a quick scale bump each time the cell transitions
-    // INTO the selected state, springing back to rest. Reduce-motion holds the
-    // ring at rest scale (still tracks selection state so a later un-reduce does
-    // not fire a stale pulse).
+    // Selection-ring pulse: a quick scale bump that springs back to rest. The ring
+    // renders ONLY while selected, so its own mount IS the "became selected"
+    // signal — driven from the ring's ref callback, not an effect. Reduce-motion
+    // holds the ring at rest scale.
     const ringScale = useRef(new Animated.Value(1)).current;
-    const prevSelected = useRef(isSelected);
-    useEffect(() => {
-        if (prevSelected.current === isSelected) return;
-        prevSelected.current = isSelected;
-        if (reduceMotion || !isSelected) {
-            ringScale.setValue(1);
-            return;
-        }
-        const pulse = Animated.sequence([
+    const startRingPulse = useCallback((node: unknown) => {
+        if (!node) return; // ring unmounting (deselected)
+        ringScale.setValue(1);
+        if (reduceMotion) return;
+        Animated.sequence([
             Animated.timing(ringScale, {
                 toValue: RING_PULSE_PEAK,
                 duration: RING_PULSE_UP_MS,
@@ -260,10 +261,8 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: PhotoPickerCe
                 tension: RING_SPRING_TENSION,
                 useNativeDriver: Platform.OS !== 'web',
             }),
-        ]);
-        pulse.start();
-        return () => pulse.stop();
-    }, [isSelected, ringScale, reduceMotion]);
+        ]).start();
+    }, [ringScale, reduceMotion]);
 
     return (
         // The animated wrapper carries the entrance opacity + the layout box as
@@ -271,6 +270,7 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: PhotoPickerCe
         // size/margins are runtime pixels className cannot express. `className`
         // drives the static chrome below (`flex-1` fills this fixed-size box).
         <Animated.View
+            ref={startEntrance}
             style={{
                 width: size,
                 height: size,
@@ -303,6 +303,7 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: PhotoPickerCe
                 </View>
                 {isSelected && (
                     <Animated.View
+                        ref={startRingPulse}
                         pointerEvents="none"
                         style={{
                             position: 'absolute',
@@ -346,6 +347,8 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     hasMore,
     loadingMore,
     loading,
+    loadError,
+    onRetry,
     reduceMotion,
     getThumbUrl,
     primaryColor,
@@ -376,24 +379,15 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
         setGridWidth((prev) => (prev === w ? prev : w));
     }, []);
 
-    // The hosting Dialog uses `{ base: 'bottom', md: 'center' }`. In BOTH
-    // placements the panel/sheet has no intrinsic height that a `flex: 1` root
-    // could fill down to the FlatList: the centered card hugs its content, and
-    // the bottom sheet's own `maxHeight` (several flex levels above this root)
-    // does not propagate a definite bound through the chain. So the root owns a
-    // `maxHeight` DIRECTLY — the FlatList then scrolls within it when the grid is
-    // long, and the panel hugs its content when the grid is short (no huge empty
-    // panel). The cap is tighter for the centered card (a floating modal reads
-    // better below full height); the bottom sheet may run taller. Keep this
-    // breakpoint in sync with `DIALOG_PLACEMENT` in BottomSheetRouter.
-    const isCenteredPanel = windowWidth >= BREAKPOINTS.md;
-    const maxPanelHeight = useMemo(
-        () => (isCenteredPanel
-            ? Math.min(Math.round(windowHeight * 0.85), 720)
-            : Math.round(windowHeight * 0.9)),
-        [isCenteredPanel, windowHeight],
-    );
-    const rootStyle = useMemo(() => ({ maxHeight: maxPanelHeight }), [maxPanelHeight]);
+    // The picker FILLS its panel: the surface morphs the container UP to an
+    // explicit large target (`frameSize.heightRatio: 0.9` in `surfaceRegistry`),
+    // and this root takes that SAME 0.9-of-viewport height so the grid uses the
+    // whole grown card (a `flex: 1` root can't fill — no definite bound propagates
+    // through the sheet's flex chain, and the panel is pinned, not measured). The
+    // FlatList then scrolls within this fixed height. Keep the 0.9 ratio in sync
+    // with the picker's `frameSize` in `surfaceRegistry.ts`.
+    const panelHeight = useMemo(() => Math.round(windowHeight * 0.9), [windowHeight]);
+    const rootStyle = useMemo(() => ({ height: panelHeight }), [panelHeight]);
 
     const effectiveWidth = gridWidth > 0 ? gridWidth : windowWidth;
     const { columns, cellSize, gutter } = useMemo(
@@ -408,10 +402,10 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     const skeletonTileCount = useMemo(() => {
         const rowHeight = cellSize + gutter;
         if (rowHeight <= 0) return columns * SKELETON_MIN_ROWS;
-        const available = Math.max(0, maxPanelHeight - GRID_CONTENT_PADDING_TOP);
+        const available = Math.max(0, panelHeight - GRID_CONTENT_PADDING_TOP);
         const rows = Math.max(SKELETON_MIN_ROWS, Math.floor(available / rowHeight));
         return rows * columns;
-    }, [cellSize, gutter, columns, maxPanelHeight]);
+    }, [cellSize, gutter, columns, panelHeight]);
 
     // Map selectedIds → 1-based selection order for the badge. We freeze a
     // stable order at the time of selection: the order is the insertion
@@ -547,7 +541,23 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
                 where Yoga already defaults min-height to 0). */}
             <View className="flex-1 min-h-0 bg-black">
                 {/* Photo grid (renders behind the translucent header). */}
-                {isEmpty && loading ? (
+                {isEmpty && loadError ? (
+                    /* Terminal load failure — a DISTINCT error surface (not the
+                       empty state), pushed below the translucent header so Cancel
+                       stays reachable. Retry re-runs the list query. */
+                    <View className="flex-1 items-center justify-center pt-[60px]">
+                        <FileLibraryError
+                            title={t('fileManagement.loadError.title')}
+                            description={t('fileManagement.loadError.description')}
+                            retryLabel={t('fileManagement.retry')}
+                            onRetry={onRetry}
+                            iconColor="#FF6B6B"
+                            titleColor="#FFFFFF"
+                            descriptionColor="rgba(255,255,255,0.7)"
+                            buttonColor={primaryColor}
+                        />
+                    </View>
+                ) : isEmpty && loading ? (
                     /* Loading skeleton — the picker's OWN shape: shimmer tiles laid
                        out with the SAME placement-aware geometry the real grid uses
                        (`computePhotoGridLayout(effectiveWidth)`), pushed below the