@oxyhq/services 22.5.0 → 22.6.1

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
     View,
     Text,
@@ -7,7 +7,7 @@ import {
     RefreshControl,
     FlatList,
     Platform,
-    useWindowDimensions,
+    type LayoutChangeEvent,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import Reanimated, {
@@ -20,7 +20,7 @@ import Reanimated, {
 } from 'react-native-reanimated';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
 import type { FileMetadata } from '@oxyhq/core';
-import { photoPickerStyles } from '../../components/fileManagement/styles';
+import { computePhotoGridLayout } from './photoGridLayout';
 
 /**
  * Haptic feedback wrapper. `expo-haptics` is an optional dependency — when not
@@ -96,6 +96,22 @@ const hapticNotification = async (type: HapticNotification): Promise<void> => {
     }
 };
 
+/**
+ * The bottom sheet renders below the status bar already (its `maxHeight` is
+ * capped by `SCREEN_HEIGHT - insets.top`), so the picker MUST NOT add an extra
+ * safe-area inset to the header. Header zone from the sheet top:
+ *   • 28dp drag-handle hit area floats at the very top of the sheet
+ *   • 56dp app bar sits immediately below the handle
+ * Grid content is pushed down by the full header zone + 4dp of breathing room
+ * so the first row clears the translucent header. These are fixed layout
+ * constants — the equivalent `pt-[28px]` / `min-h-[84px]` / `pt-[88px]` utility
+ * classes in the JSX MUST stay in sync with them.
+ */
+const HANDLE_ZONE = 28;
+const APP_BAR_HEIGHT = 56;
+const HEADER_HEIGHT = HANDLE_ZONE + APP_BAR_HEIGHT; // 84
+const GRID_CONTENT_PADDING_TOP = HEADER_HEIGHT + 4; // 88
+
 /**
  * Props for the dedicated photo picker view. Used by FileManagementScreen
  * only when `selectMode + image-only` is active. All callbacks are wired by
@@ -114,7 +130,7 @@ export interface PhotoPickerViewProps {
     hasMore: boolean;
     loadingMore: boolean;
     reduceMotion: boolean;
-    getThumbUrl: (file: FileMetadata, variant?: string) => string;
+    getThumbUrl: (file: FileMetadata) => string | undefined;
     primaryColor: string;
     isOwner: boolean;
     onTogglePhoto: (photo: FileMetadata) => void;
@@ -143,7 +159,7 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
     selectionIndex: number; // 1-based for badge; 0 if not selected
     dim: boolean; // any selection exists and this cell is not selected
     primaryColor: string;
-    thumbUrl: string;
+    thumbUrl: string | undefined;
     enterIndex: number;
     reduceMotion: boolean;
     onPress: () => void;
@@ -187,12 +203,25 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
         transform: [{ scale: ringScale.value }],
     }));
 
+    // Per-tile pixel geometry is derived from the measured grid width, so it
+    // stays an inline `style` — NativeWind cannot express a runtime pixel size.
+    const cellWrapperStyle = {
+        width: size,
+        height: size,
+        marginRight,
+        marginBottom,
+    };
+
     const inner = (
         <>
-            <View style={[photoPickerStyles.cellInner, dim && photoPickerStyles.cellDim]}>
+            <View
+                className={`flex-1 rounded-radius-8 overflow-hidden bg-[#111111]${dim ? ' opacity-60' : ''}`}
+            >
                 <ExpoImage
                     source={{ uri: thumbUrl }}
-                    style={photoPickerStyles.cellImage}
+                    // expo-image is a third-party component (no NativeWind
+                    // className remap), so fill via inline style.
+                    style={{ width: '100%', height: '100%' }}
                     contentFit="cover"
                     transition={120}
                     cachePolicy="memory-disk"
@@ -202,19 +231,19 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
             {isSelected && (
                 <Reanimated.View
                     pointerEvents="none"
-                    style={[
-                        photoPickerStyles.cellRing,
-                        { borderColor: primaryColor },
-                        ringAnimatedStyle,
-                    ]}
+                    className="absolute inset-0 rounded-radius-8 border-[3px]"
+                    // borderColor is the theme primary (dynamic); the animated
+                    // scale transform must ride on `style` too.
+                    style={[{ borderColor: primaryColor }, ringAnimatedStyle]}
                 />
             )}
             {isSelected && (
                 <View
                     pointerEvents="none"
-                    style={[photoPickerStyles.cellBadge, { backgroundColor: primaryColor }]}
+                    className="absolute top-1.5 right-1.5 min-w-[22px] h-[22px] px-1.5 rounded-full items-center justify-center"
+                    style={{ backgroundColor: primaryColor }}
                 >
-                    <Text style={photoPickerStyles.cellBadgeText}>
+                    <Text className="text-white text-[12px] font-bold leading-[14px]">
                         {selectionIndex > 0 ? String(selectionIndex) : ''}
                     </Text>
                 </View>
@@ -222,20 +251,14 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
         </>
     );
 
-    const cellWrapperStyle = {
-        width: size,
-        height: size,
-        marginRight,
-        marginBottom,
-    };
-
     if (reduceMotion) {
         return (
             <TouchableOpacity
                 activeOpacity={0.85}
                 onPress={onPress}
                 onLongPress={onLongPress}
-                style={[photoPickerStyles.cellWrapper, cellWrapperStyle]}
+                className="relative"
+                style={cellWrapperStyle}
                 accessibilityRole="button"
                 accessibilityLabel={a11yLabel}
                 accessibilityState={{ selected: isSelected }}
@@ -248,13 +271,14 @@ const PhotoPickerCell = React.memo(function PhotoPickerCell(props: {
     return (
         <Reanimated.View
             entering={FadeIn.delay(delay).duration(200)}
-            style={[photoPickerStyles.cellWrapper, cellWrapperStyle]}
+            className="relative"
+            style={cellWrapperStyle}
         >
             <TouchableOpacity
                 activeOpacity={0.85}
                 onPress={onPress}
                 onLongPress={onLongPress}
-                style={{ flex: 1 }}
+                className="flex-1"
                 accessibilityRole="button"
                 accessibilityLabel={a11yLabel}
                 accessibilityState={{ selected: isSelected }}
@@ -290,23 +314,21 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     onConfirm,
     t,
 }) => {
-    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
-
-    // Layout: 3 columns phone portrait, 2 columns phone landscape,
-    // 4 columns tablet (>= 600 width). Apple Photos-ish.
-    const columns = useMemo(() => {
-        if (windowWidth >= 600) return 4;
-        // Landscape phone: width > height
-        if (windowWidth > windowHeight) return 2;
-        return 3;
-    }, [windowWidth, windowHeight]);
-
-    const GUTTER = 2;
-    const cellSize = useMemo(() => {
-        // (windowWidth - (columns - 1) * GUTTER) / columns, but
-        // FlatList in 3-col layout means each row has 2 inter-cell gutters.
-        return Math.floor((windowWidth - GUTTER * (columns - 1)) / columns);
-    }, [windowWidth, columns]);
+    // Measure the grid CONTAINER (the bottom-sheet content width), NOT the
+    // device screen. On wide viewports the sheet is centered/narrower than the
+    // screen, so screen-width tile math overflows. The measured wrapper carries
+    // ONLY a `style` (no `className`) because RN-Web does not fire `onLayout`
+    // for `className`'d nodes.
+    const [gridWidth, setGridWidth] = useState(0);
+    const onRootLayout = useCallback((e: LayoutChangeEvent) => {
+        const w = Math.round(e.nativeEvent.layout.width);
+        setGridWidth((prev) => (prev === w ? prev : w));
+    }, []);
+
+    const { columns, cellSize, gutter } = useMemo(
+        () => computePhotoGridLayout(gridWidth),
+        [gridWidth],
+    );
 
     // Map selectedIds → 1-based selection order for the badge. We freeze a
     // stable order at the time of selection: the order is the insertion
@@ -322,28 +344,16 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
 
     const hasAnySelection = selectedIds.size > 0;
 
-    // Compact icon-only upload pill on narrow screens; full pill otherwise.
-    const showUploadLabel = windowWidth >= 360;
-
-    // The bottom sheet renders below the status bar already (its `maxHeight`
-    // is capped by `SCREEN_HEIGHT - insets.top`), so the picker MUST NOT add
-    // an additional safe-area inset to the header. Header layout:
-    //   • 28dp drag-handle hit area floats at the very top of the sheet
-    //   • 56dp app bar sits immediately below the handle
-    // Total header zone = 28 + 56 = 84dp from sheet top.
-    const HANDLE_ZONE = 28;
-    const APP_BAR_HEIGHT = 56;
-    const headerHeight = HANDLE_ZONE + APP_BAR_HEIGHT;
-    const contentPaddingTop = headerHeight + 4;
+    // Compact icon-only upload pill on narrow sheets; full pill otherwise.
+    // Defaults to the full label until the sheet width has been measured.
+    const showUploadLabel = gridWidth === 0 || gridWidth >= 360;
 
     const isEmpty = photos.length === 0;
-    const a11yColumnsAnnouncement = useRef<number>(columns);
-
-    useEffect(() => {
-        if (a11yColumnsAnnouncement.current !== columns) {
-            a11yColumnsAnnouncement.current = columns;
-        }
-    }, [columns]);
+    // Only mount the grid once a real container width is known, so columns /
+    // tile size derive from the sheet width instead of a placeholder.
+    const gridReady = gridWidth > 0 && cellSize > 0;
+    const atSelectionLimit =
+        multiSelect && maxSelection != null && selectedIds.size >= maxSelection;
 
     const handleCellPress = useCallback(
         (photo: FileMetadata) => {
@@ -393,13 +403,17 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
                 <PhotoPickerCell
                     photo={item}
                     size={cellSize}
-                    marginRight={isLastInRow ? 0 : GUTTER}
-                    marginBottom={GUTTER}
+                    marginRight={isLastInRow ? 0 : gutter}
+                    marginBottom={gutter}
                     isSelected={isSelected}
                     selectionIndex={selIndex}
-                    dim={multiSelect && hasAnySelection && !isSelected}
+                    dim={
+                        multiSelect
+                        && !isSelected
+                        && (hasAnySelection || atSelectionLimit)
+                    }
                     primaryColor={primaryColor}
-                    thumbUrl={getThumbUrl(item, 'thumb')}
+                    thumbUrl={getThumbUrl(item)}
                     enterIndex={index}
                     reduceMotion={reduceMotion}
                     onPress={() => handleCellPress(item)}
@@ -409,8 +423,9 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
             );
         },
         [
-            selectedIds, selectionOrder, columns, cellSize, multiSelect, hasAnySelection,
-            primaryColor, getThumbUrl, reduceMotion, handleCellPress, handleCellLongPress, t,
+            selectedIds, selectionOrder, columns, cellSize, gutter, multiSelect, hasAnySelection,
+            atSelectionLimit, primaryColor, getThumbUrl, reduceMotion, handleCellPress,
+            handleCellLongPress, t,
         ],
     );
 
@@ -419,7 +434,7 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     const listFooter = useMemo(() => {
         if (!loadingMore) return null;
         return (
-            <View style={{ paddingVertical: 16, alignItems: 'center' }}>
+            <View className="py-space-16 items-center">
                 <ActivityIndicator size="small" color="#FFFFFF" />
             </View>
         );
@@ -441,168 +456,167 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
         : 0;
 
     return (
-        <View style={photoPickerStyles.root}>
-            {/* Photo grid (renders behind translucent header) */}
-            {isEmpty ? (
-                <View style={[photoPickerStyles.empty, { paddingTop: contentPaddingTop }]}>
-                    <View style={photoPickerStyles.emptyIconWrap}>
-                        <MaterialCommunityIcons name="image-outline" size={64} color="#FFFFFF" />
-                    </View>
-                    <Text style={[photoPickerStyles.emptyTitle, { color: '#FFFFFF' }]}>
-                        {t('fileManagement.photoPicker.emptyTitle')}
-                    </Text>
-                    <Text style={[photoPickerStyles.emptySubtitle, { color: '#FFFFFF' }]}>
-                        {t('fileManagement.photoPicker.emptySubtitle')}
-                    </Text>
-                    {isOwner && allowUpload && (
-                        <TouchableOpacity
-                            style={[photoPickerStyles.emptyCta, { backgroundColor: primaryColor }]}
-                            onPress={onUpload}
-                            disabled={uploading || isPickingDocument}
-                            accessibilityRole="button"
-                            accessibilityLabel={t('fileManagement.uploadPhoto')}
-                            accessibilityState={{ busy: uploading || isPickingDocument }}
-                        >
-                            {(uploading || isPickingDocument) ? (
-                                <ActivityIndicator size="small" color="#FFFFFF" />
-                            ) : (
-                                <>
-                                    <Ionicons name="cloud-upload" size={18} color="#FFFFFF" />
-                                    <Text style={photoPickerStyles.emptyCtaText}>
-                                        {t('fileManagement.uploadPhoto')}
-                                    </Text>
-                                </>
-                            )}
-                        </TouchableOpacity>
-                    )}
-                </View>
-            ) : (
-                <FlatList
-                    key={`cols-${columns}`}
-                    data={photos}
-                    renderItem={renderItem}
-                    keyExtractor={keyExtractor}
-                    numColumns={columns}
-                    contentContainerStyle={[
-                        photoPickerStyles.gridContent,
-                        { paddingTop: contentPaddingTop },
-                    ]}
-                    style={photoPickerStyles.grid}
-                    showsVerticalScrollIndicator={false}
-                    refreshControl={
-                        <RefreshControl
-                            refreshing={refreshing}
-                            onRefresh={onRefresh}
-                            tintColor="#FFFFFF"
-                            colors={[primaryColor]}
-                            progressViewOffset={contentPaddingTop}
-                        />
-                    }
-                    onEndReached={handleEndReached}
-                    onEndReachedThreshold={0.4}
-                    ListFooterComponent={listFooter}
-                    removeClippedSubviews
-                    initialNumToRender={Math.max(12, columns * 6)}
-                    windowSize={9}
-                />
-            )}
-
-            {/* Translucent black header. The bottom sheet already sits below
-                the status bar, so we do NOT add `insets.top` here — that would
-                double-pad. `paddingTop: HANDLE_ZONE` clears the 28dp drag
-                handle floating at the top of the sheet. */}
-            <View
-                style={[
-                    photoPickerStyles.header,
-                    { paddingTop: HANDLE_ZONE, minHeight: headerHeight },
-                ]}
-            >
-                <View style={photoPickerStyles.headerRow}>
-                    <View style={[photoPickerStyles.headerSide, photoPickerStyles.headerSideLeft]}>
-                        <TouchableOpacity
-                            onPress={onCancel}
-                            style={photoPickerStyles.headerCancel}
-                            accessibilityRole="button"
-                            accessibilityLabel={t('fileManagement.a11y.cancelPicker')}
-                            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-                        >
-                            <Text style={photoPickerStyles.headerCancelText}>
-                                {t('fileManagement.cancel')}
-                            </Text>
-                        </TouchableOpacity>
+        // Measured wrapper: `style`-only (no className) so RN-Web fires onLayout.
+        <View style={{ flex: 1 }} onLayout={onRootLayout}>
+            <View className="flex-1 bg-black">
+                {/* Photo grid (renders behind translucent header) */}
+                {isEmpty ? (
+                    <View className="flex-1 items-center justify-center px-space-32 pt-[88px]">
+                        <View className="opacity-30 mb-space-16">
+                            <MaterialCommunityIcons name="image-outline" size={64} color="#FFFFFF" />
+                        </View>
+                        <Text className="text-white text-[17px] font-semibold text-center mb-1.5">
+                            {t('fileManagement.photoPicker.emptyTitle')}
+                        </Text>
+                        <Text className="text-white text-[14px] font-normal text-center opacity-70 mb-space-24">
+                            {t('fileManagement.photoPicker.emptySubtitle')}
+                        </Text>
+                        {isOwner && allowUpload && (
+                            <TouchableOpacity
+                                className="flex-row items-center gap-space-8 px-[22px] py-space-12 rounded-full"
+                                style={{ backgroundColor: primaryColor }}
+                                onPress={onUpload}
+                                disabled={uploading || isPickingDocument}
+                                accessibilityRole="button"
+                                accessibilityLabel={t('fileManagement.uploadPhoto')}
+                                accessibilityState={{ busy: uploading || isPickingDocument }}
+                            >
+                                {(uploading || isPickingDocument) ? (
+                                    <ActivityIndicator size="small" color="#FFFFFF" />
+                                ) : (
+                                    <>
+                                        <Ionicons name="cloud-upload" size={18} color="#FFFFFF" />
+                                        <Text className="text-white text-[15px] font-semibold">
+                                            {t('fileManagement.uploadPhoto')}
+                                        </Text>
+                                    </>
+                                )}
+                            </TouchableOpacity>
+                        )}
                     </View>
-                    <View pointerEvents="none">
-                        <Text style={photoPickerStyles.headerTitle} numberOfLines={1}>
-                            {t('fileManagement.choosePhoto')}
+                ) : !gridReady ? (
+                    <View className="flex-1 items-center justify-center pt-[88px]">
+                        <ActivityIndicator size="large" color="#FFFFFF" />
+                        <Text className="text-white text-[14px] mt-space-12 opacity-70">
+                            {t('fileManagement.loadingPhotoLayout')}
                         </Text>
                     </View>
-                    <View style={[photoPickerStyles.headerSide, photoPickerStyles.headerSideRight]}>
-                        {multiSelect ? (
+                ) : (
+                        <FlatList
+                            key={`cols-${columns}`}
+                            data={photos}
+                            renderItem={renderItem}
+                            keyExtractor={keyExtractor}
+                            numColumns={columns}
+                            className="flex-1"
+                            contentContainerClassName="pt-[88px] pb-space-24"
+                            showsVerticalScrollIndicator={false}
+                            refreshControl={
+                                <RefreshControl
+                                    refreshing={refreshing}
+                                    onRefresh={onRefresh}
+                                    tintColor="#FFFFFF"
+                                    colors={[primaryColor]}
+                                    progressViewOffset={GRID_CONTENT_PADDING_TOP}
+                                />
+                            }
+                            onEndReached={handleEndReached}
+                            onEndReachedThreshold={0.4}
+                            ListFooterComponent={listFooter}
+                            removeClippedSubviews
+                            initialNumToRender={Math.max(12, columns * 6)}
+                            windowSize={9}
+                        />
+                )}
+
+                {/* Translucent black header. The bottom sheet already sits below
+                    the status bar, so we do NOT add `insets.top` — that would
+                    double-pad. `pt-[28px]` clears the 28dp drag handle floating
+                    at the top of the sheet; `min-h-[84px]` = handle + app bar. */}
+                <View className="absolute top-0 left-0 right-0 flex-row items-center justify-between px-space-12 z-30 bg-[#000000EB] pt-[28px] min-h-[84px]">
+                    <View className="flex-row items-center justify-between w-full h-14">
+                        <View className="basis-0 grow flex-row items-center justify-start">
                             <TouchableOpacity
-                                onPress={handleConfirm}
-                                disabled={confirmDisabled}
-                                style={[
-                                    photoPickerStyles.headerPrimaryPill,
-                                    {
-                                        backgroundColor: confirmDisabled
-                                            ? 'rgba(255,255,255,0.18)'
-                                            : primaryColor,
-                                        opacity: confirmDisabled ? 0.6 : 1,
-                                    },
-                                ]}
+                                onPress={onCancel}
+                                className="px-1.5 py-space-8 min-h-9 min-w-11 justify-center"
                                 accessibilityRole="button"
-                                accessibilityLabel={t('fileManagement.a11y.confirmSelection')}
-                                accessibilityState={{ disabled: confirmDisabled }}
+                                accessibilityLabel={t('fileManagement.a11y.cancelPicker')}
+                                hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                             >
-                                <Text style={photoPickerStyles.headerPrimaryText}>
-                                    {confirmLabel}
+                                <Text className="text-white text-[17px] font-medium">
+                                    {t('fileManagement.cancel')}
                                 </Text>
                             </TouchableOpacity>
-                        ) : (
-                            isOwner && allowUpload && (
+                        </View>
+                        <View pointerEvents="none">
+                            <Text
+                                className="text-white text-[17px] font-semibold text-center tracking-[-0.2px]"
+                                numberOfLines={1}
+                            >
+                                {t('fileManagement.choosePhoto')}
+                            </Text>
+                        </View>
+                        <View className="basis-0 grow flex-row items-center justify-end">
+                            {multiSelect ? (
                                 <TouchableOpacity
-                                    onPress={onUpload}
-                                    disabled={uploading || isPickingDocument}
-                                    style={[
-                                        photoPickerStyles.headerPrimaryPill,
-                                        !showUploadLabel && photoPickerStyles.headerPrimaryPillIconOnly,
-                                        { backgroundColor: primaryColor },
-                                    ]}
+                                    onPress={handleConfirm}
+                                    disabled={confirmDisabled}
+                                    className="flex-row items-center gap-1.5 px-3.5 py-space-8 rounded-full min-h-9"
+                                    style={{
+                                        backgroundColor: confirmDisabled
+                                            ? 'rgba(255,255,255,0.18)'
+                                            : primaryColor,
+                                        opacity: confirmDisabled ? 0.6 : 1,
+                                    }}
                                     accessibilityRole="button"
-                                    accessibilityLabel={t('fileManagement.a11y.uploadFromDevice')}
-                                    accessibilityState={{ busy: uploading || isPickingDocument }}
+                                    accessibilityLabel={t('fileManagement.a11y.confirmSelection')}
+                                    accessibilityState={{ disabled: confirmDisabled }}
                                 >
-                                    {(uploading || isPickingDocument) ? (
-                                        <ActivityIndicator size="small" color="#FFFFFF" />
-                                    ) : (
-                                        <>
-                                            <Ionicons name="cloud-upload" size={16} color="#FFFFFF" />
-                                            {showUploadLabel && (
-                                                <Text style={photoPickerStyles.headerPrimaryText}>
-                                                    {t('fileManagement.upload')}
-                                                </Text>
-                                            )}
-                                        </>
-                                    )}
+                                    <Text className="text-white text-[15px] font-semibold">
+                                        {confirmLabel}
+                                    </Text>
                                 </TouchableOpacity>
-                            )
-                        )}
+                            ) : (
+                                isOwner && allowUpload && (
+                                    <TouchableOpacity
+                                        onPress={onUpload}
+                                        disabled={uploading || isPickingDocument}
+                                        className={`flex-row items-center gap-1.5 py-space-8 rounded-full min-h-9${showUploadLabel ? ' px-3.5' : ' px-space-8 w-9 justify-center'}`}
+                                        style={{ backgroundColor: primaryColor }}
+                                        accessibilityRole="button"
+                                        accessibilityLabel={t('fileManagement.a11y.uploadFromDevice')}
+                                        accessibilityState={{ busy: uploading || isPickingDocument }}
+                                    >
+                                        {(uploading || isPickingDocument) ? (
+                                            <ActivityIndicator size="small" color="#FFFFFF" />
+                                        ) : (
+                                            <>
+                                                <Ionicons name="cloud-upload" size={16} color="#FFFFFF" />
+                                                {showUploadLabel && (
+                                                    <Text className="text-white text-[15px] font-semibold">
+                                                        {t('fileManagement.upload')}
+                                                    </Text>
+                                                )}
+                                            </>
+                                        )}
+                                    </TouchableOpacity>
+                                )
+                            )}
+                        </View>
                     </View>
-                </View>
-                {/* Subtle top progress bar during upload (non-blocking). */}
-                {uploading && (
-                    <View style={photoPickerStyles.headerProgressBarTrack}>
-                        <View
-                            style={[
-                                photoPickerStyles.headerProgressBarFill,
-                                {
+                    {/* Subtle top progress bar during upload (non-blocking). */}
+                    {uploading && (
+                        <View className="absolute left-0 right-0 bottom-0 h-0.5 bg-[#FFFFFF1F]">
+                            <View
+                                className="h-full"
+                                style={{
                                     width: `${Math.round(progressFraction * 100)}%`,
                                     backgroundColor: primaryColor,
-                                },
-                            ]}
-                        />
-                    </View>
-                )}
+                                }}
+                            />
+                        </View>
+                    )}
+                </View>
             </View>
         </View>
     );

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

@@ -16,6 +16,17 @@ import {
     loadDocumentPicker,
 } from '../shared';
 
+/**
+ * Optimistic-entry metadata. `uploading` flags the placeholder so no asset URL
+ * is ever built from its client-minted `temp-…` id; `localPreviewUri` lets the
+ * grid render the locally-picked image while the real upload is in flight (a
+ * bare guard would leave an empty tile). See `useResolvedFileUrls`.
+ */
+type OptimisticFileMetadata = NonNullable<FileMetadata['metadata']> & {
+    uploading?: boolean;
+    localPreviewUri?: string;
+};
+
 /** Dependencies threaded into the upload-state hook from the orchestrator. */
 export interface UseFileUploadStateParams {
     targetUserId?: string;
@@ -121,6 +132,15 @@ export const useFileUploadState = ({
                         continue;
                     }
 
+                    // Preserve the locally-picked uri so the optimistic tile
+                    // shows the real image (not an empty placeholder) while the
+                    // upload is in flight. Never an asset URL — the id is a
+                    // client-minted `temp-…`.
+                    const previewUri = candidateUri(raw);
+                    const optimisticMetadata: OptimisticFileMetadata = {
+                        uploading: true,
+                        ...(previewUri ? { localPreviewUri: previewUri } : {}),
+                    };
                     const optimisticFile: FileMetadata = {
                         id: optimisticId,
                         filename: fileName,
@@ -128,7 +148,7 @@ export const useFileUploadState = ({
                         length: fileSize,
                         chunkSize: 0,
                         uploadDate: new Date().toISOString(),
-                        metadata: { uploading: true },
+                        metadata: optimisticMetadata,
                         variants: [],
                     };
                     useFileStore.getState().addFile(optimisticFile, { prepend: true });
@@ -158,8 +178,12 @@ export const useFileUploadState = ({
                         uploadedFiles.push(merged);
                         successCount++;
                     } else {
-                        // Fallback: will reconcile on later list refresh
-                        useFileStore.getState().updateFile(optimisticId, { metadata: { uploading: false } as Partial<FileMetadata>['metadata'] });
+                        // Upload succeeded but the API returned no file payload,
+                        // so we cannot build a real entry. Drop the optimistic
+                        // placeholder instead of stranding a `temp-…` id (which
+                        // would leak into asset URLs); the scheduled silent
+                        // reconcile below re-fetches the persisted record.
+                        useFileStore.getState().removeFile(optimisticId);
                         if (__DEV__) {
                             console.warn('Upload completed but no file data returned:', { fileName, result });
                         }