@oxyhq/services 6.9.46 → 6.10.2

package/lib/module/ui/screens/FileManagementScreen.js

@@ -1,8 +1,9 @@
 "use strict";
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, Animated, Easing } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, Animated, Easing, FlatList, AccessibilityInfo, Platform, useWindowDimensions } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
+import Reanimated, { FadeIn, useAnimatedStyle, useSharedValue, withSequence, withSpring, withTiming } from 'react-native-reanimated';
 // Lazy load expo-document-picker (optional dependency)
 // This allows the screen to work even if expo-document-picker is not installed
 let DocumentPicker = null;
@@ -15,12 +16,9 @@ const loadDocumentPicker = async () => {
     throw new Error('expo-document-picker is not installed. Please install it: npx expo install expo-document-picker');
   }
 };
-import { toast } from '../../lib/sonner';
-import * as Prompt from '@oxyhq/bloom/prompt';
-import { usePromptControl } from '@oxyhq/bloom/prompt';
-import { Ionicons } from '@expo/vector-icons';
-// @ts-ignore - MaterialCommunityIcons is available at runtime
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { getErrorMessage as getOxyErrorMessage } from '@oxyhq/core';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from "../stores/fileStore.js";
 import Header from "../components/Header.js";
 import JustifiedPhotoGrid from "../components/photogrid/JustifiedPhotoGrid.js";
@@ -33,11 +31,98 @@ import { convertDocumentPickerAssetToFile, formatFileSize, getFileIcon, getSafeD
 import { FileViewer } from "../components/fileManagement/FileViewer.js";
 import { FileDetailsModal } from "../components/fileManagement/FileDetailsModal.js";
 import { UploadPreview } from "../components/fileManagement/UploadPreview.js";
-import { useDialogControl } from '@oxyhq/bloom/dialog';
-import { fileManagementStyles } from "../components/fileManagement/styles.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/** Extract error message from unknown error type */
-const getErrorMessage = error => error instanceof Error ? getErrorMessage(error) : typeof error === 'string' ? error : undefined;
+import { fileManagementStyles, photoPickerStyles } from "../components/fileManagement/styles.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Extract error message from unknown error type.
+ * Delegates to the canonical `getErrorMessage` in `@oxyhq/core` and returns
+ * `undefined` for empty results (so callers can fall back to a translated
+ * message via `||`).
+ */
+const getErrorMessage = error => {
+  if (error == null) return undefined;
+  const message = getOxyErrorMessage(error, '');
+  return message ? message : undefined;
+};
+
+/**
+ * A picker-produced file ready to upload. On web this is a real `File`
+ * (carrying an optional `uri` for preview). On native, it's an
+ * {@link RNFileDescriptor} — passed straight to FormData by `assetUpload`.
+ */
+
+/** Returns the display name for either a web File or an RN descriptor. */
+const candidateName = (candidate, fallback) => candidate.name && typeof candidate.name === 'string' ? candidate.name : fallback;
+
+/** Returns the byte size for either a web File or an RN descriptor (0 if unknown). */
+const candidateSize = candidate => {
+  const size = candidate.size;
+  return typeof size === 'number' && Number.isFinite(size) ? size : 0;
+};
+
+/** Returns the mime type for either a web File or an RN descriptor. */
+const candidateType = candidate => {
+  const value = candidate.type;
+  return typeof value === 'string' && value.length > 0 ? value : 'application/octet-stream';
+};
+
+/** Returns the preview URI for an upload candidate, if available. */
+const candidateUri = candidate => {
+  const uri = candidate.uri;
+  return typeof uri === 'string' && uri.length > 0 ? uri : undefined;
+};
+
+/**
+ * Haptic feedback wrapper. `expo-haptics` is an optional dependency — when not
+ * installed (or on web), all calls degrade silently. We resolve the module
+ * once and cache the promise so subsequent calls don't repeat the dynamic
+ * import. Matches the pattern used by AvatarCropScreen.
+ */
+
+let hapticsModulePromise = null;
+const getHaptics = () => {
+  if (Platform.OS === 'web') return Promise.resolve(null);
+  if (hapticsModulePromise) return hapticsModulePromise;
+  hapticsModulePromise = (async () => {
+    try {
+      const mod = await import('expo-haptics');
+      if (!mod || typeof mod.impactAsync !== 'function') return null;
+      return mod;
+    } catch {
+      return null;
+    }
+  })();
+  return hapticsModulePromise;
+};
+const hapticImpact = async style => {
+  const h = await getHaptics();
+  if (!h) return;
+  const styleEnum = style === 'heavy' ? h.ImpactFeedbackStyle.Heavy : style === 'medium' ? h.ImpactFeedbackStyle.Medium : h.ImpactFeedbackStyle.Light;
+  try {
+    await h.impactAsync(styleEnum);
+  } catch {
+    // Silent — haptics are non-critical UX polish.
+  }
+};
+const hapticSelection = async () => {
+  const h = await getHaptics();
+  if (!h) return;
+  try {
+    await h.selectionAsync();
+  } catch {
+    // Silent.
+  }
+};
+const hapticNotification = async type => {
+  const h = await getHaptics();
+  if (!h) return;
+  const typeEnum = type === 'error' ? h.NotificationFeedbackType.Error : type === 'warning' ? h.NotificationFeedbackType.Warning : h.NotificationFeedbackType.Success;
+  try {
+    await h.notificationAsync(typeEnum);
+  } catch {
+    // Silent.
+  }
+};
 
 // Animated button component for smooth transitions
 const AnimatedButton = ({
@@ -46,7 +131,8 @@ const AnimatedButton = ({
   icon,
   primaryColor,
   textColor,
-  style
+  style,
+  accessibilityLabel
 }) => {
   const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
   useEffect(() => {
@@ -61,13 +147,14 @@ const AnimatedButton = ({
     inputRange: [0, 1],
     outputRange: ['transparent', primaryColor]
   });
-  const iconColor = animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [textColor, '#FFFFFF']
-  });
   return /*#__PURE__*/_jsx(TouchableOpacity, {
     onPress: onPress,
     activeOpacity: 0.7,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      selected: isSelected
+    },
     children: /*#__PURE__*/_jsx(Animated.View, {
       style: [style, {
         backgroundColor
@@ -82,6 +169,453 @@ const AnimatedButton = ({
     })
   });
 };
+
+/**
+ * Props for the dedicated photo picker view. Used by FileManagementScreen
+ * only when `selectMode + image-only` is active. All callbacks are wired by
+ * the parent — this component is purely presentational.
+ */
+
+/**
+ * A single photo cell. Memoized so re-renders during selection only touch
+ * affected cells — selection of one photo must not redraw the whole grid.
+ *
+ * Apple Photos pattern: when any cell is selected, *non-selected* siblings
+ * fade to 0.6 opacity to focus attention on the active selection.
+ */
+const PhotoPickerCell = /*#__PURE__*/React.memo(function PhotoPickerCell(props) {
+  const {
+    photo,
+    size,
+    marginRight,
+    marginBottom,
+    isSelected,
+    selectionIndex,
+    dim,
+    primaryColor,
+    thumbUrl,
+    enterIndex,
+    reduceMotion,
+    onPress,
+    onLongPress,
+    a11yLabel
+  } = props;
+
+  // Cap the cumulative stagger at ~800ms total so the very long grid does
+  // not keep fading in late tiles. Beyond ~53 tiles the delay maxes out.
+  const STAGGER_PER_CELL_MS = 15;
+  const MAX_TOTAL_STAGGER_MS = 800;
+  const delay = Math.min(enterIndex * STAGGER_PER_CELL_MS, MAX_TOTAL_STAGGER_MS);
+
+  // Selection ring pulse animation: 1.0 → 1.05 → 1.0 on transition to
+  // selected. Plays at most once per selection change; reduce-motion skips.
+  const ringScale = useSharedValue(1);
+  const prevSelected = useRef(isSelected);
+  useEffect(() => {
+    if (prevSelected.current === isSelected) return;
+    prevSelected.current = isSelected;
+    if (!isSelected) {
+      ringScale.value = 1;
+      return;
+    }
+    if (reduceMotion) {
+      ringScale.value = 1;
+      return;
+    }
+    ringScale.value = withSequence(withTiming(1.05, {
+      duration: 110
+    }), withSpring(1, {
+      damping: 14,
+      stiffness: 200
+    }));
+  }, [isSelected, reduceMotion, ringScale]);
+  const ringAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: ringScale.value
+    }]
+  }));
+  const inner = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [photoPickerStyles.cellInner, dim && photoPickerStyles.cellDim],
+      children: /*#__PURE__*/_jsx(ExpoImage, {
+        source: {
+          uri: thumbUrl
+        },
+        style: photoPickerStyles.cellImage,
+        contentFit: "cover",
+        transition: 120,
+        cachePolicy: "memory-disk",
+        accessibilityLabel: photo.filename
+      })
+    }), isSelected && /*#__PURE__*/_jsx(Reanimated.View, {
+      pointerEvents: "none",
+      style: [photoPickerStyles.cellRing, {
+        borderColor: primaryColor
+      }, ringAnimatedStyle]
+    }), isSelected && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [photoPickerStyles.cellBadge, {
+        backgroundColor: primaryColor
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: photoPickerStyles.cellBadgeText,
+        children: selectionIndex > 0 ? String(selectionIndex) : ''
+      })
+    })]
+  });
+  const cellWrapperStyle = {
+    width: size,
+    height: size,
+    marginRight,
+    marginBottom
+  };
+  if (reduceMotion) {
+    return /*#__PURE__*/_jsx(TouchableOpacity, {
+      activeOpacity: 0.85,
+      onPress: onPress,
+      onLongPress: onLongPress,
+      style: [photoPickerStyles.cellWrapper, cellWrapperStyle],
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: {
+        selected: isSelected
+      },
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(Reanimated.View, {
+    entering: FadeIn.delay(delay).duration(200),
+    style: [photoPickerStyles.cellWrapper, cellWrapperStyle],
+    children: /*#__PURE__*/_jsx(TouchableOpacity, {
+      activeOpacity: 0.85,
+      onPress: onPress,
+      onLongPress: onLongPress,
+      style: {
+        flex: 1
+      },
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: {
+        selected: isSelected
+      },
+      children: inner
+    })
+  });
+});
+const PhotoPickerView = ({
+  photos,
+  selectedIds,
+  multiSelect,
+  maxSelection,
+  allowUpload,
+  refreshing,
+  uploading,
+  isPickingDocument,
+  uploadProgress,
+  hasMore,
+  loadingMore,
+  reduceMotion,
+  getThumbUrl,
+  primaryColor,
+  isOwner,
+  onTogglePhoto,
+  onPreviewPhoto,
+  onUpload,
+  onRefresh,
+  onLoadMore,
+  onCancel,
+  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]);
+
+  // Map selectedIds → 1-based selection order for the badge. We freeze a
+  // stable order at the time of selection: the order is the insertion
+  // order of the Set (which JS preserves natively).
+  const selectionOrder = useMemo(() => {
+    const map = new Map();
+    let i = 1;
+    for (const id of selectedIds) {
+      map.set(id, i++);
+    }
+    return map;
+  }, [selectedIds]);
+  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;
+  const isEmpty = photos.length === 0;
+  const a11yColumnsAnnouncement = useRef(columns);
+  useEffect(() => {
+    if (a11yColumnsAnnouncement.current !== columns) {
+      a11yColumnsAnnouncement.current = columns;
+    }
+  }, [columns]);
+  const handleCellPress = useCallback(photo => {
+    if (Platform.OS !== 'web') {
+      void hapticImpact('light');
+    }
+    onTogglePhoto(photo);
+  }, [onTogglePhoto]);
+  const handleCellLongPress = useCallback(photo => {
+    if (Platform.OS !== 'web') {
+      void hapticSelection();
+    }
+    onPreviewPhoto(photo);
+  }, [onPreviewPhoto]);
+  const handleConfirm = useCallback(() => {
+    if (multiSelect) {
+      if (selectedIds.size === 0) return;
+      if (Platform.OS !== 'web') {
+        void hapticNotification('success');
+      }
+    }
+    onConfirm();
+  }, [multiSelect, selectedIds.size, onConfirm]);
+
+  // FlatList renderItem: each cell knows its enterIndex (for stagger).
+  const renderItem = useCallback(({
+    item,
+    index
+  }) => {
+    const isSelected = selectedIds.has(item.id);
+    const selIndex = isSelected ? selectionOrder.get(item.id) || 0 : 0;
+    // Last column gets no right margin; last row no bottom margin
+    // (FlatList handles row breaks via numColumns).
+    const isLastInRow = (index + 1) % columns === 0;
+    const a11yLabel = t(isSelected ? 'fileManagement.a11y.photoCellSelected' : 'fileManagement.a11y.photoCellUnselected', {
+      name: item.filename || 'photo'
+    });
+    return /*#__PURE__*/_jsx(PhotoPickerCell, {
+      photo: item,
+      size: cellSize,
+      marginRight: isLastInRow ? 0 : GUTTER,
+      marginBottom: GUTTER,
+      isSelected: isSelected,
+      selectionIndex: selIndex,
+      dim: multiSelect && hasAnySelection && !isSelected,
+      primaryColor: primaryColor,
+      thumbUrl: getThumbUrl(item, 'thumb'),
+      enterIndex: index,
+      reduceMotion: reduceMotion,
+      onPress: () => handleCellPress(item),
+      onLongPress: () => handleCellLongPress(item),
+      a11yLabel: a11yLabel
+    });
+  }, [selectedIds, selectionOrder, columns, cellSize, multiSelect, hasAnySelection, primaryColor, getThumbUrl, reduceMotion, handleCellPress, handleCellLongPress, t]);
+  const keyExtractor = useCallback(item => item.id, []);
+  const listFooter = useMemo(() => {
+    if (!loadingMore) return null;
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingVertical: 16,
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: "#FFFFFF"
+      })
+    });
+  }, [loadingMore]);
+  const handleEndReached = useCallback(() => {
+    if (loadingMore || !hasMore) return;
+    onLoadMore();
+  }, [loadingMore, hasMore, onLoadMore]);
+  const confirmDisabled = multiSelect && selectedIds.size === 0;
+  const confirmLabel = multiSelect ? t('fileManagement.doneWithCount', {
+    count: selectedIds.size
+  }) : t('fileManagement.done');
+
+  // The progress fill width. Guard against zero division.
+  const progressFraction = uploadProgress && uploadProgress.total > 0 ? Math.min(1, Math.max(0, uploadProgress.current / uploadProgress.total)) : 0;
+  return /*#__PURE__*/_jsxs(View, {
+    style: photoPickerStyles.root,
+    children: [isEmpty ? /*#__PURE__*/_jsxs(View, {
+      style: [photoPickerStyles.empty, {
+        paddingTop: contentPaddingTop
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: photoPickerStyles.emptyIconWrap,
+        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: "image-outline",
+          size: 64,
+          color: "#FFFFFF"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [photoPickerStyles.emptyTitle, {
+          color: '#FFFFFF'
+        }],
+        children: t('fileManagement.photoPicker.emptyTitle')
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [photoPickerStyles.emptySubtitle, {
+          color: '#FFFFFF'
+        }],
+        children: t('fileManagement.photoPicker.emptySubtitle')
+      }), isOwner && allowUpload && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [photoPickerStyles.emptyCta, {
+          backgroundColor: primaryColor
+        }],
+        onPress: onUpload,
+        disabled: uploading || isPickingDocument,
+        accessibilityRole: "button",
+        accessibilityLabel: t('fileManagement.uploadPhoto'),
+        accessibilityState: {
+          busy: uploading || isPickingDocument
+        },
+        children: uploading || isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: "#FFFFFF"
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Ionicons, {
+            name: "cloud-upload",
+            size: 18,
+            color: "#FFFFFF"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: photoPickerStyles.emptyCtaText,
+            children: t('fileManagement.uploadPhoto')
+          })]
+        })
+      })]
+    }) : /*#__PURE__*/_jsx(FlatList, {
+      data: photos,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      numColumns: columns,
+      contentContainerStyle: [photoPickerStyles.gridContent, {
+        paddingTop: contentPaddingTop
+      }],
+      style: photoPickerStyles.grid,
+      showsVerticalScrollIndicator: false,
+      refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
+        refreshing: refreshing,
+        onRefresh: onRefresh,
+        tintColor: "#FFFFFF",
+        colors: [primaryColor],
+        progressViewOffset: contentPaddingTop
+      }),
+      onEndReached: handleEndReached,
+      onEndReachedThreshold: 0.4,
+      ListFooterComponent: listFooter,
+      removeClippedSubviews: true,
+      initialNumToRender: Math.max(12, columns * 6),
+      windowSize: 9
+    }, `cols-${columns}`), /*#__PURE__*/_jsxs(View, {
+      style: [photoPickerStyles.header, {
+        paddingTop: HANDLE_ZONE,
+        minHeight: headerHeight
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: photoPickerStyles.headerRow,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [photoPickerStyles.headerSide, photoPickerStyles.headerSideLeft],
+          children: /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: onCancel,
+            style: photoPickerStyles.headerCancel,
+            accessibilityRole: "button",
+            accessibilityLabel: t('fileManagement.a11y.cancelPicker'),
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 8,
+              right: 8
+            },
+            children: /*#__PURE__*/_jsx(Text, {
+              style: photoPickerStyles.headerCancelText,
+              children: t('fileManagement.cancel')
+            })
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          pointerEvents: "none",
+          children: /*#__PURE__*/_jsx(Text, {
+            style: photoPickerStyles.headerTitle,
+            numberOfLines: 1,
+            children: t('fileManagement.choosePhoto')
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: [photoPickerStyles.headerSide, photoPickerStyles.headerSideRight],
+          children: multiSelect ? /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: handleConfirm,
+            disabled: confirmDisabled,
+            style: [photoPickerStyles.headerPrimaryPill, {
+              backgroundColor: confirmDisabled ? 'rgba(255,255,255,0.18)' : primaryColor,
+              opacity: confirmDisabled ? 0.6 : 1
+            }],
+            accessibilityRole: "button",
+            accessibilityLabel: t('fileManagement.a11y.confirmSelection'),
+            accessibilityState: {
+              disabled: confirmDisabled
+            },
+            children: /*#__PURE__*/_jsx(Text, {
+              style: photoPickerStyles.headerPrimaryText,
+              children: confirmLabel
+            })
+          }) : isOwner && allowUpload && /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: onUpload,
+            disabled: uploading || isPickingDocument,
+            style: [photoPickerStyles.headerPrimaryPill, !showUploadLabel && photoPickerStyles.headerPrimaryPillIconOnly, {
+              backgroundColor: primaryColor
+            }],
+            accessibilityRole: "button",
+            accessibilityLabel: t('fileManagement.a11y.uploadFromDevice'),
+            accessibilityState: {
+              busy: uploading || isPickingDocument
+            },
+            children: uploading || isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: "#FFFFFF"
+            }) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(Ionicons, {
+                name: "cloud-upload",
+                size: 16,
+                color: "#FFFFFF"
+              }), showUploadLabel && /*#__PURE__*/_jsx(Text, {
+                style: photoPickerStyles.headerPrimaryText,
+                children: t('fileManagement.upload')
+              })]
+            })
+          })
+        })]
+      }), uploading && /*#__PURE__*/_jsx(View, {
+        style: photoPickerStyles.headerProgressBarTrack,
+        children: /*#__PURE__*/_jsx(View, {
+          style: [photoPickerStyles.headerProgressBarFill, {
+            width: `${Math.round(progressFraction * 100)}%`,
+            backgroundColor: primaryColor
+          }]
+        })
+      })]
+    })]
+  });
+};
 const FileManagementScreen = ({
   onClose,
   theme,
@@ -112,9 +646,9 @@ const FileManagementScreen = ({
   } = useI18n();
   const uploadFileMutation = useUploadFile();
   // Prompt controls
-  const fileDeletePrompt = usePromptControl();
-  const bulkDeletePrompt = usePromptControl();
-  const visibilityChangePrompt = usePromptControl();
+  const fileDeleteDialog = useDialogControl();
+  const bulkDeleteDialog = useDialogControl();
+  const visibilityChangeDialog = useDialogControl();
   const [pendingDeleteFile, setPendingDeleteFile] = useState(null);
   const files = useFiles();
   // Ensure containerWidth is a number (TypeScript guard)
@@ -139,7 +673,37 @@ const FileManagementScreen = ({
   const [loadingFileContent, setLoadingFileContent] = useState(false);
   const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
   const [isPickingDocument, setIsPickingDocument] = useState(false);
-  const [viewMode, setViewMode] = useState('all');
+  const [reduceMotion, setReduceMotion] = useState(false);
+
+  // Detect reduce-motion preference once on mount + subscribe to changes.
+  // Used by `PhotoPickerView` to skip cell stagger animations.
+  useEffect(() => {
+    let cancelled = false;
+    AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
+      if (!cancelled) setReduceMotion(enabled);
+    }).catch(() => {
+      // Defaults to false; no action needed.
+    });
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', enabled => {
+      setReduceMotion(enabled);
+    });
+    return () => {
+      cancelled = true;
+      sub.remove();
+    };
+  }, []);
+
+  // Image-only picker mode: when the consumer restricts to image MIME types
+  // (e.g. avatar picker), photos grid is the more useful default view.
+  const isImageOnlyPicker = useMemo(() => {
+    if (!selectMode) return false;
+    if (disabledMimeTypes.length === 0) return false;
+    const blocksVideos = disabledMimeTypes.some(mt => mt === 'video/' || mt.startsWith('video/'));
+    const blocksAudio = disabledMimeTypes.some(mt => mt === 'audio/' || mt.startsWith('audio/'));
+    const blocksDocs = disabledMimeTypes.some(mt => mt === 'application/pdf' || mt === 'application/' || mt.startsWith('application/'));
+    return blocksVideos && blocksAudio && blocksDocs;
+  }, [disabledMimeTypes, selectMode]);
+  const [viewMode, setViewMode] = useState(isImageOnlyPicker ? 'photos' : 'all');
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState('date');
   const [sortOrder, setSortOrder] = useState('desc');
@@ -339,13 +903,13 @@ const FileManagementScreen = ({
       const response = await oxyServices.listUserFiles(currentPaging.limit, effectiveOffset);
       const assets = (response.files || []).map(f => ({
         id: f.id,
-        filename: f.originalName || f.sha256,
-        contentType: f.mime,
-        length: f.size,
+        filename: f.originalName ?? f.sha256 ?? '',
+        contentType: f.mime ?? '',
+        length: f.size ?? 0,
         chunkSize: 0,
-        uploadDate: f.createdAt,
-        metadata: f.metadata || {},
-        variants: f.variants || []
+        uploadDate: f.createdAt ?? '',
+        metadata: f.metadata ?? {},
+        variants: f.variants ?? []
       }));
       if (mode === 'more') {
         // append
@@ -471,9 +1035,9 @@ const FileManagementScreen = ({
         total: selectedFiles.length
       });
       const maxSize = 50 * 1024 * 1024; // 50MB
-      const oversizedFiles = selectedFiles.filter(file => file.size > maxSize);
+      const oversizedFiles = selectedFiles.filter(file => candidateSize(file) > maxSize);
       if (oversizedFiles.length > 0) {
-        const fileList = oversizedFiles.map(f => f.name).join(', ');
+        const fileList = oversizedFiles.map(f => candidateName(f, 'file')).join(', ');
         toast.error(t('fileManagement.toasts.filesTooLarge', {
           files: fileList
         }));
@@ -488,12 +1052,14 @@ const FileManagementScreen = ({
           total: selectedFiles.length
         });
         const raw = selectedFiles[i];
-        const fileName = raw.name || `file-${i + 1}`;
+        const fileName = candidateName(raw, `file-${i + 1}`);
+        const fileSize = candidateSize(raw);
+        const fileType = candidateType(raw);
         const optimisticId = `temp-${Date.now()}-${i}-${Math.random().toString(36).substr(2, 9)}`; // Unique ID per file
 
         try {
           // Validate file before upload
-          if (!raw || !raw.name || raw.size === undefined || raw.size <= 0) {
+          if (!raw || !fileName || fileSize <= 0) {
             const errorMsg = `Invalid file: ${fileName}`;
             if (__DEV__) {
               console.error('Upload validation failed:', {
@@ -507,9 +1073,9 @@ const FileManagementScreen = ({
           }
           const optimisticFile = {
             id: optimisticId,
-            filename: raw.name,
-            contentType: raw.type || 'application/octet-stream',
-            length: raw.size,
+            filename: fileName,
+            contentType: fileType,
+            length: fileSize,
             chunkSize: 0,
             uploadDate: new Date().toISOString(),
             metadata: {
@@ -532,9 +1098,9 @@ const FileManagementScreen = ({
           if (f) {
             const merged = {
               id: f.id,
-              filename: f.originalName || f.sha256 || raw.name,
-              contentType: f.mime || raw.type || 'application/octet-stream',
-              length: f.size || raw.size,
+              filename: f.originalName || f.sha256 || fileName,
+              contentType: f.mime || fileType,
+              length: f.size || fileSize,
               chunkSize: 0,
               uploadDate: f.createdAt || new Date().toISOString(),
               metadata: f.metadata || {},
@@ -565,14 +1131,14 @@ const FileManagementScreen = ({
           }
         } catch (error) {
           failureCount++;
-          const errorMessage = getErrorMessage(error) || String(error) || 'Upload failed';
+          const errorMessage = getErrorMessage(error) || 'Upload failed';
           const fullError = `${fileName}: ${errorMessage}`;
           errors.push(fullError);
           if (__DEV__) {
             console.error('File upload failed:', {
               fileName,
-              fileSize: raw.size,
-              fileType: raw.type,
+              fileSize,
+              fileType,
               error: errorMessage,
               stack: error instanceof Error ? error.stack : undefined
             });
@@ -607,8 +1173,6 @@ const FileManagementScreen = ({
     }
     return uploadedFiles;
   };
-
-  // biome-ignore lint/suspicious/noExplicitAny: Files from document picker may have extra properties like uri
   const handleFileSelection = useCallback(async selectedFiles => {
     const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
     const processedFiles = [];
@@ -621,55 +1185,55 @@ const FileManagementScreen = ({
         toast.error(t('fileManagement.toasts.invalidFileMissing'));
         continue;
       }
-      if (!file.name || typeof file.name !== 'string') {
+      const name = candidateName(file, '');
+      if (!name) {
         if (__DEV__) {
           console.error('Invalid file: missing or invalid name property', file);
         }
         toast.error(t('fileManagement.toasts.invalidFileName'));
         continue;
       }
-      if (file.size === undefined || file.size === null || Number.isNaN(file.size)) {
+      const size = file.size;
+      if (size === undefined || size === null || Number.isNaN(size)) {
         if (__DEV__) {
           console.error('Invalid file: missing or invalid size property', file);
         }
         toast.error(t('fileManagement.toasts.invalidFileSize', {
-          name: file.name || 'unknown'
+          name
         }));
         continue;
       }
-      if (file.size <= 0) {
+      if (size <= 0) {
         if (__DEV__) {
           console.error('Invalid file: file size is zero or negative', file);
         }
         toast.error(t('fileManagement.toasts.fileEmpty', {
-          name: file.name
+          name
         }));
         continue;
       }
 
       // Validate file size
-      if (file.size > MAX_FILE_SIZE) {
+      if (size > MAX_FILE_SIZE) {
         toast.error(t('fileManagement.toasts.fileTooLarge', {
-          name: file.name,
+          name,
           maxSize: formatFileSize(MAX_FILE_SIZE)
         }));
         continue;
       }
-
-      // Ensure file has a type property
-      const fileType = file.type || 'application/octet-stream';
+      const fileType = candidateType(file);
 
       // Generate preview for images - unified approach
       let preview;
       if (fileType.startsWith('image/')) {
         // Try to use file URI from expo-document-picker if available (works on all platforms)
-        const fileUri = file.uri;
-        if (fileUri && typeof fileUri === 'string' && (fileUri.startsWith('file://') || fileUri.startsWith('content://') || fileUri.startsWith('http://') || fileUri.startsWith('https://') || fileUri.startsWith('blob:'))) {
+        const fileUri = candidateUri(file);
+        if (fileUri && (fileUri.startsWith('file://') || fileUri.startsWith('content://') || fileUri.startsWith('http://') || fileUri.startsWith('https://') || fileUri.startsWith('blob:'))) {
           preview = fileUri;
         } else {
-          // Fallback: create blob URL if possible (works on web)
+          // Fallback: create blob URL if possible (works on web only)
           try {
-            if (file instanceof File || file instanceof Blob) {
+            if (typeof File !== 'undefined' && file instanceof File || typeof Blob !== 'undefined' && file instanceof Blob) {
               preview = URL.createObjectURL(file);
             }
           } catch (error) {
@@ -683,8 +1247,8 @@ const FileManagementScreen = ({
       processedFiles.push({
         file,
         preview,
-        size: file.size,
-        name: file.name,
+        size,
+        name,
         type: fileType
       });
     }
@@ -696,7 +1260,7 @@ const FileManagementScreen = ({
     // Show preview modal for user to review files before upload
     setPendingFiles(processedFiles);
     setShowUploadPreview(true);
-  }, []);
+  }, [t]);
   const handleConfirmUpload = async () => {
     if (pendingFiles.length === 0) return;
     setShowUploadPreview(false);
@@ -876,8 +1440,8 @@ const FileManagementScreen = ({
       id: fileId,
       name: filename
     });
-    fileDeletePrompt.open();
-  }, [fileDeletePrompt]);
+    fileDeleteDialog.open();
+  }, [fileDeleteDialog]);
   const handleFileDelete = useCallback(async () => {
     if (!pendingDeleteFile) return;
     const {
@@ -911,8 +1475,8 @@ const FileManagementScreen = ({
   }, [pendingDeleteFile, storeSetDeleting, oxyServices, loadFiles, t]);
   const confirmBulkDelete = useCallback(() => {
     if (selectedIds.size === 0) return;
-    bulkDeletePrompt.open();
-  }, [selectedIds.size, bulkDeletePrompt]);
+    bulkDeleteDialog.open();
+  }, [selectedIds.size, bulkDeleteDialog]);
   const handleBulkDelete = useCallback(async () => {
     if (selectedIds.size === 0) return;
     try {
@@ -1978,6 +2542,51 @@ const FileManagementScreen = ({
     return /*#__PURE__*/_jsx(SkeletonLoader, {});
   }
 
+  // Dedicated flagship-style photo picker view used in the avatar-picker
+  // context (selectMode + image-only filter). The picker is intentionally
+  // minimal: black backdrop, edge-to-edge grid, translucent header. The
+  // standalone file manager (non-picker browse) keeps the existing UI.
+  if (isImageOnlyPicker && !showUploadPreview) {
+    const photosOnly = filteredFiles.filter(file => file.contentType.startsWith('image/'));
+    const isOwner = user?.id === targetUserId;
+    const allowUpload = isOwner && allowUploadInSelectMode;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(PhotoPickerView, {
+        photos: photosOnly,
+        selectedIds: selectedIds,
+        multiSelect: multiSelect,
+        maxSelection: maxSelection,
+        allowUpload: allowUpload,
+        refreshing: refreshing,
+        uploading: uploading,
+        isPickingDocument: isPickingDocument,
+        uploadProgress: uploadProgress,
+        hasMore: paging.hasMore,
+        loadingMore: paging.loadingMore,
+        reduceMotion: reduceMotion,
+        getThumbUrl: getSafeDownloadUrlCallback,
+        primaryColor: colors.primary,
+        isOwner: isOwner,
+        onTogglePhoto: toggleSelect,
+        onPreviewPhoto: file => showFileDetailsModal(file),
+        onUpload: handleFileUpload,
+        onRefresh: () => loadFiles('refresh'),
+        onLoadMore: () => loadFiles('more'),
+        onCancel: () => {
+          if (onClose) onClose();else goBack?.();
+        },
+        onConfirm: confirmMultiSelection,
+        t: t
+      }), /*#__PURE__*/_jsx(FileDetailsModal, {
+        control: fileDetailsControl,
+        file: selectedFile,
+        onDownload: handleFileDownload,
+        onDelete: confirmFileDelete,
+        isOwner: isOwner
+      })]
+    });
+  }
+
   // If a file is opened, show the file viewer
   if (!selectMode && openedFile) {
     return /*#__PURE__*/_jsxs(_Fragment, {
@@ -2065,7 +2674,7 @@ const FileManagementScreen = ({
         key: 'visibility',
         text: t('fileManagement.visibility'),
         onPress: () => {
-          visibilityChangePrompt.open();
+          visibilityChangeDialog.open();
         },
         icon: 'eye'
       }] : undefined,
@@ -2090,41 +2699,53 @@ const FileManagementScreen = ({
             icon: viewMode === 'all' ? 'folder' : 'folder-outline',
             primaryColor: colors.primary,
             textColor: colors.text,
-            style: fileManagementStyles.viewModeButton
+            style: fileManagementStyles.viewModeButton,
+            accessibilityLabel: t('fileManagement.a11y.viewAll') || 'Show all files'
           }), /*#__PURE__*/_jsx(AnimatedButton, {
             isSelected: viewMode === 'photos',
             onPress: () => setViewMode('photos'),
             icon: viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline',
             primaryColor: colors.primary,
             textColor: colors.text,
-            style: fileManagementStyles.viewModeButton
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'videos',
-            onPress: () => setViewMode('videos'),
-            icon: viewMode === 'videos' ? 'video' : 'video-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: fileManagementStyles.viewModeButton
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'documents',
-            onPress: () => setViewMode('documents'),
-            icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: fileManagementStyles.viewModeButton
-          }), /*#__PURE__*/_jsx(AnimatedButton, {
-            isSelected: viewMode === 'audio',
-            onPress: () => setViewMode('audio'),
-            icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: fileManagementStyles.viewModeButton
+            style: fileManagementStyles.viewModeButton,
+            accessibilityLabel: t('fileManagement.a11y.viewPhotos') || 'Show photos only'
+          }), !isImageOnlyPicker && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(AnimatedButton, {
+              isSelected: viewMode === 'videos',
+              onPress: () => setViewMode('videos'),
+              icon: viewMode === 'videos' ? 'video' : 'video-outline',
+              primaryColor: colors.primary,
+              textColor: colors.text,
+              style: fileManagementStyles.viewModeButton,
+              accessibilityLabel: t('fileManagement.a11y.viewVideos') || 'Show videos only'
+            }), /*#__PURE__*/_jsx(AnimatedButton, {
+              isSelected: viewMode === 'documents',
+              onPress: () => setViewMode('documents'),
+              icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
+              primaryColor: colors.primary,
+              textColor: colors.text,
+              style: fileManagementStyles.viewModeButton,
+              accessibilityLabel: t('fileManagement.a11y.viewDocuments') || 'Show documents only'
+            }), /*#__PURE__*/_jsx(AnimatedButton, {
+              isSelected: viewMode === 'audio',
+              onPress: () => setViewMode('audio'),
+              icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
+              primaryColor: colors.primary,
+              textColor: colors.text,
+              style: fileManagementStyles.viewModeButton,
+              accessibilityLabel: t('fileManagement.a11y.viewAudio') || 'Show audio only'
+            })]
           })]
         })
       }), /*#__PURE__*/_jsxs(TouchableOpacity, {
         style: [fileManagementStyles.sortButton, {
           backgroundColor: colors.card
         }],
+        accessibilityRole: "button",
+        accessibilityLabel: t('fileManagement.a11y.sortBy', {
+          field: sortBy,
+          order: sortOrder === 'asc' ? 'ascending' : 'descending'
+        }) || `Sort by ${sortBy}, ${sortOrder === 'asc' ? 'ascending' : 'descending'}`,
         onPress: () => {
           // Cycle through sort options: date -> size -> name -> type -> date
           const sortOrder = ['date', 'size', 'name', 'type'];
@@ -2146,11 +2767,16 @@ const FileManagementScreen = ({
           color: colors.textSecondary
         })]
       }), user?.id === targetUserId && (!selectMode || selectMode && allowUploadInSelectMode) && /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [fileManagementStyles.uploadButton, {
+        style: [fileManagementStyles.uploadButton, isImageOnlyPicker && fileManagementStyles.uploadButtonExtended, {
           backgroundColor: colors.primary
         }],
         onPress: handleFileUpload,
         disabled: uploading || isPickingDocument,
+        accessibilityRole: "button",
+        accessibilityLabel: isImageOnlyPicker ? t('fileManagement.a11y.uploadFromDevice') || 'Upload photo from device' : t('fileManagement.a11y.uploadFile') || 'Upload file',
+        accessibilityState: {
+          busy: uploading || isPickingDocument
+        },
         children: uploading ? /*#__PURE__*/_jsxs(View, {
           style: fileManagementStyles.uploadProgress,
           children: [/*#__PURE__*/_jsx(ActivityIndicator, {
@@ -2163,6 +2789,17 @@ const FileManagementScreen = ({
         }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
           size: "small",
           color: "#FFFFFF"
+        }) : isImageOnlyPicker ? /*#__PURE__*/_jsxs(View, {
+          style: fileManagementStyles.uploadButtonContent,
+          children: [/*#__PURE__*/_jsx(Ionicons, {
+            name: "cloud-upload",
+            size: 18,
+            color: "#FFFFFF"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: fileManagementStyles.uploadButtonLabel,
+            numberOfLines: 1,
+            children: t('fileManagement.upload') || 'Upload'
+          })]
         }) : /*#__PURE__*/_jsx(Ionicons, {
           name: "add",
           size: 22,
@@ -2358,51 +2995,53 @@ const FileManagementScreen = ({
           color: colors.primary
         })]
       })
-    }), /*#__PURE__*/_jsx(Prompt.Basic, {
-      control: fileDeletePrompt,
+    }), /*#__PURE__*/_jsx(Dialog, {
+      control: fileDeleteDialog,
       title: t('fileManagement.deleteFile') || 'Delete File',
       description: pendingDeleteFile ? t('fileManagement.confirms.deleteFile', {
         filename: pendingDeleteFile.name
       }) : '',
-      onConfirm: handleFileDelete,
-      confirmButtonCta: t('fileManagement.confirm') || 'Delete',
-      confirmButtonColor: "negative"
-    }), /*#__PURE__*/_jsx(Prompt.Basic, {
-      control: bulkDeletePrompt,
+      actions: [{
+        label: t('fileManagement.confirm') || 'Delete',
+        color: 'destructive',
+        onPress: handleFileDelete
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
+    }), /*#__PURE__*/_jsx(Dialog, {
+      control: bulkDeleteDialog,
       title: t('fileManagement.deleteFiles') || 'Delete Files',
       description: t('fileManagement.confirms.deleteFiles', {
         count: selectedIds.size
       }),
-      onConfirm: handleBulkDelete,
-      confirmButtonCta: t('fileManagement.confirm') || 'Delete',
-      confirmButtonColor: "negative"
-    }), /*#__PURE__*/_jsxs(Prompt.Outer, {
-      control: visibilityChangePrompt,
-      children: [/*#__PURE__*/_jsxs(Prompt.Content, {
-        children: [/*#__PURE__*/_jsx(Prompt.TitleText, {
-          children: t('fileManagement.changeVisibility') || 'Change Visibility'
-        }), /*#__PURE__*/_jsx(Prompt.DescriptionText, {
-          children: t('fileManagement.changeVisibilityConfirm', {
-            count: selectedIds.size
-          })
-        })]
-      }), /*#__PURE__*/_jsxs(Prompt.Actions, {
-        children: [/*#__PURE__*/_jsx(Prompt.Action, {
-          cta: t('fileManagement.private') || 'Private',
-          onPress: () => handleBulkVisibilityChange('private'),
-          color: "primary"
-        }), /*#__PURE__*/_jsx(Prompt.Action, {
-          cta: t('fileManagement.public') || 'Public',
-          onPress: () => handleBulkVisibilityChange('public'),
-          color: "primary_subtle"
-        }), /*#__PURE__*/_jsx(Prompt.Action, {
-          cta: t('fileManagement.unlisted') || 'Unlisted',
-          onPress: () => handleBulkVisibilityChange('unlisted'),
-          color: "primary_subtle"
-        }), /*#__PURE__*/_jsx(Prompt.Cancel, {
-          cta: t('common.cancel') || 'Cancel'
-        })]
-      })]
+      actions: [{
+        label: t('fileManagement.confirm') || 'Delete',
+        color: 'destructive',
+        onPress: handleBulkDelete
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
+    }), /*#__PURE__*/_jsx(Dialog, {
+      control: visibilityChangeDialog,
+      title: t('fileManagement.changeVisibility') || 'Change Visibility',
+      description: t('fileManagement.changeVisibilityConfirm', {
+        count: selectedIds.size
+      }),
+      actions: [{
+        label: t('fileManagement.private') || 'Private',
+        onPress: () => handleBulkVisibilityChange('private')
+      }, {
+        label: t('fileManagement.public') || 'Public',
+        onPress: () => handleBulkVisibilityChange('public')
+      }, {
+        label: t('fileManagement.unlisted') || 'Unlisted',
+        onPress: () => handleBulkVisibilityChange('unlisted')
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
     })]
   });
 };