@oxyhq/services 22.9.0 → 22.11.0

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

@@ -6,26 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactQuery = require("@tanstack/react-query");
 var _expoImage = require("expo-image");
 var _bloom = require("@oxyhq/bloom");
+var _surfaces = require("@oxyhq/bloom/surfaces");
 var Skeleton = _interopRequireWildcard(require("@oxyhq/bloom/skeleton"));
 var _vectorIcons = require("@expo/vector-icons");
-var _fileStore = require("../stores/fileStore.js");
-var _Header = _interopRequireDefault(require("../components/Header.js"));
+var _queryKeys = require("../hooks/queries/queryKeys.js");
+var _useFileQueries = require("../hooks/queries/useFileQueries.js");
+var _useSurfaceHeader = require("../hooks/useSurfaceHeader.js");
+var _SurfaceHeaderAction = require("../components/SurfaceHeaderAction.js");
 var _JustifiedPhotoGrid = _interopRequireDefault(require("../components/photogrid/JustifiedPhotoGrid.js"));
 var _theme = require("@oxyhq/bloom/theme");
 var _OxyContext = require("../context/OxyContext.js");
 var _useI18n = require("../hooks/useI18n.js");
+var _useReduceMotion = require("../hooks/useReduceMotion.js");
 var _useAccountMutations = require("../hooks/mutations/useAccountMutations.js");
 var _fileManagement = require("../utils/fileManagement.js");
 var _useResolvedFileUrls = require("../hooks/useResolvedFileUrls.js");
 var _FileViewer = require("../components/fileManagement/FileViewer.js");
 var _FileDetailsModal = require("../components/fileManagement/FileDetailsModal.js");
 var _UploadPreview = require("../components/fileManagement/UploadPreview.js");
+var _ActionSheetSurface = require("../components/surfaces/ActionSheetSurface.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 _FileLibraryError = _interopRequireDefault(require("./fileManagement/FileLibraryError.js"));
 var _UploadBar = _interopRequireDefault(require("./fileManagement/UploadBar.js"));
 var _AnimatedButton = require("../components/fileManagement/AnimatedButton.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -34,6 +41,20 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // Genuinely-inline-only styles: `viewModeButton` is spread into an Animated.View
 // style array (interpolated backgroundColor), and the photo tiles are
 // `expo-image` (no className remap). Everything else uses NativeWind classNames.
+// Nav-header slot layout for this screen's action row + review-mode back button.
+const fmHeaderStyles = _reactNative.StyleSheet.create({
+  actionsRow: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  backButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
 const screenStyles = _reactNative.StyleSheet.create({
   viewModeButton: {
     paddingHorizontal: 10,
@@ -44,11 +65,6 @@ const screenStyles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: 1
   },
-  photoImage: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 8
-  },
   justifiedPhotoImage: {
     width: '100%',
     height: '100%',
@@ -57,9 +73,9 @@ const screenStyles = _reactNative.StyleSheet.create({
 });
 const FileManagementScreen = ({
   onClose,
-  theme,
   goBack,
   navigate,
+  dismiss,
   userId,
   containerWidth,
   selectMode = false,
@@ -85,57 +101,49 @@ const FileManagementScreen = ({
   const {
     t
   } = (0, _useI18n.useI18n)();
+  const queryClient = (0, _reactQuery.useQueryClient)();
   const uploadFileMutation = (0, _useAccountMutations.useUploadFile)();
-  // Prompt controls
-  const fileDeleteDialog = (0, _bloom.useDialogControl)();
-  const bulkDeleteDialog = (0, _bloom.useDialogControl)();
-  const visibilityChangeDialog = (0, _bloom.useDialogControl)();
-  const [pendingDeleteFile, setPendingDeleteFile] = (0, _react.useState)(null);
-  const files = (0, _fileStore.useFiles)();
+
+  // Files are owned by the ACTIVE account. `targetUserId` scopes the query key,
+  // so switching accounts (or an explicit `userId` prop) shows that account's
+  // library with no manual reset.
+  const targetUserId = userId || user?.id;
+
+  // The file list is React Query's, NOT a store: infinite-paginated, fetched on
+  // mount + on owner change, edited optimistically via cache helpers. The
+  // rendered list is the flattened pages.
+  const filesQuery = (0, _useFileQueries.useUserFilesInfinite)(targetUserId);
+  const files = (0, _react.useMemo)(() => filesQuery.data?.pages.flatMap(page => page.files) ?? [], [filesQuery.data]);
+  // No owner resolved yet reads as "loading" (matches the old skeleton-until-
+  // first-load behaviour); `isLoading` is the first-page fetch only.
+  const isLoadingFiles = !targetUserId || filesQuery.isLoading;
+  const isRefreshingFiles = filesQuery.isRefetching;
+  const isFetchingMore = filesQuery.isFetchingNextPage;
+  const hasMoreFiles = filesQuery.hasNextPage ?? false;
+  // Terminal load failure with nothing cached — render a DISTINCT error state
+  // (not the empty state) so a failed load never looks like an empty library.
+  const hasLoadError = filesQuery.isError && files.length === 0;
+  const invalidateFiles = (0, _react.useCallback)(() => {
+    queryClient.invalidateQueries({
+      queryKey: _queryKeys.queryKeys.files.list(targetUserId)
+    });
+  }, [queryClient, targetUserId]);
   const {
     width: windowWidth
   } = (0, _reactNative.useWindowDimensions)();
   // Prefer an explicit sheet width from the router; fall back to the window
   // so photo grids never size against a hardcoded 400px default.
   const safeContainerWidth = typeof containerWidth === 'number' && containerWidth > 0 ? containerWidth : windowWidth;
-  const uploading = (0, _fileStore.useUploading)();
-  const uploadProgress = (0, _fileStore.useUploadAggregateProgress)();
-  const deleting = (0, _fileStore.useDeleting)();
-  const [loading, setLoading] = (0, _react.useState)(true);
-  const [refreshing, setRefreshing] = (0, _react.useState)(false);
-  const [paging, setPaging] = (0, _react.useState)({
-    offset: 0,
-    limit: 40,
-    total: 0,
-    hasMore: true,
-    loadingMore: false
-  });
-  const [selectedFile, setSelectedFile] = (0, _react.useState)(null);
-  const fileDetailsControl = (0, _bloom.useDialogControl)();
+  // In-flight delete target (local UI state — was in the file store).
+  const [deletingId, setDeletingId] = (0, _react.useState)(null);
   // In selectMode we never open the detailed viewer
   const [openedFile, setOpenedFile] = (0, _react.useState)(null);
   const [fileContent, setFileContent] = (0, _react.useState)(null);
   const [loadingFileContent, setLoadingFileContent] = (0, _react.useState)(false);
   const [showFileDetailsInViewer, setShowFileDetailsInViewer] = (0, _react.useState)(false);
-  const [reduceMotion, setReduceMotion] = (0, _react.useState)(false);
-
-  // Detect reduce-motion preference once on mount + subscribe to changes.
-  // Used by `PhotoPickerView` to skip cell stagger animations.
-  (0, _react.useEffect)(() => {
-    let cancelled = false;
-    _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
-      if (!cancelled) setReduceMotion(enabled);
-    }).catch(() => {
-      // Defaults to false; no action needed.
-    });
-    const sub = _reactNative.AccessibilityInfo.addEventListener('reduceMotionChanged', enabled => {
-      setReduceMotion(enabled);
-    });
-    return () => {
-      cancelled = true;
-      sub.remove();
-    };
-  }, []);
+  // Reduce-motion preference, read as an external store (no effect). Passed to
+  // `PhotoPickerView` to skip cell stagger animations.
+  const reduceMotion = (0, _useReduceMotion.useReduceMotion)();
 
   // Image-only picker mode: when the consumer restricts to image MIME types
   // (e.g. avatar picker), photos grid is the more useful default view.
@@ -187,24 +195,59 @@ const FileManagementScreen = ({
     });
     return sorted;
   }, [files, searchQuery, viewMode, sortBy, sortOrder]);
-  const [photoDimensions, setPhotoDimensions] = (0, _react.useState)({});
-  const photoDimensionsRef = (0, _react.useRef)(photoDimensions);
-  photoDimensionsRef.current = photoDimensions;
-  const [loadingDimensions, setLoadingDimensions] = (0, _react.useState)(false);
-  // Selection state
-  const [selectedIds, setSelectedIds] = (0, _react.useState)(new Set(initialSelectedIds));
-  const [lastSelectedFileId, setLastSelectedFileId] = (0, _react.useState)(null);
+  // Selection state. `initialSelectedIds` is the INITIAL selection only (lazy
+  // init) — there is no prop→state sync effect, since no caller mutates it
+  // after mount.
+  const [selectedIds, setSelectedIds] = (0, _react.useState)(() => new Set(initialSelectedIds));
   const scrollViewRef = (0, _react.useRef)(null);
   const photoScrollViewRef = (0, _react.useRef)(null);
-  const containerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (initialSelectedIds?.length) {
-      setSelectedIds(new Set(initialSelectedIds));
+
+  // Scroll the browse list/grid to a just-selected file. Driven directly from
+  // the selection event handler (double-rAF so the selection re-render has
+  // committed first) — not an effect. No-ops in the image-only picker, whose
+  // own FlatList is not either ScrollView ref.
+  const scrollToSelectedFile = (0, _react.useCallback)(fileId => {
+    if (viewMode === 'all' && scrollViewRef.current) {
+      const itemIndex = filteredFiles.findIndex(file => file.id === fileId);
+      if (itemIndex < 0) return;
+      // GroupedItem dense rows are ~65px, +30px when a description wraps.
+      const baseItemHeight = 65;
+      const descriptionHeight = 30;
+      let scrollPosition = 0;
+      for (let i = 0; i <= itemIndex && i < filteredFiles.length; i++) {
+        scrollPosition += baseItemHeight;
+        if (filteredFiles[i].metadata?.description) scrollPosition += descriptionHeight;
+      }
+      // Offset for the header/controls/search/stats chrome (~250px) so the
+      // item lands near the top, not under the chrome.
+      const finalScrollPosition = 250 + scrollPosition - 150;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          scrollViewRef.current?.scrollTo({
+            y: Math.max(0, finalScrollPosition),
+            animated: true
+          });
+        });
+      });
+    } else if (viewMode === 'photos' && photoScrollViewRef.current) {
+      const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
+      const photoIndex = photos.findIndex(p => p.id === fileId);
+      if (photoIndex < 0) return;
+      // Rough estimate for the justified grid (3 photos/row, variable heights).
+      const row = Math.floor(photoIndex / 3);
+      const finalScrollPosition = row * (150 + 4) - 100;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          photoScrollViewRef.current?.scrollTo({
+            y: Math.max(0, finalScrollPosition),
+            animated: true
+          });
+        });
+      });
     }
-  }, [initialSelectedIds]);
+  }, [viewMode, filteredFiles]);
   const toggleSelect = (0, _react.useCallback)(async file => {
-    // Allow selection in regular mode for bulk operations
-    // if (!selectMode) return;
+    // Selection is allowed in regular mode too (for bulk operations).
     if (disabledMimeTypes.length) {
       const blocked = disabledMimeTypes.some(mt => file.contentType === mt || file.contentType.startsWith(mt.endsWith('/') ? mt : `${mt}/`));
       if (blocked) {
@@ -223,9 +266,6 @@ const FileManagementScreen = ({
       }
     }
 
-    // Track the selected file for scrolling
-    setLastSelectedFileId(file.id);
-
     // Link file to entity if linkContext is provided
     if (linkContext) {
       try {
@@ -235,11 +275,19 @@ const FileManagementScreen = ({
       }
     }
     if (!multiSelect) {
-      onSelect?.(file);
-      if (afterSelect === 'back') {
-        goBack?.();
-      } else if (afterSelect === 'close') {
-        onClose?.();
+      if (onSelect) {
+        // Legacy callback caller (inbox, WelcomeNewUser): keep the
+        // callback + afterSelect behaviour unchanged.
+        onSelect(file);
+        if (afterSelect === 'back') {
+          goBack?.();
+        } else if (afterSelect === 'close') {
+          onClose?.();
+        }
+      } else {
+        // Promise-based picker (avatar picker): resolve the surface's
+        // present() promise with the picked file.
+        dismiss?.(file);
       }
       return;
     }
@@ -259,13 +307,14 @@ const FileManagementScreen = ({
       }
       return next;
     });
-  }, [selectMode, multiSelect, onSelect, onClose, goBack, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext]);
+    scrollToSelectedFile(file.id);
+  }, [multiSelect, onSelect, onClose, goBack, dismiss, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext, t, scrollToSelectedFile]);
   const confirmMultiSelection = (0, _react.useCallback)(async () => {
     if (!selectMode || !multiSelect) return;
     const map = {};
-    files.forEach(f => {
+    for (const f of files) {
       map[f.id] = f;
-    });
+    }
     const chosen = Array.from(selectedIds).map(id => map[id]).filter(Boolean);
 
     // Update visibility and link files if needed
@@ -292,9 +341,15 @@ const FileManagementScreen = ({
 
     // Wait for all updates (but don't block on failures)
     await Promise.allSettled(updatePromises);
-    onConfirmSelection?.(chosen);
-    onClose?.();
-  }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);
+    if (onConfirmSelection) {
+      // Legacy callback caller (inbox): keep the callback + close.
+      onConfirmSelection(chosen);
+      onClose?.();
+    } else {
+      // Promise-based picker: resolve the surface with the chosen files.
+      dismiss?.(chosen);
+    }
+  }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, dismiss, defaultVisibility, oxyServices, linkContext]);
 
   // Private-safe thumbnail URLs for the currently-shown files, resolved in
   // ONE batch per page (not N per-tile) and cached by React Query. Uploads
@@ -313,81 +368,16 @@ const FileManagementScreen = ({
   // FileManagementScreen uses a slightly elevated page background.
   const backgroundColor = colors.backgroundSecondary;
   const borderColor = colors.border;
-  const targetUserId = userId || user?.id;
-  const storeSetDeleting = (0, _fileStore.useFileStore)(s => s.setDeleting);
-  const loadFiles = (0, _react.useCallback)(async (mode = 'initial') => {
-    if (!targetUserId) return;
-    try {
-      if (mode === 'refresh') {
-        setRefreshing(true);
-      } else if (mode === 'initial') {
-        setLoading(true);
-        setPaging(p => ({
-          ...p,
-          offset: 0,
-          hasMore: true
-        }));
-      } else if (mode === 'more') {
-        // Prevent duplicate fetches
-        setPaging(p => ({
-          ...p,
-          loadingMore: true
-        }));
-      }
-      const currentPaging = mode === 'more' ? prevPagingRef.current ?? paging : paging;
-      const effectiveOffset = mode === 'more' ? currentPaging.offset + currentPaging.limit : 0;
-      const response = await oxyServices.listUserFiles(currentPaging.limit, effectiveOffset);
-      const assets = (response.files || []).map(f => ({
-        id: f.id,
-        filename: f.originalName ?? f.sha256 ?? '',
-        contentType: f.mime ?? '',
-        length: f.size ?? 0,
-        chunkSize: 0,
-        uploadDate: f.createdAt ?? '',
-        metadata: f.metadata ?? {},
-        variants: f.variants ?? []
-      }));
-      if (mode === 'more') {
-        // append
-        _fileStore.useFileStore.getState().setFiles(assets, {
-          merge: true
-        });
-        setPaging(p => ({
-          ...p,
-          offset: effectiveOffset,
-          total: response.total || effectiveOffset + assets.length,
-          hasMore: response.hasMore,
-          loadingMore: false
-        }));
-      } else {
-        _fileStore.useFileStore.getState().setFiles(assets, {
-          merge: false
-        });
-        setPaging(p => ({
-          ...p,
-          offset: 0,
-          total: response.total || assets.length,
-          hasMore: response.hasMore,
-          loadingMore: false
-        }));
-      }
-    } catch (error) {
-      _bloom.toast.error((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.loadFailed'));
-    } finally {
-      setLoading(false);
-      setRefreshing(false);
-      setPaging(p => ({
-        ...p,
-        loadingMore: false
-      }));
-    }
-  }, [targetUserId, oxyServices, paging]);
 
   // Self-contained document-picking + upload-preview state and handlers.
+  // Optimistic uploads edit the file query cache directly (see
+  // useFileQueries), so no loader is threaded in.
   const {
     isPickingDocument,
     pendingFiles,
     showUploadPreview,
+    uploading,
+    uploadProgress,
     handleFileUpload,
     handleConfirmUpload,
     handleCancelUpload,
@@ -404,154 +394,59 @@ const FileManagementScreen = ({
     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)(() => {
-    prevPagingRef.current = paging;
-  }, [paging]);
-
-  // (removed effect; filteredFiles is memoized)
-
-  // Load photo dimensions for justified grid - unified approach using Image.getSize
-  const loadPhotoDimensions = (0, _react.useCallback)(async photos => {
-    if (photos.length === 0) return;
-    setLoadingDimensions(true);
-
-    // Snapshot ids missing from the cache at kick-off; concurrent runs may
-    // overlap but each merge is applied via a functional updater.
-    const photosToLoad = photos.filter(photo => !photoDimensionsRef.current[photo.id]);
-    if (photosToLoad.length === 0) {
-      setLoadingDimensions(false);
-      return;
-    }
-    try {
-      const measured = {};
-      await Promise.all(photosToLoad.map(async photo => {
-        try {
-          const downloadUrl = thumbSourceFor(photo);
-          // URL not resolved yet — skip (do NOT record fallback
-          // dims) so this photo is re-measured once its private-safe
-          // URL resolves. Measuring the broken public URL is exactly
-          // the bug we are fixing.
-          if (!downloadUrl) {
-            return;
-          }
-
-          // Unified approach using Image.getSize (works on all platforms)
-          await new Promise(resolve => {
-            _reactNative.Image.getSize(downloadUrl, (width, height) => {
-              measured[photo.id] = {
-                width,
-                height
-              };
-              resolve();
-            }, () => {
-              // Fallback dimensions
-              measured[photo.id] = {
-                width: 1,
-                height: 1
-              };
-              resolve();
-            });
-          });
-        } catch (error) {
-          // Fallback dimensions for any errors
-          measured[photo.id] = {
-            width: 1,
-            height: 1
-          };
-        }
-      }));
-      if (Object.keys(measured).length > 0) {
-        setPhotoDimensions(prev => ({
-          ...prev,
-          ...measured
-        }));
-      }
-    } catch (error) {
-      // Photo dimensions loading failed, continue without dimensions
-    } finally {
-      setLoadingDimensions(false);
-    }
-  }, [thumbSourceFor]);
-
-  // Re-measure photo dimensions when their private-safe URLs resolve. The
-  // justified grid's own trigger fires on the photo SET, not on URL
-  // availability, so newly-resolved private tiles would otherwise keep their
-  // skipped (unmeasured) state and render with fallback geometry.
-  (0, _react.useEffect)(() => {
-    if (viewMode !== 'photos') return;
-    const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
-    if (photos.length > 0) {
-      loadPhotoDimensions(photos);
-    }
-  }, [resolvedThumbUrls, viewMode, filteredFiles, loadPhotoDimensions]);
-
-  // Create justified rows from photos with responsive algorithm
-  const createJustifiedRows = (0, _react.useCallback)((photos, containerWidth) => {
-    if (photos.length === 0) return [];
-    const rows = [];
-    const photosPerRow = 3; // Fixed 3 photos per row for consistency
-
-    for (let i = 0; i < photos.length; i += photosPerRow) {
-      const rowPhotos = photos.slice(i, i + photosPerRow);
-      rows.push(rowPhotos);
-    }
-    return rows;
-  }, []);
-  const confirmFileDelete = (0, _react.useCallback)((fileId, filename) => {
-    setPendingDeleteFile({
-      id: fileId,
-      name: filename
+  const confirmFileDelete = (0, _react.useCallback)(async (fileId, filename) => {
+    const confirmed = await _surfaces.surfaces.confirm({
+      title: t('fileManagement.deleteFile') || 'Delete File',
+      message: t('fileManagement.confirms.deleteFile', {
+        filename
+      }),
+      confirmLabel: t('fileManagement.confirm') || 'Delete',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true
     });
-    fileDeleteDialog.open();
-  }, [fileDeleteDialog]);
-  const handleFileDelete = (0, _react.useCallback)(async () => {
-    if (!pendingDeleteFile) return;
-    const {
-      id: fileId
-    } = pendingDeleteFile;
+    if (!confirmed) return;
     try {
-      storeSetDeleting(fileId);
+      setDeletingId(fileId);
       await oxyServices.deleteFile(fileId);
       _bloom.toast.success(t('fileManagement.toasts.deleteSuccess'));
 
-      // Reload files after successful deletion
-      // Optimistic remove
-      _fileStore.useFileStore.getState().removeFile(fileId);
-      // Silent background reconcile
-      setTimeout(() => loadFiles('silent'), 800);
+      // Remove from the query cache, then reconcile against the server.
+      (0, _useFileQueries.removeFileFromCache)(queryClient, targetUserId, fileId);
+      invalidateFiles();
     } catch (error) {
       // Provide specific error messages
       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);
+        // It's already gone server-side — reconcile the list.
+        invalidateFiles();
       } 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((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.deleteFailed'));
       }
     } finally {
-      storeSetDeleting(null);
-      setPendingDeleteFile(null);
+      setDeletingId(null);
     }
-  }, [pendingDeleteFile, storeSetDeleting, oxyServices, loadFiles, t]);
-  const confirmBulkDelete = (0, _react.useCallback)(() => {
-    if (selectedIds.size === 0) return;
-    bulkDeleteDialog.open();
-  }, [selectedIds.size, bulkDeleteDialog]);
-  const handleBulkDelete = (0, _react.useCallback)(async () => {
+  }, [oxyServices, queryClient, targetUserId, invalidateFiles, t]);
+  const confirmBulkDelete = (0, _react.useCallback)(async () => {
     if (selectedIds.size === 0) return;
+    const confirmed = await _surfaces.surfaces.confirm({
+      title: t('fileManagement.deleteFiles') || 'Delete Files',
+      message: t('fileManagement.confirms.deleteFiles', {
+        count: selectedIds.size
+      }),
+      confirmLabel: t('fileManagement.confirm') || 'Delete',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true
+    });
+    if (!confirmed) return;
     try {
       const deletePromises = Array.from(selectedIds).map(async fileId => {
         try {
           await oxyServices.deleteFile(fileId);
-          _fileStore.useFileStore.getState().removeFile(fileId);
+          (0, _useFileQueries.removeFileFromCache)(queryClient, targetUserId, fileId);
           return {
             success: true,
             fileId
@@ -578,11 +473,11 @@ const FileManagementScreen = ({
         }));
       }
       setSelectedIds(new Set());
-      setTimeout(() => loadFiles('silent'), 800);
+      invalidateFiles();
     } catch (error) {
       _bloom.toast.error((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.bulkDeleteError'));
     }
-  }, [selectedIds, files, oxyServices, loadFiles]);
+  }, [selectedIds, oxyServices, queryClient, targetUserId, invalidateFiles, t]);
   const handleBulkVisibilityChange = (0, _react.useCallback)(async visibility => {
     if (selectedIds.size === 0) return;
     try {
@@ -609,29 +504,47 @@ const FileManagementScreen = ({
           count: successful,
           visibility
         }));
-        // Update file metadata in store
-        Array.from(selectedIds).forEach(fileId => {
-          _fileStore.useFileStore.getState().updateFile(fileId, {
-            metadata: {
-              ...files.find(f => f.id === fileId)?.metadata,
-              visibility
-            }
+        // Reflect the new visibility in the cached files.
+        for (const fileId of selectedIds) {
+          (0, _useFileQueries.patchFileMetadataInCache)(queryClient, targetUserId, fileId, {
+            visibility
           });
-        });
+        }
       }
       if (failed > 0) {
         _bloom.toast.error(t('fileManagement.toasts.visibilityFailed', {
           count: failed
         }));
       }
-      setTimeout(() => loadFiles('silent'), 800);
+      invalidateFiles();
     } catch (error) {
       _bloom.toast.error((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.visibilityError'));
     }
-  }, [selectedIds, oxyServices, files, loadFiles]);
+  }, [selectedIds, oxyServices, queryClient, targetUserId, invalidateFiles, t]);
+  const handleVisibilityChange = (0, _react.useCallback)(async () => {
+    if (selectedIds.size === 0) return;
+    const visibility = await (0, _ActionSheetSurface.presentActionSheet)({
+      title: t('fileManagement.changeVisibility') || 'Change Visibility',
+      message: t('fileManagement.changeVisibilityConfirm', {
+        count: selectedIds.size
+      }),
+      options: [{
+        label: t('fileManagement.private') || 'Private',
+        value: 'private'
+      }, {
+        label: t('fileManagement.public') || 'Public',
+        value: 'public'
+      }, {
+        label: t('fileManagement.unlisted') || 'Unlisted',
+        value: 'unlisted'
+      }],
+      cancelLabel: t('common.cancel') || 'Cancel'
+    });
+    if (visibility) await handleBulkVisibilityChange(visibility);
+  }, [selectedIds.size, handleBulkVisibilityChange, t]);
 
   // Unified download function - works on all platforms
-  const handleFileDownload = async (fileId, filename) => {
+  const handleFileDownload = (0, _react.useCallback)(async (fileId, filename) => {
     try {
       // Resolve an authenticated, private-safe URL. The synchronous
       // `getFileDownloadUrl` yields the public CDN origin, which 404s for
@@ -674,8 +587,8 @@ const FileManagementScreen = ({
     } catch (error) {
       _bloom.toast.error((0, _shared.getErrorMessage)(error) || t('fileManagement.toasts.downloadFailed'));
     }
-  };
-  const handleFileOpen = async file => {
+  }, [oxyServices, t]);
+  const handleFileOpen = (0, _react.useCallback)(async file => {
     if (selectMode) {
       toggleSelect(file);
       return;
@@ -715,17 +628,21 @@ const FileManagementScreen = ({
     } finally {
       setLoadingFileContent(false);
     }
-  };
-  const handleCloseFile = () => {
+  }, [selectMode, toggleSelect, oxyServices, t]);
+  const handleCloseFile = (0, _react.useCallback)(() => {
     setOpenedFile(null);
     setFileContent(null);
     setShowFileDetailsInViewer(false);
     // Don't reset view mode when closing a file
-  };
-  const showFileDetailsModal = file => {
-    setSelectedFile(file);
-    fileDetailsControl.open();
-  };
+  }, []);
+  const showFileDetailsModal = (0, _react.useCallback)(file => {
+    (0, _FileDetailsModal.presentFileDetails)({
+      file,
+      onDownload: handleFileDownload,
+      onDelete: confirmFileDelete,
+      isOwner: user?.id === targetUserId
+    });
+  }, [handleFileDownload, confirmFileDelete, user?.id, targetUserId]);
   const renderJustifiedPhotoItem = (0, _react.useCallback)((photo, width, height, isLast) => {
     const downloadUrl = thumbSourceFor(photo);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
@@ -770,18 +687,7 @@ const FileManagementScreen = ({
         })]
       })
     }, photo.id);
-  }, [thumbSourceFor, selectMode, selectedIds, multiSelect, colors.primary, colors.text]);
-
-  // Run initial load once per targetUserId change to avoid accidental loops
-  const lastLoadedFor = (0, _react.useRef)(undefined);
-  (0, _react.useEffect)(() => {
-    const key = targetUserId || 'anonymous';
-    if (lastLoadedFor.current !== key) {
-      lastLoadedFor.current = key;
-      loadFiles('initial');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [targetUserId]);
+  }, [thumbSourceFor, selectMode, selectedIds, multiSelect, colors.primary, colors.text, handleFileOpen]);
 
   // SettingsListItem-based file items (for 'all' view)
   const groupedFileItems = (0, _react.useMemo)(() => {
@@ -932,8 +838,8 @@ const FileManagementScreen = ({
               backgroundColor: colors.negativeSubtle
             },
             onPress: () => confirmFileDelete(file.id, file.filename),
-            disabled: deleting === file.id,
-            children: deleting === file.id ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+            disabled: deletingId === file.id,
+            children: deletingId === file.id ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
               size: "small",
               color: colors.error
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
@@ -945,85 +851,27 @@ const FileManagementScreen = ({
         }) : undefined
       };
     });
-  }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, thumbSourceFor, selectMode, selectedIds]);
-
-  // Scroll to selected file after selection
-  (0, _react.useEffect)(() => {
-    if (lastSelectedFileId && selectMode) {
-      if (viewMode === 'all' && scrollViewRef.current) {
-        // Find the index of the selected file (filteredFiles is already sorted)
-        const itemIndex = filteredFiles.findIndex(file => file.id === lastSelectedFileId);
-        if (itemIndex >= 0) {
-          // Estimate item height (GroupedItem with dense mode is approximately 60-70px)
-          // Account for description rows which add extra height
-          const baseItemHeight = 65;
-          const descriptionHeight = 30; // Approximate height for description
-          // Use filteredFiles which is already sorted according to user's selection
-          const sortedFiles = filteredFiles;
-
-          // Calculate total height up to this item
-          let scrollPosition = 0;
-          for (let i = 0; i <= itemIndex && i < sortedFiles.length; i++) {
-            const file = sortedFiles[i];
-            scrollPosition += baseItemHeight;
-            if (file.metadata?.description) {
-              scrollPosition += descriptionHeight;
-            }
-          }
-
-          // Add header, controls, search, and stats height (approximately 250px)
-          const headerHeight = 250;
-          const finalScrollPosition = headerHeight + scrollPosition - 150; // Offset to show item near top
-
-          // Use requestAnimationFrame to ensure DOM is updated before scrolling
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              scrollViewRef.current?.scrollTo({
-                y: Math.max(0, finalScrollPosition),
-                animated: true
-              });
-            });
-          });
-        }
-      } else if (viewMode === 'photos' && photoScrollViewRef.current) {
-        // For photo grid, find the photo index
-        const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
-        const photoIndex = photos.findIndex(p => p.id === lastSelectedFileId);
-        if (photoIndex >= 0) {
-          // Rough scroll estimate for the justified grid (3 photos/row; variable row heights).
-          const itemsPerRow = 3;
-          const estimatedRowHeight = 150;
-          const rowGap = 4;
-          const row = Math.floor(photoIndex / itemsPerRow);
-          const finalScrollPosition = row * (estimatedRowHeight + rowGap) - 100;
+  }, [filteredFiles, colors, deletingId, toggleSelect, handleFileDownload, confirmFileDelete, handleFileOpen, thumbSourceFor, selectMode, selectedIds]);
 
-          // Use requestAnimationFrame to ensure DOM is updated before scrolling
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              photoScrollViewRef.current?.scrollTo({
-                y: Math.max(0, finalScrollPosition),
-                animated: true
-              });
-            });
-          });
-        }
-      }
-    }
-  }, [lastSelectedFileId, selectMode, viewMode, filteredFiles, safeContainerWidth]);
-
-  // Clear selected file ID after scroll animation completes
-  (0, _react.useEffect)(() => {
-    if (lastSelectedFileId && scrollViewRef.current) {
-      const timeoutId = setTimeout(() => {
-        setLastSelectedFileId(null);
-      }, 600); // Allow time for scroll animation to complete
+  // Browse-themed terminal load-failure state — DISTINCT from the empty state.
+  const renderLoadError = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileLibraryError.default, {
+    title: t('fileManagement.loadError.title'),
+    description: t('fileManagement.loadError.description'),
+    retryLabel: t('fileManagement.retry'),
+    onRetry: () => filesQuery.refetch(),
+    iconColor: colors.error,
+    titleColor: colors.text,
+    descriptionColor: colors.textSecondary,
+    buttonColor: colors.primary
+  });
 
-      return () => clearTimeout(timeoutId);
-    }
-  }, [lastSelectedFileId]);
-  const renderPhotoGrid = (0, _react.useCallback)(() => {
+  // Browse "photos" view. The justified grid owns its own dimension
+  // measurement + reflow (see JustifiedPhotoGrid); this only supplies the
+  // photo set, the private-safe URL resolver, and the tile renderer.
+  const renderPhotoGrid = () => {
     const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
     if (photos.length === 0) {
+      if (hasLoadError) return renderLoadError();
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         className: "items-center py-[40px] px-[24px]",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
@@ -1049,10 +897,7 @@ const FileManagementScreen = ({
           },
           onPress: handleFileUpload,
           disabled: uploading || isPickingDocument,
-          children: uploading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-            size: "small",
-            color: "#FFFFFF"
-          }) : isPickingDocument ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+          children: uploading || isPickingDocument ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
             size: "small",
             color: "#FFFFFF"
           }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -1068,13 +913,13 @@ const FileManagementScreen = ({
         })]
       });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       ref: photoScrollViewRef,
       className: "flex-1",
       contentContainerClassName: "p-[10px]",
       refreshControl: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
-        refreshing: refreshing,
-        onRefresh: () => loadFiles('refresh'),
+        refreshing: isRefreshingFiles,
+        onRefresh: () => filesQuery.refetch(),
         tintColor: colors.primary
       }),
       showsVerticalScrollIndicator: false,
@@ -1087,38 +932,21 @@ const FileManagementScreen = ({
           contentSize
         } = nativeEvent;
         const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
-        if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
-          loadFiles('more');
+        if (distanceFromBottom < 200 && !isFetchingMore && hasMoreFiles) {
+          filesQuery.fetchNextPage();
         }
       },
       scrollEventThrottle: 250,
-      children: [loadingDimensions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        className: "flex-row items-center justify-center py-[16px] gap-[8px]",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          size: "small",
-          color: colors.primary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          className: "text-[14px] italic",
-          style: {
-            color: colors.textSecondary
-          },
-          children: t('fileManagement.loadingPhotoLayout')
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JustifiedPhotoGrid.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_JustifiedPhotoGrid.default, {
         photos: photos,
-        photoDimensions: photoDimensions,
-        loadPhotoDimensions: loadPhotoDimensions,
-        createJustifiedRows: createJustifiedRows,
+        getThumbUrl: thumbSourceFor,
         renderJustifiedPhotoItem: renderJustifiedPhotoItem,
         textColor: colors.text,
         containerWidth: typeof containerWidth === 'number' && containerWidth > 0 ? containerWidth : undefined
-      })]
+      })
     });
-  }, [filteredFiles, colors, user?.id, targetUserId, uploading, handleFileUpload, refreshing, loadFiles, loadingDimensions, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem, containerWidth]);
-
-  // Inline justified grid removed (moved to components/photogrid/JustifiedPhotoGrid.tsx)
-
-  const renderEmptyState = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  };
+  const renderEmptyState = () => hasLoadError ? renderLoadError() : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     className: "items-center py-[40px] px-[24px]",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
       name: "folder-open-outline",
@@ -1143,10 +971,7 @@ const FileManagementScreen = ({
       },
       onPress: handleFileUpload,
       disabled: uploading || isPickingDocument,
-      children: uploading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        size: "small",
-        color: "#FFFFFF"
-      }) : isPickingDocument ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+      children: uploading || isPickingDocument ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
         size: "small",
         color: "#FFFFFF"
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -1172,7 +997,85 @@ const FileManagementScreen = ({
   // picker's placement-aware container width / columns / tile size and the
   // Dialog-vs-bottom-sheet sizing. Skipping the browse chrome here is what keeps
   // the picker from flashing the wrong (file-manager) skeleton inside the Dialog.
-  if (loading && !isImageOnlyPicker) {
+  // The Dialog owns the nav header; this screen contributes its state-dependent
+  // title/subtitle + action slots. The image-only picker mode is headerless
+  // (PhotoPickerView owns its own bar), so this config is simply ignored there.
+  const fmHeaderRight = (0, _react.useMemo)(() => {
+    const actions = selectMode && multiSelect ? [{
+      key: 'clear',
+      label: t('fileManagement.clear'),
+      onPress: () => setSelectedIds(new Set()),
+      disabled: selectedIds.size === 0
+    }, {
+      key: 'confirm',
+      label: t('fileManagement.confirm'),
+      onPress: confirmMultiSelection,
+      disabled: selectedIds.size === 0
+    }] : !selectMode && selectedIds.size > 0 ? [{
+      key: 'clear',
+      label: t('fileManagement.clear'),
+      onPress: () => setSelectedIds(new Set()),
+      disabled: false
+    }, {
+      key: 'delete',
+      label: t('fileManagement.delete', {
+        count: selectedIds.size
+      }),
+      onPress: confirmBulkDelete,
+      disabled: false
+    }, {
+      key: 'visibility',
+      label: t('fileManagement.visibility'),
+      onPress: handleVisibilityChange,
+      disabled: false
+    }] : [];
+    if (actions.length === 0) return undefined;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: fmHeaderStyles.actionsRow,
+      children: actions.map(a => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SurfaceHeaderAction.SurfaceHeaderAction, {
+        label: a.label,
+        onPress: a.onPress,
+        disabled: a.disabled
+      }, a.key))
+    });
+  }, [selectMode, multiSelect, selectedIds, t, confirmMultiSelection, confirmBulkDelete, handleVisibilityChange]);
+  const fmHeaderBack = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: handleCancelUpload,
+    accessibilityRole: "button",
+    accessibilityLabel: t('common.back') || 'Back',
+    hitSlop: 8,
+    style: fmHeaderStyles.backButton,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "chevron-back",
+      size: 20,
+      color: colors.text
+    })
+  }), [handleCancelUpload, colors.text, t]);
+  (0, _useSurfaceHeader.useSurfaceHeader)(showUploadPreview ? {
+    title: t('fileManagement.reviewFiles'),
+    subtitle: t('fileManagement.readyToUpload', {
+      count: pendingFiles.length
+    }),
+    left: fmHeaderBack,
+    largeTitle: false
+  } : {
+    title: selectMode ? multiSelect ? maxSelection ? t('fileManagement.selectedWithMax', {
+      count: selectedIds.size,
+      max: maxSelection
+    }) : t('fileManagement.selected', {
+      count: selectedIds.size
+    }) : t('fileManagement.selectFile') : viewMode === 'photos' ? t('fileManagement.photos') : t('fileManagement.title'),
+    subtitle: selectMode ? multiSelect ? t('fileManagement.available', {
+      count: filteredFiles.length
+    }) : t('fileManagement.tapToSelect') : filteredFiles.length === 1 ? t('fileManagement.itemCount', {
+      count: filteredFiles.length
+    }) : t('fileManagement.itemCount_plural', {
+      count: filteredFiles.length
+    }),
+    right: fmHeaderRight,
+    largeTitle: false
+  });
+  if (isLoadingFiles && !isImageOnlyPicker) {
     const GRID_PADDING = 10;
     const TILE_GAP = 4;
     const GRID_COLUMNS = 3;
@@ -1265,141 +1168,77 @@ const FileManagementScreen = ({
     const photosOnly = filteredFiles.filter(file => file.contentType.startsWith('image/'));
     const isOwner = user?.id === targetUserId;
     const allowUpload = isOwner && allowUploadInSelectMode;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PhotoPickerSection.default, {
-        photos: photosOnly,
-        selectedIds: selectedIds,
-        multiSelect: multiSelect,
-        maxSelection: maxSelection,
-        allowUpload: allowUpload,
-        refreshing: refreshing,
-        uploading: uploading,
-        isPickingDocument: isPickingDocument,
-        uploadProgress: uploadProgress,
-        hasMore: paging.hasMore,
-        loadingMore: paging.loadingMore,
-        loading: loading,
-        reduceMotion: reduceMotion,
-        getThumbUrl: thumbSourceFor,
-        primaryColor: colors.primary,
-        isOwner: isOwner,
-        onTogglePhoto: toggleSelect,
-        onPreviewPhoto: file => showFileDetailsModal(file),
-        onUpload: handleFileUpload,
-        onRefresh: () => loadFiles('refresh'),
-        onLoadMore: () => loadFiles('more'),
-        onCancel: () => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PhotoPickerSection.default, {
+      photos: photosOnly,
+      selectedIds: selectedIds,
+      multiSelect: multiSelect,
+      maxSelection: maxSelection,
+      allowUpload: allowUpload,
+      refreshing: isRefreshingFiles,
+      uploading: uploading,
+      isPickingDocument: isPickingDocument,
+      uploadProgress: uploadProgress,
+      hasMore: hasMoreFiles,
+      loadingMore: isFetchingMore,
+      loading: isLoadingFiles,
+      loadError: hasLoadError,
+      onRetry: () => filesQuery.refetch(),
+      reduceMotion: reduceMotion,
+      getThumbUrl: thumbSourceFor,
+      primaryColor: colors.primary,
+      isOwner: isOwner,
+      onTogglePhoto: toggleSelect
+      // Long-press preview surfaces the file-detail panel on the stack.
+      ,
+      onPreviewPhoto: file => showFileDetailsModal(file),
+      onUpload: handleFileUpload,
+      onRefresh: () => filesQuery.refetch(),
+      onLoadMore: () => filesQuery.fetchNextPage(),
+      onCancel: () => {
+        if (onSelect || onConfirmSelection) {
+          // Legacy callback caller: preserve close/back behaviour.
           if (onClose) onClose();else goBack?.();
-        },
-        onConfirm: confirmMultiSelection,
-        t: t
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileDetailsModal.FileDetailsModal, {
-        control: fileDetailsControl,
-        file: selectedFile,
-        onDownload: handleFileDownload,
-        onDelete: confirmFileDelete,
-        isOwner: isOwner
-      })]
+        } else {
+          // Promise picker (avatar): dismiss just this surface.
+          dismiss?.();
+        }
+      },
+      onConfirm: confirmMultiSelection,
+      t: t
     });
   }
 
   // If a file is opened, show the file viewer
   if (!selectMode && openedFile) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FileViewer.FileViewer, {
-        file: openedFile,
-        fileContent: fileContent,
-        loadingFileContent: loadingFileContent,
-        showFileDetailsInViewer: showFileDetailsInViewer,
-        onToggleDetails: () => setShowFileDetailsInViewer(!showFileDetailsInViewer),
-        onClose: handleCloseFile,
-        onDownload: handleFileDownload,
-        onDelete: confirmFileDelete,
-        isOwner: user?.id === targetUserId
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileDetailsModal.FileDetailsModal, {
-        control: fileDetailsControl,
-        file: selectedFile,
-        onDownload: handleFileDownload,
-        onDelete: confirmFileDelete,
-        isOwner: user?.id === targetUserId
-      })]
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileViewer.FileViewer, {
+      file: openedFile,
+      fileContent: fileContent,
+      loadingFileContent: loadingFileContent,
+      showFileDetailsInViewer: showFileDetailsInViewer,
+      onToggleDetails: () => setShowFileDetailsInViewer(!showFileDetailsInViewer),
+      onClose: handleCloseFile,
+      onDownload: handleFileDownload,
+      onDelete: confirmFileDelete,
+      isOwner: user?.id === targetUserId
     });
   }
 
   // If upload preview is showing, render it inline instead of the file list
   if (showUploadPreview) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       className: "flex-1",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
-        title: t('fileManagement.reviewFiles'),
-        subtitle: t('fileManagement.readyToUpload', {
-          count: pendingFiles.length
-        }),
-        onBack: handleCancelUpload,
-        showBackButton: true,
-        variant: "minimal",
-        elevation: "none",
-        titleAlignment: "left"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_UploadPreview.UploadPreview, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_UploadPreview.UploadPreview, {
         pendingFiles: pendingFiles,
         onConfirm: handleConfirmUpload,
         onCancel: handleCancelUpload,
         onRemoveFile: removePendingFile,
         inline: true
-      })]
+      })
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     className: "flex-1",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
-      title: selectMode ? multiSelect ? maxSelection ? t('fileManagement.selectedWithMax', {
-        count: selectedIds.size,
-        max: maxSelection
-      }) : t('fileManagement.selected', {
-        count: selectedIds.size
-      }) : t('fileManagement.selectFile') : viewMode === 'photos' ? t('fileManagement.photos') : t('fileManagement.title'),
-      subtitle: selectMode ? multiSelect ? t('fileManagement.available', {
-        count: filteredFiles.length
-      }) : t('fileManagement.tapToSelect') : filteredFiles.length === 1 ? t('fileManagement.itemCount', {
-        count: filteredFiles.length
-      }) : t('fileManagement.itemCount_plural', {
-        count: filteredFiles.length
-      }),
-      actions: selectMode && multiSelect ? [{
-        key: 'clear',
-        text: t('fileManagement.clear'),
-        onPress: () => setSelectedIds(new Set()),
-        disabled: selectedIds.size === 0
-      }, {
-        key: 'confirm',
-        text: t('fileManagement.confirm'),
-        onPress: confirmMultiSelection,
-        disabled: selectedIds.size === 0
-      }] : !selectMode && selectedIds.size > 0 ? [{
-        key: 'clear',
-        text: t('fileManagement.clear'),
-        onPress: () => setSelectedIds(new Set())
-      }, {
-        key: 'delete',
-        text: t('fileManagement.delete', {
-          count: selectedIds.size
-        }),
-        onPress: confirmBulkDelete,
-        icon: 'delete'
-      }, {
-        key: 'visibility',
-        text: t('fileManagement.visibility'),
-        onPress: () => {
-          visibilityChangeDialog.open();
-        },
-        icon: 'eye'
-      }] : undefined,
-      onBack: onClose || goBack,
-      showBackButton: true,
-      variant: "minimal",
-      elevation: "none",
-      titleAlignment: "left"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       className: "flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
         horizontal: true,
@@ -1429,32 +1268,30 @@ const FileManagementScreen = ({
             textColor: colors.text,
             style: screenStyles.viewModeButton,
             accessibilityLabel: t('fileManagement.a11y.viewPhotos') || 'Show photos only'
-          }), !isImageOnlyPicker && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimatedButton.AnimatedButton, {
-              isSelected: viewMode === 'videos',
-              onPress: () => setViewMode('videos'),
-              icon: viewMode === 'videos' ? 'video' : 'video-outline',
-              primaryColor: colors.primary,
-              textColor: colors.text,
-              style: screenStyles.viewModeButton,
-              accessibilityLabel: t('fileManagement.a11y.viewVideos') || 'Show videos only'
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimatedButton.AnimatedButton, {
-              isSelected: viewMode === 'documents',
-              onPress: () => setViewMode('documents'),
-              icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
-              primaryColor: colors.primary,
-              textColor: colors.text,
-              style: screenStyles.viewModeButton,
-              accessibilityLabel: t('fileManagement.a11y.viewDocuments') || 'Show documents only'
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimatedButton.AnimatedButton, {
-              isSelected: viewMode === 'audio',
-              onPress: () => setViewMode('audio'),
-              icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
-              primaryColor: colors.primary,
-              textColor: colors.text,
-              style: screenStyles.viewModeButton,
-              accessibilityLabel: t('fileManagement.a11y.viewAudio') || 'Show audio only'
-            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimatedButton.AnimatedButton, {
+            isSelected: viewMode === 'videos',
+            onPress: () => setViewMode('videos'),
+            icon: viewMode === 'videos' ? 'video' : 'video-outline',
+            primaryColor: colors.primary,
+            textColor: colors.text,
+            style: screenStyles.viewModeButton,
+            accessibilityLabel: t('fileManagement.a11y.viewVideos') || 'Show videos only'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimatedButton.AnimatedButton, {
+            isSelected: viewMode === 'documents',
+            onPress: () => setViewMode('documents'),
+            icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
+            primaryColor: colors.primary,
+            textColor: colors.text,
+            style: screenStyles.viewModeButton,
+            accessibilityLabel: t('fileManagement.a11y.viewDocuments') || 'Show documents only'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimatedButton.AnimatedButton, {
+            isSelected: viewMode === 'audio',
+            onPress: () => setViewMode('audio'),
+            icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
+            primaryColor: colors.primary,
+            textColor: colors.text,
+            style: screenStyles.viewModeButton,
+            accessibilityLabel: t('fileManagement.a11y.viewAudio') || 'Show audio only'
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
@@ -1487,15 +1324,15 @@ const FileManagementScreen = ({
           size: 14,
           color: colors.textSecondary
         })]
-      }), user?.id === targetUserId && (!selectMode || selectMode && allowUploadInSelectMode) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        className: `h-[44px] rounded-[22px] items-center justify-center ${isImageOnlyPicker ? 'w-auto min-w-[44px] px-[14px]' : 'w-[44px]'}`,
+      }), user?.id === targetUserId && (!selectMode || allowUploadInSelectMode) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        className: "h-[44px] w-[44px] rounded-[22px] items-center justify-center",
         style: {
           backgroundColor: colors.primary
         },
         onPress: handleFileUpload,
         disabled: uploading || isPickingDocument,
         accessibilityRole: "button",
-        accessibilityLabel: isImageOnlyPicker ? t('fileManagement.a11y.uploadFromDevice') || 'Upload photo from device' : t('fileManagement.a11y.uploadFile') || 'Upload file',
+        accessibilityLabel: t('fileManagement.a11y.uploadFile') || 'Upload file',
         accessibilityState: {
           busy: uploading || isPickingDocument
         },
@@ -1511,17 +1348,6 @@ const FileManagementScreen = ({
         }) : isPickingDocument ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
           size: "small",
           color: "#FFFFFF"
-        }) : isImageOnlyPicker ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          className: "flex-row items-center gap-[6px]",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: "cloud-upload",
-            size: 18,
-            color: "#FFFFFF"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            className: "text-white text-[14px] font-semibold",
-            numberOfLines: 1,
-            children: t('fileManagement.upload') || 'Upload'
-          })]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "add",
           size: 22,
@@ -1617,72 +1443,22 @@ const FileManagementScreen = ({
       filteredFiles: filteredFiles,
       searchQuery: searchQuery,
       items: groupedFileItems,
-      paging: paging,
-      refreshing: refreshing,
+      paging: {
+        loadingMore: isFetchingMore,
+        hasMore: hasMoreFiles
+      },
+      refreshing: isRefreshingFiles,
       colors: colors,
       t: t,
-      onRefresh: () => loadFiles('refresh'),
-      onLoadMore: () => loadFiles('more'),
+      onRefresh: () => filesQuery.refetch(),
+      onLoadMore: () => filesQuery.fetchNextPage(),
       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)(_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',
-      description: pendingDeleteFile ? t('fileManagement.confirms.deleteFile', {
-        filename: pendingDeleteFile.name
-      }) : '',
-      actions: [{
-        label: t('fileManagement.confirm') || 'Delete',
-        color: 'destructive',
-        onPress: handleFileDelete
-      }, {
-        label: t('common.cancel') || 'Cancel',
-        color: 'cancel'
-      }]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bloom.Dialog, {
-      control: bulkDeleteDialog,
-      title: t('fileManagement.deleteFiles') || 'Delete Files',
-      description: t('fileManagement.confirms.deleteFiles', {
-        count: selectedIds.size
-      }),
-      actions: [{
-        label: t('fileManagement.confirm') || 'Delete',
-        color: 'destructive',
-        onPress: handleBulkDelete
-      }, {
-        label: t('common.cancel') || 'Cancel',
-        color: 'cancel'
-      }]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bloom.Dialog, {
-      control: visibilityChangeDialog,
-      title: t('fileManagement.changeVisibility') || 'Change Visibility',
-      description: t('fileManagement.changeVisibilityConfirm', {
-        count: selectedIds.size
-      }),
-      actions: [{
-        label: t('fileManagement.private') || 'Private',
-        onPress: () => handleBulkVisibilityChange('private')
-      }, {
-        label: t('fileManagement.public') || 'Public',
-        onPress: () => handleBulkVisibilityChange('public')
-      }, {
-        label: t('fileManagement.unlisted') || 'Unlisted',
-        onPress: () => handleBulkVisibilityChange('unlisted')
-      }, {
-        label: t('common.cancel') || 'Cancel',
-        color: 'cancel'
-      }]
     })]
   });
 };