@oxyhq/services 5.13.3 → 5.13.10

package/src/ui/screens/FileManagementScreen.tsx

@@ -12,6 +12,9 @@ import {
     Modal,
     TextInput,
     Image, // kept for Image.getSize only
+    Animated,
+    Easing,
+    Alert,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import type { BaseScreenProps } from '../navigation/types';
@@ -92,18 +95,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     linkContext,
 }) => {
     const { 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();
@@ -118,24 +109,63 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const [fileContent, setFileContent] = useState<string | null>(null);
     const [loadingFileContent, setLoadingFileContent] = useState(false);
     const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
-    const [viewMode, setViewMode] = useState<'all' | 'photos'>('all');
+    const [viewMode, setViewMode] = useState<'all' | 'photos' | 'videos' | 'documents' | 'audio'>('all');
     const [searchQuery, setSearchQuery] = useState('');
-    // Derived filtered files (avoid setState loops)
+    const [sortBy, setSortBy] = useState<'date' | 'size' | 'name' | 'type'>('date');
+    const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+    const [pendingFiles, setPendingFiles] = useState<Array<{ file: File | Blob; preview?: string; size: number; name: string; type: string }>>([]);
+    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<{ [key: string]: { width: number, height: number } }>({});
     const [loadingDimensions, setLoadingDimensions] = useState(false);
@@ -144,6 +174,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const MIN_BANNER_MS = 600;
     // Selection state
     const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set(initialSelectedIds));
+    const [lastSelectedFileId, setLastSelectedFileId] = useState<string | null>(null);
+    const scrollViewRef = useRef<ScrollView>(null);
+    const photoScrollViewRef = useRef<ScrollView>(null);
+    const itemRefs = useRef<Map<string, number>>(new Map()); // Track item positions
+    const containerRef = useRef<View>(null); // Ref for drag and drop container
     useEffect(() => {
         if (initialSelectedIds && initialSelectedIds.length) {
             setSelectedIds(new Set(initialSelectedIds));
@@ -151,7 +186,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     }, [initialSelectedIds]);
 
     const toggleSelect = useCallback(async (file: FileMetadata) => {
-        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) {
@@ -165,12 +201,13 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         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) {
@@ -183,9 +220,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     defaultVisibility,
                     (linkContext as any).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
             }
         }
@@ -228,9 +263,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             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
                 }
             }
 
@@ -245,9 +279,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         defaultVisibility,
                         (linkContext as any).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
                 }
             }
         });
@@ -378,7 +411,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 }));
             }
         } catch (error: any) {
-            console.error('Failed to load files:', error);
             toast.error(error.message || 'Failed to load files');
         } finally {
             setLoading(false);
@@ -465,7 +497,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 setPhotoDimensions(newDimensions);
             }
         } catch (error) {
-            console.error('Error loading photo dimensions:', error);
+            // Photo dimensions loading failed, continue without dimensions
         } finally {
             setLoadingDimensions(false);
         }
@@ -554,67 +586,171 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             // Silent background refresh to ensure metadata/variants updated
             setTimeout(() => { loadFiles('silent'); }, 1200);
         } catch (error: any) {
-            console.error('Upload error:', error);
             toast.error(error.message || 'Failed to upload files');
         } finally {
             storeSetUploadProgress(null);
         }
     };
 
-    const handleFileUpload = async () => {
+    const handleFileSelection = useCallback(async (selectedFiles: File[] | any[]) => {
+        const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
+        const processedFiles: Array<{ file: File | Blob; preview?: string; size: number; name: string; type: string }> = [];
+
+        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: string | undefined;
+            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 {
-            uploadStartRef.current = Date.now();
-            storeSetUploading(true);
-            storeSetUploadProgress(null);
+            const filesToUpload = pendingFiles.map(pf => pf.file as 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: any) {
+            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: number) => {
+        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 {
             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: any) => {
                     clearTimeout(cancellationTimer);
                     const selectedFiles = Array.from(e.target.files || []) as File[];
                     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: File[] = [];
+                    for (const doc of result.assets) {
+                        if (doc.file) {
+                            // expo-document-picker provides a File-like object
+                            files.push(doc.file as 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: any) {
+                    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: any) {
-            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');
         }
     };
 
@@ -623,18 +759,12 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         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');
 
@@ -644,8 +774,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             // Silent background reconcile
             setTimeout(() => loadFiles('silent'), 800);
         } catch (error: any) {
-            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')) {
@@ -662,88 +790,155 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
     };
 
-    // Drag and drop handlers for web
-    const handleDragOver = (e: any) => {
-        if (Platform.OS === 'web' && user?.id === targetUserId) {
-            e.preventDefault();
-            setIsDragging(true);
-        }
-    };
-
-    const handleDragEnter = (e: any) => {
-        if (Platform.OS === 'web' && user?.id === targetUserId) {
-            e.preventDefault();
-            setIsDragging(true);
+    const handleBulkDelete = useCallback(async () => {
+        if (selectedIds.size === 0) return;
+        
+        const fileMap: Record<string, FileMetadata> = {};
+        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: any) {
+                    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: any) {
+            toast.error(error.message || 'Failed to delete files');
         }
-    };
+    }, [selectedIds, files, oxyServices, loadFiles]);
 
-    const handleDragLeave = (e: any) => {
-        if (Platform.OS === 'web') {
-            e.preventDefault();
-            setIsDragging(false);
+    const handleBulkVisibilityChange = useCallback(async (visibility: 'private' | 'public' | 'unlisted') => {
+        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: any) {
+                    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 }
+                    } as any);
+                });
+            }
+            if (failed > 0) {
+                toast.error(`${failed} file(s) failed to update visibility`);
+            }
+            
+            setTimeout(() => loadFiles('silent'), 800);
+        } catch (error: any) {
+            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: any) => {
-            if (e?.dataTransfer?.types?.includes('Files')) setIsDragging(true);
+        
+        let dragCounter = 0; // Track drag enter/leave to handle nested elements
+        
+        const onDragEnter = (e: DragEvent) => {
+            dragCounter++;
+            if (e?.dataTransfer?.types?.includes('Files')) {
+                e.preventDefault();
+                e.stopPropagation();
+                setIsDragging(true);
+            }
         };
-        const onDocDragOver = (e: any) => {
+        
+        const onDragOver = (e: DragEvent) => {
             if (e?.dataTransfer?.types?.includes('Files')) {
                 e.preventDefault();
+                e.stopPropagation();
+                // Keep dragging state true while over document
                 setIsDragging(true);
             }
         };
-        const onDocDrop = (e: any) => {
+        
+        const onDrop = async (e: DragEvent) => {
+            dragCounter = 0;
+            setIsDragging(false);
+            
             if (e?.dataTransfer?.files?.length) {
                 e.preventDefault();
-                setIsDragging(false);
+                e.stopPropagation();
+                
+                try {
+                    const files = Array.from(e.dataTransfer.files) as File[];
+                    if (files.length > 0) {
+                        await handleFileSelection(files);
+                    }
+                } catch (error: any) {
+                    toast.error(error.message || 'Failed to upload files');
+                }
             }
         };
-        const onDocDragLeave = (e: any) => {
-            if (!e.relatedTarget && e.screenX === 0 && e.screenY === 0) setIsDragging(false);
+        
+        const onDragLeave = (e: DragEvent) => {
+            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]);
+    }, [user?.id, targetUserId, handleFileSelection]);
 
-    const handleDrop = async (e: any) => {
-        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) as File[];
-                if (files.length > 0) storeSetUploadProgress({ current: 0, total: files.length });
-                await processFileUploads(files);
-            } catch (error: any) {
-                toast.error(error.message || 'Failed to upload files');
-            } finally {
-                endUpload();
-            }
-        }
-    };
 
     const handleFileDownload = async (fileId: string, filename: string) => {
         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
@@ -757,7 +952,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
                     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);
@@ -779,7 +973,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 toast.info('File download not implemented for mobile yet');
             }
         } catch (error: any) {
-            console.error('Download error:', error);
             toast.error(error.message || 'Failed to download file');
         }
     };
@@ -837,7 +1030,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         setFileContent(content);
                     }
                 } catch (error: any) {
-                    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 {
@@ -850,7 +1042,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 setFileContent(null);
             }
         } catch (error: any) {
-            console.error('Failed to open file:', error);
             toast.error(error.message || 'Failed to open file');
         } finally {
             setLoadingFileContent(false);
@@ -905,8 +1096,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         contentFit="cover"
                         transition={120}
                         cachePolicy="memory-disk"
-                        onError={(e: any) => {
-                            console.error('Photo failed to load:', (e as any)?.nativeEvent ?? e);
+                        onError={() => {
+                            // Photo failed to load, will show placeholder
                         }}
                         accessibilityLabel={photo.filename}
                     />
@@ -945,8 +1136,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         contentFit="cover"
                         transition={120}
                         cachePolicy="memory-disk"
-                        onError={(e: any) => {
-                            console.error('Photo failed to load:', (e as any)?.nativeEvent ?? e);
+                        onError={() => {
+                            // Photo failed to load, will show placeholder
                         }}
                         accessibilityLabel={photo.filename}
                     />
@@ -1005,8 +1196,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                         contentFit="cover"
                                         transition={120}
                                         cachePolicy="memory-disk"
-                                        onError={(_: any) => {
-                                            console.warn('Failed to load image preview.');
+                                        onError={() => {
+                                            // Image preview failed to load
                                         }}
                                         accessibilityLabel={file.filename}
                                     />
@@ -1129,10 +1320,15 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     // 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;
@@ -1147,13 +1343,29 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     title: file.filename,
                     subtitle: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
                     theme: theme as 'light' | 'dark',
-                    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 ? (
+                    selected: (selectMode || selectedIds.size > 0) && isSelected,
+                    // Hide action buttons when selecting (in selectMode or bulk operations mode)
+                    customContent: (!selectMode && selectedIds.size === 0) ? (
                         <View style={styles.groupedActions}>
                             {(isImage || isVideo || file.contentType.includes('pdf')) && (
                                 <TouchableOpacity
@@ -1191,6 +1403,92 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             });
     }, [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: FileMetadata, index: number) => {
         const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
 
@@ -1225,8 +1523,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         contentFit="cover"
                         transition={120}
                         cachePolicy="memory-disk"
-                        onError={(_: any) => {
-                            console.warn('Failed to load image preview for photo:', photo.id);
+                        onError={() => {
+                            // Image preview failed to load
                         }}
                         accessibilityLabel={photo.filename}
                     />
@@ -1270,6 +1568,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
         return (
             <ScrollView
+                ref={photoScrollViewRef}
                 style={styles.scrollView}
                 contentContainerStyle={styles.photoScrollContainer}
                 refreshControl={
@@ -1621,8 +1920,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                 contentFit="contain"
                                 transition={120}
                                 cachePolicy="memory-disk"
-                                onError={(e: any) => {
-                                    console.error('Image failed to load:', (e as any)?.nativeEvent ?? e);
+                                onError={() => {
+                                    // Image failed to load
                                 }}
                                 accessibilityLabel={openedFile.filename}
                             />
@@ -1741,13 +2040,190 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         </View>
     );
 
-    if (loading) {
+    // Professional Skeleton Loading Component with Advanced Shimmer Effect
+    const SkeletonLoader = 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 }: { width: number | string; height: number; borderRadius?: number; style?: any; delay?: number }) => {
+            const delayedTranslateX = shimmerAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [-skeletonContainerWidth * 2 + delay, skeletonContainerWidth * 2 + delay],
+            });
+
+        return (
+                <View
+                    style={[
+                        {
+                            width,
+                            height,
+                            borderRadius,
+                            backgroundColor: themeStyles.isDarkTheme ? '#1E1E1E' : '#F5F5F5',
+                            overflow: 'hidden',
+                            position: 'relative',
+                        },
+                        style,
+                    ]}
+                >
+                    {/* Base background */}
+                    <View
+                        style={{
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            backgroundColor: themeStyles.isDarkTheme ? '#1E1E1E' : '#F5F5F5',
+                        }}
+                    />
+                    {/* Shimmer gradient effect */}
+                    <Animated.View
+                        style={{
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            transform: [{ translateX: delayedTranslateX }],
+                        }}
+                    >
+                        <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,
+                            }}
+                        />
+                    </Animated.View>
+            </View>
+        );
+        };
+
+        // Skeleton file item matching GroupedSection structure
+        const SkeletonFileItem = ({ index }: { index: number }) => (
+            <View
+                style={[
+                    {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        paddingHorizontal: 16,
+                        paddingVertical: 12,
+                        backgroundColor: themeStyles.isDarkTheme ? '#121212' : '#FFFFFF',
+                        borderBottomWidth: StyleSheet.hairlineWidth,
+                        borderBottomColor: themeStyles.borderColor,
+                    },
+                ]}
+            >
+                {/* Icon/Image skeleton */}
+                <SkeletonBox width={44} height={44} borderRadius={8} delay={index * 50} />
+                
+                {/* Content skeleton */}
+                <View style={{ flex: 1, marginLeft: 12, justifyContent: 'center' }}>
+                    <SkeletonBox 
+                        width={index % 3 === 0 ? '85%' : index % 3 === 1 ? '70%' : '90%'} 
+                        height={16} 
+                        style={{ marginBottom: 8 }} 
+                        delay={index * 50 + 20}
+                    />
+                    <SkeletonBox 
+                        width={index % 2 === 0 ? '50%' : '60%'} 
+                        height={12} 
+                        delay={index * 50 + 40}
+                    />
+                </View>
+            </View>
+        );
+
         return (
-            <View style={[styles.container, styles.centerContent, { backgroundColor }]}>
-                <ActivityIndicator size="large" color={themeStyles.primaryColor} />
-                <Text style={[styles.loadingText, { color: themeStyles.textColor }]}>Loading files...</Text>
+            <View style={[styles.container, { backgroundColor }]}>
+                {/* Header Skeleton */}
+                <View style={[styles.header, { borderBottomColor: themeStyles.borderColor, borderBottomWidth: StyleSheet.hairlineWidth }]}>
+                    <SkeletonBox width={44} height={44} borderRadius={12} />
+                    <View style={[styles.headerTitleContainer, { flex: 1 }]}>
+                        <SkeletonBox width={140} height={20} style={{ marginBottom: 6 }} />
+                        <SkeletonBox width={100} height={14} />
+                    </View>
+                    <SkeletonBox width={44} height={44} borderRadius={12} />
+                </View>
+
+                {/* Controls Bar Skeleton */}
+                <View style={styles.controlsBar}>
+                    <SkeletonBox width={100} height={36} borderRadius={18} />
+                    <SkeletonBox width={44} height={44} borderRadius={22} />
+                </View>
+
+                {/* Search Bar Skeleton */}
+                <View style={[styles.searchContainer, { 
+                    backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF', 
+                    borderColor: themeStyles.borderColor,
+                    borderWidth: StyleSheet.hairlineWidth,
+                }]}>
+                    <SkeletonBox width="100%" height={44} borderRadius={12} />
+                </View>
+
+                {/* Stats Container Skeleton */}
+                <View style={[styles.statsContainer, { 
+                    backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF', 
+                    borderColor: themeStyles.borderColor,
+                    borderWidth: StyleSheet.hairlineWidth,
+                }]}>
+                    {[1, 2, 3].map((i) => (
+                        <View key={i} style={styles.statItem}>
+                            <SkeletonBox width={50} height={20} style={{ marginBottom: 4 }} delay={i * 30} />
+                            <SkeletonBox width={40} height={14} delay={i * 30 + 15} />
+                        </View>
+                    ))}
+                </View>
+
+                {/* File List Skeleton - Matching GroupedSection */}
+                <ScrollView 
+                    style={styles.scrollView} 
+                    contentContainerStyle={styles.scrollContainer}
+                    showsVerticalScrollIndicator={false}
+                >
+                    <View style={{
+                        backgroundColor: themeStyles.isDarkTheme ? '#121212' : '#FFFFFF',
+                        borderRadius: 12,
+                        overflow: 'hidden',
+                        marginHorizontal: 16,
+                        marginTop: 8,
+                    }}>
+                        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+                            <SkeletonFileItem key={i} index={i} />
+                        ))}
+                    </View>
+                </ScrollView>
             </View>
         );
+    });
+
+    if (loading) {
+        return <SkeletonLoader />;
     }
 
     // If a file is opened, show the file viewer
@@ -1762,16 +2238,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     return (
         <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,
-            } : {})}
         >
             <Header
                 title={selectMode ? (multiSelect ? `${selectedIds.size}${maxSelection ? '/' + maxSelection : ''} Selected` : 'Select a File') : (viewMode === 'photos' ? 'Photos' : 'File Management')}
@@ -1789,6 +2260,36 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         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}
@@ -1799,41 +2300,119 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             />
 
             <View style={styles.controlsBar}>
-                <View style={[
-                    styles.viewModeToggle,
-                    {
+                <ScrollView 
+                    horizontal 
+                    showsHorizontalScrollIndicator={false}
+                    style={styles.viewModeScroll}
+                >
+                    <View style={[
+                        styles.viewModeToggle,
+                        {
+                            backgroundColor: themeStyles.isDarkTheme ? '#181818' : '#FFFFFF',
+                            borderWidth: 1,
+                            borderColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#E8E9EA',
+                        }
+                    ]}>
+                        <TouchableOpacity
+                            style={[
+                                styles.viewModeButton,
+                                viewMode === 'all' && { backgroundColor: themeStyles.primaryColor }
+                            ]}
+                            onPress={() => setViewMode('all')}
+                        >
+                            <Ionicons
+                                name="folder"
+                                size={18}
+                                color={viewMode === 'all' ? '#FFFFFF' : themeStyles.textColor}
+                            />
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={[
+                                styles.viewModeButton,
+                                viewMode === 'photos' && { backgroundColor: themeStyles.primaryColor }
+                            ]}
+                            onPress={() => setViewMode('photos')}
+                        >
+                            <Ionicons
+                                name="images"
+                                size={18}
+                                color={viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor}
+                            />
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={[
+                                styles.viewModeButton,
+                                viewMode === 'videos' && { backgroundColor: themeStyles.primaryColor }
+                            ]}
+                            onPress={() => setViewMode('videos')}
+                        >
+                            <Ionicons
+                                name="videocam"
+                                size={18}
+                                color={viewMode === 'videos' ? '#FFFFFF' : themeStyles.textColor}
+                            />
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={[
+                                styles.viewModeButton,
+                                viewMode === 'documents' && { backgroundColor: themeStyles.primaryColor }
+                            ]}
+                            onPress={() => setViewMode('documents')}
+                        >
+                            <Ionicons
+                                name="document-text"
+                                size={18}
+                                color={viewMode === 'documents' ? '#FFFFFF' : themeStyles.textColor}
+                            />
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={[
+                                styles.viewModeButton,
+                                viewMode === 'audio' && { backgroundColor: themeStyles.primaryColor }
+                            ]}
+                            onPress={() => setViewMode('audio')}
+                        >
+                            <Ionicons
+                                name="musical-notes"
+                                size={18}
+                                color={viewMode === 'audio' ? '#FFFFFF' : themeStyles.textColor}
+                            />
+                        </TouchableOpacity>
+                    </View>
+                </ScrollView>
+                <TouchableOpacity
+                    style={[styles.sortButton, { 
                         backgroundColor: themeStyles.isDarkTheme ? '#181818' : '#FFFFFF',
-                        borderWidth: 1,
                         borderColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#E8E9EA',
-                    }
-                ]}>
-                    <TouchableOpacity
-                        style={[
-                            styles.viewModeButton,
-                            viewMode === 'all' && { backgroundColor: themeStyles.primaryColor }
-                        ]}
-                        onPress={() => setViewMode('all')}
-                    >
-                        <Ionicons
-                            name="folder"
-                            size={18}
-                            color={viewMode === 'all' ? '#FFFFFF' : themeStyles.textColor}
-                        />
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                        style={[
-                            styles.viewModeButton,
-                            viewMode === 'photos' && { backgroundColor: themeStyles.primaryColor }
-                        ]}
-                        onPress={() => setViewMode('photos')}
-                    >
-                        <Ionicons
-                            name="images"
-                            size={18}
-                            color={viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor}
-                        />
-                    </TouchableOpacity>
-                </View>
+                    }]}
+                    onPress={() => {
+                        // Cycle through sort options: date -> size -> name -> type -> date
+                        const sortOrder: Array<'date' | 'size' | 'name' | 'type'> = ['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');
+                        }
+                    }}
+                >
+                    <Ionicons
+                        name={sortOrder === 'asc' ? 'arrow-up' : 'arrow-down'}
+                        size={18}
+                        color={themeStyles.textColor}
+                    />
+                    <Ionicons
+                        name={
+                            sortBy === 'date' ? 'calendar' :
+                            sortBy === 'size' ? 'resize' :
+                            sortBy === 'name' ? 'text' : 'document'
+                        }
+                        size={16}
+                        color={themeStyles.textColor}
+                        style={{ marginLeft: 4 }}
+                    />
+                </TouchableOpacity>
                 {user?.id === targetUserId && (!selectMode || (selectMode && allowUploadInSelectMode)) && (
                     <TouchableOpacity
                         style={[styles.uploadButton, { backgroundColor: themeStyles.primaryColor }]}
@@ -1923,6 +2502,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 renderPhotoGrid()
             ) : (
                 <ScrollView
+                    ref={scrollViewRef}
                     style={styles.scrollView}
                     contentContainerStyle={styles.scrollContainer}
                     refreshControl={
@@ -1990,16 +2570,21 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             {/* Selection bar removed; actions are now in header */}
             {/* Global loadingMore bar removed; now inline in scroll areas */}
 
-            {/* Drag and Drop Overlay */}
+            {/* Drag and Drop Overlay - Enhanced */}
             {isDragging && Platform.OS === 'web' && (
                 <View style={styles.dragDropOverlay}>
-                    <View style={styles.dragDropContent}>
-                        <Ionicons name="cloud-upload" size={64} color={themeStyles.primaryColor} />
+                    <View style={[styles.dragDropContent, {
+                        backgroundColor: themeStyles.isDarkTheme ? 'rgba(30, 30, 30, 0.98)' : 'rgba(255, 255, 255, 0.98)',
+                        borderColor: themeStyles.primaryColor,
+                    }]}>
+                        <View style={[styles.dragDropIconContainer, { backgroundColor: `${themeStyles.primaryColor}15` }]}>
+                            <Ionicons name="cloud-upload" size={64} color={themeStyles.primaryColor} />
+                        </View>
                         <Text style={[styles.dragDropTitle, { color: themeStyles.primaryColor }]}>
                             Drop files to upload
                         </Text>
                         <Text style={[styles.dragDropSubtitle, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                            Release to upload{uploadProgress ? ` (${uploadProgress.current}/${uploadProgress.total})` : ' multiple files'}
+                            Release to upload multiple files
                         </Text>
                     </View>
                 </View>
@@ -2499,36 +3084,151 @@ const styles = StyleSheet.create({
         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',
+        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
@@ -2705,6 +3405,10 @@ const styles = StyleSheet.create({
         paddingBottom: 4,
         gap: 12,
     },
+    viewModeScroll: {
+        flex: 1,
+        maxWidth: '80%',
+    },
     viewModeToggle: {
         flexDirection: 'row',
         borderRadius: 24,
@@ -2720,6 +3424,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: {
@@ -2826,6 +3540,18 @@ const styles = StyleSheet.create({
         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;