@oxyhq/services 23.0.2 → 23.0.3

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

@@ -0,0 +1,1525 @@
+"use strict";
+
+import { 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 from '@expo/vector-icons/Ionicons';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { Pressable } from 'react-native';
+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";
+import { FileViewer } from "../components/fileManagement/FileViewer.js";
+import { presentFileDetails } from "../components/fileManagement/FileDetailsModal.js";
+import { UploadPreview } from "../components/fileManagement/UploadPreview.js";
+import { presentActionSheet } from "../components/surfaces/ActionSheetSurface.js";
+import { getErrorMessage } from "./fileManagement/shared.js";
+import { useFileUploadState } from "./fileManagement/hooks/useFileUploadState.js";
+import PhotoPickerView from "./fileManagement/PhotoPickerSection.js";
+import FileListSection from "./fileManagement/FileListSection.js";
+import FileLibraryError from "./fileManagement/FileLibraryError.js";
+import UploadBar from "./fileManagement/UploadBar.js";
+import { AnimatedButton } from "../components/fileManagement/AnimatedButton.js";
+
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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,
+    paddingVertical: 6,
+    borderRadius: 999,
+    minWidth: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 1
+  },
+  justifiedPhotoImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 6
+  }
+});
+const FileManagementScreen = ({
+  onClose,
+  goBack,
+  navigate,
+  dismiss,
+  userId,
+  containerWidth,
+  selectMode = false,
+  multiSelect = false,
+  onSelect,
+  onPicked,
+  onConfirmSelection,
+  initialSelectedIds = [],
+  maxSelection,
+  disabledMimeTypes = [],
+  afterSelect = 'close',
+  allowUploadInSelectMode = true,
+  defaultVisibility = 'private',
+  linkContext
+}) => {
+  // Use useOxy() hook for OxyContext values. Files are owned by the ACTIVE
+  // account (the org/project/bot when switched, else the personal user): the
+  // default file owner and every "is this mine?" ownership check resolve
+  // against `user`, so switching shows/manages that account's files.
+  const {
+    user,
+    oxyServices
+  } = useOxy();
+  const {
+    t
+  } = useI18n();
+  const queryClient = useQueryClient();
+  const uploadFileMutation = useUploadFile();
+
+  // 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;
+  // 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);
+  // 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.
+  const isImageOnlyPicker = useMemo(() => {
+    if (!selectMode) return false;
+    if (disabledMimeTypes.length === 0) return false;
+    const blocksVideos = disabledMimeTypes.some(mt => mt === 'video/' || mt.startsWith('video/'));
+    const blocksAudio = disabledMimeTypes.some(mt => mt === 'audio/' || mt.startsWith('audio/'));
+    const blocksDocs = disabledMimeTypes.some(mt => mt === 'application/pdf' || mt === 'application/' || mt.startsWith('application/'));
+    return blocksVideos && blocksAudio && blocksDocs;
+  }, [disabledMimeTypes, selectMode]);
+  const [viewMode, setViewMode] = useState(isImageOnlyPicker ? 'photos' : 'all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState('date');
+  const [sortOrder, setSortOrder] = useState('desc');
+  // Derived filtered and sorted files (avoid setState loops)
+  const filteredFiles = useMemo(() => {
+    let filteredByMode = files;
+    if (viewMode === 'photos') {
+      filteredByMode = files.filter(file => file.contentType.startsWith('image/'));
+    } else if (viewMode === 'videos') {
+      filteredByMode = files.filter(file => file.contentType.startsWith('video/'));
+    } else if (viewMode === 'documents') {
+      filteredByMode = files.filter(file => file.contentType.includes('pdf') || file.contentType.includes('document') || file.contentType.includes('text') || file.contentType.includes('msword') || file.contentType.includes('excel') || file.contentType.includes('spreadsheet') || file.contentType.includes('presentation') || file.contentType.includes('powerpoint'));
+    } else if (viewMode === 'audio') {
+      filteredByMode = files.filter(file => file.contentType.startsWith('audio/'));
+    }
+    let filtered = filteredByMode;
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filteredByMode.filter(file => file.filename.toLowerCase().includes(query) || file.contentType.toLowerCase().includes(query) || file.metadata?.description?.toLowerCase().includes(query));
+    }
+
+    // Sort files
+    const sorted = [...filtered].sort((a, b) => {
+      let comparison = 0;
+      if (sortBy === 'date') {
+        const dateA = new Date(a.uploadDate || 0).getTime();
+        const dateB = new Date(b.uploadDate || 0).getTime();
+        comparison = dateA - dateB;
+      } else if (sortBy === 'size') {
+        comparison = (a.length || 0) - (b.length || 0);
+      } else if (sortBy === 'name') {
+        comparison = (a.filename || '').localeCompare(b.filename || '');
+      } else if (sortBy === 'type') {
+        comparison = (a.contentType || '').localeCompare(b.contentType || '');
+      }
+      return sortOrder === 'asc' ? comparison : -comparison;
+    });
+    return sorted;
+  }, [files, searchQuery, viewMode, sortBy, sortOrder]);
+  // 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);
+
+  // 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
+          });
+        });
+      });
+    }
+  }, [viewMode, filteredFiles]);
+  const toggleSelect = useCallback(async file => {
+    // 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) {
+        toast.error(t('fileManagement.toasts.fileTypeBlocked'));
+        return;
+      }
+    }
+
+    // Update file visibility if it differs from defaultVisibility
+    const fileVisibility = file.metadata?.visibility || 'private';
+    if (fileVisibility !== defaultVisibility) {
+      try {
+        await oxyServices.assetUpdateVisibility(file.id, defaultVisibility);
+      } catch (error) {
+        // Continue anyway - selection shouldn't fail if visibility update fails
+      }
+    }
+
+    // Link file to entity if linkContext is provided
+    if (linkContext) {
+      try {
+        await oxyServices.assetLink(file.id, linkContext.app, linkContext.entityType, linkContext.entityId, defaultVisibility, linkContext.webhookUrl);
+      } catch (error) {
+        // Continue anyway - selection shouldn't fail if linking fails
+      }
+    }
+    if (!multiSelect) {
+      if (onPicked) {
+        // Forward-navigation picker (e.g. the avatar flow): hand the file
+        // to the caller, which pushes the NEXT frame (the cropper) on top
+        // of this picker. The picker frame stays below so Back returns here
+        // to re-pick — no dismiss, no session close.
+        onPicked(file);
+      } else 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: resolve the surface's present() promise
+        // with the picked file.
+        dismiss?.(file);
+      }
+      return;
+    }
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      const already = next.has(file.id);
+      if (!already) {
+        if (maxSelection && next.size >= maxSelection) {
+          toast.error(t('fileManagement.toasts.maxSelection', {
+            max: maxSelection
+          }));
+          return prev;
+        }
+        next.add(file.id);
+      } else {
+        next.delete(file.id);
+      }
+      return next;
+    });
+    scrollToSelectedFile(file.id);
+  }, [multiSelect, onPicked, onSelect, onClose, goBack, dismiss, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext, t, scrollToSelectedFile]);
+  const confirmMultiSelection = useCallback(async () => {
+    if (!selectMode || !multiSelect) return;
+    const map = {};
+    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
+    const updatePromises = chosen.map(async file => {
+      // Update visibility if needed
+      const fileVisibility = file.metadata?.visibility || 'private';
+      if (fileVisibility !== defaultVisibility) {
+        try {
+          await oxyServices.assetUpdateVisibility(file.id, defaultVisibility);
+        } catch (error) {
+          // Visibility update failed, continue with selection
+        }
+      }
+
+      // Link file to entity if linkContext provided
+      if (linkContext) {
+        try {
+          await oxyServices.assetLink(file.id, linkContext.app, linkContext.entityType, linkContext.entityId, defaultVisibility, linkContext.webhookUrl);
+        } catch (error) {
+          // File linking failed, continue with selection
+        }
+      }
+    });
+
+    // Wait for all updates (but don't block on failures)
+    await Promise.allSettled(updatePromises);
+    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
+  // default to private, so the synchronous public-CDN URL would 404 for
+  // every private thumbnail.
+  const resolvedThumbUrls = useResolvedFileUrls(oxyServices, filteredFiles, user?.id);
+
+  // Image source for a grid tile: the resolved private-safe URL for a
+  // persisted file, or the locally-picked preview for an in-flight optimistic
+  // entry. Never builds an asset URL from a `temp-…`/uploading id.
+  const thumbSourceFor = useCallback(file => fileThumbSource(file, resolvedThumbUrls), [resolvedThumbUrls]);
+  const bloomTheme = useTheme();
+  const {
+    colors
+  } = bloomTheme;
+  // FileManagementScreen uses a slightly elevated page background.
+  const backgroundColor = colors.backgroundSecondary;
+  const borderColor = colors.border;
+
+  // 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,
+    removePendingFile
+  } = useFileUploadState({
+    targetUserId,
+    uploadFileMutation,
+    defaultVisibility,
+    selectMode,
+    multiSelect,
+    afterSelect,
+    onSelect,
+    onPicked,
+    goBack,
+    onClose,
+    imagesOnly: isImageOnlyPicker,
+    selectedIds,
+    setSelectedIds,
+    t
+  });
+  const confirmFileDelete = useCallback(async (fileId, filename) => {
+    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 {
+      setDeletingId(fileId);
+      await oxyServices.deleteFile(fileId);
+      toast.success(t('fileManagement.toasts.deleteSuccess'));
+
+      // 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'));
+        // 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 {
+      setDeletingId(null);
+    }
+  }, [oxyServices, queryClient, targetUserId, invalidateFiles, t]);
+  const confirmBulkDelete = 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);
+          removeFileFromCache(queryClient, targetUserId, fileId);
+          return {
+            success: true,
+            fileId
+          };
+        } catch (error) {
+          return {
+            success: false,
+            fileId,
+            error
+          };
+        }
+      });
+      const results = await Promise.allSettled(deletePromises);
+      const successful = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
+      const failed = results.length - successful;
+      if (successful > 0) {
+        toast.success(t('fileManagement.toasts.bulkDeleteSuccess', {
+          count: successful
+        }));
+      }
+      if (failed > 0) {
+        toast.error(t('fileManagement.toasts.bulkDeleteFailed', {
+          count: failed
+        }));
+      }
+      setSelectedIds(new Set());
+      invalidateFiles();
+    } catch (error) {
+      toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
+    }
+  }, [selectedIds, oxyServices, queryClient, targetUserId, invalidateFiles, t]);
+  const handleBulkVisibilityChange = useCallback(async visibility => {
+    if (selectedIds.size === 0) return;
+    try {
+      const updatePromises = Array.from(selectedIds).map(async fileId => {
+        try {
+          await oxyServices.assetUpdateVisibility(fileId, visibility);
+          return {
+            success: true,
+            fileId
+          };
+        } catch (error) {
+          return {
+            success: false,
+            fileId,
+            error
+          };
+        }
+      });
+      const results = await Promise.allSettled(updatePromises);
+      const successful = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
+      const failed = results.length - successful;
+      if (successful > 0) {
+        toast.success(t('fileManagement.toasts.visibilitySuccess', {
+          count: successful,
+          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
+        }));
+      }
+      invalidateFiles();
+    } catch (error) {
+      toast.error(getErrorMessage(error) || t('fileManagement.toasts.visibilityError'));
+    }
+  }, [selectedIds, oxyServices, queryClient, targetUserId, invalidateFiles, t]);
+  const handleVisibilityChange = useCallback(async () => {
+    if (selectedIds.size === 0) return;
+    const visibility = await presentActionSheet({
+      title: t('fileManagement.changeVisibility') || 'Change Visibility',
+      message: t('fileManagement.changeVisibilityConfirm', {
+        count: selectedIds.size
+      }),
+      options: [{
+        label: t('fileManagement.private') || 'Private',
+        value: 'private'
+      }, {
+        label: t('fileManagement.public') || 'Public',
+        value: 'public'
+      }, {
+        label: t('fileManagement.unlisted') || 'Unlisted',
+        value: 'unlisted'
+      }],
+      cancelLabel: t('common.cancel') || 'Cancel'
+    });
+    if (visibility) await handleBulkVisibilityChange(visibility);
+  }, [selectedIds.size, handleBulkVisibilityChange, t]);
+
+  // Unified download function - works on all platforms
+  const handleFileDownload = useCallback(async (fileId, filename) => {
+    try {
+      // Resolve an authenticated, private-safe URL. The synchronous
+      // `getFileDownloadUrl` yields the public CDN origin, which 404s for
+      // private assets (the default visibility).
+      const downloadUrl = await oxyServices.getFileDownloadUrlAsync(fileId);
+
+      // For web platforms, use link download
+      if (typeof window !== 'undefined' && window.document) {
+        try {
+          // Try simple link download first
+          const link = document.createElement('a');
+          link.href = downloadUrl;
+          link.download = filename;
+          link.target = '_blank';
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          toast.success(t('fileManagement.toasts.downloadStarted'));
+        } catch (linkError) {
+          // Fallback to authenticated download
+          const blob = await oxyServices.getFileContentAsBlob(fileId);
+          const url = URL.createObjectURL(blob);
+          const link = document.createElement('a');
+          link.href = url;
+          link.download = filename;
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+
+          // Clean up the blob URL
+          URL.revokeObjectURL(url);
+          toast.success(t('fileManagement.toasts.downloadSuccess'));
+        }
+      } else {
+        // For mobile, open the URL (user can save from browser)
+        // Note: This is a simplified approach - for full mobile support,
+        // consider using expo-file-system or react-native-fs
+        toast.info(t('fileManagement.toasts.downloadMobile'));
+      }
+    } catch (error) {
+      toast.error(getErrorMessage(error) || t('fileManagement.toasts.downloadFailed'));
+    }
+  }, [oxyServices, t]);
+  const handleFileOpen = useCallback(async file => {
+    if (selectMode) {
+      toggleSelect(file);
+      return;
+    }
+    try {
+      setLoadingFileContent(true);
+      setOpenedFile(file);
+
+      // For text files, images, and other viewable content, try to load the content
+      if (file.contentType.startsWith('text/') || file.contentType.includes('json') || file.contentType.includes('xml') || file.contentType.includes('javascript') || file.contentType.includes('typescript') || file.contentType.startsWith('image/') || file.contentType.includes('pdf') || file.contentType.startsWith('video/') || file.contentType.startsWith('audio/')) {
+        try {
+          if (file.contentType.startsWith('image/') || file.contentType.includes('pdf') || file.contentType.startsWith('video/') || file.contentType.startsWith('audio/')) {
+            // For images, PDFs, videos, and audio, we render the URL
+            // directly. Resolve the authenticated, private-safe URL —
+            // the synchronous public-CDN URL 404s for private assets.
+            const downloadUrl = await oxyServices.getFileDownloadUrlAsync(file.id);
+            setFileContent(downloadUrl);
+          } else {
+            // For text files, get the content using authenticated request
+            const content = await oxyServices.getFileContentAsText(file.id);
+            setFileContent(content);
+          }
+        } catch (error) {
+          if (getErrorMessage(error)?.includes('404') || getErrorMessage(error)?.includes('not found')) {
+            toast.error(t('fileManagement.toasts.fileNotFoundContent'));
+          } else {
+            toast.error(t('fileManagement.toasts.loadContentFailed'));
+          }
+          setFileContent(null);
+        }
+      } else {
+        // For non-viewable files, don't load content
+        setFileContent(null);
+      }
+    } catch (error) {
+      toast.error(getErrorMessage(error) || t('fileManagement.toasts.openFailed'));
+    } finally {
+      setLoadingFileContent(false);
+    }
+  }, [selectMode, toggleSelect, oxyServices, t]);
+  const handleCloseFile = useCallback(() => {
+    setOpenedFile(null);
+    setFileContent(null);
+    setShowFileDetailsInViewer(false);
+    // Don't reset view mode when closing a 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, {
+      className: "rounded-[6px] overflow-hidden relative",
+      style: {
+        width,
+        height,
+        ...(selectMode && selectedIds.has(photo.id) ? {
+          borderWidth: 2,
+          borderColor: colors.primary
+        } : {}),
+        ...(selectMode && multiSelect && selectedIds.size > 0 && !selectedIds.has(photo.id) ? {
+          opacity: 0.4
+        } : {})
+      },
+      onPress: () => handleFileOpen(photo),
+      activeOpacity: 0.8,
+      children: /*#__PURE__*/_jsxs(View, {
+        className: "w-full h-full relative rounded-[6px] overflow-hidden",
+        children: [/*#__PURE__*/_jsx(ExpoImage, {
+          source: {
+            uri: downloadUrl
+          },
+          style: screenStyles.justifiedPhotoImage,
+          contentFit: "cover",
+          transition: 120,
+          cachePolicy: "memory-disk",
+          onError: () => {
+            // Photo failed to load, will show placeholder
+          },
+          accessibilityLabel: photo.filename
+        }), selectMode && /*#__PURE__*/_jsx(View, {
+          className: "absolute top-[4px] right-[4px] rounded-[12px] p-[2px]",
+          style: {
+            backgroundColor: 'rgba(0,0,0,0.4)'
+          },
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline',
+            size: 20,
+            color: selectedIds.has(photo.id) ? colors.primary : colors.text
+          })
+        })]
+      })
+    }, photo.id);
+  }, [thumbSourceFor, selectMode, selectedIds, multiSelect, colors.primary, colors.text, handleFileOpen]);
+
+  // SettingsListItem-based file items (for 'all' view)
+  const groupedFileItems = useMemo(() => {
+    // filteredFiles is already sorted, so just use it directly
+    const sortedFiles = filteredFiles;
+    return sortedFiles.map(file => {
+      const isImage = file.contentType.startsWith('image/');
+      const isPDF = file.contentType.includes('pdf');
+      const isVideo = file.contentType.startsWith('video/');
+      const hasPreview = isImage || isPDF || isVideo;
+      const isSelected = selectedIds.has(file.id);
+
+      // Create icon for preview thumbnails (36x36)
+      let fileIcon;
+      if (hasPreview) {
+        if (isImage) {
+          fileIcon = /*#__PURE__*/_jsx(View, {
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: 18,
+              overflow: 'hidden'
+            },
+            children: /*#__PURE__*/_jsx(ExpoImage, {
+              source: {
+                uri: thumbSourceFor(file)
+              },
+              style: {
+                width: 36,
+                height: 36
+              },
+              contentFit: "cover",
+              transition: 120,
+              cachePolicy: "memory-disk",
+              onError: () => {
+                // Image preview failed to load - will fallback to icon
+              },
+              accessibilityLabel: file.filename
+            })
+          });
+        } else if (isVideo) {
+          fileIcon = /*#__PURE__*/_jsxs(View, {
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: 18,
+              overflow: 'hidden',
+              backgroundColor: '#000000',
+              position: 'relative'
+            },
+            children: [/*#__PURE__*/_jsx(ExpoImage, {
+              source: {
+                uri: thumbSourceFor(file)
+              },
+              style: {
+                width: 36,
+                height: 36
+              },
+              contentFit: "cover",
+              transition: 120,
+              cachePolicy: "memory-disk",
+              onError: _ => {
+                // If thumbnail not available, we still show icon overlay
+              },
+              accessibilityLabel: `${file.filename} video thumbnail`
+            }), /*#__PURE__*/_jsx(View, {
+              style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'rgba(0,0,0,0.25)'
+              },
+              children: /*#__PURE__*/_jsx(Ionicons, {
+                name: "play",
+                size: 16,
+                color: "#FFFFFF"
+              })
+            })]
+          });
+        } else if (isPDF) {
+          fileIcon = /*#__PURE__*/_jsx(View, {
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: 18,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: '#FF6B6B20'
+            },
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "document",
+              size: 20,
+              color: colors.primary
+            })
+          });
+        }
+      }
+      return {
+        id: file.id,
+        icon: fileIcon ?? (!hasPreview ? /*#__PURE__*/_jsx(Ionicons, {
+          name: getFileIcon(file.contentType),
+          size: 20,
+          color: colors.primary
+        }) : undefined),
+        title: file.filename,
+        description: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
+        onPress: () => {
+          // Support selection in regular mode with long press or if already selecting
+          if (!selectMode && selectedIds.size > 0) {
+            // If already in selection mode (some files selected), toggle selection
+            toggleSelect(file);
+          } else {
+            handleFileOpen(file);
+          }
+        },
+        // Hide action buttons when selecting (in selectMode or bulk operations mode)
+        rightElement: !selectMode && selectedIds.size === 0 ? /*#__PURE__*/_jsxs(View, {
+          className: "flex-row items-center gap-[6px] ml-[12px]",
+          children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/_jsx(TouchableOpacity, {
+            className: "w-[34px] h-[34px] rounded-[8px] items-center justify-center",
+            style: {
+              backgroundColor: colors.backgroundSecondary
+            },
+            onPress: () => handleFileOpen(file),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "eye",
+              size: 18,
+              color: colors.primary
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            className: "w-[34px] h-[34px] rounded-[8px] items-center justify-center",
+            style: {
+              backgroundColor: colors.backgroundSecondary
+            },
+            onPress: () => handleFileDownload(file.id, file.filename),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "download",
+              size: 18,
+              color: colors.primary
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            className: "w-[34px] h-[34px] rounded-[8px] items-center justify-center",
+            style: {
+              backgroundColor: colors.negativeSubtle
+            },
+            onPress: () => confirmFileDelete(file.id, file.filename),
+            disabled: deletingId === file.id,
+            children: deletingId === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: colors.error
+            }) : /*#__PURE__*/_jsx(Ionicons, {
+              name: "trash",
+              size: 18,
+              color: colors.error
+            })
+          })]
+        }) : undefined
+      };
+    });
+  }, [filteredFiles, colors, deletingId, toggleSelect, handleFileDownload, confirmFileDelete, handleFileOpen, thumbSourceFor, selectMode, selectedIds]);
+
+  // 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
+  });
+
+  // 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, {
+          name: "images-outline",
+          size: 64,
+          color: colors.textTertiary
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "text-[24px] font-bold mt-[16px] mb-[8px]",
+          style: {
+            color: colors.text
+          },
+          children: t('fileManagement.emptyPhotos.title')
+        }), /*#__PURE__*/_jsxs(Text, {
+          className: "text-[16px] text-center leading-[24px] mb-[32px]",
+          style: {
+            color: colors.textSecondary
+          },
+          children: [" ", user?.id === targetUserId ? t('fileManagement.emptyPhotos.ownDescription') : t('fileManagement.emptyPhotos.otherDescription'), " "]
+        }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
+          className: "flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]",
+          style: {
+            backgroundColor: colors.primary
+          },
+          onPress: handleFileUpload,
+          disabled: uploading || isPickingDocument,
+          children: uploading || isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: "#FFFFFF"
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Ionicons, {
+              name: "cloud-upload",
+              size: 20,
+              color: "#FFFFFF"
+            }), /*#__PURE__*/_jsx(Text, {
+              className: "text-white text-[16px] font-semibold",
+              children: t('fileManagement.uploadPhotos')
+            })]
+          })
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(ScrollView, {
+      ref: photoScrollViewRef,
+      className: "flex-1",
+      contentContainerClassName: "p-[10px]",
+      refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
+        refreshing: isRefreshingFiles,
+        onRefresh: () => filesQuery.refetch(),
+        tintColor: colors.primary
+      }),
+      showsVerticalScrollIndicator: false,
+      onScroll: ({
+        nativeEvent
+      }) => {
+        const {
+          layoutMeasurement,
+          contentOffset,
+          contentSize
+        } = nativeEvent;
+        const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
+        if (distanceFromBottom < 200 && !isFetchingMore && hasMoreFiles) {
+          filesQuery.fetchNextPage();
+        }
+      },
+      scrollEventThrottle: 250,
+      children: /*#__PURE__*/_jsx(JustifiedPhotoGrid, {
+        photos: photos,
+        getThumbUrl: thumbSourceFor,
+        renderJustifiedPhotoItem: renderJustifiedPhotoItem,
+        textColor: colors.text,
+        containerWidth: typeof containerWidth === 'number' && containerWidth > 0 ? containerWidth : undefined
+      })
+    });
+  };
+  const renderEmptyState = () => hasLoadError ? renderLoadError() : /*#__PURE__*/_jsxs(View, {
+    className: "items-center py-[40px] px-[24px]",
+    children: [/*#__PURE__*/_jsx(Ionicons, {
+      name: "folder-open-outline",
+      size: 64,
+      color: colors.textTertiary
+    }), /*#__PURE__*/_jsx(Text, {
+      className: "text-[24px] font-bold mt-[16px] mb-[8px]",
+      style: {
+        color: colors.text
+      },
+      children: t('fileManagement.emptyFiles.title')
+    }), /*#__PURE__*/_jsx(Text, {
+      className: "text-[16px] text-center leading-[24px] mb-[32px]",
+      style: {
+        color: colors.textSecondary
+      },
+      children: user?.id === targetUserId ? t('fileManagement.emptyFiles.ownDescription') : t('fileManagement.emptyFiles.otherDescription')
+    }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
+      className: "flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]",
+      style: {
+        backgroundColor: colors.primary
+      },
+      onPress: handleFileUpload,
+      disabled: uploading || isPickingDocument,
+      children: uploading || isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: "#FFFFFF"
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: "cloud-upload",
+          size: 20,
+          color: "#FFFFFF"
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "text-white text-[16px] font-semibold",
+          children: t('fileManagement.uploadFiles')
+        })]
+      })
+    })]
+  });
+
+  // Loading state — Bloom's shared `Skeleton` primitives own the shimmer, so
+  // this is pure layout: the top chrome (header / controls / search) plus a
+  // photo grid of shimmering tiles sized with the same 3-per-row geometry the
+  // real photo grid uses. No hand-rolled `Animated` shimmer.
+  //
+  // The image-only picker owns its OWN loading skeleton (rendered by
+  // `PhotoPickerView` when its photo list is still loading), so it inherits the
+  // 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.
+  // 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(() => {
+    const actions = selectMode && multiSelect ? [{
+      key: 'clear',
+      label: t('fileManagement.clear'),
+      onPress: () => setSelectedIds(new Set()),
+      disabled: selectedIds.size === 0
+    }, {
+      key: 'confirm',
+      label: t('fileManagement.confirm'),
+      onPress: confirmMultiSelection,
+      disabled: selectedIds.size === 0
+    }] : !selectMode && selectedIds.size > 0 ? [{
+      key: 'clear',
+      label: t('fileManagement.clear'),
+      onPress: () => setSelectedIds(new Set()),
+      disabled: false
+    }, {
+      key: 'delete',
+      label: t('fileManagement.delete', {
+        count: selectedIds.size
+      }),
+      onPress: confirmBulkDelete,
+      disabled: false
+    }, {
+      key: 'visibility',
+      label: t('fileManagement.visibility'),
+      onPress: handleVisibilityChange,
+      disabled: false
+    }] : [];
+    if (actions.length === 0) return undefined;
+    return /*#__PURE__*/_jsx(View, {
+      style: fmHeaderStyles.actionsRow,
+      children: actions.map(a => /*#__PURE__*/_jsx(SurfaceHeaderAction, {
+        label: a.label,
+        onPress: a.onPress,
+        disabled: a.disabled
+      }, a.key))
+    });
+  }, [selectMode, multiSelect, selectedIds, t, confirmMultiSelection, confirmBulkDelete, handleVisibilityChange]);
+  const fmHeaderBack = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
+    onPress: handleCancelUpload,
+    accessibilityRole: "button",
+    accessibilityLabel: t('common.back') || 'Back',
+    hitSlop: 8,
+    style: fmHeaderStyles.backButton,
+    children: /*#__PURE__*/_jsx(Ionicons, {
+      name: "chevron-back",
+      size: 20,
+      color: colors.text
+    })
+  }), [handleCancelUpload, colors.text, t]);
+
+  // --- Image-only picker: shared-header chrome -----------------------------
+  // The flagship photo picker now rides the SAME Dialog nav header as every
+  // screen (Cancel / "Choose Photo" / Upload) instead of painting its own bar.
+  // Ownership + upload permission gate the Upload action, mirroring the picker's
+  // empty-state upload button.
+  const isOwner = user?.id === targetUserId;
+  const allowUpload = isOwner && allowUploadInSelectMode;
+
+  // Cancel = the nav bar's back affordance. A forward-nav picker (`onPicked`,
+  // e.g. the avatar flow) pops its own frame; legacy callback callers keep their
+  // close/back behaviour; a promise-based picker dismisses its surface.
+  const pickerCancel = useCallback(() => {
+    if (onPicked) {
+      // Forward-nav picker: Cancel/back pops THIS frame, returning to the
+      // frame that opened the picker — never closes the whole session.
+      goBack?.();
+    } else if (onSelect || onConfirmSelection) {
+      if (onClose) onClose();else goBack?.();
+    } else {
+      dismiss?.();
+    }
+  }, [onPicked, onSelect, onConfirmSelection, onClose, goBack, dismiss]);
+
+  // The picker's ONE trailing CTA, declared through the Dialog header's
+  // `primaryAction` (a proper Bloom Button with loading/disabled) — the
+  // multi-select confirm ("Done (N)") or, single-select, the Upload action whose
+  // loading state reflects an in-flight device upload. Memoized so the header
+  // does not thrash.
+  const pickerPrimaryAction = useMemo(() => {
+    if (multiSelect) {
+      return {
+        label: t('fileManagement.doneWithCount', {
+          count: selectedIds.size
+        }),
+        onPress: confirmMultiSelection,
+        disabled: selectedIds.size === 0
+      };
+    }
+    if (isOwner && allowUpload) {
+      return {
+        label: t('fileManagement.upload'),
+        onPress: handleFileUpload,
+        loading: uploading || isPickingDocument
+      };
+    }
+    return undefined;
+  }, [multiSelect, selectedIds.size, confirmMultiSelection, isOwner, allowUpload, t, handleFileUpload, uploading, isPickingDocument]);
+  useSurfaceHeader(showUploadPreview ? {
+    title: t('fileManagement.reviewFiles'),
+    subtitle: t('fileManagement.readyToUpload', {
+      count: pendingFiles.length
+    }),
+    left: fmHeaderBack,
+    largeTitle: false
+  } : isImageOnlyPicker ? {
+    // ONE shared header — Cancel (back) / "Choose Photo" / Upload — in
+    // `onImage` tone so the chrome stays legible over the black grid.
+    title: t('fileManagement.choosePhoto'),
+    largeTitle: false,
+    onBack: pickerCancel,
+    primaryAction: pickerPrimaryAction,
+    tone: 'onImage'
+  } : {
+    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;
+    const GRID_ROWS = 6;
+    const tileSize = Math.floor((safeContainerWidth - GRID_PADDING * 2 - TILE_GAP * (GRID_COLUMNS - 1)) / GRID_COLUMNS);
+    return /*#__PURE__*/_jsxs(View, {
+      className: "flex-1",
+      style: {
+        backgroundColor
+      },
+      children: [/*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-center justify-between px-[16px] py-[12px]",
+        style: {
+          borderBottomColor: colors.border,
+          borderBottomWidth: StyleSheet.hairlineWidth
+        },
+        children: [/*#__PURE__*/_jsx(Skeleton.Box, {
+          width: 44,
+          height: 44,
+          borderRadius: 12
+        }), /*#__PURE__*/_jsxs(Skeleton.Col, {
+          style: {
+            alignItems: 'center',
+            marginHorizontal: 16,
+            gap: 6
+          },
+          children: [/*#__PURE__*/_jsx(Skeleton.Box, {
+            width: 140,
+            height: 20
+          }), /*#__PURE__*/_jsx(Skeleton.Box, {
+            width: 100,
+            height: 14
+          })]
+        }), /*#__PURE__*/_jsx(Skeleton.Box, {
+          width: 44,
+          height: 44,
+          borderRadius: 12
+        })]
+      }), /*#__PURE__*/_jsxs(Skeleton.Row, {
+        style: {
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingHorizontal: 12,
+          paddingVertical: 12
+        },
+        children: [/*#__PURE__*/_jsx(Skeleton.Box, {
+          width: 100,
+          height: 36,
+          borderRadius: 18
+        }), /*#__PURE__*/_jsx(Skeleton.Box, {
+          width: 44,
+          height: 44,
+          borderRadius: 22
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        className: "mx-[12px] mb-[12px]",
+        children: /*#__PURE__*/_jsx(Skeleton.Box, {
+          width: "100%",
+          height: 44,
+          borderRadius: 22
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          padding: GRID_PADDING,
+          gap: TILE_GAP
+        },
+        children: Array.from({
+          length: GRID_ROWS
+        }, (_, row) =>
+        /*#__PURE__*/
+        // biome-ignore lint/suspicious/noArrayIndexKey: fixed-size skeleton grid, order never changes
+        _jsx(Skeleton.Row, {
+          style: {
+            gap: TILE_GAP
+          },
+          children: Array.from({
+            length: GRID_COLUMNS
+          }, (_, col) =>
+          /*#__PURE__*/
+          // biome-ignore lint/suspicious/noArrayIndexKey: fixed-size skeleton grid, order never changes
+          _jsx(Skeleton.Box, {
+            width: tileSize,
+            height: tileSize,
+            borderRadius: 6
+          }, `skeleton-${row}-${col}`))
+        }, `skeleton-row-${row}`))
+      })]
+    });
+  }
+
+  // Dedicated flagship-style photo picker view used in the avatar-picker
+  // context (selectMode + image-only filter). The picker is intentionally
+  // minimal: black backdrop, edge-to-edge grid, translucent header. The
+  // standalone file manager (non-picker browse) keeps the existing UI.
+  if (isImageOnlyPicker && !showUploadPreview) {
+    const photosOnly = filteredFiles.filter(file => file.contentType.startsWith('image/'));
+
+    // Chrome (Cancel / "Choose Photo" / Upload) lives on the shared Dialog nav
+    // header (see the `useSurfaceHeader` call above); the picker owns only the
+    // full-bleed photo grid as content.
+    return /*#__PURE__*/_jsx(PhotoPickerView, {
+      photos: photosOnly,
+      selectedIds: selectedIds,
+      multiSelect: multiSelect,
+      maxSelection: maxSelection,
+      allowUpload: allowUpload,
+      refreshing: isRefreshingFiles,
+      uploading: uploading,
+      isPickingDocument: isPickingDocument,
+      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(),
+      t: t
+    });
+  }
+
+  // If a file is opened, show the file viewer
+  if (!selectMode && openedFile) {
+    return /*#__PURE__*/_jsx(FileViewer, {
+      file: openedFile,
+      fileContent: fileContent,
+      loadingFileContent: loadingFileContent,
+      showFileDetailsInViewer: showFileDetailsInViewer,
+      onToggleDetails: () => setShowFileDetailsInViewer(!showFileDetailsInViewer),
+      onClose: handleCloseFile,
+      onDownload: handleFileDownload,
+      onDelete: confirmFileDelete,
+      isOwner: user?.id === targetUserId
+    });
+  }
+
+  // If upload preview is showing, render it inline instead of the file list
+  if (showUploadPreview) {
+    return /*#__PURE__*/_jsx(View, {
+      className: "flex-1",
+      children: /*#__PURE__*/_jsx(UploadPreview, {
+        pendingFiles: pendingFiles,
+        onConfirm: handleConfirmUpload,
+        onCancel: handleCancelUpload,
+        onRemoveFile: removePendingFile,
+        inline: true
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    className: "flex-1",
+    children: [/*#__PURE__*/_jsxs(View, {
+      className: "flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]",
+      children: [/*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        className: "flex-1",
+        style: {
+          maxWidth: '80%'
+        },
+        children: /*#__PURE__*/_jsxs(View, {
+          className: "flex-row rounded-full p-[2px] overflow-hidden",
+          style: {
+            backgroundColor: colors.card
+          },
+          children: [/*#__PURE__*/_jsx(AnimatedButton, {
+            isSelected: viewMode === 'all',
+            onPress: () => setViewMode('all'),
+            icon: viewMode === 'all' ? 'folder' : 'folder-outline',
+            primaryColor: colors.primary,
+            textColor: colors.text,
+            style: screenStyles.viewModeButton,
+            accessibilityLabel: t('fileManagement.a11y.viewAll') || 'Show all files'
+          }), /*#__PURE__*/_jsx(AnimatedButton, {
+            isSelected: viewMode === 'photos',
+            onPress: () => setViewMode('photos'),
+            icon: viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline',
+            primaryColor: colors.primary,
+            textColor: colors.text,
+            style: screenStyles.viewModeButton,
+            accessibilityLabel: t('fileManagement.a11y.viewPhotos') || 'Show photos 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, {
+        className: "flex-row items-center justify-center px-[10px] py-[6px] rounded-full min-w-[36px] gap-[4px]",
+        style: {
+          backgroundColor: colors.card
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: t('fileManagement.a11y.sortBy', {
+          field: sortBy,
+          order: sortOrder === 'asc' ? 'ascending' : 'descending'
+        }) || `Sort by ${sortBy}, ${sortOrder === 'asc' ? 'ascending' : 'descending'}`,
+        onPress: () => {
+          // Cycle through sort options: date -> size -> name -> type -> date
+          const sortOrder = ['date', 'size', 'name', 'type'];
+          const currentIndex = sortOrder.indexOf(sortBy);
+          const nextIndex = (currentIndex + 1) % sortOrder.length;
+          setSortBy(sortOrder[nextIndex]);
+          // Toggle order when cycling back to date
+          if (nextIndex === 0) {
+            setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
+          }
+        },
+        children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: sortBy === 'date' ? 'calendar' : sortBy === 'size' ? 'sort-numeric-variant' : sortBy === 'name' ? 'sort-alphabetical-variant' : 'file-document-outline',
+          size: 16,
+          color: colors.text
+        }), /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: sortOrder === 'asc' ? 'arrow-up' : 'arrow-down',
+          size: 14,
+          color: colors.textSecondary
+        })]
+      }), 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: t('fileManagement.a11y.uploadFile') || 'Upload file',
+        accessibilityState: {
+          busy: uploading || isPickingDocument
+        },
+        children: uploading ? /*#__PURE__*/_jsxs(View, {
+          className: "items-center justify-center",
+          children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: "#FFFFFF"
+          }), uploadProgress && /*#__PURE__*/_jsxs(Text, {
+            className: "text-white text-[10px] font-semibold mt-[2px]",
+            children: [uploadProgress.current, "/", uploadProgress.total]
+          })]
+        }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: "#FFFFFF"
+        }) : /*#__PURE__*/_jsx(Ionicons, {
+          name: "add",
+          size: 22,
+          color: "#FFFFFF"
+        })
+      })]
+    }), files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && /*#__PURE__*/_jsxs(View, {
+      className: "flex-row items-center px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-full gap-[10px]",
+      style: {
+        backgroundColor: colors.card
+      },
+      children: [/*#__PURE__*/_jsx(Ionicons, {
+        name: "search",
+        size: 22,
+        color: colors.icon
+      }), /*#__PURE__*/_jsx(TextInput, {
+        className: "flex-1 text-[16px] leading-[20px]",
+        style: {
+          color: colors.text
+        },
+        placeholder: viewMode === 'photos' ? t('fileManagement.searchPhotos') : t('fileManagement.searchFiles'),
+        placeholderTextColor: colors.textSecondary,
+        value: searchQuery,
+        onChangeText: setSearchQuery
+      }), searchQuery.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => setSearchQuery(''),
+        className: "p-[4px] rounded-[12px] items-center justify-center",
+        children: /*#__PURE__*/_jsx(Ionicons, {
+          name: "close-circle",
+          size: 22,
+          color: colors.icon
+        })
+      })]
+    }), files.length > 0 && /*#__PURE__*/_jsxs(View, {
+      className: "flex-row px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-[18px]",
+      style: {
+        backgroundColor: colors.card
+      },
+      children: [/*#__PURE__*/_jsxs(View, {
+        className: "flex-1 items-center py-[4px]",
+        children: [/*#__PURE__*/_jsx(Text, {
+          className: "text-[20px] font-extrabold leading-[24px]",
+          style: {
+            color: colors.text,
+            letterSpacing: -0.5
+          },
+          children: filteredFiles.length
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "text-[12px] font-medium mt-[2px]",
+          style: {
+            color: colors.textSecondary,
+            letterSpacing: 0.2
+          },
+          children: searchQuery.length > 0 ? t('fileManagement.found') : filteredFiles.length === 1 ? viewMode === 'photos' ? t('fileManagement.photo') : t('fileManagement.file') : viewMode === 'photos' ? t('fileManagement.photos_stat') : t('fileManagement.files')
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        className: "flex-1 items-center py-[4px]",
+        children: [/*#__PURE__*/_jsx(Text, {
+          className: "text-[20px] font-extrabold leading-[24px]",
+          style: {
+            color: colors.text,
+            letterSpacing: -0.5
+          },
+          children: formatFileSize(filteredFiles.reduce((total, file) => total + file.length, 0))
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "text-[12px] font-medium mt-[2px]",
+          style: {
+            color: colors.textSecondary,
+            letterSpacing: 0.2
+          },
+          children: searchQuery.length > 0 ? t('fileManagement.size') : t('fileManagement.totalSize')
+        })]
+      }), searchQuery.length > 0 && /*#__PURE__*/_jsxs(View, {
+        className: "flex-1 items-center py-[4px]",
+        children: [/*#__PURE__*/_jsx(Text, {
+          className: "text-[20px] font-extrabold leading-[24px]",
+          style: {
+            color: colors.text,
+            letterSpacing: -0.5
+          },
+          children: files.length
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "text-[12px] font-medium mt-[2px]",
+          style: {
+            color: colors.textSecondary,
+            letterSpacing: 0.2
+          },
+          children: t('fileManagement.total')
+        })]
+      })]
+    }), viewMode === 'photos' ? renderPhotoGrid() : /*#__PURE__*/_jsx(FileListSection, {
+      scrollViewRef: scrollViewRef,
+      filteredFiles: filteredFiles,
+      searchQuery: searchQuery,
+      items: groupedFileItems,
+      paging: {
+        loadingMore: isFetchingMore,
+        hasMore: hasMoreFiles
+      },
+      refreshing: isRefreshingFiles,
+      colors: colors,
+      t: t,
+      onRefresh: () => filesQuery.refetch(),
+      onLoadMore: () => filesQuery.fetchNextPage(),
+      onClearSearch: () => setSearchQuery(''),
+      renderEmptyState: renderEmptyState
+    }), !selectMode && uploading && /*#__PURE__*/_jsx(UploadBar, {
+      uploadProgress: uploadProgress,
+      isDark: bloomTheme.isDark,
+      colors: colors,
+      t: t
+    })]
+  });
+};
+export default FileManagementScreen;
+//# sourceMappingURL=FileManagementScreen.js.map