@oxyhq/services 19.0.0 → 19.1.0

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

@@ -1,130 +1,30 @@
 "use strict";
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, Animated, Easing, FlatList, AccessibilityInfo, Platform, useWindowDimensions } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, Animated, Easing, AccessibilityInfo } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
-import Reanimated, { FadeIn, useAnimatedStyle, useSharedValue, withSequence, withSpring, withTiming } from 'react-native-reanimated';
-// Lazy load expo-document-picker (optional dependency)
-// This allows the screen to work even if expo-document-picker is not installed
-let DocumentPicker = null;
-const loadDocumentPicker = async () => {
-  if (DocumentPicker) return DocumentPicker;
-  try {
-    DocumentPicker = await import('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');
-  }
-};
 import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
-import { getErrorMessage as getOxyErrorMessage } from '@oxyhq/core';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from "../stores/fileStore.js";
 import Header from "../components/Header.js";
 import JustifiedPhotoGrid from "../components/photogrid/JustifiedPhotoGrid.js";
-import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from "../context/OxyContext.js";
 import { useI18n } from "../hooks/useI18n.js";
 import { useUploadFile } from "../hooks/mutations/useAccountMutations.js";
-import { convertDocumentPickerAssetToFile, formatFileSize, getFileIcon, getSafeDownloadUrl } from "../utils/fileManagement.js";
+import { formatFileSize, getFileIcon, getSafeDownloadUrl } from "../utils/fileManagement.js";
 import { FileViewer } from "../components/fileManagement/FileViewer.js";
 import { FileDetailsModal } from "../components/fileManagement/FileDetailsModal.js";
 import { UploadPreview } from "../components/fileManagement/UploadPreview.js";
-import { fileManagementStyles, photoPickerStyles } from "../components/fileManagement/styles.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Extract error message from unknown error type.
- * Delegates to the canonical `getErrorMessage` in `@oxyhq/core` and returns
- * `undefined` for empty results (so callers can fall back to a translated
- * message via `||`).
- */
-const getErrorMessage = error => {
-  if (error == null) return undefined;
-  const message = getOxyErrorMessage(error, '');
-  return message ? message : undefined;
-};
-
-/**
- * A picker-produced file ready to upload. On web this is a real `File`
- * (carrying an optional `uri` for preview). On native, it's an
- * {@link RNFileDescriptor} — passed straight to FormData by `assetUpload`.
- */
-
-/** Returns the display name for either a web File or an RN descriptor. */
-const candidateName = (candidate, fallback) => candidate.name && typeof candidate.name === 'string' ? candidate.name : fallback;
-
-/** Returns the byte size for either a web File or an RN descriptor (0 if unknown). */
-const candidateSize = candidate => {
-  const size = candidate.size;
-  return typeof size === 'number' && Number.isFinite(size) ? size : 0;
-};
-
-/** Returns the mime type for either a web File or an RN descriptor. */
-const candidateType = candidate => {
-  const value = candidate.type;
-  return typeof value === 'string' && value.length > 0 ? value : 'application/octet-stream';
-};
-
-/** Returns the preview URI for an upload candidate, if available. */
-const candidateUri = candidate => {
-  const uri = candidate.uri;
-  return typeof uri === 'string' && uri.length > 0 ? uri : undefined;
-};
-
-/**
- * Haptic feedback wrapper. `expo-haptics` is an optional dependency — when not
- * installed (or on web), all calls degrade silently. We resolve the module
- * once and cache the promise so subsequent calls don't repeat the dynamic
- * import. Matches the pattern used by AvatarCropScreen.
- */
-
-let hapticsModulePromise = null;
-const getHaptics = () => {
-  if (Platform.OS === 'web') return Promise.resolve(null);
-  if (hapticsModulePromise) return hapticsModulePromise;
-  hapticsModulePromise = (async () => {
-    try {
-      const mod = await import('expo-haptics');
-      if (!mod || typeof mod.impactAsync !== 'function') return null;
-      return mod;
-    } catch {
-      return null;
-    }
-  })();
-  return hapticsModulePromise;
-};
-const hapticImpact = async style => {
-  const h = await getHaptics();
-  if (!h) return;
-  const styleEnum = style === 'heavy' ? h.ImpactFeedbackStyle.Heavy : style === 'medium' ? h.ImpactFeedbackStyle.Medium : h.ImpactFeedbackStyle.Light;
-  try {
-    await h.impactAsync(styleEnum);
-  } catch {
-    // Silent — haptics are non-critical UX polish.
-  }
-};
-const hapticSelection = async () => {
-  const h = await getHaptics();
-  if (!h) return;
-  try {
-    await h.selectionAsync();
-  } catch {
-    // Silent.
-  }
-};
-const hapticNotification = async type => {
-  const h = await getHaptics();
-  if (!h) return;
-  const typeEnum = type === 'error' ? h.NotificationFeedbackType.Error : type === 'warning' ? h.NotificationFeedbackType.Warning : h.NotificationFeedbackType.Success;
-  try {
-    await h.notificationAsync(typeEnum);
-  } catch {
-    // Silent.
-  }
-};
+import { fileManagementStyles } from "../components/fileManagement/styles.js";
+import { getErrorMessage } from "./fileManagement/shared.js";
+import { useFileUploadState } from "./fileManagement/hooks/useFileUploadState.js";
+import PhotoPickerView from "./fileManagement/PhotoPickerSection.js";
+import FileListSection from "./fileManagement/FileListSection.js";
+import UploadBar from "./fileManagement/UploadBar.js";
 
 // Animated button component for smooth transitions
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const AnimatedButton = ({
   isSelected,
   onPress,
@@ -169,453 +69,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.memo(function PhotoPickerCell(props) {
-  const {
-    photo,
-    size,
-    marginRight,
-    marginBottom,
-    isSelected,
-    selectionIndex,
-    dim,
-    primaryColor,
-    thumbUrl,
-    enterIndex,
-    reduceMotion,
-    onPress,
-    onLongPress,
-    a11yLabel
-  } = props;
-
-  // Cap the cumulative stagger at ~800ms total so the very long grid does
-  // not keep fading in late tiles. Beyond ~53 tiles the delay maxes out.
-  const STAGGER_PER_CELL_MS = 15;
-  const MAX_TOTAL_STAGGER_MS = 800;
-  const delay = Math.min(enterIndex * STAGGER_PER_CELL_MS, MAX_TOTAL_STAGGER_MS);
-
-  // Selection ring pulse animation: 1.0 → 1.05 → 1.0 on transition to
-  // selected. Plays at most once per selection change; reduce-motion skips.
-  const ringScale = useSharedValue(1);
-  const prevSelected = useRef(isSelected);
-  useEffect(() => {
-    if (prevSelected.current === isSelected) return;
-    prevSelected.current = isSelected;
-    if (!isSelected) {
-      ringScale.value = 1;
-      return;
-    }
-    if (reduceMotion) {
-      ringScale.value = 1;
-      return;
-    }
-    ringScale.value = withSequence(withTiming(1.05, {
-      duration: 110
-    }), withSpring(1, {
-      damping: 14,
-      stiffness: 200
-    }));
-  }, [isSelected, reduceMotion, ringScale]);
-  const ringAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{
-      scale: ringScale.value
-    }]
-  }));
-  const inner = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [photoPickerStyles.cellInner, dim && photoPickerStyles.cellDim],
-      children: /*#__PURE__*/_jsx(ExpoImage, {
-        source: {
-          uri: thumbUrl
-        },
-        style: photoPickerStyles.cellImage,
-        contentFit: "cover",
-        transition: 120,
-        cachePolicy: "memory-disk",
-        accessibilityLabel: photo.filename
-      })
-    }), isSelected && /*#__PURE__*/_jsx(Reanimated.View, {
-      pointerEvents: "none",
-      style: [photoPickerStyles.cellRing, {
-        borderColor: primaryColor
-      }, ringAnimatedStyle]
-    }), isSelected && /*#__PURE__*/_jsx(View, {
-      pointerEvents: "none",
-      style: [photoPickerStyles.cellBadge, {
-        backgroundColor: primaryColor
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: photoPickerStyles.cellBadgeText,
-        children: selectionIndex > 0 ? String(selectionIndex) : ''
-      })
-    })]
-  });
-  const cellWrapperStyle = {
-    width: size,
-    height: size,
-    marginRight,
-    marginBottom
-  };
-  if (reduceMotion) {
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      activeOpacity: 0.85,
-      onPress: onPress,
-      onLongPress: onLongPress,
-      style: [photoPickerStyles.cellWrapper, cellWrapperStyle],
-      accessibilityRole: "button",
-      accessibilityLabel: a11yLabel,
-      accessibilityState: {
-        selected: isSelected
-      },
-      children: inner
-    });
-  }
-  return /*#__PURE__*/_jsx(Reanimated.View, {
-    entering: FadeIn.delay(delay).duration(200),
-    style: [photoPickerStyles.cellWrapper, cellWrapperStyle],
-    children: /*#__PURE__*/_jsx(TouchableOpacity, {
-      activeOpacity: 0.85,
-      onPress: onPress,
-      onLongPress: onLongPress,
-      style: {
-        flex: 1
-      },
-      accessibilityRole: "button",
-      accessibilityLabel: a11yLabel,
-      accessibilityState: {
-        selected: isSelected
-      },
-      children: inner
-    })
-  });
-});
-const PhotoPickerView = ({
-  photos,
-  selectedIds,
-  multiSelect,
-  maxSelection,
-  allowUpload,
-  refreshing,
-  uploading,
-  isPickingDocument,
-  uploadProgress,
-  hasMore,
-  loadingMore,
-  reduceMotion,
-  getThumbUrl,
-  primaryColor,
-  isOwner,
-  onTogglePhoto,
-  onPreviewPhoto,
-  onUpload,
-  onRefresh,
-  onLoadMore,
-  onCancel,
-  onConfirm,
-  t
-}) => {
-  const {
-    width: windowWidth,
-    height: windowHeight
-  } = useWindowDimensions();
-
-  // Layout: 3 columns phone portrait, 2 columns phone landscape,
-  // 4 columns tablet (>= 600 width). Apple Photos-ish.
-  const columns = useMemo(() => {
-    if (windowWidth >= 600) return 4;
-    // Landscape phone: width > height
-    if (windowWidth > windowHeight) return 2;
-    return 3;
-  }, [windowWidth, windowHeight]);
-  const GUTTER = 2;
-  const cellSize = useMemo(() => {
-    // (windowWidth - (columns - 1) * GUTTER) / columns, but
-    // FlatList in 3-col layout means each row has 2 inter-cell gutters.
-    return Math.floor((windowWidth - GUTTER * (columns - 1)) / columns);
-  }, [windowWidth, columns]);
-
-  // Map selectedIds → 1-based selection order for the badge. We freeze a
-  // stable order at the time of selection: the order is the insertion
-  // order of the Set (which JS preserves natively).
-  const selectionOrder = useMemo(() => {
-    const map = new Map();
-    let i = 1;
-    for (const id of selectedIds) {
-      map.set(id, i++);
-    }
-    return map;
-  }, [selectedIds]);
-  const hasAnySelection = selectedIds.size > 0;
-
-  // Compact icon-only upload pill on narrow screens; full pill otherwise.
-  const showUploadLabel = windowWidth >= 360;
-
-  // The bottom sheet renders below the status bar already (its `maxHeight`
-  // is capped by `SCREEN_HEIGHT - insets.top`), so the picker MUST NOT add
-  // an additional safe-area inset to the header. Header layout:
-  //   • 28dp drag-handle hit area floats at the very top of the sheet
-  //   • 56dp app bar sits immediately below the handle
-  // Total header zone = 28 + 56 = 84dp from sheet top.
-  const HANDLE_ZONE = 28;
-  const APP_BAR_HEIGHT = 56;
-  const headerHeight = HANDLE_ZONE + APP_BAR_HEIGHT;
-  const contentPaddingTop = headerHeight + 4;
-  const isEmpty = photos.length === 0;
-  const a11yColumnsAnnouncement = useRef(columns);
-  useEffect(() => {
-    if (a11yColumnsAnnouncement.current !== columns) {
-      a11yColumnsAnnouncement.current = columns;
-    }
-  }, [columns]);
-  const handleCellPress = useCallback(photo => {
-    if (Platform.OS !== 'web') {
-      void hapticImpact('light');
-    }
-    onTogglePhoto(photo);
-  }, [onTogglePhoto]);
-  const handleCellLongPress = useCallback(photo => {
-    if (Platform.OS !== 'web') {
-      void hapticSelection();
-    }
-    onPreviewPhoto(photo);
-  }, [onPreviewPhoto]);
-  const handleConfirm = useCallback(() => {
-    if (multiSelect) {
-      if (selectedIds.size === 0) return;
-      if (Platform.OS !== 'web') {
-        void hapticNotification('success');
-      }
-    }
-    onConfirm();
-  }, [multiSelect, selectedIds.size, onConfirm]);
-
-  // FlatList renderItem: each cell knows its enterIndex (for stagger).
-  const renderItem = useCallback(({
-    item,
-    index
-  }) => {
-    const isSelected = selectedIds.has(item.id);
-    const selIndex = isSelected ? selectionOrder.get(item.id) || 0 : 0;
-    // Last column gets no right margin; last row no bottom margin
-    // (FlatList handles row breaks via numColumns).
-    const isLastInRow = (index + 1) % columns === 0;
-    const a11yLabel = t(isSelected ? 'fileManagement.a11y.photoCellSelected' : 'fileManagement.a11y.photoCellUnselected', {
-      name: item.filename || 'photo'
-    });
-    return /*#__PURE__*/_jsx(PhotoPickerCell, {
-      photo: item,
-      size: cellSize,
-      marginRight: isLastInRow ? 0 : GUTTER,
-      marginBottom: GUTTER,
-      isSelected: isSelected,
-      selectionIndex: selIndex,
-      dim: multiSelect && hasAnySelection && !isSelected,
-      primaryColor: primaryColor,
-      thumbUrl: getThumbUrl(item, 'thumb'),
-      enterIndex: index,
-      reduceMotion: reduceMotion,
-      onPress: () => handleCellPress(item),
-      onLongPress: () => handleCellLongPress(item),
-      a11yLabel: a11yLabel
-    });
-  }, [selectedIds, selectionOrder, columns, cellSize, multiSelect, hasAnySelection, primaryColor, getThumbUrl, reduceMotion, handleCellPress, handleCellLongPress, t]);
-  const keyExtractor = useCallback(item => item.id, []);
-  const listFooter = useMemo(() => {
-    if (!loadingMore) return null;
-    return /*#__PURE__*/_jsx(View, {
-      style: {
-        paddingVertical: 16,
-        alignItems: 'center'
-      },
-      children: /*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "small",
-        color: "#FFFFFF"
-      })
-    });
-  }, [loadingMore]);
-  const handleEndReached = useCallback(() => {
-    if (loadingMore || !hasMore) return;
-    onLoadMore();
-  }, [loadingMore, hasMore, onLoadMore]);
-  const confirmDisabled = multiSelect && selectedIds.size === 0;
-  const confirmLabel = multiSelect ? t('fileManagement.doneWithCount', {
-    count: selectedIds.size
-  }) : t('fileManagement.done');
-
-  // The progress fill width. Guard against zero division.
-  const progressFraction = uploadProgress && uploadProgress.total > 0 ? Math.min(1, Math.max(0, uploadProgress.current / uploadProgress.total)) : 0;
-  return /*#__PURE__*/_jsxs(View, {
-    style: photoPickerStyles.root,
-    children: [isEmpty ? /*#__PURE__*/_jsxs(View, {
-      style: [photoPickerStyles.empty, {
-        paddingTop: contentPaddingTop
-      }],
-      children: [/*#__PURE__*/_jsx(View, {
-        style: photoPickerStyles.emptyIconWrap,
-        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: "image-outline",
-          size: 64,
-          color: "#FFFFFF"
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [photoPickerStyles.emptyTitle, {
-          color: '#FFFFFF'
-        }],
-        children: t('fileManagement.photoPicker.emptyTitle')
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [photoPickerStyles.emptySubtitle, {
-          color: '#FFFFFF'
-        }],
-        children: t('fileManagement.photoPicker.emptySubtitle')
-      }), isOwner && allowUpload && /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [photoPickerStyles.emptyCta, {
-          backgroundColor: primaryColor
-        }],
-        onPress: onUpload,
-        disabled: uploading || isPickingDocument,
-        accessibilityRole: "button",
-        accessibilityLabel: t('fileManagement.uploadPhoto'),
-        accessibilityState: {
-          busy: uploading || isPickingDocument
-        },
-        children: uploading || isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: "#FFFFFF"
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "cloud-upload",
-            size: 18,
-            color: "#FFFFFF"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: photoPickerStyles.emptyCtaText,
-            children: t('fileManagement.uploadPhoto')
-          })]
-        })
-      })]
-    }) : /*#__PURE__*/_jsx(FlatList, {
-      data: photos,
-      renderItem: renderItem,
-      keyExtractor: keyExtractor,
-      numColumns: columns,
-      contentContainerStyle: [photoPickerStyles.gridContent, {
-        paddingTop: contentPaddingTop
-      }],
-      style: photoPickerStyles.grid,
-      showsVerticalScrollIndicator: false,
-      refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
-        refreshing: refreshing,
-        onRefresh: onRefresh,
-        tintColor: "#FFFFFF",
-        colors: [primaryColor],
-        progressViewOffset: contentPaddingTop
-      }),
-      onEndReached: handleEndReached,
-      onEndReachedThreshold: 0.4,
-      ListFooterComponent: listFooter,
-      removeClippedSubviews: true,
-      initialNumToRender: Math.max(12, columns * 6),
-      windowSize: 9
-    }, `cols-${columns}`), /*#__PURE__*/_jsxs(View, {
-      style: [photoPickerStyles.header, {
-        paddingTop: HANDLE_ZONE,
-        minHeight: headerHeight
-      }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: photoPickerStyles.headerRow,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [photoPickerStyles.headerSide, photoPickerStyles.headerSideLeft],
-          children: /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: onCancel,
-            style: photoPickerStyles.headerCancel,
-            accessibilityRole: "button",
-            accessibilityLabel: t('fileManagement.a11y.cancelPicker'),
-            hitSlop: {
-              top: 8,
-              bottom: 8,
-              left: 8,
-              right: 8
-            },
-            children: /*#__PURE__*/_jsx(Text, {
-              style: photoPickerStyles.headerCancelText,
-              children: t('fileManagement.cancel')
-            })
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
-          children: /*#__PURE__*/_jsx(Text, {
-            style: photoPickerStyles.headerTitle,
-            numberOfLines: 1,
-            children: t('fileManagement.choosePhoto')
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: [photoPickerStyles.headerSide, photoPickerStyles.headerSideRight],
-          children: multiSelect ? /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: handleConfirm,
-            disabled: confirmDisabled,
-            style: [photoPickerStyles.headerPrimaryPill, {
-              backgroundColor: confirmDisabled ? 'rgba(255,255,255,0.18)' : primaryColor,
-              opacity: confirmDisabled ? 0.6 : 1
-            }],
-            accessibilityRole: "button",
-            accessibilityLabel: t('fileManagement.a11y.confirmSelection'),
-            accessibilityState: {
-              disabled: confirmDisabled
-            },
-            children: /*#__PURE__*/_jsx(Text, {
-              style: photoPickerStyles.headerPrimaryText,
-              children: confirmLabel
-            })
-          }) : isOwner && allowUpload && /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: onUpload,
-            disabled: uploading || isPickingDocument,
-            style: [photoPickerStyles.headerPrimaryPill, !showUploadLabel && photoPickerStyles.headerPrimaryPillIconOnly, {
-              backgroundColor: primaryColor
-            }],
-            accessibilityRole: "button",
-            accessibilityLabel: t('fileManagement.a11y.uploadFromDevice'),
-            accessibilityState: {
-              busy: uploading || isPickingDocument
-            },
-            children: uploading || isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
-              size: "small",
-              color: "#FFFFFF"
-            }) : /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(Ionicons, {
-                name: "cloud-upload",
-                size: 16,
-                color: "#FFFFFF"
-              }), showUploadLabel && /*#__PURE__*/_jsx(Text, {
-                style: photoPickerStyles.headerPrimaryText,
-                children: t('fileManagement.upload')
-              })]
-            })
-          })
-        })]
-      }), uploading && /*#__PURE__*/_jsx(View, {
-        style: photoPickerStyles.headerProgressBarTrack,
-        children: /*#__PURE__*/_jsx(View, {
-          style: [photoPickerStyles.headerProgressBarFill, {
-            width: `${Math.round(progressFraction * 100)}%`,
-            backgroundColor: primaryColor
-          }]
-        })
-      })]
-    })]
-  });
-};
 const FileManagementScreen = ({
   onClose,
   theme,
@@ -675,7 +128,6 @@ const FileManagementScreen = ({
   const [fileContent, setFileContent] = useState(null);
   const [loadingFileContent, setLoadingFileContent] = useState(false);
   const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
-  const [isPickingDocument, setIsPickingDocument] = useState(false);
   const [reduceMotion, setReduceMotion] = useState(false);
 
   // Detect reduce-motion preference once on mount + subscribe to changes.
@@ -710,8 +162,6 @@ const FileManagementScreen = ({
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState('date');
   const [sortOrder, setSortOrder] = useState('desc');
-  const [pendingFiles, setPendingFiles] = useState([]);
-  const [showUploadPreview, setShowUploadPreview] = useState(false);
   // Derived filtered and sorted files (avoid setState loops)
   const filteredFiles = useMemo(() => {
     let filteredByMode = files;
@@ -750,8 +200,6 @@ const FileManagementScreen = ({
   }, [files, searchQuery, viewMode, sortBy, sortOrder]);
   const [photoDimensions, setPhotoDimensions] = useState({});
   const [loadingDimensions, setLoadingDimensions] = useState(false);
-  const uploadStartRef = useRef(null);
-  const MIN_BANNER_MS = 600;
   // Selection state
   const [selectedIds, setSelectedIds] = useState(new Set(initialSelectedIds));
   const [lastSelectedFileId, setLastSelectedFileId] = useState(null);
@@ -857,15 +305,6 @@ const FileManagementScreen = ({
     onConfirmSelection?.(chosen);
     onClose?.();
   }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);
-  const endUpload = 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(() => {
-      useFileStore.getState().setUploading(false);
-      uploadStartRef.current = null;
-    }, remaining);
-  }, []);
 
   // Helper to safely request a thumbnail variant only for image mime types.
   const getSafeDownloadUrlCallback = useCallback((file, variant = 'thumb') => {
@@ -879,8 +318,6 @@ const FileManagementScreen = ({
   const backgroundColor = colors.backgroundSecondary;
   const borderColor = colors.border;
   const targetUserId = userId || user?.id;
-  const storeSetUploading = useFileStore(s => s.setUploading);
-  const storeSetUploadProgress = useFileStore(s => s.setUploadProgress);
   const storeSetDeleting = useFileStore(s => s.setDeleting);
   const loadFiles = useCallback(async (mode = 'initial') => {
     if (!targetUserId) return;
@@ -950,6 +387,31 @@ const FileManagementScreen = ({
     }
   }, [targetUserId, oxyServices, paging]);
 
+  // Self-contained document-picking + upload-preview state and handlers.
+  const {
+    isPickingDocument,
+    pendingFiles,
+    showUploadPreview,
+    handleFileUpload,
+    handleConfirmUpload,
+    handleCancelUpload,
+    removePendingFile
+  } = 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 = useRef(paging);
   useEffect(() => {
@@ -1028,416 +490,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(', ');
-        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: []
-          };
-          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
-            useFileStore.getState().removeFile(optimisticId);
-            useFileStore.getState().addFile(merged, {
-              prepend: true
-            });
-            uploadedFiles.push(merged);
-            successCount++;
-          } else {
-            // Fallback: will reconcile on later list refresh
-            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)
-          useFileStore.getState().removeFile(optimisticId);
-        }
-      }
-
-      // Show success/error messages
-      if (successCount > 0) {
-        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` : ''}` : '';
-        toast.error(`${t('fileManagement.toasts.uploadFailed', {
-          count: failureCount
-        })}${errorDetails}`);
-      }
-      // Silent background refresh to ensure metadata/variants updated
-      setTimeout(() => {
-        loadFiles('silent');
-      }, 1200);
-    } catch (error) {
-      toast.error(getErrorMessage(error) || t('fileManagement.toasts.uploadError'));
-    } finally {
-      storeSetUploadProgress(null);
-    }
-    return uploadedFiles;
-  };
-  const handleFileSelection = 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');
-        }
-        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);
-        }
-        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);
-        }
-        toast.error(t('fileManagement.toasts.invalidFileSize', {
-          name
-        }));
-        continue;
-      }
-      if (size <= 0) {
-        if (__DEV__) {
-          console.error('Invalid file: file size is zero or negative', file);
-        }
-        toast.error(t('fileManagement.toasts.fileEmpty', {
-          name
-        }));
-        continue;
-      }
-
-      // Validate file size
-      if (size > MAX_FILE_SIZE) {
-        toast.error(t('fileManagement.toasts.fileTooLarge', {
-          name,
-          maxSize: 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) {
-      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) {
-      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) {
-      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);
-        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) => 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` : '');
-        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
-        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')) {
-          toast.error(t('fileManagement.toasts.waitForSelection'));
-        } else {
-          toast.error(t('fileManagement.toasts.filePickerNotAvailable'));
-        }
-      } else {
-        toast.error(getErrorMessage(error) || t('fileManagement.toasts.selectFilesFailed'));
-      }
-    } finally {
-      // Always reset the picking state, even if there was an error
-      setIsPickingDocument(false);
-    }
-  };
   const confirmFileDelete = useCallback((fileId, filename) => {
     setPendingDeleteFile({
       id: fileId,
@@ -1916,7 +968,6 @@ const FileManagementScreen = ({
   };
 
   // SettingsListItem-based file items (for 'all' view)
-  // biome-ignore lint/suspicious/noExplicitAny: file items have dynamic props
   const groupedFileItems = useMemo(() => {
     // filteredFiles is already sorted, so just use it directly
     const sortedFiles = filteredFiles;
@@ -2652,7 +1703,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()),
@@ -2878,126 +1929,30 @@ const FileManagementScreen = ({
           children: t('fileManagement.total')
         })]
       })]
-    }), viewMode === 'photos' ? renderPhotoGrid() : /*#__PURE__*/_jsx(ScrollView, {
-      ref: scrollViewRef,
-      style: fileManagementStyles.scrollView,
-      contentContainerStyle: fileManagementStyles.scrollContainer,
-      refreshControl: /*#__PURE__*/_jsx(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__*/_jsxs(View, {
-        style: fileManagementStyles.emptyState,
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "search",
-          size: 64,
-          color: colors.textTertiary
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.emptyStateTitle, {
-            color: colors.text
-          }],
-          children: t('fileManagement.noResults.title')
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.emptyStateDescription, {
-            color: colors.textSecondary
-          }],
-          children: t('fileManagement.noResults.description', {
-            query: searchQuery
-          })
-        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: [fileManagementStyles.emptyStateButton, {
-            backgroundColor: colors.primary
-          }],
-          onPress: () => setSearchQuery(''),
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "refresh",
-            size: 20,
-            color: "#FFFFFF"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: fileManagementStyles.emptyStateButtonText,
-            children: t('fileManagement.clearSearch')
-          })]
-        })]
-      }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(SettingsListGroup, {
-          children: groupedFileItems.map(item => /*#__PURE__*/_jsx(SettingsListItem, {
-            icon: item.icon,
-            title: item.title,
-            description: item.description,
-            onPress: item.onPress,
-            showChevron: false,
-            rightElement: item.rightElement
-          }, item.id))
-        }), paging.loadingMore && /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.loadingMoreBar,
-          children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: colors.primary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [fileManagementStyles.loadingMoreText, {
-              color: colors.text
-            }],
-            children: t('fileManagement.loadingMore')
-          })]
-        })]
-      })
+    }), viewMode === 'photos' ? renderPhotoGrid() : /*#__PURE__*/_jsx(FileListSection, {
+      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__*/_jsx(FileDetailsModal, {
       control: fileDetailsControl,
       file: selectedFile,
       onDownload: handleFileDownload,
       onDelete: confirmFileDelete,
       isOwner: user?.id === targetUserId
-    }), !selectMode && uploading && /*#__PURE__*/_jsx(View, {
-      style: [fileManagementStyles.uploadBannerContainer, {
-        pointerEvents: 'none'
-      }],
-      children: /*#__PURE__*/_jsxs(View, {
-        style: [fileManagementStyles.uploadBanner, {
-          backgroundColor: bloomTheme.isDark ? '#222831EE' : '#FFFFFFEE',
-          borderColor: colors.border
-        }],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "cloud-upload",
-          size: 18,
-          color: colors.primary
-        }), /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.uploadBannerContent,
-          children: [/*#__PURE__*/_jsxs(Text, {
-            style: [fileManagementStyles.uploadBannerText, {
-              color: colors.text
-            }],
-            children: [t('fileManagement.uploading'), uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...']
-          }), uploadProgress && uploadProgress.total > 0 && /*#__PURE__*/_jsx(View, {
-            style: [fileManagementStyles.uploadProgressBarContainer, {
-              backgroundColor: bloomTheme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'
-            }],
-            children: /*#__PURE__*/_jsx(View, {
-              style: [fileManagementStyles.uploadProgressBar, {
-                width: `${uploadProgress.current / uploadProgress.total * 100}%`,
-                backgroundColor: colors.primary
-              }]
-            })
-          })]
-        }), /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: colors.primary
-        })]
-      })
+    }), !selectMode && uploading && /*#__PURE__*/_jsx(UploadBar, {
+      uploadProgress: uploadProgress,
+      isDark: bloomTheme.isDark,
+      colors: colors,
+      t: t
     }), /*#__PURE__*/_jsx(Dialog, {
       control: fileDeleteDialog,
       title: t('fileManagement.deleteFile') || 'Delete File',