@oxyhq/services 22.10.0 → 22.11.0

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

@@ -1,20 +1,23 @@
 "use strict";
 
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, AccessibilityInfo, useWindowDimensions } from 'react-native';
+import React, { useState, useCallback, useMemo, useRef } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, useWindowDimensions } from 'react-native';
+import { useQueryClient } from '@tanstack/react-query';
 import { Image as ExpoImage } from 'expo-image';
 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 { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from "../stores/fileStore.js";
+import { queryKeys } from "../hooks/queries/queryKeys.js";
+import { useUserFilesInfinite, removeFileFromCache, patchFileMetadataInCache } from "../hooks/queries/useFileQueries.js";
 import { useSurfaceHeader } from "../hooks/useSurfaceHeader.js";
 import { SurfaceHeaderAction } from "../components/SurfaceHeaderAction.js";
 import JustifiedPhotoGrid from "../components/photogrid/JustifiedPhotoGrid.js";
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from "../context/OxyContext.js";
 import { useI18n } from "../hooks/useI18n.js";
+import { useReduceMotion } from "../hooks/useReduceMotion.js";
 import { useUploadFile } from "../hooks/mutations/useAccountMutations.js";
 import { formatFileSize, getFileIcon } from "../utils/fileManagement.js";
 import { useResolvedFileUrls, fileThumbSource } from "../hooks/useResolvedFileUrls.js";
@@ -26,6 +29,7 @@ import { getErrorMessage } from "./fileManagement/shared.js";
 import { useFileUploadState } from "./fileManagement/hooks/useFileUploadState.js";
 import PhotoPickerView from "./fileManagement/PhotoPickerSection.js";
 import FileListSection from "./fileManagement/FileListSection.js";
+import FileLibraryError from "./fileManagement/FileLibraryError.js";
 import UploadBar from "./fileManagement/UploadBar.js";
 import { AnimatedButton } from "../components/fileManagement/AnimatedButton.js";
 
@@ -57,11 +61,6 @@ const screenStyles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: 1
   },
-  photoImage: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 8
-  },
   justifiedPhotoImage: {
     width: '100%',
     height: '100%',
@@ -70,7 +69,6 @@ const screenStyles = StyleSheet.create({
 });
 const FileManagementScreen = ({
   onClose,
-  theme,
   goBack,
   navigate,
   dismiss,
@@ -99,50 +97,49 @@ const FileManagementScreen = ({
   const {
     t
   } = useI18n();
+  const queryClient = useQueryClient();
   const uploadFileMutation = useUploadFile();
-  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.
   const safeContainerWidth = 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
-  });
+  // In-flight delete target (local UI state — was in the file store).
+  const [deletingId, setDeletingId] = useState(null);
   // In selectMode we never open the detailed viewer
   const [openedFile, setOpenedFile] = useState(null);
   const [fileContent, setFileContent] = useState(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.
@@ -194,24 +191,59 @@ const FileManagementScreen = ({
     });
     return sorted;
   }, [files, searchQuery, viewMode, sortBy, sortOrder]);
-  const [photoDimensions, setPhotoDimensions] = useState({});
-  const photoDimensionsRef = useRef(photoDimensions);
-  photoDimensionsRef.current = photoDimensions;
-  const [loadingDimensions, setLoadingDimensions] = useState(false);
-  // Selection state
-  const [selectedIds, setSelectedIds] = useState(new Set(initialSelectedIds));
-  const [lastSelectedFileId, setLastSelectedFileId] = 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] = useState(() => new Set(initialSelectedIds));
   const scrollViewRef = useRef(null);
   const photoScrollViewRef = useRef(null);
-  const containerRef = useRef(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 => {
+    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 => {
-    // 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) {
@@ -230,9 +262,6 @@ const FileManagementScreen = ({
       }
     }
 
-    // Track the selected file for scrolling
-    setLastSelectedFileId(file.id);
-
     // Link file to entity if linkContext is provided
     if (linkContext) {
       try {
@@ -274,13 +303,14 @@ const FileManagementScreen = ({
       }
       return next;
     });
-  }, [selectMode, multiSelect, onSelect, onClose, goBack, dismiss, 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 = {};
-    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
@@ -334,81 +364,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 = useFileStore(s => s.setDeleting);
-  const loadFiles = 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
-        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) {
-      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,
@@ -425,105 +390,8 @@ const FileManagementScreen = ({
     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 => {
-    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 => {
-            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.
-  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, 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 = useCallback(async (fileId, filename) => {
     const confirmed = await surfaces.confirm({
       title: t('fileManagement.deleteFile') || 'Delete File',
@@ -536,30 +404,28 @@ const FileManagementScreen = ({
     });
     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) {
       // 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);
+      setDeletingId(null);
     }
-  }, [storeSetDeleting, oxyServices, loadFiles, t]);
+  }, [oxyServices, queryClient, targetUserId, invalidateFiles, t]);
   const confirmBulkDelete = useCallback(async () => {
     if (selectedIds.size === 0) return;
     const confirmed = await surfaces.confirm({
@@ -576,7 +442,7 @@ const FileManagementScreen = ({
       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
@@ -603,11 +469,11 @@ const FileManagementScreen = ({
         }));
       }
       setSelectedIds(new Set());
-      setTimeout(() => loadFiles('silent'), 800);
+      invalidateFiles();
     } catch (error) {
       toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
     }
-  }, [selectedIds, oxyServices, loadFiles, t]);
+  }, [selectedIds, oxyServices, queryClient, targetUserId, invalidateFiles, t]);
   const handleBulkVisibilityChange = useCallback(async visibility => {
     if (selectedIds.size === 0) return;
     try {
@@ -634,26 +500,23 @@ const FileManagementScreen = ({
           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
-            }
+        // 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) {
       toast.error(getErrorMessage(error) || t('fileManagement.toasts.visibilityError'));
     }
-  }, [selectedIds, oxyServices, files, loadFiles, t]);
+  }, [selectedIds, oxyServices, queryClient, targetUserId, invalidateFiles, t]);
   const handleVisibilityChange = useCallback(async () => {
     if (selectedIds.size === 0) return;
     const visibility = await presentActionSheet({
@@ -677,7 +540,7 @@ const FileManagementScreen = ({
   }, [selectedIds.size, handleBulkVisibilityChange, t]);
 
   // Unified download function - works on all platforms
-  const handleFileDownload = async (fileId, filename) => {
+  const handleFileDownload = useCallback(async (fileId, filename) => {
     try {
       // Resolve an authenticated, private-safe URL. The synchronous
       // `getFileDownloadUrl` yields the public CDN origin, which 404s for
@@ -720,8 +583,8 @@ const FileManagementScreen = ({
     } catch (error) {
       toast.error(getErrorMessage(error) || t('fileManagement.toasts.downloadFailed'));
     }
-  };
-  const handleFileOpen = async file => {
+  }, [oxyServices, t]);
+  const handleFileOpen = useCallback(async file => {
     if (selectMode) {
       toggleSelect(file);
       return;
@@ -761,21 +624,21 @@ const FileManagementScreen = ({
     } finally {
       setLoadingFileContent(false);
     }
-  };
-  const handleCloseFile = () => {
+  }, [selectMode, toggleSelect, oxyServices, t]);
+  const handleCloseFile = useCallback(() => {
     setOpenedFile(null);
     setFileContent(null);
     setShowFileDetailsInViewer(false);
     // Don't reset view mode when closing a file
-  };
-  const showFileDetailsModal = file => {
+  }, []);
+  const showFileDetailsModal = useCallback(file => {
     presentFileDetails({
       file,
       onDownload: handleFileDownload,
       onDelete: confirmFileDelete,
       isOwner: user?.id === targetUserId
     });
-  };
+  }, [handleFileDownload, confirmFileDelete, user?.id, targetUserId]);
   const renderJustifiedPhotoItem = useCallback((photo, width, height, isLast) => {
     const downloadUrl = thumbSourceFor(photo);
     return /*#__PURE__*/_jsx(TouchableOpacity, {
@@ -820,18 +683,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 = useRef(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 = useMemo(() => {
@@ -982,8 +834,8 @@ const FileManagementScreen = ({
               backgroundColor: colors.negativeSubtle
             },
             onPress: () => confirmFileDelete(file.id, file.filename),
-            disabled: deleting === file.id,
-            children: deleting === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            disabled: deletingId === file.id,
+            children: deletingId === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
               size: "small",
               color: colors.error
             }) : /*#__PURE__*/_jsx(Ionicons, {
@@ -995,85 +847,27 @@ const FileManagementScreen = ({
         }) : 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;
+  }, [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
-  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__*/_jsx(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
+  });
 
-      return () => clearTimeout(timeoutId);
-    }
-  }, [lastSelectedFileId]);
-  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 /*#__PURE__*/_jsxs(View, {
         className: "items-center py-[40px] px-[24px]",
         children: [/*#__PURE__*/_jsx(Ionicons, {
@@ -1099,10 +893,7 @@ const FileManagementScreen = ({
           },
           onPress: handleFileUpload,
           disabled: uploading || isPickingDocument,
-          children: uploading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: "#FFFFFF"
-          }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          children: uploading || isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
             size: "small",
             color: "#FFFFFF"
           }) : /*#__PURE__*/_jsxs(_Fragment, {
@@ -1118,13 +909,13 @@ const FileManagementScreen = ({
         })]
       });
     }
-    return /*#__PURE__*/_jsxs(ScrollView, {
+    return /*#__PURE__*/_jsx(ScrollView, {
       ref: photoScrollViewRef,
       className: "flex-1",
       contentContainerClassName: "p-[10px]",
       refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
-        refreshing: refreshing,
-        onRefresh: () => loadFiles('refresh'),
+        refreshing: isRefreshingFiles,
+        onRefresh: () => filesQuery.refetch(),
         tintColor: colors.primary
       }),
       showsVerticalScrollIndicator: false,
@@ -1137,38 +928,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__*/_jsxs(View, {
-        className: "flex-row items-center justify-center py-[16px] gap-[8px]",
-        children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: colors.primary
-        }), /*#__PURE__*/_jsx(Text, {
-          className: "text-[14px] italic",
-          style: {
-            color: colors.textSecondary
-          },
-          children: t('fileManagement.loadingPhotoLayout')
-        })]
-      }), /*#__PURE__*/_jsx(JustifiedPhotoGrid, {
+      children: /*#__PURE__*/_jsx(JustifiedPhotoGrid, {
         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__*/_jsxs(View, {
+  };
+  const renderEmptyState = () => hasLoadError ? renderLoadError() : /*#__PURE__*/_jsxs(View, {
     className: "items-center py-[40px] px-[24px]",
     children: [/*#__PURE__*/_jsx(Ionicons, {
       name: "folder-open-outline",
@@ -1193,10 +967,7 @@ const FileManagementScreen = ({
       },
       onPress: handleFileUpload,
       disabled: uploading || isPickingDocument,
-      children: uploading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "small",
-        color: "#FFFFFF"
-      }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
+      children: uploading || isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
         size: "small",
         color: "#FFFFFF"
       }) : /*#__PURE__*/_jsxs(_Fragment, {
@@ -1300,7 +1071,7 @@ const FileManagementScreen = ({
     right: fmHeaderRight,
     largeTitle: false
   });
-  if (loading && !isImageOnlyPicker) {
+  if (isLoadingFiles && !isImageOnlyPicker) {
     const GRID_PADDING = 10;
     const TILE_GAP = 4;
     const GRID_COLUMNS = 3;
@@ -1399,13 +1170,15 @@ const FileManagementScreen = ({
       multiSelect: multiSelect,
       maxSelection: maxSelection,
       allowUpload: allowUpload,
-      refreshing: refreshing,
+      refreshing: isRefreshingFiles,
       uploading: uploading,
       isPickingDocument: isPickingDocument,
       uploadProgress: uploadProgress,
-      hasMore: paging.hasMore,
-      loadingMore: paging.loadingMore,
-      loading: loading,
+      hasMore: hasMoreFiles,
+      loadingMore: isFetchingMore,
+      loading: isLoadingFiles,
+      loadError: hasLoadError,
+      onRetry: () => filesQuery.refetch(),
       reduceMotion: reduceMotion,
       getThumbUrl: thumbSourceFor,
       primaryColor: colors.primary,
@@ -1415,8 +1188,8 @@ const FileManagementScreen = ({
       ,
       onPreviewPhoto: file => showFileDetailsModal(file),
       onUpload: handleFileUpload,
-      onRefresh: () => loadFiles('refresh'),
-      onLoadMore: () => loadFiles('more'),
+      onRefresh: () => filesQuery.refetch(),
+      onLoadMore: () => filesQuery.fetchNextPage(),
       onCancel: () => {
         if (onSelect || onConfirmSelection) {
           // Legacy callback caller: preserve close/back behaviour.
@@ -1491,32 +1264,30 @@ const FileManagementScreen = ({
             textColor: colors.text,
             style: screenStyles.viewModeButton,
             accessibilityLabel: t('fileManagement.a11y.viewPhotos') || 'Show photos only'
-          }), !isImageOnlyPicker && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsxs(TouchableOpacity, {
@@ -1549,15 +1320,15 @@ const FileManagementScreen = ({
           size: 14,
           color: colors.textSecondary
         })]
-      }), user?.id === targetUserId && (!selectMode || selectMode && allowUploadInSelectMode) && /*#__PURE__*/_jsx(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__*/_jsx(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
         },
@@ -1573,17 +1344,6 @@ const FileManagementScreen = ({
         }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
           size: "small",
           color: "#FFFFFF"
-        }) : isImageOnlyPicker ? /*#__PURE__*/_jsxs(View, {
-          className: "flex-row items-center gap-[6px]",
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: "cloud-upload",
-            size: 18,
-            color: "#FFFFFF"
-          }), /*#__PURE__*/_jsx(Text, {
-            className: "text-white text-[14px] font-semibold",
-            numberOfLines: 1,
-            children: t('fileManagement.upload') || 'Upload'
-          })]
         }) : /*#__PURE__*/_jsx(Ionicons, {
           name: "add",
           size: 22,
@@ -1679,12 +1439,15 @@ 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 && uploading && /*#__PURE__*/_jsx(UploadBar, {