@oxyhq/services 5.10.16 → 5.11.2

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

@@ -1,30 +1,20 @@
 "use strict";
 
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, Platform, RefreshControl, Modal, TextInput, Image } from 'react-native';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, Platform, RefreshControl, Modal, TextInput, Image // kept for Image.getSize only
+} from 'react-native';
+import { Image as ExpoImage } from 'expo-image';
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
+import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
+import Header from '../components/Header';
+import { GroupedSection } from '../components';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Add this helper function near the top (after imports):
-async function uploadFileRaw(file, userId) {
-  const fileName = file.name || 'upload.bin';
-  const mimeType = file.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, userId, oxyServices) {
+  return await oxyServices.uploadRawFile(file);
 }
 const FileManagementScreen = ({
   onClose,
@@ -50,12 +40,12 @@ const FileManagementScreen = ({
     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([]);
+  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(null);
-  const [deleting, setDeleting] = useState(null);
   const [selectedFile, setSelectedFile] = useState(null);
   const [showFileDetails, setShowFileDetails] = useState(false);
   const [openedFile, setOpenedFile] = useState(null);
@@ -64,11 +54,66 @@ const FileManagementScreen = ({
   const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
   const [viewMode, setViewMode] = useState('all');
   const [searchQuery, setSearchQuery] = useState('');
-  const [filteredFiles, setFilteredFiles] = useState([]);
+  // 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({});
   const [loadingDimensions, setLoadingDimensions] = useState(false);
   const [hoveredPreview, setHoveredPreview] = useState(null);
+  const uploadStartRef = useRef(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, variant = '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(() => {
@@ -89,16 +134,32 @@ const FileManagementScreen = ({
   const backgroundColor = themeStyles.backgroundColor;
   const borderColor = themeStyles.borderColor;
   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') => {
     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 = (response.files || []).map(f => ({
+        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) {
       console.error('Failed to load files:', error);
       toast.error(error.message || 'Failed to load files');
@@ -108,24 +169,7 @@ const FileManagementScreen = ({
     }
   }, [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 => {
@@ -145,7 +189,7 @@ const FileManagementScreen = ({
     try {
       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.Image();
             await new Promise((resolve, reject) => {
@@ -224,7 +268,7 @@ const FileManagementScreen = ({
     if (selectedFiles.length === 0) return;
     if (!targetUserId) return; // Guard clause to ensure userId is defined
     try {
-      setUploadProgress({
+      storeSetUploadProgress({
         current: 0,
         total: selectedFiles.length
       });
@@ -239,12 +283,55 @@ const FileManagementScreen = ({
       let failureCount = 0;
       const errors = [];
       for (let i = 0; i < selectedFiles.length; i++) {
-        setUploadProgress({
+        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 = {
+            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 = {
+              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
+              }
+            });
+          }
           successCount++;
         } catch (error) {
           failureCount++;
@@ -258,29 +345,51 @@ const FileManagementScreen = ({
         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) {
       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
         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
+
         input.onchange = async e => {
-          const selectedFiles = Array.from(e.target.files);
+          clearTimeout(cancellationTimer);
+          const selectedFiles = Array.from(e.target.files || []);
+          if (selectedFiles.length === 0) {
+            // User explicitly canceled (some browsers still fire onchange with empty list)
+            endUpload();
+            return;
+          }
+          storeSetUploadProgress({
+            current: 0,
+            total: selectedFiles.length
+          });
           await processFileUploads(selectedFiles);
+          endUpload();
         };
         input.click();
       } else {
@@ -296,8 +405,11 @@ const FileManagementScreen = ({
     } catch (error) {
       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
     }
   };
   const handleFileDelete = async (fileId, filename) => {
@@ -314,15 +426,16 @@ const FileManagementScreen = ({
       });
       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);
       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) {
       console.error('Delete error:', error);
       console.error('Error details:', error.response?.data || error.message);
@@ -331,16 +444,14 @@ const FileManagementScreen = ({
       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);
     }
   };
 
@@ -351,24 +462,68 @@ const FileManagementScreen = ({
       setIsDragging(true);
     }
   };
+  const handleDragEnter = e => {
+    if (Platform.OS === 'web' && user?.id === targetUserId) {
+      e.preventDefault();
+      setIsDragging(true);
+    }
+  };
   const handleDragLeave = e => {
     if (Platform.OS === 'web') {
       e.preventDefault();
       setIsDragging(false);
     }
   };
+
+  // Global drag listeners (web) to catch drags outside component bounds
+  useEffect(() => {
+    if (Platform.OS !== 'web' || user?.id !== targetUserId) return;
+    const onDocDragEnter = e => {
+      if (e?.dataTransfer?.types?.includes('Files')) setIsDragging(true);
+    };
+    const onDocDragOver = e => {
+      if (e?.dataTransfer?.types?.includes('Files')) {
+        e.preventDefault();
+        setIsDragging(true);
+      }
+    };
+    const onDocDrop = e => {
+      if (e?.dataTransfer?.files?.length) {
+        e.preventDefault();
+        setIsDragging(false);
+      }
+    };
+    const onDocDragLeave = e => {
+      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 => {
     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);
+        if (files.length > 0) storeSetUploadProgress({
+          current: 0,
+          total: files.length
+        });
         await processFileUploads(files);
       } catch (error) {
         toast.error(error.message || 'Failed to upload files');
       } finally {
-        setUploading(false);
+        endUpload();
       }
     }
   };
@@ -423,7 +578,7 @@ const FileManagementScreen = ({
     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 => {
     if (contentType.startsWith('image/')) return 'image';
@@ -483,7 +638,7 @@ const FileManagementScreen = ({
     setShowFileDetails(true);
   };
   const renderSimplePhotoItem = useCallback((photo, index) => {
-    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
@@ -505,41 +660,24 @@ const FileManagementScreen = ({
       activeOpacity: 0.8,
       children: /*#__PURE__*/_jsx(View, {
         style: styles.simplePhotoContainer,
-        children: Platform.OS === 'web' ? /*#__PURE__*/_jsx("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)';
-          }
-        }) : /*#__PURE__*/_jsx(Image, {
+        children: /*#__PURE__*/_jsx(ExpoImage, {
           source: {
             uri: downloadUrl
           },
           style: styles.simplePhotoImage,
-          resizeMode: "cover",
+          contentFit: "cover",
+          transition: 120,
+          cachePolicy: "memory-disk",
           onError: e => {
-            console.error('Photo failed to load:', e);
-          }
+            console.error('Photo failed to load:', e?.nativeEvent ?? e);
+          },
+          accessibilityLabel: photo.filename
         })
       })
     }, photo.id);
   }, [oxyServices, containerWidth]);
   const renderJustifiedPhotoItem = useCallback((photo, width, height, isLast) => {
-    const downloadUrl = oxyServices.getFileDownloadUrl(photo.id);
+    const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       style: [styles.justifiedPhotoItem, {
         width,
@@ -549,46 +687,33 @@ const FileManagementScreen = ({
       activeOpacity: 0.8,
       children: /*#__PURE__*/_jsx(View, {
         style: styles.justifiedPhotoContainer,
-        children: Platform.OS === 'web' ? /*#__PURE__*/_jsx("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';
-          }
-        }) : /*#__PURE__*/_jsx(Image, {
+        children: /*#__PURE__*/_jsx(ExpoImage, {
           source: {
             uri: downloadUrl
           },
           style: styles.justifiedPhotoImage,
-          resizeMode: "cover",
+          contentFit: "cover",
+          transition: 120,
+          cachePolicy: "memory-disk",
           onError: e => {
-            console.error('Photo failed to load:', e);
-          }
+            console.error('Photo failed to load:', e?.nativeEvent ?? e);
+          },
+          accessibilityLabel: photo.filename
         })
       })
     }, photo.id);
   }, [oxyServices]);
+
+  // Run initial load once per targetUserId change to avoid accidental loops
+  const lastLoadedFor = useRef(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 => {
     const isImage = file.contentType.startsWith('image/');
     const isPDF = file.contentType.includes('pdf');
@@ -612,35 +737,19 @@ const FileManagementScreen = ({
               onMouseEnter: () => setHoveredPreview(file.id),
               onMouseLeave: () => setHoveredPreview(null)
             }),
-            children: [isImage && (Platform.OS === 'web' ? /*#__PURE__*/_jsx("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.style.display = 'flex';
-                }
-              }
-            }) : /*#__PURE__*/_jsx(Image, {
+            children: [isImage && /*#__PURE__*/_jsx(ExpoImage, {
               source: {
-                uri: oxyServices.getFileDownloadUrl(file.id)
+                uri: getSafeDownloadUrl(file, 'thumb')
               },
               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);
-              }
-            })), isPDF && /*#__PURE__*/_jsxs(View, {
+              contentFit: "cover",
+              transition: 120,
+              cachePolicy: "memory-disk",
+              onError: _ => {
+                console.warn('Failed to load image preview.');
+              },
+              accessibilityLabel: file.filename
+            }), isPDF && /*#__PURE__*/_jsxs(View, {
               style: styles.pdfPreview,
               children: [/*#__PURE__*/_jsx(Ionicons, {
                 name: "document",
@@ -653,16 +762,26 @@ const FileManagementScreen = ({
                 children: "PDF"
               })]
             }), isVideo && /*#__PURE__*/_jsxs(View, {
-              style: styles.videoPreview,
-              children: [/*#__PURE__*/_jsx(Ionicons, {
-                name: "play-circle",
-                size: 32,
-                color: themeStyles.primaryColor
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.videoLabel, {
-                  color: themeStyles.primaryColor
-                }],
-                children: "VIDEO"
+              style: styles.videoPreviewWrapper,
+              children: [/*#__PURE__*/_jsx(ExpoImage, {
+                source: {
+                  uri: getSafeDownloadUrl(file, 'thumb')
+                },
+                style: styles.videoPosterImage,
+                contentFit: "cover",
+                transition: 120,
+                cachePolicy: "memory-disk",
+                onError: _ => {
+                  // If thumbnail not available, we still show icon overlay
+                },
+                accessibilityLabel: file.filename + ' video thumbnail'
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.videoOverlay,
+                children: /*#__PURE__*/_jsx(Ionicons, {
+                  name: "play",
+                  size: 24,
+                  color: "#FFFFFF"
+                })
               })]
             }), /*#__PURE__*/_jsx(View, {
               style: [styles.fallbackIcon, {
@@ -755,8 +874,78 @@ const FileManagementScreen = ({
       })]
     }, file.id);
   };
+
+  // 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,
+        onPress: () => handleFileOpen(file),
+        showChevron: false,
+        dense: true,
+        multiRow: !!file.metadata?.description,
+        customContent: /*#__PURE__*/_jsxs(View, {
+          style: styles.groupedActions,
+          children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.groupedActionBtn, {
+              backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
+            }],
+            onPress: () => handleFileOpen(file),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "eye",
+              size: 18,
+              color: themeStyles.primaryColor
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.groupedActionBtn, {
+              backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
+            }],
+            onPress: () => handleFileDownload(file.id, file.filename),
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "download",
+              size: 18,
+              color: themeStyles.primaryColor
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.groupedActionBtn, {
+              backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE'
+            }],
+            onPress: () => handleFileDelete(file.id, file.filename),
+            disabled: deleting === file.id,
+            children: deleting === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: themeStyles.dangerColor
+            }) : /*#__PURE__*/_jsx(Ionicons, {
+              name: "trash",
+              size: 18,
+              color: themeStyles.dangerColor
+            })
+          })]
+        }),
+        customContentBelow: file.metadata?.description ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.groupedDescription, {
+            color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666'
+          }],
+          numberOfLines: 2,
+          children: file.metadata.description
+        }) : undefined
+      }; // GroupedSectionItem shape
+    });
+  }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrl]);
   const renderPhotoItem = (photo, index) => {
-    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
@@ -777,36 +966,18 @@ const FileManagementScreen = ({
       activeOpacity: 0.8,
       children: /*#__PURE__*/_jsx(View, {
         style: styles.photoContainer,
-        children: Platform.OS === 'web' ? /*#__PURE__*/_jsx("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)';
-          }
-        }) : /*#__PURE__*/_jsx(Image, {
+        children: /*#__PURE__*/_jsx(ExpoImage, {
           source: {
             uri: downloadUrl
           },
           style: styles.photoImage,
-          resizeMode: "cover",
-          onError: e => {
-            console.error('Photo failed to load:', e);
-          }
+          contentFit: "cover",
+          transition: 120,
+          cachePolicy: "memory-disk",
+          onError: _ => {
+            console.warn('Failed to load image preview for photo:', photo.id);
+          },
+          accessibilityLabel: photo.filename
         })
       })
     }, photo.id);
@@ -825,11 +996,11 @@ const FileManagementScreen = ({
             color: themeStyles.textColor
           }],
           children: "No Photos Yet"
-        }), /*#__PURE__*/_jsx(Text, {
+        }), /*#__PURE__*/_jsxs(Text, {
           style: [styles.emptyStateDescription, {
             color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
-          children: 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"
+          children: [" ", 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", " "]
         }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
           style: [styles.emptyStateButton, {
             backgroundColor: themeStyles.primaryColor
@@ -857,7 +1028,7 @@ const FileManagementScreen = ({
       contentContainerStyle: styles.photoScrollContainer,
       refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
         refreshing: refreshing,
-        onRefresh: () => loadFiles(true),
+        onRefresh: () => loadFiles('refresh'),
         tintColor: themeStyles.primaryColor
       }),
       showsVerticalScrollIndicator: false,
@@ -899,7 +1070,9 @@ const FileManagementScreen = ({
     // 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(() => {
@@ -1338,31 +1511,22 @@ const FileManagementScreen = ({
           })]
         }) : isImage && fileContent ? /*#__PURE__*/_jsx(View, {
           style: styles.imageContainer,
-          children: Platform.OS === 'web' ? /*#__PURE__*/_jsx("img", {
-            src: fileContent,
-            alt: openedFile.filename,
-            style: {
-              maxWidth: '100%',
-              maxHeight: '80vh',
-              objectFit: 'contain',
-              borderRadius: 8
-            },
-            onError: e => {
-              console.error('Image failed to load:', e);
-            }
-          }) : /*#__PURE__*/_jsx(Image, {
+          children: /*#__PURE__*/_jsx(ExpoImage, {
             source: {
               uri: fileContent
             },
             style: {
               width: '100%',
               height: 400,
-              resizeMode: 'contain',
               borderRadius: 8
             },
+            contentFit: "contain",
+            transition: 120,
+            cachePolicy: "memory-disk",
             onError: e => {
-              console.error('Image failed to load:', e);
-            }
+              console.error('Image failed to load:', e?.nativeEvent ?? e);
+            },
+            accessibilityLabel: openedFile.filename
           })
         }) : isText && fileContent ? /*#__PURE__*/_jsx(View, {
           style: [styles.textContainer, {
@@ -1525,157 +1689,76 @@ const FileManagementScreen = ({
     });
   }
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, {
-      backgroundColor
-    }, isDragging && Platform.OS === 'web' && styles.dragOverlay],
+    style: [styles.container, isDragging && Platform.OS === 'web' && styles.dragOverlay],
     ...(Platform.OS === 'web' && user?.id === targetUserId ? {
       onDragOver: handleDragOver,
+      onDragEnter: handleDragEnter,
       onDragLeave: handleDragLeave,
       onDrop: handleDrop
     } : {}),
-    children: [/*#__PURE__*/_jsxs(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: {}
-        })
-      }],
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.backButton, {
-          backgroundColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#F8F9FA',
-          borderRadius: 12
+    children: [/*#__PURE__*/_jsx(Header, {
+      title: viewMode === 'photos' ? 'Photos' : 'File Management',
+      subtitle: `${filteredFiles.length} ${filteredFiles.length === 1 ? 'item' : 'items'}`,
+      onBack: onClose || goBack,
+      theme: theme,
+      showBackButton: true,
+      variant: "minimal",
+      elevation: "none",
+      titleAlignment: "left"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.controlsBar,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [styles.viewModeToggle, {
+          backgroundColor: themeStyles.isDarkTheme ? '#181818' : '#FFFFFF',
+          borderWidth: 1,
+          borderColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#E8E9EA'
         }],
-        onPress: onClose || goBack,
-        children: /*#__PURE__*/_jsx(Ionicons, {
-          name: "arrow-back",
-          size: 22,
-          color: themeStyles.textColor
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.headerTitleContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.headerTitle, {
-            color: themeStyles.textColor
-          }],
-          children: viewMode === 'photos' ? 'Photos' : 'File Management'
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: [styles.headerSubtitle, {
-            color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666'
-          }],
-          children: [filteredFiles.length, " ", filteredFiles.length === 1 ? 'item' : 'items']
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.headerActions,
-        children: [/*#__PURE__*/_jsxs(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
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.viewModeButton, viewMode === 'all' && {
+            backgroundColor: themeStyles.primaryColor
           }],
-          children: [/*#__PURE__*/_jsx(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'),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "folder",
-              size: 18,
-              color: viewMode === 'all' ? '#FFFFFF' : themeStyles.textColor
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.viewModeButton, viewMode === 'photos' && {
-              backgroundColor: themeStyles.primaryColor,
-              shadowColor: themeStyles.primaryColor,
-              shadowOffset: {
-                width: 0,
-                height: 2
-              },
-              shadowOpacity: 0.3,
-              shadowRadius: 4,
-              elevation: 3
-            }],
-            onPress: () => setViewMode('photos'),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "images",
-              size: 18,
-              color: viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor
-            })
-          })]
-        }), user?.id === targetUserId && /*#__PURE__*/_jsx(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: () => setViewMode('all'),
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: "folder",
+            size: 18,
+            color: viewMode === 'all' ? '#FFFFFF' : themeStyles.textColor
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.viewModeButton, viewMode === 'photos' && {
+            backgroundColor: themeStyles.primaryColor
           }],
-          onPress: handleFileUpload,
-          disabled: uploading,
-          children: uploading ? /*#__PURE__*/_jsxs(View, {
-            style: styles.uploadProgress,
-            children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-              size: "small",
-              color: "#FFFFFF"
-            }), uploadProgress && /*#__PURE__*/_jsxs(Text, {
-              style: styles.uploadProgressText,
-              children: [uploadProgress.current, "/", uploadProgress.total]
-            })]
-          }) : /*#__PURE__*/_jsx(Ionicons, {
-            name: "add",
-            size: 26,
-            color: "#FFFFFF"
+          onPress: () => setViewMode('photos'),
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: "images",
+            size: 18,
+            color: viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor
           })
         })]
+      }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.uploadButton, {
+          backgroundColor: themeStyles.primaryColor
+        }],
+        onPress: handleFileUpload,
+        disabled: uploading,
+        children: uploading ? /*#__PURE__*/_jsxs(View, {
+          style: styles.uploadProgress,
+          children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: "#FFFFFF"
+          }), uploadProgress && /*#__PURE__*/_jsxs(Text, {
+            style: styles.uploadProgressText,
+            children: [uploadProgress.current, "/", uploadProgress.total]
+          })]
+        }) : /*#__PURE__*/_jsx(Ionicons, {
+          name: "add",
+          size: 22,
+          color: "#FFFFFF"
+        })
       })]
     }), files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && /*#__PURE__*/_jsxs(View, {
       style: [styles.searchContainer, {
         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
+        borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA'
       }],
       children: [/*#__PURE__*/_jsx(Ionicons, {
         name: "search",
@@ -1701,15 +1784,7 @@ const FileManagementScreen = ({
     }), files.length > 0 && /*#__PURE__*/_jsxs(View, {
       style: [styles.statsContainer, {
         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
+        borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA'
       }],
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.statItem,
@@ -1756,7 +1831,7 @@ const FileManagementScreen = ({
       contentContainerStyle: styles.scrollContainer,
       refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
         refreshing: refreshing,
-        onRefresh: () => loadFiles(true),
+        onRefresh: () => loadFiles('refresh'),
         tintColor: themeStyles.primaryColor
       }),
       children: filteredFiles.length === 0 && searchQuery.length > 0 ? /*#__PURE__*/_jsxs(View, {
@@ -1789,10 +1864,37 @@ const FileManagementScreen = ({
             children: "Clear Search"
           })]
         })]
-      }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/_jsx(_Fragment, {
-        children: filteredFiles.map(renderFileItem)
+      }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/_jsx(GroupedSection, {
+        items: groupedFileItems,
+        theme: theme
+      })
+    }), renderFileDetailsModal(), uploading && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: styles.uploadBannerContainer,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.uploadBanner, {
+          backgroundColor: themeStyles.isDarkTheme ? '#222831EE' : '#FFFFFFEE',
+          borderColor: themeStyles.borderColor
+        }],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: "cloud-upload",
+          size: 18,
+          color: themeStyles.primaryColor
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.uploadBannerText, {
+            color: themeStyles.textColor
+          }],
+          children: ["Uploading", uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...']
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.uploadBannerDots,
+          children: [0, 1, 2].map(i => /*#__PURE__*/_jsx(View, {
+            style: [styles.dot, {
+              opacity: (Date.now() / 400 + i) % 3 < 1 ? 1 : 0.25
+            }]
+          }, i))
+        })]
       })
-    }), renderFileDetailsModal(), isDragging && Platform.OS === 'web' && /*#__PURE__*/_jsx(View, {
+    }), isDragging && Platform.OS === 'web' && /*#__PURE__*/_jsx(View, {
       style: styles.dragDropOverlay,
       children: /*#__PURE__*/_jsxs(View, {
         style: styles.dragDropContent,
@@ -1820,9 +1922,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: {
@@ -1833,8 +1935,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 24,
-    paddingVertical: 20,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
     borderBottomWidth: 1,
     position: 'relative'
   },
@@ -1883,16 +1985,57 @@ 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,
@@ -1911,11 +2054,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: {
@@ -1924,31 +2067,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: {
@@ -1964,15 +2107,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',
@@ -2015,7 +2158,7 @@ const styles = StyleSheet.create({
     bottom: 0,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#F5F5F5',
+    backgroundColor: 'transparent',
     borderRadius: 8
   },
   previewOverlay: {
@@ -2024,11 +2167,57 @@ 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
   },
@@ -2050,16 +2239,19 @@ const styles = StyleSheet.create({
     gap: 8
   },
   actionButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    backgroundColor: 'transparent'
   },
   emptyState: {
     alignItems: 'center',
-    paddingVertical: 60,
-    paddingHorizontal: 40
+    paddingVertical: 40,
+    paddingHorizontal: 24
   },
   emptyStateTitle: {
     fontSize: 24,
@@ -2099,8 +2291,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
     borderBottomWidth: 1
   },
   modalCloseButton: {
@@ -2116,11 +2308,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'
   },
@@ -2182,25 +2374,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,
@@ -2213,8 +2405,8 @@ const styles = StyleSheet.create({
   fileViewerHeader: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
     borderBottomWidth: 1
   },
   fileViewerTitleContainer: {
@@ -2242,7 +2434,7 @@ const styles = StyleSheet.create({
   },
   fileViewerContentContainer: {
     flexGrow: 1,
-    padding: 20
+    padding: 14
   },
   fileViewerLoading: {
     flex: 1,
@@ -2260,10 +2452,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: {
@@ -2275,8 +2467,8 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    paddingVertical: 60,
-    paddingHorizontal: 40
+    paddingVertical: 40,
+    paddingHorizontal: 24
   },
   unsupportedFileTitle: {
     fontSize: 24,
@@ -2295,9 +2487,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: {
@@ -2323,10 +2515,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: {
@@ -2369,6 +2561,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,
@@ -2386,17 +2587,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',
@@ -2448,7 +2649,7 @@ const styles = StyleSheet.create({
     position: 'relative',
     borderRadius: 6,
     overflow: 'hidden',
-    backgroundColor: '#F5F5F5'
+    backgroundColor: 'transparent'
   },
   justifiedPhotoImage: {
     width: '100%',
@@ -2459,7 +2660,7 @@ const styles = StyleSheet.create({
   simplePhotoItem: {
     borderRadius: 8,
     overflow: 'hidden',
-    backgroundColor: '#F5F5F5'
+    backgroundColor: 'transparent'
   },
   simplePhotoContainer: {
     width: '100%',