@oxyhq/services 5.10.15 → 5.11.1

package/src/ui/screens/FileManagementScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import {
     View,
     Text,
@@ -11,39 +11,26 @@ import {
     Dimensions,
     Modal,
     TextInput,
-    Image,
+    Image, // kept for Image.getSize only
 } from 'react-native';
-import { BaseScreenProps } from '../navigation/types';
+import { Image as ExpoImage } from 'expo-image';
+import type { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
-import { FileMetadata } from '../../models/interfaces';
+import type { FileMetadata } from '../../models/interfaces';
+import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
+import Header from '../components/Header';
+import { GroupedSection } from '../components';
 
 interface FileManagementScreenProps extends BaseScreenProps {
     userId?: string;
 }
 
 // Add this helper function near the top (after imports):
-async function uploadFileRaw(file: File | Blob, userId: string) {
-    const fileName = (file as any).name || 'upload.bin';
-    const mimeType = (file as any).type || 'application/octet-stream';
-
-    const res = await fetch('/api/files/upload-raw', {
-        method: 'POST',
-        headers: {
-            'Content-Type': mimeType,
-            'X-File-Name': encodeURIComponent(fileName),
-            'X-User-Id': userId,
-        },
-        body: file,
-        credentials: 'include', // if you use cookies/session
-    });
-
-    if (!res.ok) {
-        throw new Error(await res.text());
-    }
-    return await res.json();
+async function uploadFileRaw(file: File | Blob, userId: string, oxyServices: any) {
+    return await oxyServices.uploadRawFile(file);
 }
 
 const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
@@ -67,12 +54,12 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         console.log('[FileManagementScreen] Available content width:', availableContentWidth);
         console.log('[FileManagementScreen] Spacing fix applied: 4px uniform gap both horizontal and vertical');
     }, [containerWidth]);
-    const [files, setFiles] = useState<FileMetadata[]>([]);
+    const files = useFiles();
+    const uploading = useUploadingStore();
+    const uploadProgress = useUploadAggregateProgress();
+    const deleting = useDeletingStore();
     const [loading, setLoading] = useState(true);
     const [refreshing, setRefreshing] = useState(false);
-    const [uploading, setUploading] = useState(false);
-    const [uploadProgress, setUploadProgress] = useState<{ current: number, total: number } | null>(null);
-    const [deleting, setDeleting] = useState<string | null>(null);
     const [selectedFile, setSelectedFile] = useState<FileMetadata | null>(null);
     const [showFileDetails, setShowFileDetails] = useState(false);
     const [openedFile, setOpenedFile] = useState<FileMetadata | null>(null);
@@ -81,11 +68,74 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
     const [viewMode, setViewMode] = useState<'all' | 'photos'>('all');
     const [searchQuery, setSearchQuery] = useState('');
-    const [filteredFiles, setFilteredFiles] = useState<FileMetadata[]>([]);
+    // Derived filtered files (avoid setState loops)
+    const filteredFiles = useMemo(() => {
+        let filteredByMode = files;
+        if (viewMode === 'photos') {
+            filteredByMode = files.filter(file => file.contentType.startsWith('image/'));
+        }
+        if (!searchQuery.trim()) {
+            return filteredByMode;
+        }
+        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]);
     const [isDragging, setIsDragging] = useState(false);
     const [photoDimensions, setPhotoDimensions] = useState<{ [key: string]: { width: number, height: number } }>({});
     const [loadingDimensions, setLoadingDimensions] = useState(false);
     const [hoveredPreview, setHoveredPreview] = useState<string | null>(null);
+    const uploadStartRef = useRef<number | null>(null);
+    const MIN_BANNER_MS = 600;
+    const endUpload = useCallback(() => {
+        const started = uploadStartRef.current;
+        const elapsed = started ? Date.now() - started : MIN_BANNER_MS;
+        const remaining = elapsed < MIN_BANNER_MS ? MIN_BANNER_MS - elapsed : 0;
+        setTimeout(() => {
+            useFileStore.getState().setUploading(false);
+            uploadStartRef.current = null;
+        }, remaining);
+    }, []);
+
+    // Helper to safely request a thumbnail variant only for image mime types.
+    // Prevents backend warnings: "Variant thumb not supported for mime application/pdf".
+    const getSafeDownloadUrl = useCallback(
+        (file: FileMetadata, variant: string = 'thumb') => {
+            const isImage = file.contentType.startsWith('image/');
+            const isVideo = file.contentType.startsWith('video/');
+
+            // Prefer explicit variant key if variants metadata present
+            if (file.variants && file.variants.length > 0) {
+                // For videos, try 'poster' regardless of requested variant
+                if (isVideo) {
+                    const poster = file.variants.find(v => v.type === 'poster');
+                    if (poster) return oxyServices.getFileDownloadUrl(file.id, 'poster');
+                }
+                if (isImage) {
+                    const desired = file.variants.find(v => v.type === variant);
+                    if (desired) return oxyServices.getFileDownloadUrl(file.id, variant);
+                }
+            }
+
+            if (isImage) {
+                return oxyServices.getFileDownloadUrl(file.id, variant);
+            }
+            if (isVideo) {
+                // Fallback to poster if backend supports implicit generation
+                try {
+                    return oxyServices.getFileDownloadUrl(file.id, 'poster');
+                } catch {
+                    return oxyServices.getFileDownloadUrl(file.id);
+                }
+            }
+            // Other mime types: no variant
+            return oxyServices.getFileDownloadUrl(file.id);
+        },
+        [oxyServices]
+    );
 
     // Memoize theme-related calculations to prevent unnecessary recalculations
     const themeStyles = useMemo(() => {
@@ -108,18 +158,33 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     const targetUserId = userId || user?.id;
 
-    const loadFiles = useCallback(async (isRefresh = false) => {
+    const storeSetUploading = useFileStore(s => s.setUploading);
+    const storeSetUploadProgress = useFileStore(s => s.setUploadProgress);
+    const storeSetDeleting = useFileStore(s => s.setDeleting);
+
+    const loadFiles = useCallback(async (mode: 'initial' | 'refresh' | 'silent' = 'initial') => {
         if (!targetUserId) return;
 
         try {
-            if (isRefresh) {
+            if (mode === 'refresh') {
                 setRefreshing(true);
-            } else {
+            } else if (mode === 'initial') {
                 setLoading(true);
             }
 
-            const response = await oxyServices.listUserFiles(targetUserId);
-            setFiles(response.files || []);
+            const response = await oxyServices.listUserFiles();
+            const assets: FileMetadata[] = (response.files || []).map((f: any) => ({
+                id: f.id,
+                filename: f.originalName || f.sha256,
+                contentType: f.mime,
+                length: f.size,
+                chunkSize: 0,
+                uploadDate: f.createdAt,
+                metadata: f.metadata || {},
+                variants: f.variants || [],
+            }));
+            // Merge to preserve existing order & allow incremental updates
+            useFileStore.getState().setFiles(assets, { merge: true });
         } catch (error: any) {
             console.error('Failed to load files:', error);
             toast.error(error.message || 'Failed to load files');
@@ -129,28 +194,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
     }, [targetUserId, oxyServices]);
 
-    // Filter files based on search query and view mode
-    useEffect(() => {
-        let filteredByMode = files;
-
-        // Filter by view mode first
-        if (viewMode === 'photos') {
-            filteredByMode = files.filter(file => file.contentType.startsWith('image/'));
-        }
-
-        // Then filter by search query
-        if (!searchQuery.trim()) {
-            setFilteredFiles(filteredByMode);
-        } else {
-            const query = searchQuery.toLowerCase();
-            const filtered = filteredByMode.filter(file =>
-                file.filename.toLowerCase().includes(query) ||
-                file.contentType.toLowerCase().includes(query) ||
-                (file.metadata?.description && file.metadata.description.toLowerCase().includes(query))
-            );
-            setFilteredFiles(filtered);
-        }
-    }, [files, searchQuery, viewMode]);
+    // (removed effect; filteredFiles is memoized)
 
     // Load photo dimensions for justified grid
     const loadPhotoDimensions = useCallback(async (photos: FileMetadata[]) => {
@@ -172,7 +216,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             await Promise.all(
                 photosToLoad.map(async (photo) => {
                     try {
-                        const downloadUrl = oxyServices.getFileDownloadUrl(photo.id);
+                        const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
 
                         if (Platform.OS === 'web') {
                             const img = new (window as any).Image();
@@ -249,7 +293,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         if (selectedFiles.length === 0) return;
         if (!targetUserId) return; // Guard clause to ensure userId is defined
         try {
-            setUploadProgress({ current: 0, total: selectedFiles.length });
+            storeSetUploadProgress({ current: 0, total: selectedFiles.length });
             const maxSize = 50 * 1024 * 1024; // 50MB
             const oversizedFiles = selectedFiles.filter(file => file.size > maxSize);
             if (oversizedFiles.length > 0) {
@@ -261,9 +305,42 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             let failureCount = 0;
             const errors: string[] = [];
             for (let i = 0; i < selectedFiles.length; i++) {
-                setUploadProgress({ current: i + 1, total: selectedFiles.length });
+                storeSetUploadProgress({ current: i + 1, total: selectedFiles.length });
                 try {
-                    await uploadFileRaw(selectedFiles[i], targetUserId);
+                    const raw = selectedFiles[i];
+                    const optimisticId = `temp-${Date.now()}-${i}`;
+                    const optimisticFile: FileMetadata = {
+                        id: optimisticId,
+                        filename: raw.name,
+                        contentType: raw.type || 'application/octet-stream',
+                        length: raw.size,
+                        chunkSize: 0,
+                        uploadDate: new Date().toISOString(),
+                        metadata: { uploading: true },
+                        variants: [],
+                    };
+                    useFileStore.getState().addFile(optimisticFile, { prepend: true });
+                    const result = await uploadFileRaw(raw, targetUserId, oxyServices);
+                    // Attempt to refresh file list incrementally – fetch single file metadata if API allows
+                    if (result?.file || result?.files?.[0]) {
+                        const f = result.file || result.files[0];
+                        const merged: FileMetadata = {
+                            id: f.id,
+                            filename: f.originalName || f.sha256 || raw.name,
+                            contentType: f.mime || raw.type || 'application/octet-stream',
+                            length: f.size || raw.size,
+                            chunkSize: 0,
+                            uploadDate: f.createdAt || new Date().toISOString(),
+                            metadata: f.metadata || {},
+                            variants: f.variants || [],
+                        };
+                        // Remove optimistic then add real
+                        useFileStore.getState().removeFile(optimisticId);
+                        useFileStore.getState().addFile(merged, { prepend: true });
+                    } else {
+                        // Fallback: will reconcile on later list refresh
+                        useFileStore.getState().updateFile(optimisticId, { metadata: { uploading: false } as any });
+                    }
                     successCount++;
                 } catch (error: any) {
                     failureCount++;
@@ -277,21 +354,21 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 const errorMessage = `${failureCount} file(s) failed to upload${errors.length > 0 ? ':\n' + errors.slice(0, 3).join('\n') + (errors.length > 3 ? '\n...' : '') : ''}`;
                 toast.error(errorMessage);
             }
-            setTimeout(async () => {
-                await loadFiles();
-            }, 500);
+            // 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 {
-            setUploadProgress(null);
+            storeSetUploadProgress(null);
         }
     };
 
     const handleFileUpload = async () => {
         try {
-            setUploading(true);
-            setUploadProgress(null);
+            uploadStartRef.current = Date.now();
+            storeSetUploading(true);
+            storeSetUploadProgress(null);
 
             if (Platform.OS === 'web') {
                 // Web file picker implementation
@@ -299,10 +376,26 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 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
 
                 input.onchange = async (e: any) => {
-                    const selectedFiles = Array.from(e.target.files) as File[];
+                    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();
                 };
 
                 input.click();
@@ -320,8 +413,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } catch (error: any) {
             toast.error(error.message || 'Failed to upload file');
         } finally {
-            setUploading(false);
-            setUploadProgress(null);
+            // 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
         }
     };
 
@@ -338,7 +434,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             console.log('Deleting file:', { fileId, filename });
             console.log('Target user ID:', targetUserId);
             console.log('Current user ID:', user?.id);
-            setDeleting(fileId);
+            storeSetDeleting(fileId);
 
             const result = await oxyServices.deleteFile(fileId);
             console.log('Delete result:', result);
@@ -346,9 +442,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             toast.success('File deleted successfully');
 
             // Reload files after successful deletion
-            setTimeout(async () => {
-                await loadFiles();
-            }, 500);
+            // Optimistic remove
+            useFileStore.getState().removeFile(fileId);
+            // Silent background reconcile
+            setTimeout(() => loadFiles('silent'), 800);
         } catch (error: any) {
             console.error('Delete error:', error);
             console.error('Error details:', error.response?.data || error.message);
@@ -357,16 +454,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             if (error.message?.includes('File not found') || error.message?.includes('404')) {
                 toast.error('File not found. It may have already been deleted.');
                 // Still reload files to refresh the list
-                setTimeout(async () => {
-                    await loadFiles();
-                }, 500);
+                setTimeout(() => loadFiles('silent'), 800);
             } else if (error.message?.includes('permission') || error.message?.includes('403')) {
                 toast.error('You do not have permission to delete this file.');
             } else {
                 toast.error(error.message || 'Failed to delete file');
             }
         } finally {
-            setDeleting(null);
+            storeSetDeleting(null);
         }
     };
 
@@ -378,6 +473,13 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
     };
 
+    const handleDragEnter = (e: any) => {
+        if (Platform.OS === 'web' && user?.id === targetUserId) {
+            e.preventDefault();
+            setIsDragging(true);
+        }
+    };
+
     const handleDragLeave = (e: any) => {
         if (Platform.OS === 'web') {
             e.preventDefault();
@@ -385,19 +487,54 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
     };
 
+    // Global drag listeners (web) to catch drags outside component bounds
+    useEffect(() => {
+        if (Platform.OS !== 'web' || user?.id !== targetUserId) return;
+        const onDocDragEnter = (e: any) => {
+            if (e?.dataTransfer?.types?.includes('Files')) setIsDragging(true);
+        };
+        const onDocDragOver = (e: any) => {
+            if (e?.dataTransfer?.types?.includes('Files')) {
+                e.preventDefault();
+                setIsDragging(true);
+            }
+        };
+        const onDocDrop = (e: any) => {
+            if (e?.dataTransfer?.files?.length) {
+                e.preventDefault();
+                setIsDragging(false);
+            }
+        };
+        const onDocDragLeave = (e: any) => {
+            if (!e.relatedTarget && e.screenX === 0 && e.screenY === 0) setIsDragging(false);
+        };
+        document.addEventListener('dragenter', onDocDragEnter);
+        document.addEventListener('dragover', onDocDragOver);
+        document.addEventListener('drop', onDocDrop);
+        document.addEventListener('dragleave', onDocDragLeave);
+        return () => {
+            document.removeEventListener('dragenter', onDocDragEnter);
+            document.removeEventListener('dragover', onDocDragOver);
+            document.removeEventListener('drop', onDocDrop);
+            document.removeEventListener('dragleave', onDocDragLeave);
+        };
+    }, [user?.id, targetUserId]);
+
     const handleDrop = async (e: any) => {
         if (Platform.OS === 'web' && user?.id === targetUserId) {
             e.preventDefault();
             setIsDragging(false);
-            setUploading(true);
+            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 {
-                setUploading(false);
+                endUpload();
             }
         }
     };
@@ -455,7 +592,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         const k = 1024;
         const sizes = ['Bytes', 'KB', 'MB', 'GB'];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     };
 
     const getFileIcon = (contentType: string): string => {
@@ -532,7 +669,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     };
 
     const renderSimplePhotoItem = useCallback((photo: FileMetadata, index: number) => {
-        const downloadUrl = oxyServices.getFileDownloadUrl(photo.id);
+        const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
 
         // Calculate photo item width based on actual container size from bottom sheet
         let itemsPerRow = 3; // Default for mobile
@@ -560,45 +697,24 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 activeOpacity={0.8}
             >
                 <View style={styles.simplePhotoContainer}>
-                    {Platform.OS === 'web' ? (
-                        <img
-                            src={downloadUrl}
-                            alt={photo.filename}
-                            style={{
-                                width: '100%',
-                                height: '100%',
-                                objectFit: 'cover',
-                                borderRadius: 8,
-                                transition: 'transform 0.2s ease',
-                            }}
-                            loading="lazy"
-                            onError={(e) => {
-                                console.error('Photo failed to load:', e);
-                            }}
-                            onMouseEnter={(e) => {
-                                e.currentTarget.style.transform = 'scale(1.05)';
-                            }}
-                            onMouseLeave={(e) => {
-                                e.currentTarget.style.transform = 'scale(1)';
-                            }}
-                        />
-                    ) : (
-                        <Image
-                            source={{ uri: downloadUrl }}
-                            style={styles.simplePhotoImage}
-                            resizeMode="cover"
-                            onError={(e) => {
-                                console.error('Photo failed to load:', e);
-                            }}
-                        />
-                    )}
+                    <ExpoImage
+                        source={{ uri: downloadUrl }}
+                        style={styles.simplePhotoImage}
+                        contentFit="cover"
+                        transition={120}
+                        cachePolicy="memory-disk"
+                        onError={(e: any) => {
+                            console.error('Photo failed to load:', (e as any)?.nativeEvent ?? e);
+                        }}
+                        accessibilityLabel={photo.filename}
+                    />
                 </View>
             </TouchableOpacity>
         );
     }, [oxyServices, containerWidth]);
 
     const renderJustifiedPhotoItem = useCallback((photo: FileMetadata, width: number, height: number, isLast: boolean) => {
-        const downloadUrl = oxyServices.getFileDownloadUrl(photo.id);
+        const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
 
         return (
             <TouchableOpacity
@@ -614,50 +730,32 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 activeOpacity={0.8}
             >
                 <View style={styles.justifiedPhotoContainer}>
-                    {Platform.OS === 'web' ? (
-                        <img
-                            src={downloadUrl}
-                            alt={photo.filename}
-                            style={{
-                                width: '100%',
-                                height: '100%',
-                                objectFit: 'cover',
-                                borderRadius: 6,
-                                transition: 'transform 0.2s ease, box-shadow 0.2s ease',
-                            }}
-                            loading="lazy"
-                            onError={(e) => {
-                                console.error('Photo failed to load:', e);
-                            }}
-                            onMouseEnter={(e) => {
-                                e.currentTarget.style.transform = 'scale(1.02)';
-                                e.currentTarget.style.boxShadow = '0 8px 25px rgba(0,0,0,0.15)';
-                                e.currentTarget.style.zIndex = '10';
-                            }}
-                            onMouseLeave={(e) => {
-                                e.currentTarget.style.transform = 'scale(1)';
-                                e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
-                                e.currentTarget.style.zIndex = '1';
-                            }}
-                        />
-                    ) : (
-                        <Image
-                            source={{ uri: downloadUrl }}
-                            style={styles.justifiedPhotoImage}
-                            resizeMode="cover"
-                            onError={(e) => {
-                                console.error('Photo failed to load:', e);
-                            }}
-                        />
-                    )}
+                    <ExpoImage
+                        source={{ uri: downloadUrl }}
+                        style={styles.justifiedPhotoImage}
+                        contentFit="cover"
+                        transition={120}
+                        cachePolicy="memory-disk"
+                        onError={(e: any) => {
+                            console.error('Photo failed to load:', (e as any)?.nativeEvent ?? e);
+                        }}
+                        accessibilityLabel={photo.filename}
+                    />
                 </View>
             </TouchableOpacity>
         );
     }, [oxyServices]);
 
+    // Run initial load once per targetUserId change to avoid accidental loops
+    const lastLoadedFor = useRef<string | undefined>(undefined);
     useEffect(() => {
-        loadFiles();
-    }, [loadFiles]);
+        const key = targetUserId || 'anonymous';
+        if (lastLoadedFor.current !== key) {
+            lastLoadedFor.current = key;
+            loadFiles('initial');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [targetUserId]);
 
     const renderFileItem = (file: FileMetadata) => {
         const isImage = file.contentType.startsWith('image/');
@@ -687,37 +785,17 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                 })}
                             >
                                 {isImage && (
-                                    Platform.OS === 'web' ? (
-                                        <img
-                                            src={oxyServices.getFileDownloadUrl(file.id)}
-                                            style={{
-                                                width: '100%',
-                                                height: '100%',
-                                                objectFit: 'cover',
-                                                borderRadius: 8,
-                                                transition: 'transform 0.2s ease',
-                                                transform: hoveredPreview === file.id ? 'scale(1.05)' : 'scale(1)',
-                                            }}
-                                            onError={(e) => {
-                                                // Show fallback icon if image fails to load
-                                                e.currentTarget.style.display = 'none';
-                                                const fallbackElement = e.currentTarget.parentElement?.querySelector('[data-fallback="true"]');
-                                                if (fallbackElement) {
-                                                    (fallbackElement as HTMLElement).style.display = 'flex';
-                                                }
-                                            }}
-                                        />
-                                    ) : (
-                                        <Image
-                                            source={{ uri: oxyServices.getFileDownloadUrl(file.id) }}
-                                            style={styles.previewImage}
-                                            resizeMode="cover"
-                                            onError={() => {
-                                                // For React Native, you might want to set an error state
-                                                console.warn('Failed to load image preview for file:', file.id);
-                                            }}
-                                        />
-                                    )
+                                    <ExpoImage
+                                        source={{ uri: getSafeDownloadUrl(file, 'thumb') }}
+                                        style={styles.previewImage}
+                                        contentFit="cover"
+                                        transition={120}
+                                        cachePolicy="memory-disk"
+                                        onError={(_: any) => {
+                                            console.warn('Failed to load image preview.');
+                                        }}
+                                        accessibilityLabel={file.filename}
+                                    />
                                 )}
                                 {isPDF && (
                                     <View style={styles.pdfPreview}>
@@ -726,9 +804,21 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                     </View>
                                 )}
                                 {isVideo && (
-                                    <View style={styles.videoPreview}>
-                                        <Ionicons name="play-circle" size={32} color={themeStyles.primaryColor} />
-                                        <Text style={[styles.videoLabel, { color: themeStyles.primaryColor }]}>VIDEO</Text>
+                                    <View style={styles.videoPreviewWrapper}>
+                                        <ExpoImage
+                                            source={{ uri: getSafeDownloadUrl(file, 'thumb') }}
+                                            style={styles.videoPosterImage}
+                                            contentFit="cover"
+                                            transition={120}
+                                            cachePolicy="memory-disk"
+                                            onError={(_: any) => {
+                                                // If thumbnail not available, we still show icon overlay
+                                            }}
+                                            accessibilityLabel={file.filename + ' video thumbnail'}
+                                        />
+                                        <View style={styles.videoOverlay}>
+                                            <Ionicons name="play" size={24} color="#FFFFFF" />
+                                        </View>
                                     </View>
                                 )}
                                 {/* Fallback icon (hidden by default for images) */}
@@ -816,8 +906,69 @@ 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) // placeholder for future filtering
+            .sort((a, b) => new Date(b.uploadDate).getTime() - new Date(a.uploadDate).getTime())
+            .map((file) => {
+                const isImage = file.contentType.startsWith('image/');
+                const isVideo = file.contentType.startsWith('video/');
+                const hasPreview = isImage || isVideo;
+                const previewUrl = hasPreview ? (isVideo ? getSafeDownloadUrl(file, 'poster') : getSafeDownloadUrl(file, 'thumb')) : undefined;
+                return {
+                    id: file.id,
+                    image: previewUrl,
+                    imageSize: 44,
+                    icon: !previewUrl ? getFileIcon(file.contentType) : undefined,
+                    iconColor: themeStyles.primaryColor,
+                    title: file.filename,
+                    subtitle: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
+                    theme: theme as 'light' | 'dark',
+                    onPress: () => handleFileOpen(file),
+                    showChevron: false,
+                    dense: true,
+                    multiRow: !!file.metadata?.description,
+                    customContent: (
+                        <View style={styles.groupedActions}>
+                            {(isImage || isVideo || file.contentType.includes('pdf')) && (
+                                <TouchableOpacity
+                                    style={[styles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
+                                    onPress={() => handleFileOpen(file)}
+                                >
+                                    <Ionicons name="eye" size={18} color={themeStyles.primaryColor} />
+                                </TouchableOpacity>
+                            )}
+                            <TouchableOpacity
+                                style={[styles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0' }]}
+                                onPress={() => handleFileDownload(file.id, file.filename)}
+                            >
+                                <Ionicons name="download" size={18} color={themeStyles.primaryColor} />
+                            </TouchableOpacity>
+                            <TouchableOpacity
+                                style={[styles.groupedActionBtn, { backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE' }]}
+                                onPress={() => handleFileDelete(file.id, file.filename)}
+                                disabled={deleting === file.id}
+                            >
+                                {deleting === file.id ? (
+                                    <ActivityIndicator size="small" color={themeStyles.dangerColor} />
+                                ) : (
+                                    <Ionicons name="trash" size={18} color={themeStyles.dangerColor} />
+                                )}
+                            </TouchableOpacity>
+                        </View>
+                    ),
+                    customContentBelow: file.metadata?.description ? (
+                        <Text style={[styles.groupedDescription, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666' }]} numberOfLines={2}>
+                            {file.metadata.description}
+                        </Text>
+                    ) : undefined,
+                } as any; // GroupedSectionItem shape
+            });
+    }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrl]);
+
     const renderPhotoItem = (photo: FileMetadata, index: number) => {
-        const downloadUrl = oxyServices.getFileDownloadUrl(photo.id);
+        const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
 
         // Calculate photo item width based on actual container size from bottom sheet
         let itemsPerRow = 3; // Default for mobile
@@ -844,39 +995,17 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 activeOpacity={0.8}
             >
                 <View style={styles.photoContainer}>
-                    {Platform.OS === 'web' ? (
-                        <img
-                            src={downloadUrl}
-                            alt={photo.filename}
-                            style={{
-                                width: '100%',
-                                height: '100%',
-                                objectFit: 'cover',
-                                borderRadius: 8,
-                                transition: 'transform 0.2s ease',
-                            }}
-                            loading="lazy"
-                            onError={(e) => {
-                                console.error('Photo failed to load:', e);
-                                // Could replace with placeholder image
-                            }}
-                            onMouseEnter={(e) => {
-                                e.currentTarget.style.transform = 'scale(1.02)';
-                            }}
-                            onMouseLeave={(e) => {
-                                e.currentTarget.style.transform = 'scale(1)';
-                            }}
-                        />
-                    ) : (
-                        <Image
-                            source={{ uri: downloadUrl }}
-                            style={styles.photoImage}
-                            resizeMode="cover"
-                            onError={(e) => {
-                                console.error('Photo failed to load:', e);
-                            }}
-                        />
-                    )}
+                    <ExpoImage
+                        source={{ uri: downloadUrl }}
+                        style={styles.photoImage}
+                        contentFit="cover"
+                        transition={120}
+                        cachePolicy="memory-disk"
+                        onError={(_: any) => {
+                            console.warn('Failed to load image preview for photo:', photo.id);
+                        }}
+                        accessibilityLabel={photo.filename}
+                    />
                 </View>
             </TouchableOpacity>
         );
@@ -890,12 +1019,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 <View style={styles.emptyState}>
                     <Ionicons name="images-outline" size={64} color={themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'} />
                     <Text style={[styles.emptyStateTitle, { color: themeStyles.textColor }]}>No Photos Yet</Text>
-                    <Text style={[styles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                        {user?.id === targetUserId
+                    <Text style={[styles.emptyStateDescription, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}> {
+                        user?.id === targetUserId
                             ? `Upload photos to get started. You can select multiple photos at once${Platform.OS === 'web' ? ' or drag & drop them here.' : '.'}`
                             : "This user hasn't uploaded any photos yet"
-                        }
-                    </Text>
+                    } </Text>
                     {user?.id === targetUserId && (
                         <TouchableOpacity
                             style={[styles.emptyStateButton, { backgroundColor: themeStyles.primaryColor }]}
@@ -923,7 +1051,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 refreshControl={
                     <RefreshControl
                         refreshing={refreshing}
-                        onRefresh={() => loadFiles(true)}
+                        onRefresh={() => loadFiles('refresh')}
                         tintColor={themeStyles.primaryColor}
                     />
                 }
@@ -932,9 +1060,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 {loadingDimensions && (
                     <View style={styles.dimensionsLoadingIndicator}>
                         <ActivityIndicator size="small" color={themeStyles.primaryColor} />
-                        <Text style={[styles.dimensionsLoadingText, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
-                            Loading photo layout...
-                        </Text>
+                        <Text style={[styles.dimensionsLoadingText, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>Loading photo layout...</Text>
                     </View>
                 )}
 
@@ -983,15 +1109,17 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         photoDimensions: { [key: string]: { width: number, height: number } };
         loadPhotoDimensions: (photos: FileMetadata[]) => Promise<void>;
         createJustifiedRows: (photos: FileMetadata[], containerWidth: number) => FileMetadata[][];
-        renderJustifiedPhotoItem: (photo: FileMetadata, width: number, height: number, isLast: boolean) => JSX.Element;
-        renderSimplePhotoItem: (photo: FileMetadata, index: number) => JSX.Element;
+        renderJustifiedPhotoItem: (photo: FileMetadata, width: number, height: number, isLast: boolean) => React.ReactElement;
+        renderSimplePhotoItem: (photo: FileMetadata, index: number) => React.ReactElement;
         textColor: string;
         containerWidth: number;
     }) => {
         // Load dimensions for new photos
         React.useEffect(() => {
             loadPhotoDimensions(photos);
-        }, [photos.map(p => p.id).join(','), loadPhotoDimensions]);
+            // Depend only on photo IDs to avoid re-running from dimension state changes
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [photos.map(p => p.id).join(',')]);
 
         // Group photos by date
         const photosByDate = React.useMemo(() => {
@@ -1377,34 +1505,17 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </View>
                     ) : isImage && fileContent ? (
                         <View style={styles.imageContainer}>
-                            {Platform.OS === 'web' ? (
-                                <img
-                                    src={fileContent}
-                                    alt={openedFile.filename}
-                                    style={{
-                                        maxWidth: '100%',
-                                        maxHeight: '80vh',
-                                        objectFit: 'contain',
-                                        borderRadius: 8,
-                                    }}
-                                    onError={(e) => {
-                                        console.error('Image failed to load:', e);
-                                    }}
-                                />
-                            ) : (
-                                <Image
-                                    source={{ uri: fileContent }}
-                                    style={{
-                                        width: '100%',
-                                        height: 400,
-                                        resizeMode: 'contain',
-                                        borderRadius: 8,
-                                    }}
-                                    onError={(e) => {
-                                        console.error('Image failed to load:', e);
-                                    }}
-                                />
-                            )}
+                            <ExpoImage
+                                source={{ uri: fileContent }}
+                                style={{ width: '100%', height: 400, borderRadius: 8 }}
+                                contentFit="contain"
+                                transition={120}
+                                cachePolicy="memory-disk"
+                                onError={(e: any) => {
+                                    console.error('Image failed to load:', (e as any)?.nativeEvent ?? e);
+                                }}
+                                accessibilityLabel={openedFile.filename}
+                            />
                         </View>
                     ) : isText && fileContent ? (
                         <View style={[styles.textContainer, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
@@ -1543,160 +1654,82 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         <View
             style={[
                 styles.container,
-                { backgroundColor },
                 isDragging && Platform.OS === 'web' && styles.dragOverlay
             ]}
             {...(Platform.OS === 'web' && user?.id === targetUserId ? {
                 onDragOver: handleDragOver,
+                onDragEnter: handleDragEnter,
                 onDragLeave: handleDragLeave,
                 onDrop: handleDrop,
             } : {})}
         >
-            {/* Header */}
-            <View style={[
-                styles.header,
-                {
-                    borderBottomColor: borderColor,
-                    backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
-                    shadowColor: '#000000',
-                    shadowOffset: {
-                        width: 0,
-                        height: 2,
-                    },
-                    shadowOpacity: themeStyles.isDarkTheme ? 0.3 : 0.1,
-                    shadowRadius: 8,
-                    elevation: 4,
-                    ...Platform.select({
-                        web: {
-                            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-                        },
-                        default: {},
-                    }),
-                }
-            ]}>
-                <TouchableOpacity
-                    style={[
-                        styles.backButton,
-                        {
-                            backgroundColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#F8F9FA',
-                            borderRadius: 12,
-                        }
-                    ]}
-                    onPress={onClose || goBack}
-                >
-                    <Ionicons name="arrow-back" size={22} color={themeStyles.textColor} />
-                </TouchableOpacity>
-
-                <View style={styles.headerTitleContainer}>
-                    <Text style={[styles.headerTitle, { color: themeStyles.textColor }]}>
-                        {viewMode === 'photos' ? 'Photos' : 'File Management'}
-                    </Text>
-                    <Text style={[styles.headerSubtitle, { color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666' }]}>
-                        {filteredFiles.length} {filteredFiles.length === 1 ? 'item' : 'items'}
-                    </Text>
-                </View>
-
-                <View style={styles.headerActions}>
-                    {/* View Mode Toggle */}
-                    <View style={[
-                        styles.viewModeToggle,
-                        {
-                            backgroundColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#F8F9FA',
-                            borderWidth: 1,
-                            borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
-                            shadowColor: '#000000',
-                            shadowOffset: {
-                                width: 0,
-                                height: 1,
-                            },
-                            shadowOpacity: themeStyles.isDarkTheme ? 0.3 : 0.05,
-                            shadowRadius: 4,
-                            elevation: 2,
-                        }
-                    ]}>
-                        <TouchableOpacity
-                            style={[
-                                styles.viewModeButton,
-                                viewMode === 'all' && {
-                                    backgroundColor: themeStyles.primaryColor,
-                                    shadowColor: themeStyles.primaryColor,
-                                    shadowOffset: {
-                                        width: 0,
-                                        height: 2,
-                                    },
-                                    shadowOpacity: 0.3,
-                                    shadowRadius: 4,
-                                    elevation: 3,
-                                }
-                            ]}
-                            onPress={() => setViewMode('all')}
-                        >
-                            <Ionicons
-                                name="folder"
-                                size={18}
-                                color={viewMode === 'all' ? '#FFFFFF' : themeStyles.textColor}
-                            />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            style={[
-                                styles.viewModeButton,
-                                viewMode === 'photos' && {
-                                    backgroundColor: themeStyles.primaryColor,
-                                    shadowColor: themeStyles.primaryColor,
-                                    shadowOffset: {
-                                        width: 0,
-                                        height: 2,
-                                    },
-                                    shadowOpacity: 0.3,
-                                    shadowRadius: 4,
-                                    elevation: 3,
-                                }
-                            ]}
-                            onPress={() => setViewMode('photos')}
-                        >
-                            <Ionicons
-                                name="images"
-                                size={18}
-                                color={viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor}
-                            />
-                        </TouchableOpacity>
-                    </View>
-
-                    {user?.id === targetUserId && (
-                        <TouchableOpacity
-                            style={[
-                                styles.uploadButton,
-                                {
-                                    backgroundColor: themeStyles.primaryColor,
-                                    shadowColor: themeStyles.primaryColor,
-                                    shadowOffset: {
-                                        width: 0,
-                                        height: 3,
-                                    },
-                                    shadowOpacity: 0.4,
-                                    shadowRadius: 6,
-                                    elevation: 5,
-                                    transform: uploading ? [{ scale: 0.95 }] : [{ scale: 1 }],
-                                }
-                            ]}
-                            onPress={handleFileUpload}
-                            disabled={uploading}
-                        >
-                            {uploading ? (
-                                <View style={styles.uploadProgress}>
-                                    <ActivityIndicator size="small" color="#FFFFFF" />
-                                    {uploadProgress && (
-                                        <Text style={styles.uploadProgressText}>
-                                            {uploadProgress.current}/{uploadProgress.total}
-                                        </Text>
-                                    )}
-                                </View>
-                            ) : (
-                                <Ionicons name="add" size={26} color="#FFFFFF" />
-                            )}
-                        </TouchableOpacity>
-                    )}
+            <Header
+                title={viewMode === 'photos' ? 'Photos' : 'File Management'}
+                subtitle={`${filteredFiles.length} ${filteredFiles.length === 1 ? 'item' : 'items'}`}
+                onBack={onClose || goBack}
+                theme={theme}
+                showBackButton
+                variant="minimal"
+                elevation="none"
+                titleAlignment="left"
+            />
+
+            <View style={styles.controlsBar}>
+                <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>
                 </View>
+                {user?.id === targetUserId && (
+                    <TouchableOpacity
+                        style={[styles.uploadButton, { backgroundColor: themeStyles.primaryColor }]}
+                        onPress={handleFileUpload}
+                        disabled={uploading}
+                    >
+                        {uploading ? (
+                            <View style={styles.uploadProgress}>
+                                <ActivityIndicator size="small" color="#FFFFFF" />
+                                {uploadProgress && (
+                                    <Text style={styles.uploadProgressText}>
+                                        {uploadProgress.current}/{uploadProgress.total}
+                                    </Text>
+                                )}
+                            </View>
+                        ) : (
+                            <Ionicons name="add" size={22} color="#FFFFFF" />
+                        )}
+                    </TouchableOpacity>
+                )}
             </View>
 
             {/* Search Bar */}
@@ -1706,14 +1739,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     {
                         backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
                         borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
-                        shadowColor: '#000000',
-                        shadowOffset: {
-                            width: 0,
-                            height: 1,
-                        },
-                        shadowOpacity: themeStyles.isDarkTheme ? 0.2 : 0.05,
-                        shadowRadius: 4,
-                        elevation: 2,
                     }
                 ]}>
                     <Ionicons name="search" size={22} color={themeStyles.isDarkTheme ? '#888888' : '#666666'} />
@@ -1742,14 +1767,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     {
                         backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
                         borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
-                        shadowColor: '#000000',
-                        shadowOffset: {
-                            width: 0,
-                            height: 1,
-                        },
-                        shadowOpacity: themeStyles.isDarkTheme ? 0.2 : 0.05,
-                        shadowRadius: 4,
-                        elevation: 2,
                     }
                 ]}>
                     <View style={styles.statItem}>
@@ -1787,7 +1804,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     refreshControl={
                         <RefreshControl
                             refreshing={refreshing}
-                            onRefresh={() => loadFiles(true)}
+                            onRefresh={() => loadFiles('refresh')}
                             tintColor={themeStyles.primaryColor}
                         />
                     }
@@ -1808,15 +1825,28 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             </TouchableOpacity>
                         </View>
                     ) : filteredFiles.length === 0 ? renderEmptyState() : (
-                        <>
-                            {filteredFiles.map(renderFileItem)}
-                        </>
+                        <GroupedSection items={groupedFileItems} theme={theme as 'light' | 'dark'} />
                     )}
                 </ScrollView>
             )}
 
             {renderFileDetailsModal()}
 
+            {/* Uploading banner overlay */}
+            {uploading && (
+                <View pointerEvents="none" style={styles.uploadBannerContainer}>
+                    <View style={[styles.uploadBanner, { backgroundColor: themeStyles.isDarkTheme ? '#222831EE' : '#FFFFFFEE', borderColor: themeStyles.borderColor }]}>
+                        <Ionicons name="cloud-upload" size={18} color={themeStyles.primaryColor} />
+                        <Text style={[styles.uploadBannerText, { color: themeStyles.textColor }]}>Uploading{uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...'}</Text>
+                        <View style={styles.uploadBannerDots}>
+                            {[0, 1, 2].map(i => (
+                                <View key={i} style={[styles.dot, { opacity: ((Date.now() / 400 + i) % 3) < 1 ? 1 : 0.25 }]} />
+                            ))}
+                        </View>
+                    </View>
+                </View>
+            )}
+
             {/* Drag and Drop Overlay */}
             {isDragging && Platform.OS === 'web' && (
                 <View style={styles.dragDropOverlay}>
@@ -1840,9 +1870,9 @@ const styles = StyleSheet.create({
         flex: 1,
     },
     dragOverlay: {
-        backgroundColor: 'rgba(0, 122, 255, 0.1)',
-        borderWidth: 2,
-        borderColor: '#007AFF',
+        backgroundColor: 'rgba(0, 122, 255, 0.06)',
+        borderWidth: 1,
+        borderColor: '#66AFFF',
         borderStyle: 'dashed',
     },
     centerContent: {
@@ -1853,8 +1883,8 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingHorizontal: 24,
-        paddingVertical: 20,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
         borderBottomWidth: 1,
         position: 'relative',
     },
@@ -1903,16 +1933,53 @@ const styles = StyleSheet.create({
         fontWeight: '600',
         marginTop: 2,
     },
+    uploadBannerContainer: {
+        position: 'absolute',
+        top: 72, // below header
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        zIndex: 50,
+    },
+    uploadBanner: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        borderRadius: 24,
+        gap: 8,
+        borderWidth: 1,
+        shadowColor: '#000',
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 2,
+    },
+    uploadBannerText: {
+        fontSize: 13,
+        fontWeight: '500',
+    },
+    uploadBannerDots: {
+        flexDirection: 'row',
+        gap: 4,
+        marginLeft: 2,
+    },
+    dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: '#007AFF',
+    },
     searchContainer: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 20,
-        paddingVertical: 16,
-        marginHorizontal: 24,
-        marginTop: 20,
-        borderRadius: 16,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        marginHorizontal: 16,
+        marginTop: 12,
+        borderRadius: 10,
         borderWidth: 1,
-        gap: 16,
+        gap: 10,
     },
     searchInput: {
         flex: 1,
@@ -1931,11 +1998,11 @@ const styles = StyleSheet.create({
     },
     statsContainer: {
         flexDirection: 'row',
-        paddingHorizontal: 24,
-        paddingVertical: 20,
-        marginHorizontal: 24,
-        marginTop: 20,
-        borderRadius: 16,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        marginHorizontal: 16,
+        marginTop: 12,
+        borderRadius: 10,
         borderWidth: 1,
     },
     statItem: {
@@ -1944,31 +2011,31 @@ const styles = StyleSheet.create({
         paddingVertical: 4,
     },
     statValue: {
-        fontSize: 28,
+        fontSize: 20,
         fontWeight: '800',
         fontFamily: fontFamilies.phuduBold,
         letterSpacing: -0.5,
-        lineHeight: 32,
+        lineHeight: 24,
     },
     statLabel: {
-        fontSize: 15,
+        fontSize: 12,
         fontWeight: '500',
         fontFamily: fontFamilies.phuduMedium,
-        marginTop: 4,
-        letterSpacing: 0.3,
+        marginTop: 2,
+        letterSpacing: 0.2,
     },
     scrollView: {
         flex: 1,
     },
     scrollContainer: {
-        padding: 20,
+        padding: 12,
     },
     fileItem: {
         flexDirection: 'row',
         alignItems: 'center',
-        padding: 16,
-        marginBottom: 12,
-        borderRadius: 12,
+        padding: 10,
+        marginBottom: 8,
+        borderRadius: 10,
         borderWidth: 1,
     },
     fileContent: {
@@ -1984,15 +2051,15 @@ const styles = StyleSheet.create({
         marginRight: 12,
     },
     filePreviewContainer: {
-        width: 60,
-        height: 60,
-        marginRight: 12,
+        width: 52,
+        height: 52,
+        marginRight: 10,
     },
     filePreview: {
         width: '100%',
         height: '100%',
         borderRadius: 8,
-        backgroundColor: '#F5F5F5',
+        backgroundColor: 'transparent',
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
@@ -2035,7 +2102,7 @@ const styles = StyleSheet.create({
         bottom: 0,
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: '#F5F5F5',
+        backgroundColor: 'transparent',
         borderRadius: 8,
     },
     previewOverlay: {
@@ -2044,10 +2111,56 @@ const styles = StyleSheet.create({
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        backgroundColor: 'rgba(0, 0, 0, 0.25)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 8,
+    },
+    groupedActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        marginLeft: 12,
+    },
+    groupedActionBtn: {
+        width: 34,
+        height: 34,
+        borderRadius: 8,
         alignItems: 'center',
         justifyContent: 'center',
+    },
+    groupedDescription: {
+        fontSize: 12,
+        lineHeight: 16,
+        marginTop: 6,
+    },
+    videoPreviewWrapper: {
+        width: '100%',
+        height: '100%',
         borderRadius: 8,
+        overflow: 'hidden',
+        backgroundColor: '#000000',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    videoPosterImage: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100%',
+    },
+    videoOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,0.25)',
     },
     fileInfo: {
         flex: 1,
@@ -2070,16 +2183,19 @@ const styles = StyleSheet.create({
         gap: 8,
     },
     actionButton: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
         alignItems: 'center',
         justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: '#E0E0E0',
+        backgroundColor: 'transparent',
     },
     emptyState: {
         alignItems: 'center',
-        paddingVertical: 60,
-        paddingHorizontal: 40,
+        paddingVertical: 40,
+        paddingHorizontal: 24,
     },
     emptyStateTitle: {
         fontSize: 24,
@@ -2120,8 +2236,8 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingHorizontal: 20,
-        paddingVertical: 16,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
         borderBottomWidth: 1,
     },
     modalCloseButton: {
@@ -2137,11 +2253,11 @@ const styles = StyleSheet.create({
     },
     modalContent: {
         flex: 1,
-        padding: 20,
+        padding: 16,
     },
     fileDetailCard: {
-        padding: 24,
-        borderRadius: 16,
+        padding: 18,
+        borderRadius: 14,
         borderWidth: 1,
         alignItems: 'center',
     },
@@ -2204,25 +2320,25 @@ const styles = StyleSheet.create({
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
         justifyContent: 'center',
         alignItems: 'center',
         zIndex: 1000,
     },
     dragDropContent: {
         alignItems: 'center',
-        backgroundColor: 'rgba(255, 255, 255, 0.9)',
-        padding: 40,
-        borderRadius: 20,
-        borderWidth: 3,
-        borderColor: '#007AFF',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        padding: 20,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: '#66AFFF',
         borderStyle: 'dashed',
     },
     dragDropTitle: {
-        fontSize: 24,
+        fontSize: 20,
         fontWeight: 'bold',
-        marginTop: 16,
-        marginBottom: 8,
+        marginTop: 12,
+        marginBottom: 6,
     },
     dragDropSubtitle: {
         fontSize: 16,
@@ -2236,8 +2352,8 @@ const styles = StyleSheet.create({
     fileViewerHeader: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 20,
-        paddingVertical: 16,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
         borderBottomWidth: 1,
     },
     fileViewerTitleContainer: {
@@ -2265,7 +2381,7 @@ const styles = StyleSheet.create({
     },
     fileViewerContentContainer: {
         flexGrow: 1,
-        padding: 20,
+        padding: 14,
     },
     fileViewerLoading: {
         flex: 1,
@@ -2283,10 +2399,10 @@ const styles = StyleSheet.create({
     },
     textContainer: {
         flex: 1,
-        borderRadius: 12,
+        borderRadius: 10,
         borderWidth: 1,
-        padding: 16,
-        minHeight: 200,
+        padding: 12,
+        minHeight: 180,
         maxHeight: '80%',
     },
     textContent: {
@@ -2298,8 +2414,8 @@ const styles = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        paddingVertical: 60,
-        paddingHorizontal: 40,
+        paddingVertical: 40,
+        paddingHorizontal: 24,
     },
     unsupportedFileTitle: {
         fontSize: 24,
@@ -2318,9 +2434,9 @@ const styles = StyleSheet.create({
     downloadButtonLarge: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 24,
-        paddingVertical: 16,
-        borderRadius: 24,
+        paddingHorizontal: 18,
+        paddingVertical: 12,
+        borderRadius: 20,
         gap: 8,
     },
     downloadButtonText: {
@@ -2347,10 +2463,10 @@ const styles = StyleSheet.create({
 
     // File Details in Viewer styles
     fileDetailsSection: {
-        margin: 16,
+        margin: 12,
         marginTop: 0,
-        padding: 20,
-        borderRadius: 12,
+        padding: 14,
+        borderRadius: 10,
         borderWidth: 1,
     },
     fileDetailsSectionTitle: {
@@ -2394,6 +2510,15 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         gap: 16,
     },
+    controlsBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingTop: 8,
+        paddingBottom: 4,
+        gap: 12,
+    },
     viewModeToggle: {
         flexDirection: 'row',
         borderRadius: 24,
@@ -2412,17 +2537,17 @@ const styles = StyleSheet.create({
 
     // Photo Grid styles
     photoScrollContainer: {
-        padding: 16,
+        padding: 10,
     },
     photoDateSection: {
-        marginBottom: 24,
+        marginBottom: 16,
     },
     photoDateHeader: {
-        fontSize: 18,
+        fontSize: 16,
         fontWeight: '600',
         fontFamily: fontFamilies.phuduSemiBold,
-        marginBottom: 12,
-        paddingHorizontal: 4,
+        marginBottom: 8,
+        paddingHorizontal: 2,
     },
     photoGrid: {
         flexDirection: 'row',
@@ -2475,7 +2600,7 @@ const styles = StyleSheet.create({
         position: 'relative',
         borderRadius: 6,
         overflow: 'hidden',
-        backgroundColor: '#F5F5F5',
+        backgroundColor: 'transparent',
     },
     justifiedPhotoImage: {
         width: '100%',
@@ -2487,7 +2612,7 @@ const styles = StyleSheet.create({
     simplePhotoItem: {
         borderRadius: 8,
         overflow: 'hidden',
-        backgroundColor: '#F5F5F5',
+        backgroundColor: 'transparent',
     },
     simplePhotoContainer: {
         width: '100%',