@oxyhq/services 19.0.0 → 19.1.0

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

@@ -7,14 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _expoImage = require("expo-image");
-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 _settingsList = require("@oxyhq/bloom/settings-list");
 var _theme = require("@oxyhq/bloom/theme");
 var _OxyContext = require("../context/OxyContext.js");
 var _useI18n = require("../hooks/useI18n.js");
@@ -24,112 +21,14 @@ var _FileViewer = require("../components/fileManagement/FileViewer.js");
 var _FileDetailsModal = require("../components/fileManagement/FileDetailsModal.js");
 var _UploadPreview = require("../components/fileManagement/UploadPreview.js");
 var _styles = require("../components/fileManagement/styles.js");
+var _shared = require("./fileManagement/shared.js");
+var _useFileUploadState = require("./fileManagement/hooks/useFileUploadState.js");
+var _PhotoPickerSection = _interopRequireDefault(require("./fileManagement/PhotoPickerSection.js"));
+var _FileListSection = _interopRequireDefault(require("./fileManagement/FileListSection.js"));
+var _UploadBar = _interopRequireDefault(require("./fileManagement/UploadBar.js"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-// Lazy load expo-document-picker (optional dependency)
-// This allows the screen to work even if expo-document-picker is not installed
-let DocumentPicker = null;
-const loadDocumentPicker = async () => {
-  if (DocumentPicker) return DocumentPicker;
-  try {
-    DocumentPicker = await Promise.resolve().then(() => _interopRequireWildcard(require('expo-document-picker')));
-    return DocumentPicker;
-  } catch (error) {
-    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;
-
-/** 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 (_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 = ({
   isSelected,
@@ -175,453 +74,6 @@ 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,
@@ -681,7 +133,6 @@ const FileManagementScreen = ({
   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 [reduceMotion, setReduceMotion] = (0, _react.useState)(false);
 
   // Detect reduce-motion preference once on mount + subscribe to changes.
@@ -716,8 +167,6 @@ const FileManagementScreen = ({
   const [searchQuery, setSearchQuery] = (0, _react.useState)('');
   const [sortBy, setSortBy] = (0, _react.useState)('date');
   const [sortOrder, setSortOrder] = (0, _react.useState)('desc');
-  const [pendingFiles, setPendingFiles] = (0, _react.useState)([]);
-  const [showUploadPreview, setShowUploadPreview] = (0, _react.useState)(false);
   // Derived filtered and sorted files (avoid setState loops)
   const filteredFiles = (0, _react.useMemo)(() => {
     let filteredByMode = files;
@@ -756,8 +205,6 @@ const FileManagementScreen = ({
   }, [files, searchQuery, viewMode, sortBy, sortOrder]);
   const [photoDimensions, setPhotoDimensions] = (0, _react.useState)({});
   const [loadingDimensions, setLoadingDimensions] = (0, _react.useState)(false);
-  const uploadStartRef = (0, _react.useRef)(null);
-  const MIN_BANNER_MS = 600;
   // Selection state
   const [selectedIds, setSelectedIds] = (0, _react.useState)(new Set(initialSelectedIds));
   const [lastSelectedFileId, setLastSelectedFileId] = (0, _react.useState)(null);
@@ -863,15 +310,6 @@ const FileManagementScreen = ({
     onConfirmSelection?.(chosen);
     onClose?.();
   }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);
-  const endUpload = (0, _react.useCallback)(() => {
-    const started = uploadStartRef.current;
-    const elapsed = started ? Date.now() - started : MIN_BANNER_MS;
-    const remaining = elapsed < MIN_BANNER_MS ? MIN_BANNER_MS - elapsed : 0;
-    setTimeout(() => {
-      _fileStore.useFileStore.getState().setUploading(false);
-      uploadStartRef.current = null;
-    }, remaining);
-  }, []);
 
   // Helper to safely request a thumbnail variant only for image mime types.
   const getSafeDownloadUrlCallback = (0, _react.useCallback)((file, variant = 'thumb') => {
@@ -885,8 +323,6 @@ const FileManagementScreen = ({
   const backgroundColor = colors.backgroundSecondary;
   const borderColor = colors.border;
   const targetUserId = userId || user?.id;
-  const storeSetUploading = (0, _fileStore.useFileStore)(s => s.setUploading);
-  const storeSetUploadProgress = (0, _fileStore.useFileStore)(s => s.setUploadProgress);
   const storeSetDeleting = (0, _fileStore.useFileStore)(s => s.setDeleting);
   const loadFiles = (0, _react.useCallback)(async (mode = 'initial') => {
     if (!targetUserId) return;
@@ -945,7 +381,7 @@ const FileManagementScreen = ({
         }));
       }
     } catch (error) {
-      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.loadFailed'));
+      _bloom.toast.error((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.loadFailed'));
     } finally {
       setLoading(false);
       setRefreshing(false);
@@ -956,6 +392,31 @@ const FileManagementScreen = ({
     }
   }, [targetUserId, oxyServices, paging]);
 
+  // Self-contained document-picking + upload-preview state and handlers.
+  const {
+    isPickingDocument,
+    pendingFiles,
+    showUploadPreview,
+    handleFileUpload,
+    handleConfirmUpload,
+    handleCancelUpload,
+    removePendingFile
+  } = (0, _useFileUploadState.useFileUploadState)({
+    targetUserId,
+    uploadFileMutation,
+    defaultVisibility,
+    selectMode,
+    multiSelect,
+    afterSelect,
+    onSelect,
+    goBack,
+    onClose,
+    selectedIds,
+    setSelectedIds,
+    loadFiles,
+    t
+  });
+
   // Keep a ref to avoid stale closure when calculating next offset
   const prevPagingRef = (0, _react.useRef)(paging);
   (0, _react.useEffect)(() => {
@@ -1034,416 +495,6 @@ const FileManagementScreen = ({
     }
     return rows;
   }, []);
-  const processFileUploads = async selectedFiles => {
-    if (selectedFiles.length === 0) return [];
-    if (!targetUserId) return []; // Guard clause to ensure userId is defined
-    const uploadedFiles = [];
-    try {
-      storeSetUploadProgress({
-        current: 0,
-        total: selectedFiles.length
-      });
-      const maxSize = 50 * 1024 * 1024; // 50MB
-      const oversizedFiles = selectedFiles.filter(file => candidateSize(file) > maxSize);
-      if (oversizedFiles.length > 0) {
-        const fileList = oversizedFiles.map(f => candidateName(f, 'file')).join(', ');
-        _bloom.toast.error(t('fileManagement.toasts.filesTooLarge', {
-          files: fileList
-        }));
-        return [];
-      }
-      let successCount = 0;
-      let failureCount = 0;
-      const errors = [];
-      for (let i = 0; i < selectedFiles.length; i++) {
-        storeSetUploadProgress({
-          current: i + 1,
-          total: selectedFiles.length
-        });
-        const raw = selectedFiles[i];
-        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 || !fileName || fileSize <= 0) {
-            const errorMsg = `Invalid file: ${fileName}`;
-            if (__DEV__) {
-              console.error('Upload validation failed:', {
-                file: raw,
-                error: errorMsg
-              });
-            }
-            failureCount++;
-            errors.push(`${fileName}: Invalid file (missing name or size)`);
-            continue;
-          }
-          const optimisticFile = {
-            id: optimisticId,
-            filename: fileName,
-            contentType: fileType,
-            length: fileSize,
-            chunkSize: 0,
-            uploadDate: new Date().toISOString(),
-            metadata: {
-              uploading: true
-            },
-            variants: []
-          };
-          _fileStore.useFileStore.getState().addFile(optimisticFile, {
-            prepend: true
-          });
-
-          // Use the mutation hook with authentication handling
-          const result = await uploadFileMutation.mutateAsync({
-            file: raw,
-            visibility: defaultVisibility
-          });
-
-          // Attempt to refresh file list incrementally – fetch single file metadata if API allows
-          const f = result?.file ?? result?.files?.[0];
-          if (f) {
-            const merged = {
-              id: f.id,
-              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 || {},
-              variants: f.variants || []
-            };
-            // Remove optimistic then add real
-            _fileStore.useFileStore.getState().removeFile(optimisticId);
-            _fileStore.useFileStore.getState().addFile(merged, {
-              prepend: true
-            });
-            uploadedFiles.push(merged);
-            successCount++;
-          } else {
-            // Fallback: will reconcile on later list refresh
-            _fileStore.useFileStore.getState().updateFile(optimisticId, {
-              metadata: {
-                uploading: false
-              }
-            });
-            if (__DEV__) {
-              console.warn('Upload completed but no file data returned:', {
-                fileName,
-                result
-              });
-            }
-            // Still count as success if upload didn't throw
-            successCount++;
-          }
-        } catch (error) {
-          failureCount++;
-          const errorMessage = getErrorMessage(error) || 'Upload failed';
-          const fullError = `${fileName}: ${errorMessage}`;
-          errors.push(fullError);
-          if (__DEV__) {
-            console.error('File upload failed:', {
-              fileName,
-              fileSize,
-              fileType,
-              error: errorMessage,
-              stack: error instanceof Error ? error.stack : undefined
-            });
-          }
-
-          // Remove optimistic file on error (use the same optimisticId from above)
-          _fileStore.useFileStore.getState().removeFile(optimisticId);
-        }
-      }
-
-      // Show success/error messages
-      if (successCount > 0) {
-        _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` : ''}` : '';
-        _bloom.toast.error(`${t('fileManagement.toasts.uploadFailed', {
-          count: failureCount
-        })}${errorDetails}`);
-      }
-      // Silent background refresh to ensure metadata/variants updated
-      setTimeout(() => {
-        loadFiles('silent');
-      }, 1200);
-    } catch (error) {
-      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
-    } finally {
-      storeSetUploadProgress(null);
-    }
-    return uploadedFiles;
-  };
-  const handleFileSelection = (0, _react.useCallback)(async selectedFiles => {
-    const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
-    const processedFiles = [];
-    for (const file of selectedFiles) {
-      // Validate file has required properties
-      if (!file) {
-        if (__DEV__) {
-          console.error('Invalid file: file is null or undefined');
-        }
-        _bloom.toast.error(t('fileManagement.toasts.invalidFileMissing'));
-        continue;
-      }
-      const name = candidateName(file, '');
-      if (!name) {
-        if (__DEV__) {
-          console.error('Invalid file: missing or invalid name property', file);
-        }
-        _bloom.toast.error(t('fileManagement.toasts.invalidFileName'));
-        continue;
-      }
-      const size = file.size;
-      if (size === undefined || size === null || Number.isNaN(size)) {
-        if (__DEV__) {
-          console.error('Invalid file: missing or invalid size property', file);
-        }
-        _bloom.toast.error(t('fileManagement.toasts.invalidFileSize', {
-          name
-        }));
-        continue;
-      }
-      if (size <= 0) {
-        if (__DEV__) {
-          console.error('Invalid file: file size is zero or negative', file);
-        }
-        _bloom.toast.error(t('fileManagement.toasts.fileEmpty', {
-          name
-        }));
-        continue;
-      }
-
-      // Validate file size
-      if (size > MAX_FILE_SIZE) {
-        _bloom.toast.error(t('fileManagement.toasts.fileTooLarge', {
-          name,
-          maxSize: (0, _fileManagement.formatFileSize)(MAX_FILE_SIZE)
-        }));
-        continue;
-      }
-      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 = 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 only)
-          try {
-            if (typeof File !== 'undefined' && file instanceof File || typeof Blob !== 'undefined' && file instanceof Blob) {
-              preview = URL.createObjectURL(file);
-            }
-          } catch (error) {
-            if (__DEV__) {
-              console.warn('Failed to create preview URL:', error);
-            }
-            // Preview is optional, continue without it
-          }
-        }
-      }
-      processedFiles.push({
-        file,
-        preview,
-        size,
-        name,
-        type: fileType
-      });
-    }
-    if (processedFiles.length === 0) {
-      _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);
-    uploadStartRef.current = Date.now();
-    storeSetUploading(true);
-    storeSetUploadProgress(null);
-    try {
-      const filesToUpload = pendingFiles.map(pf => pf.file);
-      storeSetUploadProgress({
-        current: 0,
-        total: filesToUpload.length
-      });
-      const uploadedFiles = await processFileUploads(filesToUpload);
-
-      // Cleanup preview URLs
-      pendingFiles.forEach(pf => {
-        if (pf.preview) {
-          URL.revokeObjectURL(pf.preview);
-        }
-      });
-      setPendingFiles([]);
-
-      // If in selectMode, automatically select the uploaded file(s)
-      if (selectMode && uploadedFiles.length > 0) {
-        // Wait a bit for the file store to update and ensure file is available
-        setTimeout(() => {
-          const fileToSelect = uploadedFiles[0];
-          if (!multiSelect && fileToSelect) {
-            // Single select mode - directly call onSelect callback
-            onSelect?.(fileToSelect);
-            if (afterSelect === 'back') {
-              goBack?.();
-            } else if (afterSelect === 'close') {
-              onClose?.();
-            }
-          } else if (multiSelect) {
-            // Multi-select mode - add all uploaded files to selection
-            uploadedFiles.forEach(file => {
-              if (!selectedIds.has(file.id)) {
-                setSelectedIds(prev => new Set(prev).add(file.id));
-              }
-            });
-          }
-        }, 500);
-      }
-      endUpload();
-    } catch (error) {
-      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
-      endUpload();
-    }
-  };
-  const handleCancelUpload = () => {
-    // Cleanup preview URLs
-    pendingFiles.forEach(pf => {
-      if (pf.preview) {
-        URL.revokeObjectURL(pf.preview);
-      }
-    });
-    setPendingFiles([]);
-    setShowUploadPreview(false);
-  };
-  const removePendingFile = index => {
-    const file = pendingFiles[index];
-    if (file.preview) {
-      URL.revokeObjectURL(file.preview);
-    }
-    const updated = pendingFiles.filter((_, i) => i !== index);
-    setPendingFiles(updated);
-    if (updated.length === 0) {
-      setShowUploadPreview(false);
-    }
-  };
-
-  /**
-   * Handle file upload - opens document picker and processes selected files
-   * Expo 54 compatible - works on web, iOS, and Android
-   */
-  const handleFileUpload = async () => {
-    // Prevent concurrent document picker calls
-    if (isPickingDocument) {
-      _bloom.toast.error(t('fileManagement.toasts.waitForSelection'));
-      return;
-    }
-    try {
-      setIsPickingDocument(true);
-
-      // Lazy load expo-document-picker
-      const picker = await loadDocumentPicker();
-
-      // Use expo-document-picker (works on all platforms including web)
-      // On web, it uses the native file input and provides File objects directly
-      const result = await picker.getDocumentAsync({
-        type: '*/*',
-        multiple: true,
-        copyToCacheDirectory: true
-      });
-      if (result.canceled) {
-        setIsPickingDocument(false);
-        return;
-      }
-      if (!result.assets || result.assets.length === 0) {
-        setIsPickingDocument(false);
-        _bloom.toast.error(t('fileManagement.toasts.noFilesSelected'));
-        return;
-      }
-
-      // Convert expo document picker results to File-like objects
-      // According to Expo 54 docs, expo-document-picker returns assets with:
-      // - uri: file URI (file://, content://, or blob URL)
-      // - name: file name
-      // - size: file size in bytes
-      // - mimeType: MIME type of the file
-      // - file: (optional) native File object (usually only on web)
-      const files = [];
-      const errors = [];
-
-      // Process files in parallel for better performance
-      // This allows multiple files to be converted simultaneously
-      const conversionPromises = result.assets.map((doc, index) => (0, _fileManagement.convertDocumentPickerAssetToFile)(doc, index).then(file => {
-        if (file) {
-          // Validate file has required properties before adding
-          if (!file.name || file.size === undefined) {
-            errors.push(`File "${doc.name || 'file'}" is invalid: missing required properties`);
-            return null;
-          }
-          return file;
-        }
-        return null;
-      }).catch(error => {
-        errors.push(`File "${doc.name || 'file'}": ${getErrorMessage(error) || 'Failed to process'}`);
-        return null;
-      }));
-      const convertedFiles = await Promise.all(conversionPromises);
-
-      // Filter out null values
-      for (const file of convertedFiles) {
-        if (file) {
-          files.push(file);
-        }
-      }
-
-      // 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` : '');
-        _bloom.toast.error(t('fileManagement.toasts.loadSomeFailed', {
-          errors: errorMessage
-        }));
-      }
-
-      // Process successfully converted files
-      if (files.length > 0) {
-        await handleFileSelection(files);
-      } else {
-        // Files were selected but none could be converted
-        _bloom.toast.error(t('fileManagement.toasts.noFilesProcessed'));
-      }
-    } catch (error) {
-      if (__DEV__) {
-        console.error('File upload error:', error);
-      }
-      if (getErrorMessage(error)?.includes('expo-document-picker') || getErrorMessage(error)?.includes('Different document picking in progress')) {
-        if (getErrorMessage(error)?.includes('Different document picking in progress')) {
-          _bloom.toast.error(t('fileManagement.toasts.waitForSelection'));
-        } else {
-          _bloom.toast.error(t('fileManagement.toasts.filePickerNotAvailable'));
-        }
-      } else {
-        _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.selectFilesFailed'));
-      }
-    } finally {
-      // Always reset the picking state, even if there was an error
-      setIsPickingDocument(false);
-    }
-  };
   const confirmFileDelete = (0, _react.useCallback)((fileId, filename) => {
     setPendingDeleteFile({
       id: fileId,
@@ -1468,14 +519,14 @@ const FileManagementScreen = ({
       setTimeout(() => loadFiles('silent'), 800);
     } catch (error) {
       // Provide specific error messages
-      if (getErrorMessage(error)?.includes('File not found') || getErrorMessage(error)?.includes('404')) {
+      if ((0, _shared.getErrorMessage)(error)?.includes('File not found') || (0, _shared.getErrorMessage)(error)?.includes('404')) {
         _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')) {
+      } else if ((0, _shared.getErrorMessage)(error)?.includes('permission') || (0, _shared.getErrorMessage)(error)?.includes('403')) {
         _bloom.toast.error(t('fileManagement.toasts.noPermission'));
       } else {
-        _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.deleteFailed'));
+        _bloom.toast.error((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.deleteFailed'));
       }
     } finally {
       storeSetDeleting(null);
@@ -1521,7 +572,7 @@ const FileManagementScreen = ({
       setSelectedIds(new Set());
       setTimeout(() => loadFiles('silent'), 800);
     } catch (error) {
-      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
+      _bloom.toast.error((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.bulkDeleteError'));
     }
   }, [selectedIds, files, oxyServices, loadFiles]);
   const handleBulkVisibilityChange = (0, _react.useCallback)(async visibility => {
@@ -1567,7 +618,7 @@ const FileManagementScreen = ({
       }
       setTimeout(() => loadFiles('silent'), 800);
     } catch (error) {
-      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.visibilityError'));
+      _bloom.toast.error((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.visibilityError'));
     }
   }, [selectedIds, oxyServices, files, loadFiles]);
 
@@ -1612,7 +663,7 @@ const FileManagementScreen = ({
         _bloom.toast.info(t('fileManagement.toasts.downloadMobile'));
       }
     } catch (error) {
-      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.downloadFailed'));
+      _bloom.toast.error((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.downloadFailed'));
     }
   };
   const handleFileOpen = async file => {
@@ -1637,7 +688,7 @@ const FileManagementScreen = ({
             setFileContent(content);
           }
         } catch (error) {
-          if (getErrorMessage(error)?.includes('404') || getErrorMessage(error)?.includes('not found')) {
+          if ((0, _shared.getErrorMessage)(error)?.includes('404') || (0, _shared.getErrorMessage)(error)?.includes('not found')) {
             _bloom.toast.error(t('fileManagement.toasts.fileNotFoundContent'));
           } else {
             _bloom.toast.error(t('fileManagement.toasts.loadContentFailed'));
@@ -1649,7 +700,7 @@ const FileManagementScreen = ({
         setFileContent(null);
       }
     } catch (error) {
-      _bloom.toast.error(getErrorMessage(error) || t('fileManagement.toasts.openFailed'));
+      _bloom.toast.error((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.openFailed'));
     } finally {
       setLoadingFileContent(false);
     }
@@ -1922,7 +973,6 @@ const FileManagementScreen = ({
   };
 
   // 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;
@@ -2560,7 +1610,7 @@ const FileManagementScreen = ({
     const isOwner = user?.id === targetUserId;
     const allowUpload = isOwner && allowUploadInSelectMode;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PhotoPickerView, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PhotoPickerSection.default, {
         photos: photosOnly,
         selectedIds: selectedIds,
         multiSelect: multiSelect,
@@ -2658,7 +1708,7 @@ const FileManagementScreen = ({
       }) : t('fileManagement.itemCount_plural', {
         count: filteredFiles.length
       }),
-      rightActions: selectMode && multiSelect ? [{
+      actions: selectMode && multiSelect ? [{
         key: 'clear',
         text: t('fileManagement.clear'),
         onPress: () => setSelectedIds(new Set()),
@@ -2884,126 +1934,30 @@ const FileManagementScreen = ({
           children: t('fileManagement.total')
         })]
       })]
-    }), viewMode === 'photos' ? renderPhotoGrid() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      ref: scrollViewRef,
-      style: _styles.fileManagementStyles.scrollView,
-      contentContainerStyle: _styles.fileManagementStyles.scrollContainer,
-      refreshControl: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
-        refreshing: refreshing,
-        onRefresh: () => loadFiles('refresh'),
-        tintColor: colors.primary
-      }),
-      onScroll: ({
-        nativeEvent
-      }) => {
-        const {
-          layoutMeasurement,
-          contentOffset,
-          contentSize
-        } = nativeEvent;
-        const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
-        if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
-          loadFiles('more');
-        }
-      },
-      scrollEventThrottle: 250,
-      children: filteredFiles.length === 0 && searchQuery.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.fileManagementStyles.emptyState,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "search",
-          size: 64,
-          color: colors.textTertiary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.fileManagementStyles.emptyStateTitle, {
-            color: colors.text
-          }],
-          children: t('fileManagement.noResults.title')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.fileManagementStyles.emptyStateDescription, {
-            color: colors.textSecondary
-          }],
-          children: t('fileManagement.noResults.description', {
-            query: searchQuery
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: [_styles.fileManagementStyles.emptyStateButton, {
-            backgroundColor: colors.primary
-          }],
-          onPress: () => setSearchQuery(''),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: "refresh",
-            size: 20,
-            color: "#FFFFFF"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: _styles.fileManagementStyles.emptyStateButtonText,
-            children: t('fileManagement.clearSearch')
-          })]
-        })]
-      }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        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, {
-            size: "small",
-            color: colors.primary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [_styles.fileManagementStyles.loadingMoreText, {
-              color: colors.text
-            }],
-            children: t('fileManagement.loadingMore')
-          })]
-        })]
-      })
+    }), viewMode === 'photos' ? renderPhotoGrid() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileListSection.default, {
+      scrollViewRef: scrollViewRef,
+      filteredFiles: filteredFiles,
+      searchQuery: searchQuery,
+      items: groupedFileItems,
+      paging: paging,
+      refreshing: refreshing,
+      colors: colors,
+      t: t,
+      onRefresh: () => loadFiles('refresh'),
+      onLoadMore: () => loadFiles('more'),
+      onClearSearch: () => setSearchQuery(''),
+      renderEmptyState: renderEmptyState
     }), !selectMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileDetailsModal.FileDetailsModal, {
       control: fileDetailsControl,
       file: selectedFile,
       onDownload: handleFileDownload,
       onDelete: confirmFileDelete,
       isOwner: user?.id === targetUserId
-    }), !selectMode && uploading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [_styles.fileManagementStyles.uploadBannerContainer, {
-        pointerEvents: 'none'
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [_styles.fileManagementStyles.uploadBanner, {
-          backgroundColor: bloomTheme.isDark ? '#222831EE' : '#FFFFFFEE',
-          borderColor: colors.border
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "cloud-upload",
-          size: 18,
-          color: colors.primary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: _styles.fileManagementStyles.uploadBannerContent,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: [_styles.fileManagementStyles.uploadBannerText, {
-              color: colors.text
-            }],
-            children: [t('fileManagement.uploading'), uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...']
-          }), uploadProgress && uploadProgress.total > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [_styles.fileManagementStyles.uploadProgressBarContainer, {
-              backgroundColor: bloomTheme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [_styles.fileManagementStyles.uploadProgressBar, {
-                width: `${uploadProgress.current / uploadProgress.total * 100}%`,
-                backgroundColor: colors.primary
-              }]
-            })
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          size: "small",
-          color: colors.primary
-        })]
-      })
+    }), !selectMode && uploading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_UploadBar.default, {
+      uploadProgress: uploadProgress,
+      isDark: bloomTheme.isDark,
+      colors: colors,
+      t: t
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bloom.Dialog, {
       control: fileDeleteDialog,
       title: t('fileManagement.deleteFile') || 'Delete File',