@oxyhq/services 6.9.45 → 6.10.1

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

@@ -7,14 +7,14 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _expoImage = require("expo-image");
-var _sonner = require("../../lib/sonner");
-var _prompt = _interopRequireWildcard(require("@oxyhq/bloom/prompt"));
-var Prompt = _prompt;
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _bloom = require("@oxyhq/bloom");
 var _vectorIcons = require("@expo/vector-icons");
+var _core = require("@oxyhq/core");
 var _fileStore = require("../stores/fileStore.js");
 var _Header = _interopRequireDefault(require("../components/Header.js"));
 var _JustifiedPhotoGrid = _interopRequireDefault(require("../components/photogrid/JustifiedPhotoGrid.js"));
-var _index = require("../components/index.js");
+var _settingsList = require("@oxyhq/bloom/settings-list");
 var _theme = require("@oxyhq/bloom/theme");
 var _OxyContext = require("../context/OxyContext.js");
 var _useI18n = require("../hooks/useI18n.js");
@@ -23,7 +23,6 @@ var _fileManagement = require("../utils/fileManagement.js");
 var _FileViewer = require("../components/fileManagement/FileViewer.js");
 var _FileDetailsModal = require("../components/fileManagement/FileDetailsModal.js");
 var _UploadPreview = require("../components/fileManagement/UploadPreview.js");
-var _dialog = require("@oxyhq/bloom/dialog");
 var _styles = require("../components/fileManagement/styles.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -40,11 +39,96 @@ const loadDocumentPicker = async () => {
     throw new Error('expo-document-picker is not installed. Please install it: npx expo install expo-document-picker');
   }
 };
+/**
+ * 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 = (0, _core.getErrorMessage)(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;
 
-// @ts-ignore - MaterialCommunityIcons is available at runtime
+/** 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';
+};
 
-/** Extract error message from unknown error type */
-const getErrorMessage = error => error instanceof Error ? getErrorMessage(error) : typeof error === 'string' ? error : undefined;
+/** 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 (_reactNative.Platform.OS === 'web') return Promise.resolve(null);
+  if (hapticsModulePromise) return hapticsModulePromise;
+  hapticsModulePromise = (async () => {
+    try {
+      const mod = await Promise.resolve().then(() => _interopRequireWildcard(require('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 = ({
@@ -53,7 +137,8 @@ const AnimatedButton = ({
   icon,
   primaryColor,
   textColor,
-  style
+  style,
+  accessibilityLabel
 }) => {
   const animatedValue = (0, _react.useRef)(new _reactNative.Animated.Value(isSelected ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
@@ -68,13 +153,14 @@ const AnimatedButton = ({
     inputRange: [0, 1],
     outputRange: ['transparent', primaryColor]
   });
-  const iconColor = animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [textColor, '#FFFFFF']
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
     onPress: onPress,
     activeOpacity: 0.7,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      selected: isSelected
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: [style, {
         backgroundColor
@@ -89,6 +175,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.default.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 = (0, _reactNativeReanimated.useSharedValue)(1);
+  const prevSelected = (0, _react.useRef)(isSelected);
+  (0, _react.useEffect)(() => {
+    if (prevSelected.current === isSelected) return;
+    prevSelected.current = isSelected;
+    if (!isSelected) {
+      ringScale.value = 1;
+      return;
+    }
+    if (reduceMotion) {
+      ringScale.value = 1;
+      return;
+    }
+    ringScale.value = (0, _reactNativeReanimated.withSequence)((0, _reactNativeReanimated.withTiming)(1.05, {
+      duration: 110
+    }), (0, _reactNativeReanimated.withSpring)(1, {
+      damping: 14,
+      stiffness: 200
+    }));
+  }, [isSelected, reduceMotion, ringScale]);
+  const ringAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      scale: ringScale.value
+    }]
+  }));
+  const inner = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_styles.photoPickerStyles.cellInner, dim && _styles.photoPickerStyles.cellDim],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
+        source: {
+          uri: thumbUrl
+        },
+        style: _styles.photoPickerStyles.cellImage,
+        contentFit: "cover",
+        transition: 120,
+        cachePolicy: "memory-disk",
+        accessibilityLabel: photo.filename
+      })
+    }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      pointerEvents: "none",
+      style: [_styles.photoPickerStyles.cellRing, {
+        borderColor: primaryColor
+      }, ringAnimatedStyle]
+    }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      style: [_styles.photoPickerStyles.cellBadge, {
+        backgroundColor: primaryColor
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: _styles.photoPickerStyles.cellBadgeText,
+        children: selectionIndex > 0 ? String(selectionIndex) : ''
+      })
+    })]
+  });
+  const cellWrapperStyle = {
+    width: size,
+    height: size,
+    marginRight,
+    marginBottom
+  };
+  if (reduceMotion) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      activeOpacity: 0.85,
+      onPress: onPress,
+      onLongPress: onLongPress,
+      style: [_styles.photoPickerStyles.cellWrapper, cellWrapperStyle],
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: {
+        selected: isSelected
+      },
+      children: inner
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    entering: _reactNativeReanimated.FadeIn.delay(delay).duration(200),
+    style: [_styles.photoPickerStyles.cellWrapper, cellWrapperStyle],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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
+  } = (0, _reactNative.useWindowDimensions)();
+
+  // Layout: 3 columns phone portrait, 2 columns phone landscape,
+  // 4 columns tablet (>= 600 width). Apple Photos-ish.
+  const columns = (0, _react.useMemo)(() => {
+    if (windowWidth >= 600) return 4;
+    // Landscape phone: width > height
+    if (windowWidth > windowHeight) return 2;
+    return 3;
+  }, [windowWidth, windowHeight]);
+  const GUTTER = 2;
+  const cellSize = (0, _react.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 = (0, _react.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 = (0, _react.useRef)(columns);
+  (0, _react.useEffect)(() => {
+    if (a11yColumnsAnnouncement.current !== columns) {
+      a11yColumnsAnnouncement.current = columns;
+    }
+  }, [columns]);
+  const handleCellPress = (0, _react.useCallback)(photo => {
+    if (_reactNative.Platform.OS !== 'web') {
+      void hapticImpact('light');
+    }
+    onTogglePhoto(photo);
+  }, [onTogglePhoto]);
+  const handleCellLongPress = (0, _react.useCallback)(photo => {
+    if (_reactNative.Platform.OS !== 'web') {
+      void hapticSelection();
+    }
+    onPreviewPhoto(photo);
+  }, [onPreviewPhoto]);
+  const handleConfirm = (0, _react.useCallback)(() => {
+    if (multiSelect) {
+      if (selectedIds.size === 0) return;
+      if (_reactNative.Platform.OS !== 'web') {
+        void hapticNotification('success');
+      }
+    }
+    onConfirm();
+  }, [multiSelect, selectedIds.size, onConfirm]);
+
+  // FlatList renderItem: each cell knows its enterIndex (for stagger).
+  const renderItem = (0, _react.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__*/(0, _jsxRuntime.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 = (0, _react.useCallback)(item => item.id, []);
+  const listFooter = (0, _react.useMemo)(() => {
+    if (!loadingMore) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        paddingVertical: 16,
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        size: "small",
+        color: "#FFFFFF"
+      })
+    });
+  }, [loadingMore]);
+  const handleEndReached = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _styles.photoPickerStyles.root,
+    children: [isEmpty ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [_styles.photoPickerStyles.empty, {
+        paddingTop: contentPaddingTop
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: _styles.photoPickerStyles.emptyIconWrap,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.MaterialCommunityIcons, {
+          name: "image-outline",
+          size: 64,
+          color: "#FFFFFF"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [_styles.photoPickerStyles.emptyTitle, {
+          color: '#FFFFFF'
+        }],
+        children: t('fileManagement.photoPicker.emptyTitle')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [_styles.photoPickerStyles.emptySubtitle, {
+          color: '#FFFFFF'
+        }],
+        children: t('fileManagement.photoPicker.emptySubtitle')
+      }), isOwner && allowUpload && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [_styles.photoPickerStyles.emptyCta, {
+          backgroundColor: primaryColor
+        }],
+        onPress: onUpload,
+        disabled: uploading || isPickingDocument,
+        accessibilityRole: "button",
+        accessibilityLabel: t('fileManagement.uploadPhoto'),
+        accessibilityState: {
+          busy: uploading || isPickingDocument
+        },
+        children: uploading || isPickingDocument ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+          size: "small",
+          color: "#FFFFFF"
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "cloud-upload",
+            size: 18,
+            color: "#FFFFFF"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: _styles.photoPickerStyles.emptyCtaText,
+            children: t('fileManagement.uploadPhoto')
+          })]
+        })
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      data: photos,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      numColumns: columns,
+      contentContainerStyle: [_styles.photoPickerStyles.gridContent, {
+        paddingTop: contentPaddingTop
+      }],
+      style: _styles.photoPickerStyles.grid,
+      showsVerticalScrollIndicator: false,
+      refreshControl: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [_styles.photoPickerStyles.header, {
+        paddingTop: HANDLE_ZONE,
+        minHeight: headerHeight
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: _styles.photoPickerStyles.headerRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [_styles.photoPickerStyles.headerSide, _styles.photoPickerStyles.headerSideLeft],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: onCancel,
+            style: _styles.photoPickerStyles.headerCancel,
+            accessibilityRole: "button",
+            accessibilityLabel: t('fileManagement.a11y.cancelPicker'),
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 8,
+              right: 8
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: _styles.photoPickerStyles.headerCancelText,
+              children: t('fileManagement.cancel')
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          pointerEvents: "none",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: _styles.photoPickerStyles.headerTitle,
+            numberOfLines: 1,
+            children: t('fileManagement.choosePhoto')
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [_styles.photoPickerStyles.headerSide, _styles.photoPickerStyles.headerSideRight],
+          children: multiSelect ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: handleConfirm,
+            disabled: confirmDisabled,
+            style: [_styles.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: _styles.photoPickerStyles.headerPrimaryText,
+              children: confirmLabel
+            })
+          }) : isOwner && allowUpload && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: onUpload,
+            disabled: uploading || isPickingDocument,
+            style: [_styles.photoPickerStyles.headerPrimaryPill, !showUploadLabel && _styles.photoPickerStyles.headerPrimaryPillIconOnly, {
+              backgroundColor: primaryColor
+            }],
+            accessibilityRole: "button",
+            accessibilityLabel: t('fileManagement.a11y.uploadFromDevice'),
+            accessibilityState: {
+              busy: uploading || isPickingDocument
+            },
+            children: uploading || isPickingDocument ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+              size: "small",
+              color: "#FFFFFF"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+                name: "cloud-upload",
+                size: 16,
+                color: "#FFFFFF"
+              }), showUploadLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: _styles.photoPickerStyles.headerPrimaryText,
+                children: t('fileManagement.upload')
+              })]
+            })
+          })
+        })]
+      }), uploading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: _styles.photoPickerStyles.headerProgressBarTrack,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [_styles.photoPickerStyles.headerProgressBarFill, {
+            width: `${Math.round(progressFraction * 100)}%`,
+            backgroundColor: primaryColor
+          }]
+        })
+      })]
+    })]
+  });
+};
 const FileManagementScreen = ({
   onClose,
   theme,
@@ -119,9 +652,9 @@ const FileManagementScreen = ({
   } = (0, _useI18n.useI18n)();
   const uploadFileMutation = (0, _useAccountMutations.useUploadFile)();
   // Prompt controls
-  const fileDeletePrompt = (0, _prompt.usePromptControl)();
-  const bulkDeletePrompt = (0, _prompt.usePromptControl)();
-  const visibilityChangePrompt = (0, _prompt.usePromptControl)();
+  const fileDeleteDialog = (0, _bloom.useDialogControl)();
+  const bulkDeleteDialog = (0, _bloom.useDialogControl)();
+  const visibilityChangeDialog = (0, _bloom.useDialogControl)();
   const [pendingDeleteFile, setPendingDeleteFile] = (0, _react.useState)(null);
   const files = (0, _fileStore.useFiles)();
   // Ensure containerWidth is a number (TypeScript guard)
@@ -139,14 +672,44 @@ const FileManagementScreen = ({
     loadingMore: false
   });
   const [selectedFile, setSelectedFile] = (0, _react.useState)(null);
-  const fileDetailsControl = (0, _dialog.useDialogControl)();
+  const fileDetailsControl = (0, _bloom.useDialogControl)();
   // In selectMode we never open the detailed viewer
   const [openedFile, setOpenedFile] = (0, _react.useState)(null);
   const [fileContent, setFileContent] = (0, _react.useState)(null);
   const [loadingFileContent, setLoadingFileContent] = (0, _react.useState)(false);
   const [showFileDetailsInViewer, setShowFileDetailsInViewer] = (0, _react.useState)(false);
   const [isPickingDocument, setIsPickingDocument] = (0, _react.useState)(false);
-  const [viewMode, setViewMode] = (0, _react.useState)('all');
+  const [reduceMotion, setReduceMotion] = (0, _react.useState)(false);
+
+  // Detect reduce-motion preference once on mount + subscribe to changes.
+  // Used by `PhotoPickerView` to skip cell stagger animations.
+  (0, _react.useEffect)(() => {
+    let cancelled = false;
+    _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
+      if (!cancelled) setReduceMotion(enabled);
+    }).catch(() => {
+      // Defaults to false; no action needed.
+    });
+    const sub = _reactNative.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 = (0, _react.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] = (0, _react.useState)(isImageOnlyPicker ? 'photos' : 'all');
   const [searchQuery, setSearchQuery] = (0, _react.useState)('');
   const [sortBy, setSortBy] = (0, _react.useState)('date');
   const [sortOrder, setSortOrder] = (0, _react.useState)('desc');
@@ -210,7 +773,7 @@ const FileManagementScreen = ({
     if (disabledMimeTypes.length) {
       const blocked = disabledMimeTypes.some(mt => file.contentType === mt || file.contentType.startsWith(mt.endsWith('/') ? mt : `${mt}/`));
       if (blocked) {
-        _sonner.toast.error(t('fileManagement.toasts.fileTypeBlocked'));
+        _bloom.toast.error(t('fileManagement.toasts.fileTypeBlocked'));
         return;
       }
     }
@@ -250,7 +813,7 @@ const FileManagementScreen = ({
       const already = next.has(file.id);
       if (!already) {
         if (maxSelection && next.size >= maxSelection) {
-          _sonner.toast.error(t('fileManagement.toasts.maxSelection', {
+          _bloom.toast.error(t('fileManagement.toasts.maxSelection', {
             max: maxSelection
           }));
           return prev;
@@ -346,13 +909,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
@@ -379,7 +942,7 @@ const FileManagementScreen = ({
         }));
       }
     } catch (error) {
-      _sonner.toast.error(getErrorMessage(error) || t('fileManagement.toasts.loadFailed'));
+      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.loadFailed'));
     } finally {
       setLoading(false);
       setRefreshing(false);
@@ -478,10 +1041,10 @@ 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(', ');
-        _sonner.toast.error(t('fileManagement.toasts.filesTooLarge', {
+        const fileList = oversizedFiles.map(f => candidateName(f, 'file')).join(', ');
+        _bloom.toast.error(t('fileManagement.toasts.filesTooLarge', {
           files: fileList
         }));
         return [];
@@ -495,12 +1058,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:', {
@@ -514,9 +1079,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: {
@@ -539,9 +1104,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 || {},
@@ -572,14 +1137,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
             });
@@ -592,14 +1157,14 @@ const FileManagementScreen = ({
 
       // Show success/error messages
       if (successCount > 0) {
-        _sonner.toast.success(t('fileManagement.toasts.uploadSuccess', {
+        _bloom.toast.success(t('fileManagement.toasts.uploadSuccess', {
           count: successCount
         }));
       }
       if (failureCount > 0) {
         // Show detailed error message with first few errors
         const errorDetails = errors.length > 0 ? `\n${errors.slice(0, 3).join('\n')}${errors.length > 3 ? `\n...and ${errors.length - 3} more` : ''}` : '';
-        _sonner.toast.error(`${t('fileManagement.toasts.uploadFailed', {
+        _bloom.toast.error(`${t('fileManagement.toasts.uploadFailed', {
           count: failureCount
         })}${errorDetails}`);
       }
@@ -608,14 +1173,12 @@ const FileManagementScreen = ({
         loadFiles('silent');
       }, 1200);
     } catch (error) {
-      _sonner.toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
+      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
     } finally {
       storeSetUploadProgress(null);
     }
     return uploadedFiles;
   };
-
-  // biome-ignore lint/suspicious/noExplicitAny: Files from document picker may have extra properties like uri
   const handleFileSelection = (0, _react.useCallback)(async selectedFiles => {
     const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
     const processedFiles = [];
@@ -625,58 +1188,58 @@ const FileManagementScreen = ({
         if (__DEV__) {
           console.error('Invalid file: file is null or undefined');
         }
-        _sonner.toast.error(t('fileManagement.toasts.invalidFileMissing'));
+        _bloom.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);
         }
-        _sonner.toast.error(t('fileManagement.toasts.invalidFileName'));
+        _bloom.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);
         }
-        _sonner.toast.error(t('fileManagement.toasts.invalidFileSize', {
-          name: file.name || 'unknown'
+        _bloom.toast.error(t('fileManagement.toasts.invalidFileSize', {
+          name
         }));
         continue;
       }
-      if (file.size <= 0) {
+      if (size <= 0) {
         if (__DEV__) {
           console.error('Invalid file: file size is zero or negative', file);
         }
-        _sonner.toast.error(t('fileManagement.toasts.fileEmpty', {
-          name: file.name
+        _bloom.toast.error(t('fileManagement.toasts.fileEmpty', {
+          name
         }));
         continue;
       }
 
       // Validate file size
-      if (file.size > MAX_FILE_SIZE) {
-        _sonner.toast.error(t('fileManagement.toasts.fileTooLarge', {
-          name: file.name,
+      if (size > MAX_FILE_SIZE) {
+        _bloom.toast.error(t('fileManagement.toasts.fileTooLarge', {
+          name,
           maxSize: (0, _fileManagement.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) {
@@ -690,20 +1253,20 @@ const FileManagementScreen = ({
       processedFiles.push({
         file,
         preview,
-        size: file.size,
-        name: file.name,
+        size,
+        name,
         type: fileType
       });
     }
     if (processedFiles.length === 0) {
-      _sonner.toast.error(t('fileManagement.toasts.noValidFiles'));
+      _bloom.toast.error(t('fileManagement.toasts.noValidFiles'));
       return;
     }
 
     // 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);
@@ -751,7 +1314,7 @@ const FileManagementScreen = ({
       }
       endUpload();
     } catch (error) {
-      _sonner.toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
+      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
       endUpload();
     }
   };
@@ -784,7 +1347,7 @@ const FileManagementScreen = ({
   const handleFileUpload = async () => {
     // Prevent concurrent document picker calls
     if (isPickingDocument) {
-      _sonner.toast.error(t('fileManagement.toasts.waitForSelection'));
+      _bloom.toast.error(t('fileManagement.toasts.waitForSelection'));
       return;
     }
     try {
@@ -806,7 +1369,7 @@ const FileManagementScreen = ({
       }
       if (!result.assets || result.assets.length === 0) {
         setIsPickingDocument(false);
-        _sonner.toast.error(t('fileManagement.toasts.noFilesSelected'));
+        _bloom.toast.error(t('fileManagement.toasts.noFilesSelected'));
         return;
       }
 
@@ -848,7 +1411,7 @@ const FileManagementScreen = ({
       // Show errors if any
       if (errors.length > 0) {
         const errorMessage = errors.slice(0, 3).join('\n') + (errors.length > 3 ? `\n...and ${errors.length - 3} more` : '');
-        _sonner.toast.error(t('fileManagement.toasts.loadSomeFailed', {
+        _bloom.toast.error(t('fileManagement.toasts.loadSomeFailed', {
           errors: errorMessage
         }));
       }
@@ -858,7 +1421,7 @@ const FileManagementScreen = ({
         await handleFileSelection(files);
       } else {
         // Files were selected but none could be converted
-        _sonner.toast.error(t('fileManagement.toasts.noFilesProcessed'));
+        _bloom.toast.error(t('fileManagement.toasts.noFilesProcessed'));
       }
     } catch (error) {
       if (__DEV__) {
@@ -866,12 +1429,12 @@ const FileManagementScreen = ({
       }
       if (getErrorMessage(error)?.includes('expo-document-picker') || getErrorMessage(error)?.includes('Different document picking in progress')) {
         if (getErrorMessage(error)?.includes('Different document picking in progress')) {
-          _sonner.toast.error(t('fileManagement.toasts.waitForSelection'));
+          _bloom.toast.error(t('fileManagement.toasts.waitForSelection'));
         } else {
-          _sonner.toast.error(t('fileManagement.toasts.filePickerNotAvailable'));
+          _bloom.toast.error(t('fileManagement.toasts.filePickerNotAvailable'));
         }
       } else {
-        _sonner.toast.error(getErrorMessage(error) || t('fileManagement.toasts.selectFilesFailed'));
+        _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.selectFilesFailed'));
       }
     } finally {
       // Always reset the picking state, even if there was an error
@@ -883,8 +1446,8 @@ const FileManagementScreen = ({
       id: fileId,
       name: filename
     });
-    fileDeletePrompt.open();
-  }, [fileDeletePrompt]);
+    fileDeleteDialog.open();
+  }, [fileDeleteDialog]);
   const handleFileDelete = (0, _react.useCallback)(async () => {
     if (!pendingDeleteFile) return;
     const {
@@ -893,7 +1456,7 @@ const FileManagementScreen = ({
     try {
       storeSetDeleting(fileId);
       await oxyServices.deleteFile(fileId);
-      _sonner.toast.success(t('fileManagement.toasts.deleteSuccess'));
+      _bloom.toast.success(t('fileManagement.toasts.deleteSuccess'));
 
       // Reload files after successful deletion
       // Optimistic remove
@@ -903,13 +1466,13 @@ const FileManagementScreen = ({
     } catch (error) {
       // Provide specific error messages
       if (getErrorMessage(error)?.includes('File not found') || getErrorMessage(error)?.includes('404')) {
-        _sonner.toast.error(t('fileManagement.toasts.fileNotFound'));
+        _bloom.toast.error(t('fileManagement.toasts.fileNotFound'));
         // Still reload files to refresh the list
         setTimeout(() => loadFiles('silent'), 800);
       } else if (getErrorMessage(error)?.includes('permission') || getErrorMessage(error)?.includes('403')) {
-        _sonner.toast.error(t('fileManagement.toasts.noPermission'));
+        _bloom.toast.error(t('fileManagement.toasts.noPermission'));
       } else {
-        _sonner.toast.error(getErrorMessage(error) || t('fileManagement.toasts.deleteFailed'));
+        _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.deleteFailed'));
       }
     } finally {
       storeSetDeleting(null);
@@ -918,8 +1481,8 @@ const FileManagementScreen = ({
   }, [pendingDeleteFile, storeSetDeleting, oxyServices, loadFiles, t]);
   const confirmBulkDelete = (0, _react.useCallback)(() => {
     if (selectedIds.size === 0) return;
-    bulkDeletePrompt.open();
-  }, [selectedIds.size, bulkDeletePrompt]);
+    bulkDeleteDialog.open();
+  }, [selectedIds.size, bulkDeleteDialog]);
   const handleBulkDelete = (0, _react.useCallback)(async () => {
     if (selectedIds.size === 0) return;
     try {
@@ -943,19 +1506,19 @@ const FileManagementScreen = ({
       const successful = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
       const failed = results.length - successful;
       if (successful > 0) {
-        _sonner.toast.success(t('fileManagement.toasts.bulkDeleteSuccess', {
+        _bloom.toast.success(t('fileManagement.toasts.bulkDeleteSuccess', {
           count: successful
         }));
       }
       if (failed > 0) {
-        _sonner.toast.error(t('fileManagement.toasts.bulkDeleteFailed', {
+        _bloom.toast.error(t('fileManagement.toasts.bulkDeleteFailed', {
           count: failed
         }));
       }
       setSelectedIds(new Set());
       setTimeout(() => loadFiles('silent'), 800);
     } catch (error) {
-      _sonner.toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
+      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
     }
   }, [selectedIds, files, oxyServices, loadFiles]);
   const handleBulkVisibilityChange = (0, _react.useCallback)(async visibility => {
@@ -980,7 +1543,7 @@ const FileManagementScreen = ({
       const successful = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
       const failed = results.length - successful;
       if (successful > 0) {
-        _sonner.toast.success(t('fileManagement.toasts.visibilitySuccess', {
+        _bloom.toast.success(t('fileManagement.toasts.visibilitySuccess', {
           count: successful,
           visibility
         }));
@@ -995,13 +1558,13 @@ const FileManagementScreen = ({
         });
       }
       if (failed > 0) {
-        _sonner.toast.error(t('fileManagement.toasts.visibilityFailed', {
+        _bloom.toast.error(t('fileManagement.toasts.visibilityFailed', {
           count: failed
         }));
       }
       setTimeout(() => loadFiles('silent'), 800);
     } catch (error) {
-      _sonner.toast.error(getErrorMessage(error) || t('fileManagement.toasts.visibilityError'));
+      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.visibilityError'));
     }
   }, [selectedIds, oxyServices, files, loadFiles]);
 
@@ -1023,7 +1586,7 @@ const FileManagementScreen = ({
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
-          _sonner.toast.success(t('fileManagement.toasts.downloadStarted'));
+          _bloom.toast.success(t('fileManagement.toasts.downloadStarted'));
         } catch (linkError) {
           // Fallback to authenticated download
           const blob = await oxyServices.getFileContentAsBlob(fileId);
@@ -1037,16 +1600,16 @@ const FileManagementScreen = ({
 
           // Clean up the blob URL
           URL.revokeObjectURL(url);
-          _sonner.toast.success(t('fileManagement.toasts.downloadSuccess'));
+          _bloom.toast.success(t('fileManagement.toasts.downloadSuccess'));
         }
       } else {
         // For mobile, open the URL (user can save from browser)
         // Note: This is a simplified approach - for full mobile support,
         // consider using expo-file-system or react-native-fs
-        _sonner.toast.info(t('fileManagement.toasts.downloadMobile'));
+        _bloom.toast.info(t('fileManagement.toasts.downloadMobile'));
       }
     } catch (error) {
-      _sonner.toast.error(getErrorMessage(error) || t('fileManagement.toasts.downloadFailed'));
+      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.downloadFailed'));
     }
   };
   const handleFileOpen = async file => {
@@ -1072,9 +1635,9 @@ const FileManagementScreen = ({
           }
         } catch (error) {
           if (getErrorMessage(error)?.includes('404') || getErrorMessage(error)?.includes('not found')) {
-            _sonner.toast.error(t('fileManagement.toasts.fileNotFoundContent'));
+            _bloom.toast.error(t('fileManagement.toasts.fileNotFoundContent'));
           } else {
-            _sonner.toast.error(t('fileManagement.toasts.loadContentFailed'));
+            _bloom.toast.error(t('fileManagement.toasts.loadContentFailed'));
           }
           setFileContent(null);
         }
@@ -1083,7 +1646,7 @@ const FileManagementScreen = ({
         setFileContent(null);
       }
     } catch (error) {
-      _sonner.toast.error(getErrorMessage(error) || t('fileManagement.toasts.openFailed'));
+      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.openFailed'));
     } finally {
       setLoadingFileContent(false);
     }
@@ -1355,8 +1918,8 @@ const FileManagementScreen = ({
     }, file.id);
   };
 
-  // GroupedSection-based file items (for 'all' view) replacing legacy flat list look
-  // biome-ignore lint/suspicious/noExplicitAny: GroupedSection items have dynamic props
+  // SettingsListItem-based file items (for 'all' view)
+  // biome-ignore lint/suspicious/noExplicitAny: file items have dynamic props
   const groupedFileItems = (0, _react.useMemo)(() => {
     // filteredFiles is already sorted, so just use it directly
     const sortedFiles = filteredFiles;
@@ -1372,11 +1935,11 @@ const FileManagementScreen = ({
       const hasPreview = isImage || isPDF || isVideo;
       const isSelected = selectedIds.has(file.id);
 
-      // Create customIcon for preview thumbnails (36x36 to match GroupedItem iconContainer)
-      let customIcon;
+      // Create icon for preview thumbnails (36x36)
+      let fileIcon;
       if (hasPreview) {
         if (isImage) {
-          customIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          fileIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: {
               width: 36,
               height: 36,
@@ -1401,7 +1964,7 @@ const FileManagementScreen = ({
             })
           });
         } else if (isVideo) {
-          customIcon = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          fileIcon = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: {
               width: 36,
               height: 36,
@@ -1444,7 +2007,7 @@ const FileManagementScreen = ({
             })]
           });
         } else if (isPDF) {
-          customIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          fileIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: {
               width: 36,
               height: 36,
@@ -1463,12 +2026,13 @@ const FileManagementScreen = ({
       }
       return {
         id: file.id,
-        customIcon: customIcon,
-        icon: !hasPreview ? (0, _fileManagement.getFileIcon)(file.contentType) : undefined,
-        iconColor: colors.primary,
+        icon: fileIcon ?? (!hasPreview ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+          name: (0, _fileManagement.getFileIcon)(file.contentType),
+          size: 20,
+          color: colors.primary
+        }) : undefined),
         title: file.filename,
-        subtitle: `${(0, _fileManagement.formatFileSize)(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
-        theme: theme,
+        description: `${(0, _fileManagement.formatFileSize)(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
         onPress: () => {
           // Support selection in regular mode with long press or if already selecting
           if (!selectMode && selectedIds.size > 0) {
@@ -1478,20 +2042,8 @@ const FileManagementScreen = ({
             handleFileOpen(file);
           }
         },
-        onLongPress: !selectMode ? () => {
-          // Enable selection mode on long press
-          if (selectedIds.size === 0) {
-            setSelectedIds(new Set([file.id]));
-          } else {
-            toggleSelect(file);
-          }
-        } : undefined,
-        showChevron: false,
-        dense: true,
-        multiRow: !!file.metadata?.description,
-        selected: (selectMode || selectedIds.size > 0) && isSelected,
         // Hide action buttons when selecting (in selectMode or bulk operations mode)
-        customContent: !selectMode && selectedIds.size === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        rightElement: !selectMode && selectedIds.size === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: _styles.fileManagementStyles.groupedActions,
           children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
             style: [_styles.fileManagementStyles.groupedActionBtn, {
@@ -1528,13 +2080,6 @@ const FileManagementScreen = ({
               color: colors.error
             })
           })]
-        }) : undefined,
-        customContentBelow: file.metadata?.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.fileManagementStyles.groupedDescription, {
-            color: bloomTheme.isDark ? '#AAAAAA' : '#666666'
-          }],
-          numberOfLines: 2,
-          children: file.metadata.description
         }) : undefined
       };
     });
@@ -1872,7 +2417,7 @@ const FileManagementScreen = ({
       });
     };
 
-    // Skeleton file item matching GroupedSection structure
+    // Skeleton file item matching SettingsListItem structure
     const SkeletonFileItem = ({
       index
     }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -2003,6 +2548,51 @@ const FileManagementScreen = ({
     return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_FileDetailsModal.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -2090,7 +2680,7 @@ const FileManagementScreen = ({
         key: 'visibility',
         text: t('fileManagement.visibility'),
         onPress: () => {
-          visibilityChangePrompt.open();
+          visibilityChangeDialog.open();
         },
         icon: 'eye'
       }] : undefined,
@@ -2115,41 +2705,53 @@ const FileManagementScreen = ({
             icon: viewMode === 'all' ? 'folder' : 'folder-outline',
             primaryColor: colors.primary,
             textColor: colors.text,
-            style: _styles.fileManagementStyles.viewModeButton
+            style: _styles.fileManagementStyles.viewModeButton,
+            accessibilityLabel: t('fileManagement.a11y.viewAll') || 'Show all files'
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
             isSelected: viewMode === 'photos',
             onPress: () => setViewMode('photos'),
             icon: viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline',
             primaryColor: colors.primary,
             textColor: colors.text,
-            style: _styles.fileManagementStyles.viewModeButton
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
-            isSelected: viewMode === 'videos',
-            onPress: () => setViewMode('videos'),
-            icon: viewMode === 'videos' ? 'video' : 'video-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: _styles.fileManagementStyles.viewModeButton
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
-            isSelected: viewMode === 'documents',
-            onPress: () => setViewMode('documents'),
-            icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: _styles.fileManagementStyles.viewModeButton
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
-            isSelected: viewMode === 'audio',
-            onPress: () => setViewMode('audio'),
-            icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
-            primaryColor: colors.primary,
-            textColor: colors.text,
-            style: _styles.fileManagementStyles.viewModeButton
+            style: _styles.fileManagementStyles.viewModeButton,
+            accessibilityLabel: t('fileManagement.a11y.viewPhotos') || 'Show photos only'
+          }), !isImageOnlyPicker && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
+              isSelected: viewMode === 'videos',
+              onPress: () => setViewMode('videos'),
+              icon: viewMode === 'videos' ? 'video' : 'video-outline',
+              primaryColor: colors.primary,
+              textColor: colors.text,
+              style: _styles.fileManagementStyles.viewModeButton,
+              accessibilityLabel: t('fileManagement.a11y.viewVideos') || 'Show videos only'
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
+              isSelected: viewMode === 'documents',
+              onPress: () => setViewMode('documents'),
+              icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
+              primaryColor: colors.primary,
+              textColor: colors.text,
+              style: _styles.fileManagementStyles.viewModeButton,
+              accessibilityLabel: t('fileManagement.a11y.viewDocuments') || 'Show documents only'
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
+              isSelected: viewMode === 'audio',
+              onPress: () => setViewMode('audio'),
+              icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
+              primaryColor: colors.primary,
+              textColor: colors.text,
+              style: _styles.fileManagementStyles.viewModeButton,
+              accessibilityLabel: t('fileManagement.a11y.viewAudio') || 'Show audio only'
+            })]
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
         style: [_styles.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'];
@@ -2171,11 +2773,16 @@ const FileManagementScreen = ({
           color: colors.textSecondary
         })]
       }), user?.id === targetUserId && (!selectMode || selectMode && allowUploadInSelectMode) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [_styles.fileManagementStyles.uploadButton, {
+        style: [_styles.fileManagementStyles.uploadButton, isImageOnlyPicker && _styles.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: _styles.fileManagementStyles.uploadProgress,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
@@ -2188,6 +2795,17 @@ const FileManagementScreen = ({
         }) : isPickingDocument ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
           size: "small",
           color: "#FFFFFF"
+        }) : isImageOnlyPicker ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: _styles.fileManagementStyles.uploadButtonContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+            name: "cloud-upload",
+            size: 18,
+            color: "#FFFFFF"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: _styles.fileManagementStyles.uploadButtonLabel,
+            numberOfLines: 1,
+            children: t('fileManagement.upload') || 'Upload'
+          })]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "add",
           size: 22,
@@ -2319,8 +2937,15 @@ const FileManagementScreen = ({
           })]
         })]
       }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GroupedSection, {
-          items: groupedFileItems
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
+          children: groupedFileItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+            icon: item.icon,
+            title: item.title,
+            description: item.description,
+            onPress: item.onPress,
+            showChevron: false,
+            rightElement: item.rightElement
+          }, item.id))
         }), paging.loadingMore && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: _styles.fileManagementStyles.loadingMoreBar,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
@@ -2376,51 +3001,53 @@ const FileManagementScreen = ({
           color: colors.primary
         })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Prompt.Basic, {
-      control: fileDeletePrompt,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bloom.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__*/(0, _jsxRuntime.jsx)(Prompt.Basic, {
-      control: bulkDeletePrompt,
+      actions: [{
+        label: t('fileManagement.confirm') || 'Delete',
+        color: 'destructive',
+        onPress: handleFileDelete
+      }, {
+        label: t('common.cancel') || 'Cancel',
+        color: 'cancel'
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bloom.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__*/(0, _jsxRuntime.jsxs)(Prompt.Outer, {
-      control: visibilityChangePrompt,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Prompt.Content, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Prompt.TitleText, {
-          children: t('fileManagement.changeVisibility') || 'Change Visibility'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Prompt.DescriptionText, {
-          children: t('fileManagement.changeVisibilityConfirm', {
-            count: selectedIds.size
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Prompt.Actions, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Prompt.Action, {
-          cta: t('fileManagement.private') || 'Private',
-          onPress: () => handleBulkVisibilityChange('private'),
-          color: "primary"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Prompt.Action, {
-          cta: t('fileManagement.public') || 'Public',
-          onPress: () => handleBulkVisibilityChange('public'),
-          color: "primary_subtle"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Prompt.Action, {
-          cta: t('fileManagement.unlisted') || 'Unlisted',
-          onPress: () => handleBulkVisibilityChange('unlisted'),
-          color: "primary_subtle"
-        }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_bloom.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'
+      }]
     })]
   });
 };