@oxyhq/services 5.13.3 → 5.13.10

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

@@ -1,8 +1,9 @@
 "use strict";
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, Platform, RefreshControl, Modal, TextInput, Image // kept for Image.getSize only
-} from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, Platform, RefreshControl, Modal, TextInput, Image,
+// kept for Image.getSize only
+Animated, Easing, Alert } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
@@ -43,18 +44,6 @@ const FileManagementScreen = ({
     user,
     oxyServices
   } = useOxy();
-
-  // Debug: log the actual container width
-  useEffect(() => {
-    console.log('[FileManagementScreen] Container width (full):', containerWidth);
-    // Padding structure:
-    // - containerWidth = full bottom sheet container width (measured from OxyProvider)
-    // - photoScrollContainer adds padding: 16 (32px total horizontal padding)
-    // - Available content width = containerWidth - 32
-    const availableContentWidth = containerWidth - 32;
-    console.log('[FileManagementScreen] Available content width:', availableContentWidth);
-    console.log('[FileManagementScreen] Spacing fix applied: 4px uniform gap both horizontal and vertical');
-  }, [containerWidth]);
   const files = useFiles();
   const uploading = useUploadingStore();
   const uploadProgress = useUploadAggregateProgress();
@@ -77,18 +66,46 @@ const FileManagementScreen = ({
   const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
   const [viewMode, setViewMode] = useState('all');
   const [searchQuery, setSearchQuery] = useState('');
-  // Derived filtered files (avoid setState loops)
+  const [sortBy, setSortBy] = useState('date');
+  const [sortOrder, setSortOrder] = useState('desc');
+  const [pendingFiles, setPendingFiles] = useState([]);
+  const [showUploadPreview, setShowUploadPreview] = useState(false);
+  // Derived filtered and sorted files (avoid setState loops)
   const filteredFiles = useMemo(() => {
     let filteredByMode = files;
     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/'));
     }
-    if (!searchQuery.trim()) {
-      return filteredByMode;
+    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 && file.metadata.description.toLowerCase().includes(query));
     }
-    const query = searchQuery.toLowerCase();
-    return filteredByMode.filter(file => file.filename.toLowerCase().includes(query) || file.contentType.toLowerCase().includes(query) || file.metadata?.description && file.metadata.description.toLowerCase().includes(query));
-  }, [files, searchQuery, viewMode]);
+
+    // 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]);
   const [isDragging, setIsDragging] = useState(false);
   const [photoDimensions, setPhotoDimensions] = useState({});
   const [loadingDimensions, setLoadingDimensions] = useState(false);
@@ -97,13 +114,19 @@ const FileManagementScreen = ({
   const MIN_BANNER_MS = 600;
   // Selection state
   const [selectedIds, setSelectedIds] = useState(new Set(initialSelectedIds));
+  const [lastSelectedFileId, setLastSelectedFileId] = useState(null);
+  const scrollViewRef = useRef(null);
+  const photoScrollViewRef = useRef(null);
+  const itemRefs = useRef(new Map()); // Track item positions
+  const containerRef = useRef(null); // Ref for drag and drop container
   useEffect(() => {
     if (initialSelectedIds && initialSelectedIds.length) {
       setSelectedIds(new Set(initialSelectedIds));
     }
   }, [initialSelectedIds]);
   const toggleSelect = useCallback(async file => {
-    if (!selectMode) return;
+    // Allow selection in regular mode for bulk operations
+    // if (!selectMode) return;
     if (disabledMimeTypes.length) {
       const blocked = disabledMimeTypes.some(mt => file.contentType === mt || file.contentType.startsWith(mt.endsWith('/') ? mt : mt + '/'));
       if (blocked) {
@@ -117,20 +140,19 @@ const FileManagementScreen = ({
     if (fileVisibility !== defaultVisibility) {
       try {
         await oxyServices.assetUpdateVisibility(file.id, defaultVisibility);
-        console.log(`Updated file ${file.id} visibility from ${fileVisibility} to ${defaultVisibility}`);
       } catch (error) {
-        console.error('Failed to update file visibility:', error);
         // Continue anyway - selection shouldn't fail if visibility update fails
       }
     }
 
+    // Track the selected file for scrolling
+    setLastSelectedFileId(file.id);
+
     // 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);
-        console.log(`Linked file ${file.id} to ${linkContext.app}/${linkContext.entityType}/${linkContext.entityId}`);
       } catch (error) {
-        console.error('Failed to link file:', error);
         // Continue anyway - selection shouldn't fail if linking fails
       }
     }
@@ -173,9 +195,8 @@ const FileManagementScreen = ({
       if (fileVisibility !== defaultVisibility) {
         try {
           await oxyServices.assetUpdateVisibility(file.id, defaultVisibility);
-          console.log(`Updated file ${file.id} visibility from ${fileVisibility} to ${defaultVisibility}`);
         } catch (error) {
-          console.error(`Failed to update visibility for ${file.id}:`, error);
+          // Visibility update failed, continue with selection
         }
       }
 
@@ -183,9 +204,8 @@ const FileManagementScreen = ({
       if (linkContext) {
         try {
           await oxyServices.assetLink(file.id, linkContext.app, linkContext.entityType, linkContext.entityId, defaultVisibility, linkContext.webhookUrl);
-          console.log(`Linked file ${file.id} to ${linkContext.app}/${linkContext.entityType}/${linkContext.entityId}`);
         } catch (error) {
-          console.error(`Failed to link file ${file.id}:`, error);
+          // File linking failed, continue with selection
         }
       }
     });
@@ -317,7 +337,6 @@ const FileManagementScreen = ({
         }));
       }
     } catch (error) {
-      console.error('Failed to load files:', error);
       toast.error(error.message || 'Failed to load files');
     } finally {
       setLoading(false);
@@ -412,7 +431,7 @@ const FileManagementScreen = ({
         setPhotoDimensions(newDimensions);
       }
     } catch (error) {
-      console.error('Error loading photo dimensions:', error);
+      // Photo dimensions loading failed, continue without dimensions
     } finally {
       setLoadingDimensions(false);
     }
@@ -516,85 +535,170 @@ const FileManagementScreen = ({
         loadFiles('silent');
       }, 1200);
     } catch (error) {
-      console.error('Upload error:', error);
       toast.error(error.message || 'Failed to upload files');
     } finally {
       storeSetUploadProgress(null);
     }
   };
+  const handleFileSelection = useCallback(async selectedFiles => {
+    const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
+    const processedFiles = [];
+    for (const file of selectedFiles) {
+      // Validate file size
+      if (file.size > MAX_FILE_SIZE) {
+        toast.error(`"${file.name}" is too large. Maximum file size is ${formatFileSize(MAX_FILE_SIZE)}`);
+        continue;
+      }
+
+      // Generate preview for images
+      let preview;
+      if (file.type.startsWith('image/')) {
+        preview = URL.createObjectURL(file);
+      }
+      processedFiles.push({
+        file,
+        preview,
+        size: file.size,
+        name: file.name,
+        type: file.type
+      });
+    }
+    if (processedFiles.length === 0) return;
+
+    // Show preview modal for user to review files before upload
+    setPendingFiles(processedFiles);
+    setShowUploadPreview(true);
+  }, []);
+  const handleConfirmUpload = async () => {
+    if (pendingFiles.length === 0) return;
+    setShowUploadPreview(false);
+    uploadStartRef.current = Date.now();
+    storeSetUploading(true);
+    storeSetUploadProgress(null);
+    try {
+      const filesToUpload = pendingFiles.map(pf => pf.file);
+      storeSetUploadProgress({
+        current: 0,
+        total: filesToUpload.length
+      });
+      await processFileUploads(filesToUpload);
+
+      // Cleanup preview URLs
+      pendingFiles.forEach(pf => {
+        if (pf.preview) {
+          URL.revokeObjectURL(pf.preview);
+        }
+      });
+      setPendingFiles([]);
+      endUpload();
+    } catch (error) {
+      toast.error(error.message || 'Failed to upload files');
+      endUpload();
+    }
+  };
+  const handleCancelUpload = () => {
+    // Cleanup preview URLs
+    pendingFiles.forEach(pf => {
+      if (pf.preview) {
+        URL.revokeObjectURL(pf.preview);
+      }
+    });
+    setPendingFiles([]);
+    setShowUploadPreview(false);
+  };
+  const removePendingFile = index => {
+    const file = pendingFiles[index];
+    if (file.preview) {
+      URL.revokeObjectURL(file.preview);
+    }
+    const updated = pendingFiles.filter((_, i) => i !== index);
+    setPendingFiles(updated);
+    if (updated.length === 0) {
+      setShowUploadPreview(false);
+    }
+  };
   const handleFileUpload = async () => {
     try {
-      uploadStartRef.current = Date.now();
-      storeSetUploading(true);
-      storeSetUploadProgress(null);
       if (Platform.OS === 'web') {
-        // Web file picker implementation
+        // Enhanced web file picker
         const input = document.createElement('input');
         input.type = 'file';
         input.multiple = true;
         input.accept = '*/*';
-        // Fallback: if the user cancels the dialog (no onchange fires or 0 files), hide banner
         const cancellationTimer = setTimeout(() => {
           const state = useFileStore.getState();
           if (state.uploading && uploadStartRef.current && !state.uploadProgress) {
-            // No selection happened; treat as cancel
             endUpload();
           }
-        }, 1500); // allow enough time for user to pick
-
+        }, 1500);
         input.onchange = async e => {
           clearTimeout(cancellationTimer);
           const selectedFiles = Array.from(e.target.files || []);
           if (selectedFiles.length === 0) {
-            // User explicitly canceled (some browsers still fire onchange with empty list)
             endUpload();
             return;
           }
-          storeSetUploadProgress({
-            current: 0,
-            total: selectedFiles.length
-          });
-          await processFileUploads(selectedFiles);
-          endUpload();
+          await handleFileSelection(selectedFiles);
         };
         input.click();
       } else {
-        // Mobile - show info that file picker can be added
-        const installCommand = 'npm install expo-document-picker';
-        const message = `Mobile File Upload\n\nTo enable file uploads on mobile, install expo-document-picker:\n\n${installCommand}\n\nThen import and use DocumentPicker.getDocumentAsync() in this method.`;
-        if (window.confirm(`${message}\n\nWould you like to copy the install command?`)) {
-          toast.info(`Install: ${installCommand}`);
-        } else {
-          toast.info('Mobile file upload requires expo-document-picker');
+        // Mobile file picker with expo-document-picker
+        try {
+          // Dynamically import to avoid breaking if not installed
+          const DocumentPicker = await import('expo-document-picker').catch(() => null);
+          if (!DocumentPicker) {
+            toast.error('File picker not available. Please install expo-document-picker');
+            return;
+          }
+          const result = await DocumentPicker.getDocumentAsync({
+            type: '*/*',
+            multiple: true,
+            copyToCacheDirectory: true
+          });
+          if (result.canceled) {
+            return;
+          }
+
+          // Convert expo document picker results to File-like objects
+          const files = [];
+          for (const doc of result.assets) {
+            if (doc.file) {
+              // expo-document-picker provides a File-like object
+              files.push(doc.file);
+            } else if (doc.uri) {
+              // Fallback: fetch and create Blob
+              const response = await fetch(doc.uri);
+              const blob = await response.blob();
+              const file = new File([blob], doc.name || 'file', {
+                type: doc.mimeType || 'application/octet-stream'
+              });
+              files.push(file);
+            }
+          }
+          if (files.length > 0) {
+            await handleFileSelection(files);
+          }
+        } catch (error) {
+          if (error.message?.includes('expo-document-picker')) {
+            toast.error('File picker not available. Please install expo-document-picker');
+          } else {
+            toast.error(error.message || 'Failed to select files');
+          }
         }
       }
     } catch (error) {
-      toast.error(error.message || 'Failed to upload file');
-    } finally {
-      // IMPORTANT: Do NOT call endUpload here.
-      // We only want to hide the banner after the actual upload(s) complete.
-      // The input.onchange handler invokes processFileUploads then calls endUpload().
-      // Calling endUpload here caused the banner to disappear while files were still uploading.
-      storeSetUploadProgress(null); // keep clearing any stale progress
+      toast.error(error.message || 'Failed to open file picker');
     }
   };
   const handleFileDelete = async (fileId, filename) => {
     // Use web-compatible confirmation dialog
     const confirmed = window.confirm(`Are you sure you want to delete "${filename}"? This action cannot be undone.`);
     if (!confirmed) {
-      console.log('Delete cancelled by user');
       return;
     }
     try {
-      console.log('Deleting file:', {
-        fileId,
-        filename
-      });
-      console.log('Target user ID:', targetUserId);
-      console.log('Current user ID:', user?.id);
       storeSetDeleting(fileId);
-      const result = await oxyServices.deleteFile(fileId);
-      console.log('Delete result:', result);
+      await oxyServices.deleteFile(fileId);
       toast.success('File deleted successfully');
 
       // Reload files after successful deletion
@@ -603,9 +707,6 @@ const FileManagementScreen = ({
       // Silent background reconcile
       setTimeout(() => loadFiles('silent'), 800);
     } catch (error) {
-      console.error('Delete error:', error);
-      console.error('Error details:', error.response?.data || error.message);
-
       // Provide specific error messages
       if (error.message?.includes('File not found') || error.message?.includes('404')) {
         toast.error('File not found. It may have already been deleted.');
@@ -620,90 +721,151 @@ const FileManagementScreen = ({
       storeSetDeleting(null);
     }
   };
-
-  // Drag and drop handlers for web
-  const handleDragOver = e => {
-    if (Platform.OS === 'web' && user?.id === targetUserId) {
-      e.preventDefault();
-      setIsDragging(true);
-    }
-  };
-  const handleDragEnter = e => {
-    if (Platform.OS === 'web' && user?.id === targetUserId) {
-      e.preventDefault();
-      setIsDragging(true);
+  const handleBulkDelete = useCallback(async () => {
+    if (selectedIds.size === 0) return;
+    const fileMap = {};
+    files.forEach(f => {
+      fileMap[f.id] = f;
+    });
+    const selectedFiles = Array.from(selectedIds).map(id => fileMap[id]).filter(Boolean);
+    const confirmed = window.confirm(`Are you sure you want to delete ${selectedFiles.length} file(s)? This action cannot be undone.`);
+    if (!confirmed) return;
+    try {
+      const deletePromises = Array.from(selectedIds).map(async fileId => {
+        try {
+          await oxyServices.deleteFile(fileId);
+          useFileStore.getState().removeFile(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(`${successful} file(s) deleted successfully`);
+      }
+      if (failed > 0) {
+        toast.error(`${failed} file(s) failed to delete`);
+      }
+      setSelectedIds(new Set());
+      setTimeout(() => loadFiles('silent'), 800);
+    } catch (error) {
+      toast.error(error.message || 'Failed to delete files');
     }
-  };
-  const handleDragLeave = e => {
-    if (Platform.OS === 'web') {
-      e.preventDefault();
-      setIsDragging(false);
+  }, [selectedIds, files, oxyServices, loadFiles]);
+  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(`${successful} file(s) visibility updated to ${visibility}`);
+        // Update file metadata in store
+        Array.from(selectedIds).forEach(fileId => {
+          useFileStore.getState().updateFile(fileId, {
+            metadata: {
+              ...files.find(f => f.id === fileId)?.metadata,
+              visibility
+            }
+          });
+        });
+      }
+      if (failed > 0) {
+        toast.error(`${failed} file(s) failed to update visibility`);
+      }
+      setTimeout(() => loadFiles('silent'), 800);
+    } catch (error) {
+      toast.error(error.message || 'Failed to update visibility');
     }
-  };
+  }, [selectedIds, oxyServices, files, loadFiles]);
 
-  // Global drag listeners (web) to catch drags outside component bounds
+  // Global drag listeners (web) - attach to document for reliable drag and drop
   useEffect(() => {
     if (Platform.OS !== 'web' || user?.id !== targetUserId) return;
-    const onDocDragEnter = e => {
-      if (e?.dataTransfer?.types?.includes('Files')) setIsDragging(true);
+    let dragCounter = 0; // Track drag enter/leave to handle nested elements
+
+    const onDragEnter = e => {
+      dragCounter++;
+      if (e?.dataTransfer?.types?.includes('Files')) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+      }
     };
-    const onDocDragOver = e => {
+    const onDragOver = e => {
       if (e?.dataTransfer?.types?.includes('Files')) {
         e.preventDefault();
+        e.stopPropagation();
+        // Keep dragging state true while over document
         setIsDragging(true);
       }
     };
-    const onDocDrop = e => {
+    const onDrop = async e => {
+      dragCounter = 0;
+      setIsDragging(false);
       if (e?.dataTransfer?.files?.length) {
         e.preventDefault();
-        setIsDragging(false);
+        e.stopPropagation();
+        try {
+          const files = Array.from(e.dataTransfer.files);
+          if (files.length > 0) {
+            await handleFileSelection(files);
+          }
+        } catch (error) {
+          toast.error(error.message || 'Failed to upload files');
+        }
       }
     };
-    const onDocDragLeave = e => {
-      if (!e.relatedTarget && e.screenX === 0 && e.screenY === 0) setIsDragging(false);
+    const onDragLeave = e => {
+      dragCounter--;
+      // Only hide drag overlay if we're actually leaving the document (drag counter reaches 0)
+      if (dragCounter === 0) {
+        setIsDragging(false);
+      }
     };
-    document.addEventListener('dragenter', onDocDragEnter);
-    document.addEventListener('dragover', onDocDragOver);
-    document.addEventListener('drop', onDocDrop);
-    document.addEventListener('dragleave', onDocDragLeave);
+
+    // Attach to document for global drag detection
+    document.addEventListener('dragenter', onDragEnter, false);
+    document.addEventListener('dragover', onDragOver, false);
+    document.addEventListener('drop', onDrop, false);
+    document.addEventListener('dragleave', onDragLeave, false);
     return () => {
-      document.removeEventListener('dragenter', onDocDragEnter);
-      document.removeEventListener('dragover', onDocDragOver);
-      document.removeEventListener('drop', onDocDrop);
-      document.removeEventListener('dragleave', onDocDragLeave);
+      document.removeEventListener('dragenter', onDragEnter, false);
+      document.removeEventListener('dragover', onDragOver, false);
+      document.removeEventListener('drop', onDrop, false);
+      document.removeEventListener('dragleave', onDragLeave, false);
     };
-  }, [user?.id, targetUserId]);
-  const handleDrop = async e => {
-    if (Platform.OS === 'web' && user?.id === targetUserId) {
-      e.preventDefault();
-      setIsDragging(false);
-      uploadStartRef.current = Date.now();
-      storeSetUploading(true);
-      try {
-        const files = Array.from(e.dataTransfer.files);
-        if (files.length > 0) storeSetUploadProgress({
-          current: 0,
-          total: files.length
-        });
-        await processFileUploads(files);
-      } catch (error) {
-        toast.error(error.message || 'Failed to upload files');
-      } finally {
-        endUpload();
-      }
-    }
-  };
+  }, [user?.id, targetUserId, handleFileSelection]);
   const handleFileDownload = async (fileId, filename) => {
     try {
       if (Platform.OS === 'web') {
-        console.log('Downloading file:', {
-          fileId,
-          filename
-        });
-
         // Use the public download URL method
         const downloadUrl = oxyServices.getFileDownloadUrl(fileId);
-        console.log('Download URL:', downloadUrl);
         try {
           // Method 1: Try simple link download first
           const link = document.createElement('a');
@@ -715,8 +877,6 @@ const FileManagementScreen = ({
           document.body.removeChild(link);
           toast.success('File download started');
         } catch (linkError) {
-          console.warn('Link download failed, trying fetch method:', linkError);
-
           // Method 2: Fallback to authenticated download
           const blob = await oxyServices.getFileContentAsBlob(fileId);
           const url = window.URL.createObjectURL(blob);
@@ -735,7 +895,6 @@ const FileManagementScreen = ({
         toast.info('File download not implemented for mobile yet');
       }
     } catch (error) {
-      console.error('Download error:', error);
       toast.error(error.message || 'Failed to download file');
     }
   };
@@ -778,7 +937,6 @@ const FileManagementScreen = ({
             setFileContent(content);
           }
         } catch (error) {
-          console.error('Failed to load file content:', error);
           if (error.message?.includes('404') || error.message?.includes('not found')) {
             toast.error('File not found. It may have been deleted.');
           } else {
@@ -791,7 +949,6 @@ const FileManagementScreen = ({
         setFileContent(null);
       }
     } catch (error) {
-      console.error('Failed to open file:', error);
       toast.error(error.message || 'Failed to open file');
     } finally {
       setLoadingFileContent(false);
@@ -842,8 +999,8 @@ const FileManagementScreen = ({
           contentFit: "cover",
           transition: 120,
           cachePolicy: "memory-disk",
-          onError: e => {
-            console.error('Photo failed to load:', e?.nativeEvent ?? e);
+          onError: () => {
+            // Photo failed to load, will show placeholder
           },
           accessibilityLabel: photo.filename
         }), selectMode && /*#__PURE__*/_jsx(View, {
@@ -883,8 +1040,8 @@ const FileManagementScreen = ({
           contentFit: "cover",
           transition: 120,
           cachePolicy: "memory-disk",
-          onError: e => {
-            console.error('Photo failed to load:', e?.nativeEvent ?? e);
+          onError: () => {
+            // Photo failed to load, will show placeholder
           },
           accessibilityLabel: photo.filename
         }), selectMode && /*#__PURE__*/_jsx(View, {
@@ -943,8 +1100,8 @@ const FileManagementScreen = ({
               contentFit: "cover",
               transition: 120,
               cachePolicy: "memory-disk",
-              onError: _ => {
-                console.warn('Failed to load image preview.');
+              onError: () => {
+                // Image preview failed to load
               },
               accessibilityLabel: file.filename
             }), isPDF && /*#__PURE__*/_jsxs(View, {
@@ -1082,7 +1239,14 @@ const FileManagementScreen = ({
 
   // GroupedSection-based file items (for 'all' view) replacing legacy flat list look
   const groupedFileItems = useMemo(() => {
-    return filteredFiles.filter(f => true).sort((a, b) => new Date(b.uploadDate).getTime() - new Date(a.uploadDate).getTime()).map(file => {
+    // filteredFiles is already sorted, so just use it directly
+    const sortedFiles = filteredFiles;
+
+    // Store file positions for scrolling
+    sortedFiles.forEach((file, index) => {
+      itemRefs.current.set(file.id, index);
+    });
+    return sortedFiles.map(file => {
       const isImage = file.contentType.startsWith('image/');
       const isVideo = file.contentType.startsWith('video/');
       const hasPreview = isImage || isVideo;
@@ -1097,13 +1261,29 @@ const FileManagementScreen = ({
         title: file.filename,
         subtitle: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
         theme: theme,
-        onPress: () => handleFileOpen(file),
+        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);
+          }
+        },
+        onLongPress: !selectMode ? () => {
+          // Enable selection mode on long press
+          if (selectedIds.size === 0) {
+            setSelectedIds(new Set([file.id]));
+          } else {
+            toggleSelect(file);
+          }
+        } : undefined,
         showChevron: false,
         dense: true,
         multiRow: !!file.metadata?.description,
-        selected: selectMode && isSelected,
-        // Hide action buttons when selecting
-        customContent: !selectMode ? /*#__PURE__*/_jsxs(View, {
+        selected: (selectMode || selectedIds.size > 0) && isSelected,
+        // Hide action buttons when selecting (in selectMode or bulk operations mode)
+        customContent: !selectMode && selectedIds.size === 0 ? /*#__PURE__*/_jsxs(View, {
           style: styles.groupedActions,
           children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/_jsx(TouchableOpacity, {
             style: [styles.groupedActionBtn, {
@@ -1151,6 +1331,88 @@ const FileManagementScreen = ({
       };
     });
   }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrl, selectMode, selectedIds]);
+
+  // Scroll to selected file after selection
+  useEffect(() => {
+    if (lastSelectedFileId && selectMode) {
+      if (viewMode === 'all' && scrollViewRef.current) {
+        // Find the index of the selected file
+        const itemIndex = itemRefs.current.get(lastSelectedFileId);
+        if (itemIndex !== undefined && 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) {
+          // Estimate photo item height based on grid layout
+          // Calculate items per row
+          let itemsPerRow = 3;
+          if (containerWidth > 768) itemsPerRow = 6;else if (containerWidth > 480) itemsPerRow = 4;
+          const scrollContainerPadding = 32;
+          const gaps = (itemsPerRow - 1) * 4;
+          const availableWidth = containerWidth - scrollContainerPadding;
+          const itemWidth = (availableWidth - gaps) / itemsPerRow;
+
+          // Calculate row and approximate scroll position
+          const row = Math.floor(photoIndex / itemsPerRow);
+          const headerHeight = 250;
+          const finalScrollPosition = headerHeight + row * (itemWidth + 4) - 150;
+
+          // 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, containerWidth]);
+
+  // Clear selected file ID after scroll animation completes
+  useEffect(() => {
+    if (lastSelectedFileId && scrollViewRef.current) {
+      const timeoutId = setTimeout(() => {
+        setLastSelectedFileId(null);
+      }, 600); // Allow time for scroll animation to complete
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [lastSelectedFileId]);
   const renderPhotoItem = (photo, index) => {
     const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
 
@@ -1181,8 +1443,8 @@ const FileManagementScreen = ({
           contentFit: "cover",
           transition: 120,
           cachePolicy: "memory-disk",
-          onError: _ => {
-            console.warn('Failed to load image preview for photo:', photo.id);
+          onError: () => {
+            // Image preview failed to load
           },
           accessibilityLabel: photo.filename
         })
@@ -1231,6 +1493,7 @@ const FileManagementScreen = ({
       });
     }
     return /*#__PURE__*/_jsxs(ScrollView, {
+      ref: photoScrollViewRef,
       style: styles.scrollView,
       contentContainerStyle: styles.photoScrollContainer,
       refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
@@ -1654,8 +1917,8 @@ const FileManagementScreen = ({
             contentFit: "contain",
             transition: 120,
             cachePolicy: "memory-disk",
-            onError: e => {
-              console.error('Image failed to load:', e?.nativeEvent ?? e);
+            onError: () => {
+              // Image failed to load
             },
             accessibilityLabel: openedFile.filename
           })
@@ -1796,21 +2059,219 @@ const FileManagementScreen = ({
       })
     })]
   });
-  if (loading) {
+
+  // Professional Skeleton Loading Component with Advanced Shimmer Effect
+  const SkeletonLoader = /*#__PURE__*/React.memo(() => {
+    const shimmerAnim = useRef(new Animated.Value(0)).current;
+    const skeletonContainerWidth = containerWidth || 400;
+    useEffect(() => {
+      const shimmer = Animated.loop(Animated.timing(shimmerAnim, {
+        toValue: 1,
+        duration: 2000,
+        easing: Easing.linear,
+        useNativeDriver: true
+      }));
+      shimmer.start();
+      return () => shimmer.stop();
+    }, [shimmerAnim]);
+
+    // Create a sweeping shimmer effect
+    const shimmerTranslateX = shimmerAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-skeletonContainerWidth * 2, skeletonContainerWidth * 2]
+    });
+    const SkeletonBox = ({
+      width,
+      height,
+      borderRadius = 8,
+      style,
+      delay = 0
+    }) => {
+      const delayedTranslateX = shimmerAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [-skeletonContainerWidth * 2 + delay, skeletonContainerWidth * 2 + delay]
+      });
+      return /*#__PURE__*/_jsxs(View, {
+        style: [{
+          width,
+          height,
+          borderRadius,
+          backgroundColor: themeStyles.isDarkTheme ? '#1E1E1E' : '#F5F5F5',
+          overflow: 'hidden',
+          position: 'relative'
+        }, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: themeStyles.isDarkTheme ? '#1E1E1E' : '#F5F5F5'
+          }
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            transform: [{
+              translateX: delayedTranslateX
+            }]
+          },
+          children: /*#__PURE__*/_jsx(View, {
+            style: {
+              width: skeletonContainerWidth,
+              height: '100%',
+              backgroundColor: themeStyles.isDarkTheme ? 'rgba(255, 255, 255, 0.08)' : 'rgba(255, 255, 255, 0.8)',
+              shadowColor: themeStyles.isDarkTheme ? '#000' : '#FFF',
+              shadowOffset: {
+                width: 0,
+                height: 0
+              },
+              shadowOpacity: 0.3,
+              shadowRadius: 10
+            }
+          })
+        })]
+      });
+    };
+
+    // Skeleton file item matching GroupedSection structure
+    const SkeletonFileItem = ({
+      index
+    }) => /*#__PURE__*/_jsxs(View, {
+      style: [{
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        backgroundColor: themeStyles.isDarkTheme ? '#121212' : '#FFFFFF',
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: themeStyles.borderColor
+      }],
+      children: [/*#__PURE__*/_jsx(SkeletonBox, {
+        width: 44,
+        height: 44,
+        borderRadius: 8,
+        delay: index * 50
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          marginLeft: 12,
+          justifyContent: 'center'
+        },
+        children: [/*#__PURE__*/_jsx(SkeletonBox, {
+          width: index % 3 === 0 ? '85%' : index % 3 === 1 ? '70%' : '90%',
+          height: 16,
+          style: {
+            marginBottom: 8
+          },
+          delay: index * 50 + 20
+        }), /*#__PURE__*/_jsx(SkeletonBox, {
+          width: index % 2 === 0 ? '50%' : '60%',
+          height: 12,
+          delay: index * 50 + 40
+        })]
+      })]
+    });
     return /*#__PURE__*/_jsxs(View, {
-      style: [styles.container, styles.centerContent, {
+      style: [styles.container, {
         backgroundColor
       }],
-      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "large",
-        color: themeStyles.primaryColor
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.loadingText, {
-          color: themeStyles.textColor
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [styles.header, {
+          borderBottomColor: themeStyles.borderColor,
+          borderBottomWidth: StyleSheet.hairlineWidth
+        }],
+        children: [/*#__PURE__*/_jsx(SkeletonBox, {
+          width: 44,
+          height: 44,
+          borderRadius: 12
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.headerTitleContainer, {
+            flex: 1
+          }],
+          children: [/*#__PURE__*/_jsx(SkeletonBox, {
+            width: 140,
+            height: 20,
+            style: {
+              marginBottom: 6
+            }
+          }), /*#__PURE__*/_jsx(SkeletonBox, {
+            width: 100,
+            height: 14
+          })]
+        }), /*#__PURE__*/_jsx(SkeletonBox, {
+          width: 44,
+          height: 44,
+          borderRadius: 12
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.controlsBar,
+        children: [/*#__PURE__*/_jsx(SkeletonBox, {
+          width: 100,
+          height: 36,
+          borderRadius: 18
+        }), /*#__PURE__*/_jsx(SkeletonBox, {
+          width: 44,
+          height: 44,
+          borderRadius: 22
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.searchContainer, {
+          backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
+          borderColor: themeStyles.borderColor,
+          borderWidth: StyleSheet.hairlineWidth
+        }],
+        children: /*#__PURE__*/_jsx(SkeletonBox, {
+          width: "100%",
+          height: 44,
+          borderRadius: 12
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.statsContainer, {
+          backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
+          borderColor: themeStyles.borderColor,
+          borderWidth: StyleSheet.hairlineWidth
         }],
-        children: "Loading files..."
+        children: [1, 2, 3].map(i => /*#__PURE__*/_jsxs(View, {
+          style: styles.statItem,
+          children: [/*#__PURE__*/_jsx(SkeletonBox, {
+            width: 50,
+            height: 20,
+            style: {
+              marginBottom: 4
+            },
+            delay: i * 30
+          }), /*#__PURE__*/_jsx(SkeletonBox, {
+            width: 40,
+            height: 14,
+            delay: i * 30 + 15
+          })]
+        }, i))
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.scrollView,
+        contentContainerStyle: styles.scrollContainer,
+        showsVerticalScrollIndicator: false,
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            backgroundColor: themeStyles.isDarkTheme ? '#121212' : '#FFFFFF',
+            borderRadius: 12,
+            overflow: 'hidden',
+            marginHorizontal: 16,
+            marginTop: 8
+          },
+          children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => /*#__PURE__*/_jsx(SkeletonFileItem, {
+            index: i
+          }, i))
+        })
       })]
     });
+  });
+  if (loading) {
+    return /*#__PURE__*/_jsx(SkeletonLoader, {});
   }
 
   // If a file is opened, show the file viewer
@@ -1820,13 +2281,8 @@ const FileManagementScreen = ({
     });
   }
   return /*#__PURE__*/_jsxs(View, {
+    ref: containerRef,
     style: [styles.container, isDragging && Platform.OS === 'web' && styles.dragOverlay],
-    ...(Platform.OS === 'web' && user?.id === targetUserId ? {
-      onDragOver: handleDragOver,
-      onDragEnter: handleDragEnter,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop
-    } : {}),
     children: [/*#__PURE__*/_jsx(Header, {
       title: selectMode ? multiSelect ? `${selectedIds.size}${maxSelection ? '/' + maxSelection : ''} Selected` : 'Select a File' : viewMode === 'photos' ? 'Photos' : 'File Management',
       subtitle: selectMode ? multiSelect ? `${filteredFiles.length} available` : 'Tap to select' : `${filteredFiles.length} ${filteredFiles.length === 1 ? 'item' : 'items'}`,
@@ -1840,6 +2296,35 @@ const FileManagementScreen = ({
         text: 'Confirm',
         onPress: confirmMultiSelection,
         disabled: selectedIds.size === 0
+      }] : !selectMode && selectedIds.size > 0 ? [{
+        key: 'clear',
+        text: 'Clear',
+        onPress: () => setSelectedIds(new Set())
+      }, {
+        key: 'delete',
+        text: `Delete (${selectedIds.size})`,
+        onPress: handleBulkDelete,
+        icon: 'trash'
+      }, {
+        key: 'visibility',
+        text: 'Visibility',
+        onPress: () => {
+          // Show visibility options menu
+          Alert.alert('Change Visibility', `Change visibility for ${selectedIds.size} file(s)?`, [{
+            text: 'Cancel',
+            style: 'cancel'
+          }, {
+            text: 'Private',
+            onPress: () => handleBulkVisibilityChange('private')
+          }, {
+            text: 'Public',
+            onPress: () => handleBulkVisibilityChange('public')
+          }, {
+            text: 'Unlisted',
+            onPress: () => handleBulkVisibilityChange('unlisted')
+          }]);
+        },
+        icon: 'eye'
       }] : undefined,
       onBack: onClose || goBack,
       theme: theme,
@@ -1849,32 +2334,95 @@ const FileManagementScreen = ({
       titleAlignment: "left"
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.controlsBar,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: [styles.viewModeToggle, {
+      children: [/*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        style: styles.viewModeScroll,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: [styles.viewModeToggle, {
+            backgroundColor: themeStyles.isDarkTheme ? '#181818' : '#FFFFFF',
+            borderWidth: 1,
+            borderColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#E8E9EA'
+          }],
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.viewModeButton, viewMode === 'all' && {
+              backgroundColor: themeStyles.primaryColor
+            }],
+            onPress: () => setViewMode('all'),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "folder",
+              size: 18,
+              color: viewMode === 'all' ? '#FFFFFF' : themeStyles.textColor
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.viewModeButton, viewMode === 'photos' && {
+              backgroundColor: themeStyles.primaryColor
+            }],
+            onPress: () => setViewMode('photos'),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "images",
+              size: 18,
+              color: viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.viewModeButton, viewMode === 'videos' && {
+              backgroundColor: themeStyles.primaryColor
+            }],
+            onPress: () => setViewMode('videos'),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "videocam",
+              size: 18,
+              color: viewMode === 'videos' ? '#FFFFFF' : themeStyles.textColor
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.viewModeButton, viewMode === 'documents' && {
+              backgroundColor: themeStyles.primaryColor
+            }],
+            onPress: () => setViewMode('documents'),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "document-text",
+              size: 18,
+              color: viewMode === 'documents' ? '#FFFFFF' : themeStyles.textColor
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.viewModeButton, viewMode === 'audio' && {
+              backgroundColor: themeStyles.primaryColor
+            }],
+            onPress: () => setViewMode('audio'),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "musical-notes",
+              size: 18,
+              color: viewMode === 'audio' ? '#FFFFFF' : themeStyles.textColor
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.sortButton, {
           backgroundColor: themeStyles.isDarkTheme ? '#181818' : '#FFFFFF',
-          borderWidth: 1,
           borderColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#E8E9EA'
         }],
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.viewModeButton, viewMode === 'all' && {
-            backgroundColor: themeStyles.primaryColor
-          }],
-          onPress: () => setViewMode('all'),
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: "folder",
-            size: 18,
-            color: viewMode === 'all' ? '#FFFFFF' : themeStyles.textColor
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.viewModeButton, viewMode === 'photos' && {
-            backgroundColor: themeStyles.primaryColor
-          }],
-          onPress: () => setViewMode('photos'),
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: "images",
-            size: 18,
-            color: viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor
-          })
+        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(Ionicons, {
+          name: sortOrder === 'asc' ? 'arrow-up' : 'arrow-down',
+          size: 18,
+          color: themeStyles.textColor
+        }), /*#__PURE__*/_jsx(Ionicons, {
+          name: sortBy === 'date' ? 'calendar' : sortBy === 'size' ? 'resize' : sortBy === 'name' ? 'text' : 'document',
+          size: 16,
+          color: themeStyles.textColor,
+          style: {
+            marginLeft: 4
+          }
         })]
       }), user?.id === targetUserId && (!selectMode || selectMode && allowUploadInSelectMode) && /*#__PURE__*/_jsx(TouchableOpacity, {
         style: [styles.uploadButton, {
@@ -1969,6 +2517,7 @@ const FileManagementScreen = ({
         })]
       })]
     }), viewMode === 'photos' ? renderPhotoGrid() : /*#__PURE__*/_jsx(ScrollView, {
+      ref: scrollViewRef,
       style: styles.scrollView,
       contentContainerStyle: styles.scrollContainer,
       refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
@@ -2067,21 +2616,29 @@ const FileManagementScreen = ({
     }), isDragging && Platform.OS === 'web' && /*#__PURE__*/_jsx(View, {
       style: styles.dragDropOverlay,
       children: /*#__PURE__*/_jsxs(View, {
-        style: styles.dragDropContent,
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "cloud-upload",
-          size: 64,
-          color: themeStyles.primaryColor
+        style: [styles.dragDropContent, {
+          backgroundColor: themeStyles.isDarkTheme ? 'rgba(30, 30, 30, 0.98)' : 'rgba(255, 255, 255, 0.98)',
+          borderColor: themeStyles.primaryColor
+        }],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.dragDropIconContainer, {
+            backgroundColor: `${themeStyles.primaryColor}15`
+          }],
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: "cloud-upload",
+            size: 64,
+            color: themeStyles.primaryColor
+          })
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.dragDropTitle, {
             color: themeStyles.primaryColor
           }],
           children: "Drop files to upload"
-        }), /*#__PURE__*/_jsxs(Text, {
+        }), /*#__PURE__*/_jsx(Text, {
           style: [styles.dragDropSubtitle, {
             color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
-          children: ["Release to upload", uploadProgress ? ` (${uploadProgress.current}/${uploadProgress.total})` : ' multiple files']
+          children: "Release to upload multiple files"
         })]
       })
     })]
@@ -2580,36 +3137,154 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600'
   },
-  // Drag and Drop styles
+  // Drag and Drop styles - Enhanced
   dragDropOverlay: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 1000
   },
   dragDropContent: {
     alignItems: 'center',
-    backgroundColor: 'rgba(255, 255, 255, 0.95)',
-    padding: 20,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: '#66AFFF',
-    borderStyle: 'dashed'
+    padding: 32,
+    borderRadius: 20,
+    borderWidth: 3,
+    borderStyle: 'dashed',
+    minWidth: 280,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowRadius: 20,
+    shadowOffset: {
+      width: 0,
+      height: 10
+    },
+    elevation: 10
+  },
+  dragDropIconContainer: {
+    padding: 24,
+    borderRadius: 50,
+    marginBottom: 16
   },
   dragDropTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginTop: 12,
-    marginBottom: 6
+    fontSize: 24,
+    fontWeight: '700',
+    fontFamily: fontFamilies.phuduBold,
+    marginBottom: 8
   },
   dragDropSubtitle: {
     fontSize: 16,
-    textAlign: 'center'
+    fontWeight: '500',
+    fontFamily: fontFamilies.phuduMedium
+  },
+  // Upload Preview Modal styles
+  uploadPreviewContainer: {
+    flex: 1
+  },
+  uploadPreviewHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    borderBottomWidth: 1
+  },
+  uploadPreviewTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    fontFamily: fontFamilies.phuduBold
+  },
+  uploadPreviewList: {
+    flex: 1,
+    padding: 16
+  },
+  uploadPreviewItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+    marginBottom: 12,
+    gap: 12
+  },
+  uploadPreviewThumbnail: {
+    width: 60,
+    height: 60,
+    borderRadius: 8
+  },
+  uploadPreviewIconContainer: {
+    width: 60,
+    height: 60,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  uploadPreviewInfo: {
+    flex: 1,
+    minWidth: 0
+  },
+  uploadPreviewName: {
+    fontSize: 16,
+    fontWeight: '600',
+    fontFamily: fontFamilies.phuduSemiBold,
+    marginBottom: 4
+  },
+  uploadPreviewMeta: {
+    fontSize: 13,
+    fontFamily: fontFamilies.phudu
+  },
+  uploadPreviewRemove: {
+    padding: 4
+  },
+  uploadPreviewFooter: {
+    padding: 16,
+    borderTopWidth: 1
+  },
+  uploadPreviewStats: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 16
+  },
+  uploadPreviewStatsText: {
+    fontSize: 15,
+    fontWeight: '600',
+    fontFamily: fontFamilies.phuduSemiBold
+  },
+  uploadPreviewActions: {
+    flexDirection: 'row',
+    gap: 12
+  },
+  uploadPreviewCancelButton: {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  uploadPreviewCancelText: {
+    fontSize: 16,
+    fontWeight: '600',
+    fontFamily: fontFamilies.phuduSemiBold
+  },
+  uploadPreviewConfirmButton: {
+    flex: 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 14,
+    borderRadius: 12,
+    gap: 8
+  },
+  uploadPreviewConfirmText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    fontFamily: fontFamilies.phuduSemiBold
   },
   // File Viewer styles
   fileViewerContainer: {
@@ -2783,6 +3458,10 @@ const styles = StyleSheet.create({
     paddingBottom: 4,
     gap: 12
   },
+  viewModeScroll: {
+    flex: 1,
+    maxWidth: '80%'
+  },
   viewModeToggle: {
     flexDirection: 'row',
     borderRadius: 24,
@@ -2798,6 +3477,16 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: 1
   },
+  sortButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 20,
+    borderWidth: 1,
+    minWidth: 44
+  },
   // Photo Grid styles
   photoScrollContainer: {
     padding: 10
@@ -2899,6 +3588,18 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     borderRadius: 8,
     marginBottom: 4
+  },
+  skeletonFileItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    gap: 12
+  },
+  skeletonFileInfo: {
+    flex: 1,
+    justifyContent: 'center'
   }
 });
 export default FileManagementScreen;