@oxyhq/services 22.9.0 → 22.11.0

package/src/ui/screens/FileManagementScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import React, { useState, useCallback, useMemo, useRef } from 'react';
 import {
     View,
     Text,
@@ -8,22 +8,26 @@ import {
     ActivityIndicator,
     RefreshControl,
     TextInput,
-    Image,
-    AccessibilityInfo,
     useWindowDimensions,
 } from 'react-native';
+import { useQueryClient } from '@tanstack/react-query';
 import { Image as ExpoImage } from 'expo-image';
 import type { FileManagementScreenProps } from '../types/fileManagement';
-import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 import * as Skeleton from '@oxyhq/bloom/skeleton';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { Pressable } from 'react-native';
 import type { FileMetadata } from '@oxyhq/core';
-import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
-import Header from '../components/Header';
+import { queryKeys } from '../hooks/queries/queryKeys';
+import { useUserFilesInfinite, removeFileFromCache, patchFileMetadataInCache } from '../hooks/queries/useFileQueries';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import { SurfaceHeaderAction } from '../components/SurfaceHeaderAction';
 import JustifiedPhotoGrid from '../components/photogrid/JustifiedPhotoGrid';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useReduceMotion } from '../hooks/useReduceMotion';
 import { useUploadFile } from '../hooks/mutations/useAccountMutations';
 import {
     formatFileSize,
@@ -31,18 +35,35 @@ import {
 } from '../utils/fileManagement';
 import { useResolvedFileUrls, fileThumbSource } from '../hooks/useResolvedFileUrls';
 import { FileViewer } from '../components/fileManagement/FileViewer';
-import { FileDetailsModal } from '../components/fileManagement/FileDetailsModal';
+import { presentFileDetails } from '../components/fileManagement/FileDetailsModal';
 import { UploadPreview } from '../components/fileManagement/UploadPreview';
+import { presentActionSheet } from '../components/surfaces/ActionSheetSurface';
 import { getErrorMessage } from './fileManagement/shared';
 import { useFileUploadState } from './fileManagement/hooks/useFileUploadState';
 import PhotoPickerView from './fileManagement/PhotoPickerSection';
 import FileListSection, { type FileListItem } from './fileManagement/FileListSection';
+import FileLibraryError from './fileManagement/FileLibraryError';
 import UploadBar from './fileManagement/UploadBar';
 import { AnimatedButton } from '../components/fileManagement/AnimatedButton';
 
 // 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 = StyleSheet.create({
+    actionsRow: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    backButton: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
 const screenStyles = StyleSheet.create({
     viewModeButton: {
         paddingHorizontal: 10,
@@ -53,15 +74,14 @@ const screenStyles = StyleSheet.create({
         justifyContent: 'center',
         marginHorizontal: 1,
     },
-    photoImage: { width: '100%', height: '100%', borderRadius: 8 },
     justifiedPhotoImage: { width: '100%', height: '100%', borderRadius: 6 },
 });
 
 const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     onClose,
-    theme,
     goBack,
     navigate,
+    dismiss,
     userId,
     containerWidth,
     selectMode = false,
@@ -82,13 +102,35 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     // against `user`, so switching shows/manages that account's files.
     const { user, oxyServices } = useOxy();
     const { t } = useI18n();
+    const queryClient = useQueryClient();
     const uploadFileMutation = useUploadFile();
-    // Prompt controls
-    const fileDeleteDialog = useDialogControl();
-    const bulkDeleteDialog = useDialogControl();
-    const visibilityChangeDialog = useDialogControl();
-    const [pendingDeleteFile, setPendingDeleteFile] = useState<{ id: string; name: string } | null>(null);
-    const files = 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 = useUserFilesInfinite(targetUserId);
+    const files = 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 = useCallback(() => {
+        queryClient.invalidateQueries({ queryKey: queryKeys.files.list(targetUserId) });
+    }, [queryClient, targetUserId]);
+
     const { width: windowWidth } = useWindowDimensions();
     // Prefer an explicit sheet width from the router; fall back to the window
     // so photo grids never size against a hardcoded 400px default.
@@ -96,40 +138,16 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         typeof containerWidth === 'number' && containerWidth > 0
             ? containerWidth
             : windowWidth;
-    const uploading = useUploadingStore();
-    const uploadProgress = useUploadAggregateProgress();
-    const deleting = useDeletingStore();
-    const [loading, setLoading] = useState(true);
-    const [refreshing, setRefreshing] = useState(false);
-    const [paging, setPaging] = useState({ offset: 0, limit: 40, total: 0, hasMore: true, loadingMore: false });
-    const [selectedFile, setSelectedFile] = useState<FileMetadata | null>(null);
-    const fileDetailsControl = useDialogControl();
+    // In-flight delete target (local UI state — was in the file store).
+    const [deletingId, setDeletingId] = useState<string | null>(null);
     // In selectMode we never open the detailed viewer
     const [openedFile, setOpenedFile] = useState<FileMetadata | null>(null);
     const [fileContent, setFileContent] = useState<string | null>(null);
     const [loadingFileContent, setLoadingFileContent] = useState(false);
     const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
-    const [reduceMotion, setReduceMotion] = useState(false);
-
-    // Detect reduce-motion preference once on mount + subscribe to changes.
-    // Used by `PhotoPickerView` to skip cell stagger animations.
-    useEffect(() => {
-        let cancelled = false;
-        AccessibilityInfo.isReduceMotionEnabled()
-            .then((enabled) => {
-                if (!cancelled) setReduceMotion(enabled);
-            })
-            .catch(() => {
-                // Defaults to false; no action needed.
-            });
-        const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', (enabled) => {
-            setReduceMotion(enabled);
-        });
-        return () => {
-            cancelled = true;
-            sub.remove();
-        };
-    }, []);
+    // Reduce-motion preference, read as an external store (no effect). Passed to
+    // `PhotoPickerView` to skip cell stagger animations.
+    const reduceMotion = 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.
@@ -203,25 +221,54 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
         return sorted;
     }, [files, searchQuery, viewMode, sortBy, sortOrder]);
-    const [photoDimensions, setPhotoDimensions] = useState<{ [key: string]: { width: number, height: number } }>({});
-    const photoDimensionsRef = useRef(photoDimensions);
-    photoDimensionsRef.current = photoDimensions;
-    const [loadingDimensions, setLoadingDimensions] = useState(false);
-    // Selection state
-    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set(initialSelectedIds));
-    const [lastSelectedFileId, setLastSelectedFileId] = useState<string | null>(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] = useState<Set<string>>(() => new Set(initialSelectedIds));
     const scrollViewRef = useRef<ScrollView>(null);
     const photoScrollViewRef = useRef<ScrollView>(null);
-    const containerRef = useRef<View>(null);
-    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 = useCallback((fileId: string) => {
+        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 = useCallback(async (file: FileMetadata) => {
-        // 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) {
@@ -240,9 +287,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             }
         }
 
-        // Track the selected file for scrolling
-        setLastSelectedFileId(file.id);
-
         // Link file to entity if linkContext is provided
         if (linkContext) {
             try {
@@ -260,11 +304,19 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
 
         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;
         }
@@ -282,12 +334,13 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             }
             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 = useCallback(async () => {
         if (!selectMode || !multiSelect) return;
         const map: Record<string, FileMetadata> = {};
-        files.forEach(f => { map[f.id] = 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
@@ -322,9 +375,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         // 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
@@ -346,70 +405,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const backgroundColor = colors.backgroundSecondary;
     const borderColor = colors.border;
 
-    const targetUserId = userId || user?.id;
-
-    const storeSetDeleting = useFileStore(s => s.setDeleting);
-
-    const loadFiles = useCallback(async (mode: 'initial' | 'refresh' | 'silent' | 'more' = '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: FileMetadata[] = (response.files || []).map((f: { id: string; originalName?: string; sha256?: string; mime?: string; size?: number; createdAt?: string; metadata?: Record<string, unknown>; variants?: unknown[] }) => ({
-                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 ?? []) as FileMetadata['variants'],
-            }));
-            if (mode === 'more') {
-                // append
-                useFileStore.getState().setFiles(assets, { merge: true });
-                setPaging(p => ({
-                    ...p,
-                    offset: effectiveOffset,
-                    total: response.total || (effectiveOffset + assets.length),
-                    hasMore: response.hasMore,
-                    loadingMore: false,
-                }));
-            } else {
-                useFileStore.getState().setFiles(assets, { merge: false });
-                setPaging(p => ({
-                    ...p,
-                    offset: 0,
-                    total: response.total || assets.length,
-                    hasMore: response.hasMore,
-                    loadingMore: false,
-                }));
-            }
-        } catch (error: unknown) {
-            toast.error(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,
@@ -426,156 +430,61 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         onClose,
         selectedIds,
         setSelectedIds,
-        loadFiles,
         t,
     });
 
-    // Keep a ref to avoid stale closure when calculating next offset
-    const prevPagingRef = useRef(paging);
-    useEffect(() => { prevPagingRef.current = paging; }, [paging]);
-
-    // (removed effect; filteredFiles is memoized)
-
-    // Load photo dimensions for justified grid - unified approach using Image.getSize
-    const loadPhotoDimensions = useCallback(async (photos: FileMetadata[]) => {
-        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: { [key: string]: { width: number; height: number } } = {};
-
-            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<void>((resolve) => {
-                            Image.getSize(
-                                downloadUrl,
-                                (width: number, height: number) => {
-                                    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.
-    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 = useCallback((photos: FileMetadata[], containerWidth: number) => {
-        if (photos.length === 0) return [];
-
-        const rows: FileMetadata[][] = [];
-        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 = useCallback((fileId: string, filename: string) => {
-        setPendingDeleteFile({ id: fileId, name: filename });
-        fileDeleteDialog.open();
-    }, [fileDeleteDialog]);
-
-    const handleFileDelete = useCallback(async () => {
-        if (!pendingDeleteFile) return;
-        const { id: fileId } = pendingDeleteFile;
+    const confirmFileDelete = useCallback(async (fileId: string, filename: string) => {
+        const confirmed = await 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,
+        });
+        if (!confirmed) return;
 
         try {
-            storeSetDeleting(fileId);
+            setDeletingId(fileId);
             await oxyServices.deleteFile(fileId);
 
             toast.success(t('fileManagement.toasts.deleteSuccess'));
 
-            // Reload files after successful deletion
-            // Optimistic remove
-            useFileStore.getState().removeFile(fileId);
-            // Silent background reconcile
-            setTimeout(() => loadFiles('silent'), 800);
+            // Remove from the query cache, then reconcile against the server.
+            removeFileFromCache(queryClient, targetUserId, fileId);
+            invalidateFiles();
         } catch (error: unknown) {
-
             // Provide specific error messages
             if (getErrorMessage(error)?.includes('File not found') || getErrorMessage(error)?.includes('404')) {
                 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 (getErrorMessage(error)?.includes('permission') || getErrorMessage(error)?.includes('403')) {
                 toast.error(t('fileManagement.toasts.noPermission'));
             } else {
                 toast.error(getErrorMessage(error) || t('fileManagement.toasts.deleteFailed'));
             }
         } finally {
-            storeSetDeleting(null);
-            setPendingDeleteFile(null);
+            setDeletingId(null);
         }
-    }, [pendingDeleteFile, storeSetDeleting, oxyServices, loadFiles, t]);
+    }, [oxyServices, queryClient, targetUserId, invalidateFiles, t]);
 
-    const confirmBulkDelete = useCallback(() => {
+    const confirmBulkDelete = useCallback(async () => {
         if (selectedIds.size === 0) return;
-        bulkDeleteDialog.open();
-    }, [selectedIds.size, bulkDeleteDialog]);
 
-    const handleBulkDelete = useCallback(async () => {
-        if (selectedIds.size === 0) return;
+        const confirmed = await 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);
-                    useFileStore.getState().removeFile(fileId);
+                    removeFileFromCache(queryClient, targetUserId, fileId);
                     return { success: true, fileId };
                 } catch (error: unknown) {
                     return { success: false, fileId, error };
@@ -594,11 +503,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             }
 
             setSelectedIds(new Set());
-            setTimeout(() => loadFiles('silent'), 800);
+            invalidateFiles();
         } catch (error: unknown) {
             toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
         }
-    }, [selectedIds, files, oxyServices, loadFiles]);
+    }, [selectedIds, oxyServices, queryClient, targetUserId, invalidateFiles, t]);
 
     const handleBulkVisibilityChange = useCallback(async (visibility: 'private' | 'public' | 'unlisted') => {
         if (selectedIds.size === 0) return;
@@ -619,25 +528,38 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             if (successful > 0) {
                 toast.success(t('fileManagement.toasts.visibilitySuccess', { count: successful, visibility }));
-                // Update file metadata in store
-                Array.from(selectedIds).forEach(fileId => {
-                    useFileStore.getState().updateFile(fileId, {
-                        metadata: { ...files.find(f => f.id === fileId)?.metadata, visibility } as Partial<FileMetadata>['metadata']
-                    });
-                });
+                // Reflect the new visibility in the cached files.
+                for (const fileId of selectedIds) {
+                    patchFileMetadataInCache(queryClient, targetUserId, fileId, { visibility });
+                }
             }
             if (failed > 0) {
                 toast.error(t('fileManagement.toasts.visibilityFailed', { count: failed }));
             }
 
-            setTimeout(() => loadFiles('silent'), 800);
+            invalidateFiles();
         } catch (error: unknown) {
             toast.error(getErrorMessage(error) || t('fileManagement.toasts.visibilityError'));
         }
-    }, [selectedIds, oxyServices, files, loadFiles]);
+    }, [selectedIds, oxyServices, queryClient, targetUserId, invalidateFiles, t]);
+
+    const handleVisibilityChange = useCallback(async () => {
+        if (selectedIds.size === 0) return;
+        const visibility = await presentActionSheet<'private' | 'public' | 'unlisted'>({
+            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: string, filename: string) => {
+    const handleFileDownload = useCallback(async (fileId: string, filename: string) => {
         try {
             // Resolve an authenticated, private-safe URL. The synchronous
             // `getFileDownloadUrl` yields the public CDN origin, which 404s for
@@ -681,10 +603,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } catch (error: unknown) {
             toast.error(getErrorMessage(error) || t('fileManagement.toasts.downloadFailed'));
         }
-    };
+    }, [oxyServices, t]);
 
-
-    const handleFileOpen = async (file: FileMetadata) => {
+    const handleFileOpen = useCallback(async (file: FileMetadata) => {
         if (selectMode) {
             toggleSelect(file);
             return;
@@ -736,19 +657,23 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } finally {
             setLoadingFileContent(false);
         }
-    };
+    }, [selectMode, toggleSelect, oxyServices, t]);
 
-    const handleCloseFile = () => {
+    const handleCloseFile = useCallback(() => {
         setOpenedFile(null);
         setFileContent(null);
         setShowFileDetailsInViewer(false);
         // Don't reset view mode when closing a file
-    };
+    }, []);
 
-    const showFileDetailsModal = (file: FileMetadata) => {
-        setSelectedFile(file);
-        fileDetailsControl.open();
-    };
+    const showFileDetailsModal = useCallback((file: FileMetadata) => {
+        presentFileDetails({
+            file,
+            onDownload: handleFileDownload,
+            onDelete: confirmFileDelete,
+            isOwner: user?.id === targetUserId,
+        });
+    }, [handleFileDownload, confirmFileDelete, user?.id, targetUserId]);
 
     const renderJustifiedPhotoItem = useCallback((photo: FileMetadata, width: number, height: number, isLast: boolean) => {
         const downloadUrl = thumbSourceFor(photo);
@@ -786,18 +711,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 </View>
             </TouchableOpacity>
         );
-    }, [thumbSourceFor, selectMode, selectedIds, multiSelect, colors.primary, colors.text]);
-
-    // Run initial load once per targetUserId change to avoid accidental loops
-    const lastLoadedFor = useRef<string | undefined>(undefined);
-    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: FileListItem[] = useMemo(() => {
@@ -895,9 +809,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             className="w-[34px] h-[34px] rounded-[8px] items-center justify-center"
                             style={{ backgroundColor: colors.negativeSubtle }}
                             onPress={() => confirmFileDelete(file.id, file.filename)}
-                            disabled={deleting === file.id}
+                            disabled={deletingId === file.id}
                         >
-                            {deleting === file.id ? (
+                            {deletingId === file.id ? (
                                 <ActivityIndicator size="small" color={colors.error} />
                             ) : (
                                 <Ionicons name="trash" size={18} color={colors.error} />
@@ -907,89 +821,30 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 ) : undefined,
             };
         });
-    }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, thumbSourceFor, selectMode, selectedIds]);
-
-    // Scroll to selected file after selection
-    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;
-
-                    // 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
-    useEffect(() => {
-        if (lastSelectedFileId && scrollViewRef.current) {
-            const timeoutId = setTimeout(() => {
-                setLastSelectedFileId(null);
-            }, 600); // Allow time for scroll animation to complete
-
-            return () => clearTimeout(timeoutId);
-        }
-    }, [lastSelectedFileId]);
+    }, [filteredFiles, colors, deletingId, toggleSelect, handleFileDownload, confirmFileDelete, handleFileOpen, thumbSourceFor, selectMode, selectedIds]);
+
+    // Browse-themed terminal load-failure state — DISTINCT from the empty state.
+    const renderLoadError = () => (
+        <FileLibraryError
+            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}
+        />
+    );
 
-    const renderPhotoGrid = 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 (
                 <View className="items-center py-[40px] px-[24px]">
                     <Ionicons name="images-outline" size={64} color={colors.textTertiary} />
@@ -1006,9 +861,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             onPress={handleFileUpload}
                             disabled={uploading || isPickingDocument}
                         >
-                            {uploading ? (
-                                <ActivityIndicator size="small" color="#FFFFFF" />
-                            ) : isPickingDocument ? (
+                            {(uploading || isPickingDocument) ? (
                                 <ActivityIndicator size="small" color="#FFFFFF" />
                             ) : (
                                 <>
@@ -1029,8 +882,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 contentContainerClassName="p-[10px]"
                 refreshControl={
                     <RefreshControl
-                        refreshing={refreshing}
-                        onRefresh={() => loadFiles('refresh')}
+                        refreshing={isRefreshingFiles}
+                        onRefresh={() => filesQuery.refetch()}
                         tintColor={colors.primary}
                     />
                 }
@@ -1038,24 +891,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 onScroll={({ nativeEvent }) => {
                     const { layoutMeasurement, contentOffset, 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}
             >
-                {loadingDimensions && (
-                    <View className="flex-row items-center justify-center py-[16px] gap-[8px]">
-                        <ActivityIndicator size="small" color={colors.primary} />
-                        <Text className="text-[14px] italic" style={{ color: colors.textSecondary }}>{t('fileManagement.loadingPhotoLayout')}</Text>
-                    </View>
-                )}
-
                 <JustifiedPhotoGrid
                     photos={photos}
-                    photoDimensions={photoDimensions}
-                    loadPhotoDimensions={loadPhotoDimensions}
-                    createJustifiedRows={createJustifiedRows}
+                    getThumbUrl={thumbSourceFor}
                     renderJustifiedPhotoItem={renderJustifiedPhotoItem}
                     textColor={colors.text}
                     containerWidth={
@@ -1066,28 +910,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 />
             </ScrollView>
         );
-    }, [
-        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 = () => (
+    const renderEmptyState = () => hasLoadError ? renderLoadError() : (
         <View className="items-center py-[40px] px-[24px]">
             <Ionicons name="folder-open-outline" size={64} color={colors.textTertiary} />
             <Text className="text-[24px] font-bold mt-[16px] mb-[8px]" style={{ color: colors.text }}>{t('fileManagement.emptyFiles.title')}</Text>
@@ -1104,9 +929,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     onPress={handleFileUpload}
                     disabled={uploading || isPickingDocument}
                 >
-                    {uploading ? (
-                        <ActivityIndicator size="small" color="#FFFFFF" />
-                    ) : isPickingDocument ? (
+                    {(uploading || isPickingDocument) ? (
                         <ActivityIndicator size="small" color="#FFFFFF" />
                     ) : (
                         <>
@@ -1129,7 +952,65 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     // 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 = useMemo<React.ReactNode>(() => {
+        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 (
+            <View style={fmHeaderStyles.actionsRow}>
+                {actions.map((a) => (
+                    <SurfaceHeaderAction key={a.key} label={a.label} onPress={a.onPress} disabled={a.disabled} />
+                ))}
+            </View>
+        );
+    }, [selectMode, multiSelect, selectedIds, t, confirmMultiSelection, confirmBulkDelete, handleVisibilityChange]);
+
+    const fmHeaderBack = useMemo<React.ReactNode>(() => (
+        <Pressable
+            onPress={handleCancelUpload}
+            accessibilityRole="button"
+            accessibilityLabel={t('common.back') || 'Back'}
+            hitSlop={8}
+            style={fmHeaderStyles.backButton}
+        >
+            <Ionicons name="chevron-back" size={20} color={colors.text} />
+        </Pressable>
+    ), [handleCancelUpload, colors.text, t]);
+
+    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;
@@ -1190,71 +1071,61 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         const allowUpload = isOwner && allowUploadInSelectMode;
 
         return (
-            <>
-                <PhotoPickerView
-                    photos={photosOnly}
-                    selectedIds={selectedIds}
-                    multiSelect={multiSelect}
-                    maxSelection={maxSelection}
-                    allowUpload={allowUpload}
-                    refreshing={refreshing}
-                    uploading={uploading}
-                    isPickingDocument={isPickingDocument}
-                    uploadProgress={uploadProgress}
-                    hasMore={paging.hasMore}
-                    loadingMore={paging.loadingMore}
-                    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={() => {
+            <PhotoPickerView
+                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}
-                />
-                {/* Long-press preview surfaces the existing details modal. */}
-                <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 (
-            <>
-                <FileViewer
-                    file={openedFile}
-                    fileContent={fileContent}
-                    loadingFileContent={loadingFileContent}
-                    showFileDetailsInViewer={showFileDetailsInViewer}
-                    onToggleDetails={() => setShowFileDetailsInViewer(!showFileDetailsInViewer)}
-                    onClose={handleCloseFile}
-                    onDownload={handleFileDownload}
-                    onDelete={confirmFileDelete}
-                    isOwner={user?.id === targetUserId}
-                />
-                <FileDetailsModal
-                    control={fileDetailsControl}
-                    file={selectedFile}
-                    onDownload={handleFileDownload}
-                    onDelete={confirmFileDelete}
-                    isOwner={user?.id === targetUserId}
-                />
-            </>
+            <FileViewer
+                file={openedFile}
+                fileContent={fileContent}
+                loadingFileContent={loadingFileContent}
+                showFileDetailsInViewer={showFileDetailsInViewer}
+                onToggleDetails={() => setShowFileDetailsInViewer(!showFileDetailsInViewer)}
+                onClose={handleCloseFile}
+                onDownload={handleFileDownload}
+                onDelete={confirmFileDelete}
+                isOwner={user?.id === targetUserId}
+            />
         );
     }
 
@@ -1262,15 +1133,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     if (showUploadPreview) {
         return (
             <View className="flex-1">
-                <Header
-                    title={t('fileManagement.reviewFiles')}
-                    subtitle={t('fileManagement.readyToUpload', { count: pendingFiles.length })}
-                    onBack={handleCancelUpload}
-                    showBackButton
-                    variant="minimal"
-                    elevation="none"
-                    titleAlignment="left"
-                />
                 <UploadPreview
                     pendingFiles={pendingFiles}
                     onConfirm={handleConfirmUpload}
@@ -1284,51 +1146,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     return (
         <View className="flex-1">
-            <Header
-                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
-                variant="minimal"
-                elevation="none"
-                titleAlignment="left"
-            />
-
             <View className="flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]">
                 <ScrollView
                     horizontal
@@ -1358,37 +1175,33 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             style={screenStyles.viewModeButton}
                             accessibilityLabel={t('fileManagement.a11y.viewPhotos') || 'Show photos only'}
                         />
-                        {!isImageOnlyPicker && (
-                            <>
-                                <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'}
-                                />
-                                <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'}
-                                />
-                                <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'}
-                                />
-                            </>
-                        )}
+                        <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'}
+                        />
+                        <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'}
+                        />
+                        <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'}
+                        />
                     </View>
                 </ScrollView>
                 <TouchableOpacity
@@ -1426,18 +1239,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         color={colors.textSecondary}
                     />
                 </TouchableOpacity>
-                {user?.id === targetUserId && (!selectMode || (selectMode && allowUploadInSelectMode)) && (
+                {user?.id === targetUserId && (!selectMode || allowUploadInSelectMode) && (
                     <TouchableOpacity
-                        className={`h-[44px] rounded-[22px] items-center justify-center ${isImageOnlyPicker ? 'w-auto min-w-[44px] px-[14px]' : 'w-[44px]'}`}
+                        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 }}
                     >
                         {uploading ? (
@@ -1451,13 +1260,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             </View>
                         ) : isPickingDocument ? (
                             <ActivityIndicator size="small" color="#FFFFFF" />
-                        ) : isImageOnlyPicker ? (
-                            <View className="flex-row items-center gap-[6px]">
-                                <Ionicons name="cloud-upload" size={18} color="#FFFFFF" />
-                                <Text className="text-white text-[14px] font-semibold" numberOfLines={1}>
-                                    {t('fileManagement.upload') || 'Upload'}
-                                </Text>
-                            </View>
                         ) : (
                             <Ionicons name="add" size={22} color="#FFFFFF" />
                         )}
@@ -1531,27 +1333,17 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     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 && (
-                <FileDetailsModal
-                    control={fileDetailsControl}
-                    file={selectedFile}
-                    onDownload={handleFileDownload}
-                    onDelete={confirmFileDelete}
-                    isOwner={user?.id === targetUserId}
-                />
-            )}
-
             {/* Uploading banner overlay with progress */}
             {!selectMode && uploading && (
                 <UploadBar
@@ -1561,38 +1353,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     t={t}
                 />
             )}
-
-            {/* Selection bar removed; actions are now in header */}
-            {/* Global loadingMore bar removed; now inline in scroll areas */}
-            <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' },
-                ]}
-            />
-            <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' },
-                ]}
-            />
-            <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' },
-                ]}
-            />
         </View>
     );
 };