@oxyhq/services 5.14.0 → 5.15.0

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

@@ -1,25 +1,69 @@
 "use strict";
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, Platform, RefreshControl, Modal, TextInput, Image,
-// kept for Image.getSize only
-Animated, Easing, Alert } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, Animated, Easing, Alert } 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';
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
 import Header from '../components/Header';
 import JustifiedPhotoGrid from '../components/photogrid/JustifiedPhotoGrid';
 import { GroupedSection } from '../components';
-
-// Exporting props & callback types so external callers (e.g. showBottomSheet config objects) can annotate
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { normalizeTheme } from '../utils/themeUtils';
+import { useOxy } from '../context/OxyContext';
+import { confirmAction, convertDocumentPickerAssetToFile, formatFileSize, getFileIcon, getSafeDownloadUrl, uploadFileRaw } from '../utils/fileManagement';
+import { FileViewer } from '../components/fileManagement/FileViewer';
+import { FileDetailsModal } from '../components/fileManagement/FileDetailsModal';
+import { UploadPreview } from '../components/fileManagement/UploadPreview';
+import { fileManagementStyles } from '../components/fileManagement/styles';
 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, oxyServices, visibility) {
-  return await oxyServices.uploadRawFile(file, visibility);
-}
+// Animated button component for smooth transitions
+const AnimatedButton = ({
+  isSelected,
+  onPress,
+  icon,
+  primaryColor,
+  textColor,
+  style
+}) => {
+  const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: isSelected ? 1 : 0,
+      duration: 200,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    }).start();
+  }, [isSelected, animatedValue]);
+  const backgroundColor = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['transparent', primaryColor]
+  });
+  const iconColor = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [textColor, '#FFFFFF']
+  });
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    onPress: onPress,
+    activeOpacity: 0.7,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [style, {
+        backgroundColor
+      }],
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: icon,
+          size: 16,
+          color: isSelected ? '#FFFFFF' : textColor
+        })
+      })
+    })
+  });
+};
 const FileManagementScreen = ({
   onClose,
   theme,
@@ -40,11 +84,14 @@ const FileManagementScreen = ({
   defaultVisibility = 'private',
   linkContext
 }) => {
+  // Use useOxy() hook for OxyContext values
   const {
     user,
     oxyServices
   } = useOxy();
   const files = useFiles();
+  // Ensure containerWidth is a number (TypeScript guard)
+  const safeContainerWidth = typeof containerWidth === 'number' ? containerWidth : 400;
   const uploading = useUploadingStore();
   const uploadProgress = useUploadAggregateProgress();
   const deleting = useDeletingStore();
@@ -64,6 +111,7 @@ const FileManagementScreen = ({
   const [fileContent, setFileContent] = useState(null);
   const [loadingFileContent, setLoadingFileContent] = useState(false);
   const [showFileDetailsInViewer, setShowFileDetailsInViewer] = useState(false);
+  const [isPickingDocument, setIsPickingDocument] = useState(false);
   const [viewMode, setViewMode] = useState('all');
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState('date');
@@ -106,10 +154,8 @@ const FileManagementScreen = ({
     });
     return sorted;
   }, [files, searchQuery, viewMode, sortBy, sortOrder]);
-  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;
   // Selection state
@@ -118,7 +164,7 @@ const FileManagementScreen = ({
   const scrollViewRef = useRef(null);
   const photoScrollViewRef = useRef(null);
   const itemRefs = useRef(new Map()); // Track item positions
-  const containerRef = useRef(null); // Ref for drag and drop container
+  const containerRef = useRef(null);
   useEffect(() => {
     if (initialSelectedIds && initialSelectedIds.length) {
       setSelectedIds(new Set(initialSelectedIds));
@@ -226,52 +272,19 @@ const FileManagementScreen = ({
   }, []);
 
   // 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);
+  const getSafeDownloadUrlCallback = useCallback((file, variant = 'thumb') => {
+    return getSafeDownloadUrl(file, variant, (fileId, variant) => oxyServices.getFileDownloadUrl(fileId, variant));
   }, [oxyServices]);
 
-  // Memoize theme-related calculations to prevent unnecessary recalculations
-  const themeStyles = useMemo(() => {
-    const isDarkTheme = theme === 'dark';
-    return {
-      isDarkTheme,
-      textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-      backgroundColor: isDarkTheme ? '#121212' : '#f2f2f2',
-      secondaryBackgroundColor: isDarkTheme ? '#222222' : '#FFFFFF',
-      borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
-      primaryColor: '#007AFF',
-      dangerColor: '#FF3B30',
-      successColor: '#34C759'
-    };
-  }, [theme]);
+  // Use centralized theme styles hook for consistency
+  const colorScheme = useColorScheme();
+  const normalizedTheme = normalizeTheme(theme);
+  const baseThemeStyles = useThemeStyles(normalizedTheme, colorScheme);
+  // FileManagementScreen uses a slightly different light background
+  const themeStyles = useMemo(() => ({
+    ...baseThemeStyles,
+    backgroundColor: baseThemeStyles.isDarkTheme ? baseThemeStyles.backgroundColor : '#f2f2f2'
+  }), [baseThemeStyles]);
 
   // Extract commonly used theme variables
   const backgroundColor = themeStyles.backgroundColor;
@@ -356,7 +369,7 @@ const FileManagementScreen = ({
 
   // (removed effect; filteredFiles is memoized)
 
-  // Load photo dimensions for justified grid
+  // Load photo dimensions for justified grid - unified approach using Image.getSize
   const loadPhotoDimensions = useCallback(async photos => {
     if (photos.length === 0) return;
     setLoadingDimensions(true);
@@ -374,50 +387,27 @@ const FileManagementScreen = ({
     try {
       await Promise.all(photosToLoad.map(async photo => {
         try {
-          const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
-          if (Platform.OS === 'web') {
-            const img = new window.Image();
-            await new Promise((resolve, reject) => {
-              img.onload = () => {
-                newDimensions[photo.id] = {
-                  width: img.naturalWidth,
-                  height: img.naturalHeight
-                };
-                hasNewDimensions = true;
-                resolve();
+          const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+
+          // Unified approach using Image.getSize (works on all platforms)
+          await new Promise(resolve => {
+            Image.getSize(downloadUrl, (width, height) => {
+              newDimensions[photo.id] = {
+                width,
+                height
               };
-              img.onerror = () => {
-                // Fallback dimensions for failed loads
-                newDimensions[photo.id] = {
-                  width: 1,
-                  height: 1
-                };
-                hasNewDimensions = true;
-                resolve();
+              hasNewDimensions = true;
+              resolve();
+            }, () => {
+              // Fallback dimensions
+              newDimensions[photo.id] = {
+                width: 1,
+                height: 1
               };
-              img.src = downloadUrl;
+              hasNewDimensions = true;
+              resolve();
             });
-          } else {
-            // For mobile, use Image.getSize from react-native
-            await new Promise(resolve => {
-              Image.getSize(downloadUrl, (width, height) => {
-                newDimensions[photo.id] = {
-                  width,
-                  height
-                };
-                hasNewDimensions = true;
-                resolve();
-              }, () => {
-                // Fallback dimensions
-                newDimensions[photo.id] = {
-                  width: 1,
-                  height: 1
-                };
-                hasNewDimensions = true;
-                resolve();
-              });
-            });
-          }
+          });
         } catch (error) {
           // Fallback dimensions for any errors
           newDimensions[photo.id] = {
@@ -435,7 +425,7 @@ const FileManagementScreen = ({
     } finally {
       setLoadingDimensions(false);
     }
-  }, [oxyServices, photoDimensions]);
+  }, [getSafeDownloadUrlCallback, photoDimensions]);
 
   // Create justified rows from photos with responsive algorithm
   const createJustifiedRows = useCallback((photos, containerWidth) => {
@@ -450,8 +440,9 @@ const FileManagementScreen = ({
     return rows;
   }, []);
   const processFileUploads = async selectedFiles => {
-    if (selectedFiles.length === 0) return;
-    if (!targetUserId) return; // Guard clause to ensure userId is defined
+    if (selectedFiles.length === 0) return [];
+    if (!targetUserId) return []; // Guard clause to ensure userId is defined
+    const uploadedFiles = [];
     try {
       storeSetUploadProgress({
         current: 0,
@@ -460,9 +451,9 @@ const FileManagementScreen = ({
       const maxSize = 50 * 1024 * 1024; // 50MB
       const oversizedFiles = selectedFiles.filter(file => file.size > maxSize);
       if (oversizedFiles.length > 0) {
-        const fileList = oversizedFiles.map(f => f.name).join('\n');
-        window.alert(`File Size Limit\n\nThe following files are too large (max 50MB):\n${fileList}`);
-        return;
+        const fileList = oversizedFiles.map(f => f.name).join(', ');
+        toast.error(`The following files are too large (max 50MB): ${fileList}`);
+        return [];
       }
       let successCount = 0;
       let failureCount = 0;
@@ -472,9 +463,22 @@ const FileManagementScreen = ({
           current: i + 1,
           total: selectedFiles.length
         });
+        const raw = selectedFiles[i];
+        const fileName = raw.name || `file-${i + 1}`;
+        const optimisticId = `temp-${Date.now()}-${i}-${Math.random().toString(36).substr(2, 9)}`; // Unique ID per file
+
         try {
-          const raw = selectedFiles[i];
-          const optimisticId = `temp-${Date.now()}-${i}`;
+          // Validate file before upload
+          if (!raw || !raw.name || raw.size === undefined || raw.size <= 0) {
+            const errorMsg = `Invalid file: ${fileName}`;
+            console.error('Upload validation failed:', {
+              file: raw,
+              error: errorMsg
+            });
+            failureCount++;
+            errors.push(`${fileName}: Invalid file (missing name or size)`);
+            continue;
+          }
           const optimisticFile = {
             id: optimisticId,
             filename: raw.name,
@@ -491,6 +495,7 @@ const FileManagementScreen = ({
             prepend: true
           });
           const result = await uploadFileRaw(raw, targetUserId, oxyServices, defaultVisibility);
+
           // 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];
@@ -509,6 +514,8 @@ const FileManagementScreen = ({
             useFileStore.getState().addFile(merged, {
               prepend: true
             });
+            uploadedFiles.push(merged);
+            successCount++;
           } else {
             // Fallback: will reconcile on later list refresh
             useFileStore.getState().updateFile(optimisticId, {
@@ -516,19 +523,39 @@ const FileManagementScreen = ({
                 uploading: false
               }
             });
+            console.warn('Upload completed but no file data returned:', {
+              fileName,
+              result
+            });
+            // Still count as success if upload didn't throw
+            successCount++;
           }
-          successCount++;
         } catch (error) {
           failureCount++;
-          errors.push(`${selectedFiles[i].name}: ${error.message || 'Upload failed'}`);
+          const errorMessage = error.message || error.toString() || 'Upload failed';
+          const fullError = `${fileName}: ${errorMessage}`;
+          errors.push(fullError);
+          console.error('File upload failed:', {
+            fileName,
+            fileSize: raw.size,
+            fileType: raw.type,
+            error: errorMessage,
+            stack: error.stack
+          });
+
+          // Remove optimistic file on error (use the same optimisticId from above)
+          useFileStore.getState().removeFile(optimisticId);
         }
       }
+
+      // Show success/error messages
       if (successCount > 0) {
         toast.success(`${successCount} file(s) uploaded successfully`);
       }
       if (failureCount > 0) {
-        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);
+        // Show detailed error message with first few errors
+        const errorDetails = errors.length > 0 ? `\n${errors.slice(0, 3).join('\n')}${errors.length > 3 ? `\n...and ${errors.length - 3} more` : ''}` : '';
+        toast.error(`${failureCount} file(s) failed to upload${errorDetails}`);
       }
       // Silent background refresh to ensure metadata/variants updated
       setTimeout(() => {
@@ -539,31 +566,74 @@ const FileManagementScreen = ({
     } finally {
       storeSetUploadProgress(null);
     }
+    return uploadedFiles;
   };
   const handleFileSelection = useCallback(async selectedFiles => {
     const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
     const processedFiles = [];
     for (const file of selectedFiles) {
+      // Validate file has required properties
+      if (!file) {
+        console.error('Invalid file: file is null or undefined');
+        toast.error('Invalid file: file is missing');
+        continue;
+      }
+      if (!file.name || typeof file.name !== 'string') {
+        console.error('Invalid file: missing or invalid name property', file);
+        toast.error('Invalid file: missing file name');
+        continue;
+      }
+      if (file.size === undefined || file.size === null || isNaN(file.size)) {
+        console.error('Invalid file: missing or invalid size property', file);
+        toast.error(`Invalid file "${file.name || 'unknown'}": missing file size`);
+        continue;
+      }
+      if (file.size <= 0) {
+        console.error('Invalid file: file size is zero or negative', file);
+        toast.error(`File "${file.name}" is empty`);
+        continue;
+      }
+
       // Validate file size
       if (file.size > MAX_FILE_SIZE) {
         toast.error(`"${file.name}" is too large. Maximum file size is ${formatFileSize(MAX_FILE_SIZE)}`);
         continue;
       }
 
-      // Generate preview for images
+      // Ensure file has a type property
+      const fileType = file.type || 'application/octet-stream';
+
+      // Generate preview for images - unified approach
       let preview;
-      if (file.type.startsWith('image/')) {
-        preview = URL.createObjectURL(file);
+      if (fileType.startsWith('image/')) {
+        // Try to use file URI from expo-document-picker if available (works on all platforms)
+        const fileUri = file.uri;
+        if (fileUri && typeof fileUri === 'string' && (fileUri.startsWith('file://') || fileUri.startsWith('content://') || fileUri.startsWith('http://') || fileUri.startsWith('https://') || fileUri.startsWith('blob:'))) {
+          preview = fileUri;
+        } else {
+          // Fallback: create blob URL if possible (works on web)
+          try {
+            if (file instanceof File || file instanceof Blob) {
+              preview = URL.createObjectURL(file);
+            }
+          } catch (error) {
+            console.warn('Failed to create preview URL:', error);
+            // Preview is optional, continue without it
+          }
+        }
       }
       processedFiles.push({
         file,
         preview,
         size: file.size,
         name: file.name,
-        type: file.type
+        type: fileType
       });
     }
-    if (processedFiles.length === 0) return;
+    if (processedFiles.length === 0) {
+      toast.error('No valid files to upload');
+      return;
+    }
 
     // Show preview modal for user to review files before upload
     setPendingFiles(processedFiles);
@@ -581,7 +651,7 @@ const FileManagementScreen = ({
         current: 0,
         total: filesToUpload.length
       });
-      await processFileUploads(filesToUpload);
+      const uploadedFiles = await processFileUploads(filesToUpload);
 
       // Cleanup preview URLs
       pendingFiles.forEach(pf => {
@@ -590,6 +660,30 @@ const FileManagementScreen = ({
         }
       });
       setPendingFiles([]);
+
+      // If in selectMode, automatically select the uploaded file(s)
+      if (selectMode && uploadedFiles.length > 0) {
+        // Wait a bit for the file store to update and ensure file is available
+        setTimeout(() => {
+          const fileToSelect = uploadedFiles[0];
+          if (!multiSelect && fileToSelect) {
+            // Single select mode - directly call onSelect callback
+            onSelect?.(fileToSelect);
+            if (afterSelect === 'back') {
+              goBack?.();
+            } else if (afterSelect === 'close') {
+              onClose?.();
+            }
+          } else if (multiSelect) {
+            // Multi-select mode - add all uploaded files to selection
+            uploadedFiles.forEach(file => {
+              if (!selectedIds.has(file.id)) {
+                setSelectedIds(prev => new Set(prev).add(file.id));
+              }
+            });
+          }
+        }, 500);
+      }
       endUpload();
     } catch (error) {
       toast.error(error.message || 'Failed to upload files');
@@ -617,82 +711,110 @@ const FileManagementScreen = ({
       setShowUploadPreview(false);
     }
   };
+
+  /**
+   * Handle file upload - opens document picker and processes selected files
+   * Expo 54 compatible - works on web, iOS, and Android
+   */
   const handleFileUpload = async () => {
+    // Prevent concurrent document picker calls
+    if (isPickingDocument) {
+      toast.error('Please wait for the current file selection to complete');
+      return;
+    }
     try {
-      if (Platform.OS === 'web') {
-        // Enhanced web file picker
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.multiple = true;
-        input.accept = '*/*';
-        const cancellationTimer = setTimeout(() => {
-          const state = useFileStore.getState();
-          if (state.uploading && uploadStartRef.current && !state.uploadProgress) {
-            endUpload();
-          }
-        }, 1500);
-        input.onchange = async e => {
-          clearTimeout(cancellationTimer);
-          const selectedFiles = Array.from(e.target.files || []);
-          if (selectedFiles.length === 0) {
-            endUpload();
-            return;
-          }
-          await handleFileSelection(selectedFiles);
-        };
-        input.click();
-      } else {
-        // Mobile file picker with expo-document-picker
-        try {
-          // Dynamically import to avoid breaking if not installed
-          const DocumentPicker = await import('expo-document-picker').catch(() => null);
-          if (!DocumentPicker) {
-            toast.error('File picker not available. Please install expo-document-picker');
-            return;
-          }
-          const result = await DocumentPicker.getDocumentAsync({
-            type: '*/*',
-            multiple: true,
-            copyToCacheDirectory: true
-          });
-          if (result.canceled) {
-            return;
-          }
+      setIsPickingDocument(true);
 
-          // Convert expo document picker results to File-like objects
-          const files = [];
-          for (const doc of result.assets) {
-            if (doc.file) {
-              // expo-document-picker provides a File-like object
-              files.push(doc.file);
-            } else if (doc.uri) {
-              // Fallback: fetch and create Blob
-              const response = await fetch(doc.uri);
-              const blob = await response.blob();
-              const file = new File([blob], doc.name || 'file', {
-                type: doc.mimeType || 'application/octet-stream'
-              });
-              files.push(file);
-            }
-          }
-          if (files.length > 0) {
-            await handleFileSelection(files);
-          }
-        } catch (error) {
-          if (error.message?.includes('expo-document-picker')) {
-            toast.error('File picker not available. Please install expo-document-picker');
-          } else {
-            toast.error(error.message || 'Failed to select files');
+      // Dynamically import expo-document-picker (Expo 54 supports it on all platforms)
+      const DocumentPicker = await import('expo-document-picker').catch(() => null);
+      if (!DocumentPicker || !DocumentPicker.getDocumentAsync) {
+        toast.error('File picker not available. Please install expo-document-picker');
+        return;
+      }
+
+      // Use getDocumentAsync directly - it will handle platform availability
+      const result = await DocumentPicker.getDocumentAsync({
+        type: '*/*',
+        multiple: true,
+        copyToCacheDirectory: true
+      });
+      if (result.canceled) {
+        setIsPickingDocument(false);
+        return;
+      }
+      if (!result.assets || result.assets.length === 0) {
+        setIsPickingDocument(false);
+        toast.error('No files were selected');
+        return;
+      }
+
+      // Convert expo document picker results to File-like objects
+      // According to Expo 54 docs, expo-document-picker returns assets with:
+      // - uri: file URI (file://, content://, or blob URL)
+      // - name: file name
+      // - size: file size in bytes
+      // - mimeType: MIME type of the file
+      // - file: (optional) native File object (usually only on web)
+      const files = [];
+      const errors = [];
+
+      // Process files in parallel for better performance
+      // This allows multiple files to be converted simultaneously
+      const conversionPromises = result.assets.map((doc, index) => convertDocumentPickerAssetToFile(doc, index).then(file => {
+        if (file) {
+          // Validate file has required properties before adding
+          if (!file.name || file.size === undefined) {
+            errors.push(`File "${doc.name || 'file'}" is invalid: missing required properties`);
+            return null;
           }
+          return file;
         }
+        return null;
+      }).catch(error => {
+        errors.push(`File "${doc.name || 'file'}": ${error.message || 'Failed to process'}`);
+        return null;
+      }));
+      const convertedFiles = await Promise.all(conversionPromises);
+
+      // Filter out null values
+      for (const file of convertedFiles) {
+        if (file) {
+          files.push(file);
+        }
+      }
+
+      // Show errors if any
+      if (errors.length > 0) {
+        const errorMessage = errors.slice(0, 3).join('\n') + (errors.length > 3 ? `\n...and ${errors.length - 3} more` : '');
+        toast.error(`Failed to load some files:\n${errorMessage}`);
+      }
+
+      // Process successfully converted files
+      if (files.length > 0) {
+        await handleFileSelection(files);
+      } else {
+        // Files were selected but none could be converted
+        toast.error('No files could be processed. Please try selecting files again.');
       }
     } catch (error) {
-      toast.error(error.message || 'Failed to open file picker');
+      console.error('File upload error:', error);
+      if (error.message?.includes('expo-document-picker') || error.message?.includes('Different document picking in progress')) {
+        if (error.message?.includes('Different document picking in progress')) {
+          toast.error('Please wait for the current file selection to complete');
+        } else {
+          toast.error('File picker not available. Please install expo-document-picker');
+        }
+      } else {
+        toast.error(error.message || 'Failed to select files');
+      }
+    } finally {
+      // Always reset the picking state, even if there was an error
+      setIsPickingDocument(false);
     }
   };
   const handleFileDelete = async (fileId, filename) => {
-    // Use web-compatible confirmation dialog
-    const confirmed = window.confirm(`Are you sure you want to delete "${filename}"? This action cannot be undone.`);
+    // Use platform-aware confirmation dialog
+    const confirmed = await confirmAction(`Are you sure you want to delete "${filename}"? This action cannot be undone.`, 'Delete File', 'Delete', 'Cancel');
     if (!confirmed) {
       return;
     }
@@ -728,7 +850,7 @@ const FileManagementScreen = ({
       fileMap[f.id] = f;
     });
     const selectedFiles = Array.from(selectedIds).map(id => fileMap[id]).filter(Boolean);
-    const confirmed = window.confirm(`Are you sure you want to delete ${selectedFiles.length} file(s)? This action cannot be undone.`);
+    const confirmed = await confirmAction(`Are you sure you want to delete ${selectedFiles.length} file(s)? This action cannot be undone.`, 'Delete Files', 'Delete', 'Cancel');
     if (!confirmed) return;
     try {
       const deletePromises = Array.from(selectedIds).map(async fileId => {
@@ -804,70 +926,17 @@ const FileManagementScreen = ({
     }
   }, [selectedIds, oxyServices, files, loadFiles]);
 
-  // Global drag listeners (web) - attach to document for reliable drag and drop
-  useEffect(() => {
-    if (Platform.OS !== 'web' || user?.id !== targetUserId) return;
-    let dragCounter = 0; // Track drag enter/leave to handle nested elements
-
-    const onDragEnter = e => {
-      dragCounter++;
-      if (e?.dataTransfer?.types?.includes('Files')) {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(true);
-      }
-    };
-    const onDragOver = e => {
-      if (e?.dataTransfer?.types?.includes('Files')) {
-        e.preventDefault();
-        e.stopPropagation();
-        // Keep dragging state true while over document
-        setIsDragging(true);
-      }
-    };
-    const onDrop = async e => {
-      dragCounter = 0;
-      setIsDragging(false);
-      if (e?.dataTransfer?.files?.length) {
-        e.preventDefault();
-        e.stopPropagation();
-        try {
-          const files = Array.from(e.dataTransfer.files);
-          if (files.length > 0) {
-            await handleFileSelection(files);
-          }
-        } catch (error) {
-          toast.error(error.message || 'Failed to upload files');
-        }
-      }
-    };
-    const onDragLeave = e => {
-      dragCounter--;
-      // Only hide drag overlay if we're actually leaving the document (drag counter reaches 0)
-      if (dragCounter === 0) {
-        setIsDragging(false);
-      }
-    };
-
-    // Attach to document for global drag detection
-    document.addEventListener('dragenter', onDragEnter, false);
-    document.addEventListener('dragover', onDragOver, false);
-    document.addEventListener('drop', onDrop, false);
-    document.addEventListener('dragleave', onDragLeave, false);
-    return () => {
-      document.removeEventListener('dragenter', onDragEnter, false);
-      document.removeEventListener('dragover', onDragOver, false);
-      document.removeEventListener('drop', onDrop, false);
-      document.removeEventListener('dragleave', onDragLeave, false);
-    };
-  }, [user?.id, targetUserId, handleFileSelection]);
+  // Unified download function - works on all platforms
   const handleFileDownload = async (fileId, filename) => {
     try {
-      if (Platform.OS === 'web') {
-        // Use the public download URL method
-        const downloadUrl = oxyServices.getFileDownloadUrl(fileId);
+      // Try to use the download URL with a simple approach
+      // On web, this creates a download link. On mobile, it opens the URL.
+      const downloadUrl = oxyServices.getFileDownloadUrl(fileId);
+
+      // For web platforms, use link download
+      if (typeof window !== 'undefined' && window.document) {
         try {
-          // Method 1: Try simple link download first
+          // Try simple link download first
           const link = document.createElement('a');
           link.href = downloadUrl;
           link.download = filename;
@@ -877,9 +946,9 @@ const FileManagementScreen = ({
           document.body.removeChild(link);
           toast.success('File download started');
         } catch (linkError) {
-          // Method 2: Fallback to authenticated download
+          // Fallback to authenticated download
           const blob = await oxyServices.getFileContentAsBlob(fileId);
-          const url = window.URL.createObjectURL(blob);
+          const url = URL.createObjectURL(blob);
           const link = document.createElement('a');
           link.href = url;
           link.download = filename;
@@ -888,33 +957,19 @@ const FileManagementScreen = ({
           document.body.removeChild(link);
 
           // Clean up the blob URL
-          window.URL.revokeObjectURL(url);
+          URL.revokeObjectURL(url);
           toast.success('File downloaded successfully');
         }
       } else {
-        toast.info('File download not implemented for mobile yet');
+        // For mobile, open the URL (user can save from browser)
+        // Note: This is a simplified approach - for full mobile support,
+        // consider using expo-file-system or react-native-fs
+        toast.info('Please use your browser to download the file');
       }
     } catch (error) {
       toast.error(error.message || 'Failed to download file');
     }
   };
-  const formatFileSize = bytes => {
-    if (bytes === 0) return '0 Bytes';
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  };
-  const getFileIcon = contentType => {
-    if (contentType.startsWith('image/')) return 'image';
-    if (contentType.startsWith('video/')) return 'videocam';
-    if (contentType.startsWith('audio/')) return 'musical-notes';
-    if (contentType.includes('pdf')) return 'document-text';
-    if (contentType.includes('word') || contentType.includes('doc')) return 'document';
-    if (contentType.includes('excel') || contentType.includes('sheet')) return 'grid';
-    if (contentType.includes('zip') || contentType.includes('archive')) return 'archive';
-    return 'document-outline';
-  };
   const handleFileOpen = async file => {
     if (selectMode) {
       toggleSelect(file);
@@ -965,20 +1020,20 @@ const FileManagementScreen = ({
     setShowFileDetails(true);
   };
   const renderSimplePhotoItem = useCallback((photo, index) => {
-    const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
+    const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
 
     // Calculate photo item width based on actual container size from bottom sheet
     let itemsPerRow = 3; // Default for mobile
-    if (containerWidth > 768) itemsPerRow = 4; // Desktop/tablet
-    else if (containerWidth > 480) itemsPerRow = 3; // Large mobile
+    if (safeContainerWidth > 768) itemsPerRow = 4; // Desktop/tablet
+    else if (safeContainerWidth > 480) itemsPerRow = 3; // Large mobile
 
     // Account for the photoScrollContainer padding (16px on each side = 32px total)
     const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
     const gaps = (itemsPerRow - 1) * 4; // Gap between items (4px)
-    const availableWidth = containerWidth - scrollContainerPadding;
+    const availableWidth = safeContainerWidth - scrollContainerPadding;
     const itemWidth = (availableWidth - gaps) / itemsPerRow;
     return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.simplePhotoItem, {
+      style: [fileManagementStyles.simplePhotoItem, {
         width: itemWidth,
         height: itemWidth,
         marginRight: (index + 1) % itemsPerRow === 0 ? 0 : 4,
@@ -990,12 +1045,12 @@ const FileManagementScreen = ({
       onPress: () => handleFileOpen(photo),
       activeOpacity: 0.8,
       children: /*#__PURE__*/_jsxs(View, {
-        style: styles.simplePhotoContainer,
+        style: fileManagementStyles.simplePhotoContainer,
         children: [/*#__PURE__*/_jsx(ExpoImage, {
           source: {
             uri: downloadUrl
           },
-          style: styles.simplePhotoImage,
+          style: fileManagementStyles.simplePhotoImage,
           contentFit: "cover",
           transition: 120,
           cachePolicy: "memory-disk",
@@ -1004,7 +1059,7 @@ const FileManagementScreen = ({
           },
           accessibilityLabel: photo.filename
         }), selectMode && /*#__PURE__*/_jsx(View, {
-          style: styles.selectionBadge,
+          style: fileManagementStyles.selectionBadge,
           children: /*#__PURE__*/_jsx(Ionicons, {
             name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline',
             size: 20,
@@ -1013,11 +1068,11 @@ const FileManagementScreen = ({
         })]
       })
     }, photo.id);
-  }, [oxyServices, containerWidth, selectMode, selectedIds, themeStyles.primaryColor, themeStyles.textColor]);
+  }, [oxyServices, safeContainerWidth, selectMode, selectedIds, themeStyles.primaryColor, themeStyles.textColor]);
   const renderJustifiedPhotoItem = useCallback((photo, width, height, isLast) => {
-    const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
+    const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
     return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.justifiedPhotoItem, {
+      style: [fileManagementStyles.justifiedPhotoItem, {
         width,
         height,
         ...(selectMode && selectedIds.has(photo.id) ? {
@@ -1031,12 +1086,12 @@ const FileManagementScreen = ({
       onPress: () => handleFileOpen(photo),
       activeOpacity: 0.8,
       children: /*#__PURE__*/_jsxs(View, {
-        style: styles.justifiedPhotoContainer,
+        style: fileManagementStyles.justifiedPhotoContainer,
         children: [/*#__PURE__*/_jsx(ExpoImage, {
           source: {
             uri: downloadUrl
           },
-          style: styles.justifiedPhotoImage,
+          style: fileManagementStyles.justifiedPhotoImage,
           contentFit: "cover",
           transition: 120,
           cachePolicy: "memory-disk",
@@ -1045,7 +1100,7 @@ const FileManagementScreen = ({
           },
           accessibilityLabel: photo.filename
         }), selectMode && /*#__PURE__*/_jsx(View, {
-          style: styles.selectionBadge,
+          style: fileManagementStyles.selectionBadge,
           children: /*#__PURE__*/_jsx(Ionicons, {
             name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline',
             size: 20,
@@ -1074,7 +1129,7 @@ const FileManagementScreen = ({
     const hasPreview = isImage || isPDF || isVideo;
     const borderColor = themeStyles.borderColor;
     return /*#__PURE__*/_jsxs(View, {
-      style: [styles.fileItem, {
+      style: [fileManagementStyles.fileItem, {
         backgroundColor: themeStyles.secondaryBackgroundColor,
         borderColor
       }, selectMode && selectedIds.has(file.id) && {
@@ -1082,21 +1137,17 @@ const FileManagementScreen = ({
         borderWidth: 2
       }],
       children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.fileContent,
+        style: fileManagementStyles.fileContent,
         onPress: () => handleFileOpen(file),
         children: [/*#__PURE__*/_jsx(View, {
-          style: styles.filePreviewContainer,
+          style: fileManagementStyles.filePreviewContainer,
           children: hasPreview ? /*#__PURE__*/_jsxs(View, {
-            style: styles.filePreview,
-            ...(Platform.OS === 'web' && {
-              onMouseEnter: () => setHoveredPreview(file.id),
-              onMouseLeave: () => setHoveredPreview(null)
-            }),
+            style: fileManagementStyles.filePreview,
             children: [isImage && /*#__PURE__*/_jsx(ExpoImage, {
               source: {
-                uri: getSafeDownloadUrl(file, 'thumb')
+                uri: getSafeDownloadUrlCallback(file, 'thumb')
               },
-              style: styles.previewImage,
+              style: fileManagementStyles.previewImage,
               contentFit: "cover",
               transition: 120,
               cachePolicy: "memory-disk",
@@ -1105,24 +1156,24 @@ const FileManagementScreen = ({
               },
               accessibilityLabel: file.filename
             }), isPDF && /*#__PURE__*/_jsxs(View, {
-              style: styles.pdfPreview,
+              style: fileManagementStyles.pdfPreview,
               children: [/*#__PURE__*/_jsx(Ionicons, {
                 name: "document",
                 size: 32,
                 color: themeStyles.primaryColor
               }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.pdfLabel, {
+                style: [fileManagementStyles.pdfLabel, {
                   color: themeStyles.primaryColor
                 }],
                 children: "PDF"
               })]
             }), isVideo && /*#__PURE__*/_jsxs(View, {
-              style: styles.videoPreviewWrapper,
+              style: fileManagementStyles.videoPreviewWrapper,
               children: [/*#__PURE__*/_jsx(ExpoImage, {
                 source: {
-                  uri: getSafeDownloadUrl(file, 'thumb')
+                  uri: getSafeDownloadUrlCallback(file, 'thumb')
                 },
-                style: styles.videoPosterImage,
+                style: fileManagementStyles.videoPosterImage,
                 contentFit: "cover",
                 transition: 120,
                 cachePolicy: "memory-disk",
@@ -1131,7 +1182,7 @@ const FileManagementScreen = ({
                 },
                 accessibilityLabel: file.filename + ' video thumbnail'
               }), /*#__PURE__*/_jsx(View, {
-                style: styles.videoOverlay,
+                style: fileManagementStyles.videoOverlay,
                 children: /*#__PURE__*/_jsx(Ionicons, {
                   name: "play",
                   size: 24,
@@ -1139,26 +1190,16 @@ const FileManagementScreen = ({
                 })
               })]
             }), /*#__PURE__*/_jsx(View, {
-              style: [styles.fallbackIcon, {
+              style: [fileManagementStyles.fallbackIcon, {
                 display: isImage ? 'none' : 'flex'
               }],
-              ...(Platform.OS === 'web' && {
-                'data-fallback': 'true'
-              }),
               children: /*#__PURE__*/_jsx(Ionicons, {
                 name: getFileIcon(file.contentType),
                 size: 32,
                 color: themeStyles.primaryColor
               })
-            }), !selectMode && Platform.OS === 'web' && hoveredPreview === file.id && isImage && /*#__PURE__*/_jsx(View, {
-              style: styles.previewOverlay,
-              children: /*#__PURE__*/_jsx(Ionicons, {
-                name: "eye",
-                size: 24,
-                color: "#FFFFFF"
-              })
             }), selectMode && /*#__PURE__*/_jsx(View, {
-              style: styles.selectionBadge,
+              style: fileManagementStyles.selectionBadge,
               children: /*#__PURE__*/_jsx(Ionicons, {
                 name: selectedIds.has(file.id) ? 'checkmark-circle' : 'ellipse-outline',
                 size: 22,
@@ -1166,7 +1207,7 @@ const FileManagementScreen = ({
               })
             })]
           }) : /*#__PURE__*/_jsx(View, {
-            style: styles.fileIconContainer,
+            style: fileManagementStyles.fileIconContainer,
             children: /*#__PURE__*/_jsx(Ionicons, {
               name: getFileIcon(file.contentType),
               size: 32,
@@ -1174,20 +1215,20 @@ const FileManagementScreen = ({
             })
           })
         }), /*#__PURE__*/_jsxs(View, {
-          style: styles.fileInfo,
+          style: fileManagementStyles.fileInfo,
           children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.fileName, {
+            style: [fileManagementStyles.fileName, {
               color: themeStyles.textColor
             }],
             numberOfLines: 1,
             children: file.filename
           }), /*#__PURE__*/_jsxs(Text, {
-            style: [styles.fileDetails, {
+            style: [fileManagementStyles.fileDetails, {
               color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
             }],
             children: [formatFileSize(file.length), " \u2022 ", new Date(file.uploadDate).toLocaleDateString()]
           }), file.metadata?.description && /*#__PURE__*/_jsx(Text, {
-            style: [styles.fileDescription, {
+            style: [fileManagementStyles.fileDescription, {
               color: themeStyles.isDarkTheme ? '#AAAAAA' : '#888888'
             }],
             numberOfLines: 2,
@@ -1195,9 +1236,9 @@ const FileManagementScreen = ({
           })]
         })]
       }), !selectMode && /*#__PURE__*/_jsxs(View, {
-        style: styles.fileActions,
+        style: fileManagementStyles.fileActions,
         children: [hasPreview && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.actionButton, {
+          style: [fileManagementStyles.actionButton, {
             backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
           }],
           onPress: () => handleFileOpen(file),
@@ -1207,7 +1248,7 @@ const FileManagementScreen = ({
             color: themeStyles.primaryColor
           })
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.actionButton, {
+          style: [fileManagementStyles.actionButton, {
             backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
           }],
           onPress: () => handleFileDownload(file.id, file.filename),
@@ -1217,7 +1258,7 @@ const FileManagementScreen = ({
             color: themeStyles.primaryColor
           })
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.actionButton, {
+          style: [fileManagementStyles.actionButton, {
             backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE'
           }],
           onPress: () => {
@@ -1248,15 +1289,104 @@ const FileManagementScreen = ({
     });
     return sortedFiles.map(file => {
       const isImage = file.contentType.startsWith('image/');
+      const isPDF = file.contentType.includes('pdf');
       const isVideo = file.contentType.startsWith('video/');
-      const hasPreview = isImage || isVideo;
-      const previewUrl = hasPreview ? isVideo ? getSafeDownloadUrl(file, 'poster') : getSafeDownloadUrl(file, 'thumb') : undefined;
+      const hasPreview = isImage || isPDF || isVideo;
       const isSelected = selectedIds.has(file.id);
+
+      // Create customIcon for preview thumbnails (36x36 to match GroupedItem iconContainer)
+      let customIcon;
+      if (hasPreview) {
+        if (isImage) {
+          customIcon = /*#__PURE__*/_jsx(View, {
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: 18,
+              overflow: 'hidden'
+            },
+            children: /*#__PURE__*/_jsx(ExpoImage, {
+              source: {
+                uri: getSafeDownloadUrlCallback(file, 'thumb')
+              },
+              style: {
+                width: 36,
+                height: 36
+              },
+              contentFit: "cover",
+              transition: 120,
+              cachePolicy: "memory-disk",
+              onError: () => {
+                // Image preview failed to load - will fallback to icon
+              },
+              accessibilityLabel: file.filename
+            })
+          });
+        } else if (isVideo) {
+          customIcon = /*#__PURE__*/_jsxs(View, {
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: 18,
+              overflow: 'hidden',
+              backgroundColor: '#000000',
+              position: 'relative'
+            },
+            children: [/*#__PURE__*/_jsx(ExpoImage, {
+              source: {
+                uri: getSafeDownloadUrlCallback(file, 'thumb')
+              },
+              style: {
+                width: 36,
+                height: 36
+              },
+              contentFit: "cover",
+              transition: 120,
+              cachePolicy: "memory-disk",
+              onError: _ => {
+                // If thumbnail not available, we still show icon overlay
+              },
+              accessibilityLabel: file.filename + ' video thumbnail'
+            }), /*#__PURE__*/_jsx(View, {
+              style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'rgba(0,0,0,0.25)'
+              },
+              children: /*#__PURE__*/_jsx(Ionicons, {
+                name: "play",
+                size: 16,
+                color: "#FFFFFF"
+              })
+            })]
+          });
+        } else if (isPDF) {
+          customIcon = /*#__PURE__*/_jsx(View, {
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: 18,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: '#FF6B6B20'
+            },
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "document",
+              size: 20,
+              color: themeStyles.primaryColor
+            })
+          });
+        }
+      }
       return {
         id: file.id,
-        image: previewUrl,
-        imageSize: 44,
-        icon: !previewUrl ? getFileIcon(file.contentType) : undefined,
+        customIcon: customIcon,
+        icon: !hasPreview ? getFileIcon(file.contentType) : undefined,
         iconColor: themeStyles.primaryColor,
         title: file.filename,
         subtitle: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
@@ -1284,9 +1414,9 @@ const FileManagementScreen = ({
         selected: (selectMode || selectedIds.size > 0) && isSelected,
         // Hide action buttons when selecting (in selectMode or bulk operations mode)
         customContent: !selectMode && selectedIds.size === 0 ? /*#__PURE__*/_jsxs(View, {
-          style: styles.groupedActions,
+          style: fileManagementStyles.groupedActions,
           children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.groupedActionBtn, {
+            style: [fileManagementStyles.groupedActionBtn, {
               backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
             }],
             onPress: () => handleFileOpen(file),
@@ -1296,7 +1426,7 @@ const FileManagementScreen = ({
               color: themeStyles.primaryColor
             })
           }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.groupedActionBtn, {
+            style: [fileManagementStyles.groupedActionBtn, {
               backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
             }],
             onPress: () => handleFileDownload(file.id, file.filename),
@@ -1306,7 +1436,7 @@ const FileManagementScreen = ({
               color: themeStyles.primaryColor
             })
           }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.groupedActionBtn, {
+            style: [fileManagementStyles.groupedActionBtn, {
               backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE'
             }],
             onPress: () => handleFileDelete(file.id, file.filename),
@@ -1322,7 +1452,7 @@ const FileManagementScreen = ({
           })]
         }) : undefined,
         customContentBelow: file.metadata?.description ? /*#__PURE__*/_jsx(Text, {
-          style: [styles.groupedDescription, {
+          style: [fileManagementStyles.groupedDescription, {
             color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666'
           }],
           numberOfLines: 2,
@@ -1330,7 +1460,7 @@ const FileManagementScreen = ({
         }) : undefined
       };
     });
-  }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrl, selectMode, selectedIds]);
+  }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
 
   // Scroll to selected file after selection
   useEffect(() => {
@@ -1378,10 +1508,10 @@ const FileManagementScreen = ({
           // Estimate photo item height based on grid layout
           // Calculate items per row
           let itemsPerRow = 3;
-          if (containerWidth > 768) itemsPerRow = 6;else if (containerWidth > 480) itemsPerRow = 4;
+          if (safeContainerWidth > 768) itemsPerRow = 6;else if (safeContainerWidth > 480) itemsPerRow = 4;
           const scrollContainerPadding = 32;
           const gaps = (itemsPerRow - 1) * 4;
-          const availableWidth = containerWidth - scrollContainerPadding;
+          const availableWidth = safeContainerWidth - scrollContainerPadding;
           const itemWidth = (availableWidth - gaps) / itemsPerRow;
 
           // Calculate row and approximate scroll position
@@ -1401,7 +1531,7 @@ const FileManagementScreen = ({
         }
       }
     }
-  }, [lastSelectedFileId, selectMode, viewMode, filteredFiles, containerWidth]);
+  }, [lastSelectedFileId, selectMode, viewMode, filteredFiles, safeContainerWidth]);
 
   // Clear selected file ID after scroll animation completes
   useEffect(() => {
@@ -1414,32 +1544,32 @@ const FileManagementScreen = ({
     }
   }, [lastSelectedFileId]);
   const renderPhotoItem = (photo, index) => {
-    const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
+    const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
 
     // Calculate photo item width based on actual container size from bottom sheet
     let itemsPerRow = 3; // Default for mobile
-    if (containerWidth > 768) itemsPerRow = 6; // Tablet/Desktop
-    else if (containerWidth > 480) itemsPerRow = 4; // Large mobile
+    if (safeContainerWidth > 768) itemsPerRow = 6; // Tablet/Desktop
+    else if (safeContainerWidth > 480) itemsPerRow = 4; // Large mobile
 
     // Account for the photoScrollContainer padding (16px on each side = 32px total)
     const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
     const gaps = (itemsPerRow - 1) * 4; // Gap between items
-    const availableWidth = containerWidth - scrollContainerPadding;
+    const availableWidth = safeContainerWidth - scrollContainerPadding;
     const itemWidth = (availableWidth - gaps) / itemsPerRow;
     return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.photoItem, {
+      style: [fileManagementStyles.photoItem, {
         width: itemWidth,
         height: itemWidth
       }],
       onPress: () => handleFileOpen(photo),
       activeOpacity: 0.8,
       children: /*#__PURE__*/_jsx(View, {
-        style: styles.photoContainer,
+        style: fileManagementStyles.photoContainer,
         children: /*#__PURE__*/_jsx(ExpoImage, {
           source: {
             uri: downloadUrl
           },
-          style: styles.photoImage,
+          style: fileManagementStyles.photoImage,
           contentFit: "cover",
           transition: 120,
           cachePolicy: "memory-disk",
@@ -1455,37 +1585,40 @@ const FileManagementScreen = ({
     const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
     if (photos.length === 0) {
       return /*#__PURE__*/_jsxs(View, {
-        style: styles.emptyState,
+        style: fileManagementStyles.emptyState,
         children: [/*#__PURE__*/_jsx(Ionicons, {
           name: "images-outline",
           size: 64,
           color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
         }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.emptyStateTitle, {
+          style: [fileManagementStyles.emptyStateTitle, {
             color: themeStyles.textColor
           }],
           children: "No Photos Yet"
         }), /*#__PURE__*/_jsxs(Text, {
-          style: [styles.emptyStateDescription, {
+          style: [fileManagementStyles.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.` : "This user hasn't uploaded any photos yet", " "]
         }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.emptyStateButton, {
+          style: [fileManagementStyles.emptyStateButton, {
             backgroundColor: themeStyles.primaryColor
           }],
           onPress: handleFileUpload,
-          disabled: uploading,
+          disabled: uploading || isPickingDocument,
           children: uploading ? /*#__PURE__*/_jsx(ActivityIndicator, {
             size: "small",
             color: "#FFFFFF"
+          }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: "#FFFFFF"
           }) : /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(Ionicons, {
               name: "cloud-upload",
               size: 20,
               color: "#FFFFFF"
             }), /*#__PURE__*/_jsx(Text, {
-              style: styles.emptyStateButtonText,
+              style: fileManagementStyles.emptyStateButtonText,
               children: "Upload Photos"
             })]
           })
@@ -1494,8 +1627,8 @@ const FileManagementScreen = ({
     }
     return /*#__PURE__*/_jsxs(ScrollView, {
       ref: photoScrollViewRef,
-      style: styles.scrollView,
-      contentContainerStyle: styles.photoScrollContainer,
+      style: fileManagementStyles.scrollView,
+      contentContainerStyle: fileManagementStyles.photoScrollContainer,
       refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
         refreshing: refreshing,
         onRefresh: () => loadFiles('refresh'),
@@ -1517,12 +1650,12 @@ const FileManagementScreen = ({
       },
       scrollEventThrottle: 250,
       children: [loadingDimensions && /*#__PURE__*/_jsxs(View, {
-        style: styles.dimensionsLoadingIndicator,
+        style: fileManagementStyles.dimensionsLoadingIndicator,
         children: [/*#__PURE__*/_jsx(ActivityIndicator, {
           size: "small",
           color: themeStyles.primaryColor
         }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.dimensionsLoadingText, {
+          style: [fileManagementStyles.dimensionsLoadingText, {
             color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
           children: "Loading photo layout..."
@@ -1535,525 +1668,48 @@ const FileManagementScreen = ({
         renderJustifiedPhotoItem: renderJustifiedPhotoItem,
         renderSimplePhotoItem: renderPhotoItem,
         textColor: themeStyles.textColor,
-        containerWidth: containerWidth
+        containerWidth: safeContainerWidth
       })]
     });
-  }, [filteredFiles, themeStyles, user?.id, targetUserId, uploading, handleFileUpload, refreshing, loadFiles, loadingDimensions, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem, renderPhotoItem, containerWidth]);
+  }, [filteredFiles, themeStyles, user?.id, targetUserId, uploading, handleFileUpload, refreshing, loadFiles, loadingDimensions, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem, renderPhotoItem, safeContainerWidth]);
 
   // Inline justified grid removed (moved to components/photogrid/JustifiedPhotoGrid.tsx)
 
-  const renderFileDetailsModal = () => {
-    const backgroundColor = themeStyles.backgroundColor;
-    const borderColor = themeStyles.borderColor;
-    return /*#__PURE__*/_jsx(Modal, {
-      visible: showFileDetails,
-      animationType: "slide",
-      presentationStyle: "pageSheet",
-      onRequestClose: () => setShowFileDetails(false),
-      children: /*#__PURE__*/_jsxs(View, {
-        style: [styles.modalContainer, {
-          backgroundColor
-        }],
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: [styles.modalHeader, {
-            borderBottomColor: borderColor
-          }],
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.modalCloseButton,
-            onPress: () => setShowFileDetails(false),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "close",
-              size: 24,
-              color: themeStyles.textColor
-            })
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.modalTitle, {
-              color: themeStyles.textColor
-            }],
-            children: "File Details"
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.modalPlaceholder
-          })]
-        }), selectedFile && /*#__PURE__*/_jsx(ScrollView, {
-          style: styles.modalContent,
-          children: /*#__PURE__*/_jsxs(View, {
-            style: [styles.fileDetailCard, {
-              backgroundColor: themeStyles.secondaryBackgroundColor,
-              borderColor
-            }],
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.fileDetailIcon,
-              children: /*#__PURE__*/_jsx(Ionicons, {
-                name: getFileIcon(selectedFile.contentType),
-                size: 64,
-                color: themeStyles.primaryColor
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.fileDetailName, {
-                color: themeStyles.textColor
-              }],
-              children: selectedFile.filename
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.fileDetailInfo,
-              children: [/*#__PURE__*/_jsxs(View, {
-                style: styles.detailRow,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.detailLabel, {
-                    color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-                  }],
-                  children: "Size:"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: [styles.detailValue, {
-                    color: themeStyles.textColor
-                  }],
-                  children: formatFileSize(selectedFile.length)
-                })]
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.detailRow,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.detailLabel, {
-                    color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-                  }],
-                  children: "Type:"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: [styles.detailValue, {
-                    color: themeStyles.textColor
-                  }],
-                  children: selectedFile.contentType
-                })]
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.detailRow,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.detailLabel, {
-                    color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-                  }],
-                  children: "Uploaded:"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: [styles.detailValue, {
-                    color: themeStyles.textColor
-                  }],
-                  children: new Date(selectedFile.uploadDate).toLocaleString()
-                })]
-              }), selectedFile.metadata?.description && /*#__PURE__*/_jsxs(View, {
-                style: styles.detailRow,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.detailLabel, {
-                    color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-                  }],
-                  children: "Description:"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: [styles.detailValue, {
-                    color: themeStyles.textColor
-                  }],
-                  children: selectedFile.metadata.description
-                })]
-              })]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.modalActions,
-              children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-                style: [styles.modalActionButton, {
-                  backgroundColor: themeStyles.primaryColor
-                }],
-                onPress: () => {
-                  handleFileDownload(selectedFile.id, selectedFile.filename);
-                  setShowFileDetails(false);
-                },
-                children: [/*#__PURE__*/_jsx(Ionicons, {
-                  name: "download",
-                  size: 20,
-                  color: "#FFFFFF"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: styles.modalActionText,
-                  children: "Download"
-                })]
-              }), user?.id === targetUserId && /*#__PURE__*/_jsxs(TouchableOpacity, {
-                style: [styles.modalActionButton, {
-                  backgroundColor: themeStyles.dangerColor
-                }],
-                onPress: () => {
-                  setShowFileDetails(false);
-                  handleFileDelete(selectedFile.id, selectedFile.filename);
-                },
-                children: [/*#__PURE__*/_jsx(Ionicons, {
-                  name: "trash",
-                  size: 20,
-                  color: "#FFFFFF"
-                }), /*#__PURE__*/_jsx(Text, {
-                  style: styles.modalActionText,
-                  children: "Delete"
-                })]
-              })]
-            })]
-          })
-        })]
-      })
-    });
-  };
-  const renderFileViewer = () => {
-    if (!openedFile) return null;
-    const backgroundColor = themeStyles.backgroundColor;
-    const borderColor = themeStyles.borderColor;
-    const isImage = openedFile.contentType.startsWith('image/');
-    const isText = openedFile.contentType.startsWith('text/') || openedFile.contentType.includes('json') || openedFile.contentType.includes('xml') || openedFile.contentType.includes('javascript') || openedFile.contentType.includes('typescript');
-    const isPDF = openedFile.contentType.includes('pdf');
-    const isVideo = openedFile.contentType.startsWith('video/');
-    const isAudio = openedFile.contentType.startsWith('audio/');
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.fileViewerContainer, {
-        backgroundColor
-      }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: [styles.fileViewerHeader, {
-          borderBottomColor: borderColor
-        }],
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.backButton,
-          onPress: handleCloseFile,
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: "arrow-back",
-            size: 24,
-            color: themeStyles.textColor
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.fileViewerTitleContainer,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.fileViewerTitle, {
-              color: themeStyles.textColor
-            }],
-            numberOfLines: 1,
-            children: openedFile.filename
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: [styles.fileViewerSubtitle, {
-              color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-            }],
-            children: [formatFileSize(openedFile.length), " \u2022 ", openedFile.contentType]
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.fileViewerActions,
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.actionButton, {
-              backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
-            }],
-            onPress: () => handleFileDownload(openedFile.id, openedFile.filename),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "download",
-              size: 20,
-              color: themeStyles.primaryColor
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.actionButton, {
-              backgroundColor: showFileDetailsInViewer ? themeStyles.primaryColor : themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
-            }],
-            onPress: () => setShowFileDetailsInViewer(!showFileDetailsInViewer),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: showFileDetailsInViewer ? "chevron-up" : "information-circle",
-              size: 20,
-              color: showFileDetailsInViewer ? "#FFFFFF" : themeStyles.primaryColor
-            })
-          })]
-        })]
-      }), showFileDetailsInViewer && /*#__PURE__*/_jsxs(View, {
-        style: [styles.fileDetailsSection, {
-          backgroundColor: themeStyles.secondaryBackgroundColor,
-          borderColor
-        }],
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.fileDetailsSectionHeader,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.fileDetailsSectionTitle, {
-              color: themeStyles.textColor
-            }],
-            children: "File Details"
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.fileDetailsSectionToggle,
-            onPress: () => setShowFileDetailsInViewer(false),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "chevron-up",
-              size: 20,
-              color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-            })
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.fileDetailInfo,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.detailRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.detailLabel, {
-                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-              }],
-              children: "File Name:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.detailValue, {
-                color: themeStyles.textColor
-              }],
-              children: openedFile.filename
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.detailRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.detailLabel, {
-                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-              }],
-              children: "Size:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.detailValue, {
-                color: themeStyles.textColor
-              }],
-              children: formatFileSize(openedFile.length)
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.detailRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.detailLabel, {
-                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-              }],
-              children: "Type:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.detailValue, {
-                color: themeStyles.textColor
-              }],
-              children: openedFile.contentType
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.detailRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.detailLabel, {
-                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-              }],
-              children: "Uploaded:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.detailValue, {
-                color: themeStyles.textColor
-              }],
-              children: new Date(openedFile.uploadDate).toLocaleString()
-            })]
-          }), openedFile.metadata?.description && /*#__PURE__*/_jsxs(View, {
-            style: styles.detailRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.detailLabel, {
-                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-              }],
-              children: "Description:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.detailValue, {
-                color: themeStyles.textColor
-              }],
-              children: openedFile.metadata.description
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.detailRow,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.detailLabel, {
-                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-              }],
-              children: "File ID:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.detailValue, {
-                color: themeStyles.textColor,
-                fontSize: 12,
-                fontFamily: Platform.OS === 'web' ? 'monospace' : 'Courier'
-              }],
-              children: openedFile.id
-            })]
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.fileDetailsActions,
-          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.fileDetailsActionButton, {
-              backgroundColor: themeStyles.primaryColor
-            }],
-            onPress: () => handleFileDownload(openedFile.id, openedFile.filename),
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "download",
-              size: 16,
-              color: "#FFFFFF"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.fileDetailsActionText,
-              children: "Download"
-            })]
-          }), user?.id === targetUserId && /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.fileDetailsActionButton, {
-              backgroundColor: themeStyles.dangerColor
-            }],
-            onPress: () => {
-              handleCloseFile();
-              handleFileDelete(openedFile.id, openedFile.filename);
-            },
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "trash",
-              size: 16,
-              color: "#FFFFFF"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.fileDetailsActionText,
-              children: "Delete"
-            })]
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        style: [styles.fileViewerContent, showFileDetailsInViewer && styles.fileViewerContentWithDetails],
-        contentContainerStyle: styles.fileViewerContentContainer,
-        children: loadingFileContent ? /*#__PURE__*/_jsxs(View, {
-          style: styles.fileViewerLoading,
-          children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "large",
-            color: themeStyles.primaryColor
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.fileViewerLoadingText, {
-              color: themeStyles.textColor
-            }],
-            children: "Loading file content..."
-          })]
-        }) : isImage && fileContent ? /*#__PURE__*/_jsx(View, {
-          style: styles.imageContainer,
-          children: /*#__PURE__*/_jsx(ExpoImage, {
-            source: {
-              uri: fileContent
-            },
-            style: {
-              width: '100%',
-              height: 400,
-              borderRadius: 8
-            },
-            contentFit: "contain",
-            transition: 120,
-            cachePolicy: "memory-disk",
-            onError: () => {
-              // Image failed to load
-            },
-            accessibilityLabel: openedFile.filename
-          })
-        }) : isText && fileContent ? /*#__PURE__*/_jsx(View, {
-          style: [styles.textContainer, {
-            backgroundColor: themeStyles.secondaryBackgroundColor,
-            borderColor
-          }],
-          children: /*#__PURE__*/_jsx(ScrollView, {
-            style: {
-              flex: 1
-            },
-            nestedScrollEnabled: true,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.textContent, {
-                color: themeStyles.textColor
-              }],
-              children: fileContent
-            })
-          })
-        }) : isPDF && fileContent && Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
-          style: styles.pdfContainer,
-          children: /*#__PURE__*/_jsx("iframe", {
-            src: fileContent,
-            width: "100%",
-            height: "600px",
-            style: {
-              border: 'none',
-              borderRadius: 8
-            },
-            title: openedFile.filename
-          })
-        }) : isVideo && fileContent ? /*#__PURE__*/_jsx(View, {
-          style: styles.mediaContainer,
-          children: Platform.OS === 'web' ? /*#__PURE__*/_jsxs("video", {
-            controls: true,
-            style: {
-              width: '100%',
-              maxHeight: '70vh',
-              borderRadius: 8
-            },
-            children: [/*#__PURE__*/_jsx("source", {
-              src: fileContent,
-              type: openedFile.contentType
-            }), "Your browser does not support the video tag."]
-          }) : /*#__PURE__*/_jsx(Text, {
-            style: [styles.unsupportedText, {
-              color: themeStyles.textColor
-            }],
-            children: "Video playback not supported on mobile"
-          })
-        }) : isAudio && fileContent ? /*#__PURE__*/_jsx(View, {
-          style: styles.mediaContainer,
-          children: Platform.OS === 'web' ? /*#__PURE__*/_jsxs("audio", {
-            controls: true,
-            style: {
-              width: '100%',
-              borderRadius: 8
-            },
-            children: [/*#__PURE__*/_jsx("source", {
-              src: fileContent,
-              type: openedFile.contentType
-            }), "Your browser does not support the audio tag."]
-          }) : /*#__PURE__*/_jsx(Text, {
-            style: [styles.unsupportedText, {
-              color: themeStyles.textColor
-            }],
-            children: "Audio playback not supported on mobile"
-          })
-        }) : /*#__PURE__*/_jsxs(View, {
-          style: styles.unsupportedFileContainer,
-          children: [/*#__PURE__*/_jsx(Ionicons, {
-            name: getFileIcon(openedFile.contentType),
-            size: 64,
-            color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.unsupportedFileTitle, {
-              color: themeStyles.textColor
-            }],
-            children: "Preview Not Available"
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: [styles.unsupportedFileDescription, {
-              color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-            }],
-            children: ["This file type cannot be previewed in the browser.", '\n', "Download the file to view its contents."]
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.downloadButtonLarge, {
-              backgroundColor: themeStyles.primaryColor
-            }],
-            onPress: () => handleFileDownload(openedFile.id, openedFile.filename),
-            children: [/*#__PURE__*/_jsx(Ionicons, {
-              name: "download",
-              size: 20,
-              color: "#FFFFFF"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.downloadButtonText,
-              children: "Download File"
-            })]
-          })]
-        })
-      })]
-    });
-  };
   const renderEmptyState = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.emptyState,
+    style: fileManagementStyles.emptyState,
     children: [/*#__PURE__*/_jsx(Ionicons, {
       name: "folder-open-outline",
       size: 64,
       color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
     }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.emptyStateTitle, {
+      style: [fileManagementStyles.emptyStateTitle, {
         color: themeStyles.textColor
       }],
       children: "No Files Yet"
     }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.emptyStateDescription, {
+      style: [fileManagementStyles.emptyStateDescription, {
         color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
       }],
-      children: user?.id === targetUserId ? `Upload files to get started. You can select multiple files at once${Platform.OS === 'web' ? ' or drag & drop them here.' : '.'}` : "This user hasn't uploaded any files yet"
+      children: user?.id === targetUserId ? `Upload files to get started. You can select multiple files at once.` : "This user hasn't uploaded any files yet"
     }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.emptyStateButton, {
+      style: [fileManagementStyles.emptyStateButton, {
         backgroundColor: themeStyles.primaryColor
       }],
       onPress: handleFileUpload,
-      disabled: uploading,
+      disabled: uploading || isPickingDocument,
       children: uploading ? /*#__PURE__*/_jsx(ActivityIndicator, {
         size: "small",
         color: "#FFFFFF"
+      }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: "#FFFFFF"
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Ionicons, {
           name: "cloud-upload",
           size: 20,
           color: "#FFFFFF"
         }), /*#__PURE__*/_jsx(Text, {
-          style: styles.emptyStateButtonText,
+          style: fileManagementStyles.emptyStateButtonText,
           children: "Upload Files"
         })]
       })
@@ -2063,7 +1719,7 @@ const FileManagementScreen = ({
   // Professional Skeleton Loading Component with Advanced Shimmer Effect
   const SkeletonLoader = /*#__PURE__*/React.memo(() => {
     const shimmerAnim = useRef(new Animated.Value(0)).current;
-    const skeletonContainerWidth = containerWidth || 400;
+    const skeletonContainerWidth = safeContainerWidth;
     useEffect(() => {
       const shimmer = Animated.loop(Animated.timing(shimmerAnim, {
         toValue: 1,
@@ -2177,11 +1833,11 @@ const FileManagementScreen = ({
       })]
     });
     return /*#__PURE__*/_jsxs(View, {
-      style: [styles.container, {
+      style: [fileManagementStyles.container, {
         backgroundColor
       }],
       children: [/*#__PURE__*/_jsxs(View, {
-        style: [styles.header, {
+        style: [fileManagementStyles.header, {
           borderBottomColor: themeStyles.borderColor,
           borderBottomWidth: StyleSheet.hairlineWidth
         }],
@@ -2190,7 +1846,7 @@ const FileManagementScreen = ({
           height: 44,
           borderRadius: 12
         }), /*#__PURE__*/_jsxs(View, {
-          style: [styles.headerTitleContainer, {
+          style: [fileManagementStyles.headerTitleContainer, {
             flex: 1
           }],
           children: [/*#__PURE__*/_jsx(SkeletonBox, {
@@ -2209,7 +1865,7 @@ const FileManagementScreen = ({
           borderRadius: 12
         })]
       }), /*#__PURE__*/_jsxs(View, {
-        style: styles.controlsBar,
+        style: fileManagementStyles.controlsBar,
         children: [/*#__PURE__*/_jsx(SkeletonBox, {
           width: 100,
           height: 36,
@@ -2220,10 +1876,8 @@ const FileManagementScreen = ({
           borderRadius: 22
         })]
       }), /*#__PURE__*/_jsx(View, {
-        style: [styles.searchContainer, {
-          backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
-          borderColor: themeStyles.borderColor,
-          borderWidth: StyleSheet.hairlineWidth
+        style: [fileManagementStyles.searchContainer, {
+          backgroundColor: themeStyles.colors.card
         }],
         children: /*#__PURE__*/_jsx(SkeletonBox, {
           width: "100%",
@@ -2231,13 +1885,11 @@ const FileManagementScreen = ({
           borderRadius: 12
         })
       }), /*#__PURE__*/_jsx(View, {
-        style: [styles.statsContainer, {
-          backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
-          borderColor: themeStyles.borderColor,
-          borderWidth: StyleSheet.hairlineWidth
+        style: [fileManagementStyles.statsContainer, {
+          backgroundColor: themeStyles.colors.card
         }],
         children: [1, 2, 3].map(i => /*#__PURE__*/_jsxs(View, {
-          style: styles.statItem,
+          style: fileManagementStyles.statItem,
           children: [/*#__PURE__*/_jsx(SkeletonBox, {
             width: 50,
             height: 20,
@@ -2252,15 +1904,14 @@ const FileManagementScreen = ({
           })]
         }, i))
       }), /*#__PURE__*/_jsx(ScrollView, {
-        style: styles.scrollView,
-        contentContainerStyle: styles.scrollContainer,
+        style: fileManagementStyles.scrollView,
+        contentContainerStyle: fileManagementStyles.scrollContainer,
         showsVerticalScrollIndicator: false,
         children: /*#__PURE__*/_jsx(View, {
           style: {
-            backgroundColor: themeStyles.isDarkTheme ? '#121212' : '#FFFFFF',
-            borderRadius: 12,
+            backgroundColor: themeStyles.colors.card,
+            borderRadius: 18,
             overflow: 'hidden',
-            marginHorizontal: 16,
             marginTop: 8
           },
           children: [1, 2, 3, 4, 5, 6, 7, 8].map(i => /*#__PURE__*/_jsx(SkeletonFileItem, {
@@ -2277,12 +1928,54 @@ const FileManagementScreen = ({
   // If a file is opened, show the file viewer
   if (!selectMode && openedFile) {
     return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [renderFileViewer(), renderFileDetailsModal()]
+      children: [/*#__PURE__*/_jsx(FileViewer, {
+        file: openedFile,
+        fileContent: fileContent,
+        loadingFileContent: loadingFileContent,
+        showFileDetailsInViewer: showFileDetailsInViewer,
+        onToggleDetails: () => setShowFileDetailsInViewer(!showFileDetailsInViewer),
+        onClose: handleCloseFile,
+        onDownload: handleFileDownload,
+        onDelete: handleFileDelete,
+        themeStyles: themeStyles,
+        isOwner: user?.id === targetUserId
+      }), /*#__PURE__*/_jsx(FileDetailsModal, {
+        visible: showFileDetails,
+        file: selectedFile,
+        onClose: () => setShowFileDetails(false),
+        onDownload: handleFileDownload,
+        onDelete: handleFileDelete,
+        themeStyles: themeStyles,
+        isOwner: user?.id === targetUserId
+      })]
+    });
+  }
+
+  // If upload preview is showing, render it inline instead of the file list
+  if (showUploadPreview) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: fileManagementStyles.container,
+      children: [/*#__PURE__*/_jsx(Header, {
+        title: "Review Files",
+        subtitle: `${pendingFiles.length} file${pendingFiles.length !== 1 ? 's' : ''} ready to upload`,
+        onBack: handleCancelUpload,
+        showBackButton: true,
+        variant: "minimal",
+        elevation: "none",
+        titleAlignment: "left"
+      }), /*#__PURE__*/_jsx(UploadPreview, {
+        visible: true,
+        pendingFiles: pendingFiles,
+        onConfirm: handleConfirmUpload,
+        onCancel: handleCancelUpload,
+        onRemoveFile: removePendingFile,
+        themeStyles: themeStyles,
+        inline: true
+      })]
     });
   }
   return /*#__PURE__*/_jsxs(View, {
-    ref: containerRef,
-    style: [styles.container, isDragging && Platform.OS === 'web' && styles.dragOverlay],
+    style: fileManagementStyles.container,
     children: [/*#__PURE__*/_jsx(Header, {
       title: selectMode ? multiSelect ? `${selectedIds.size}${maxSelection ? '/' + maxSelection : ''} Selected` : 'Select a File' : viewMode === 'photos' ? 'Photos' : 'File Management',
       subtitle: selectMode ? multiSelect ? `${filteredFiles.length} available` : 'Tap to select' : `${filteredFiles.length} ${filteredFiles.length === 1 ? 'item' : 'items'}`,
@@ -2327,79 +2020,60 @@ const FileManagementScreen = ({
         icon: 'eye'
       }] : undefined,
       onBack: onClose || goBack,
-      theme: theme,
       showBackButton: true,
       variant: "minimal",
       elevation: "none",
       titleAlignment: "left"
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.controlsBar,
+      style: fileManagementStyles.controlsBar,
       children: [/*#__PURE__*/_jsx(ScrollView, {
         horizontal: true,
         showsHorizontalScrollIndicator: false,
-        style: styles.viewModeScroll,
+        style: fileManagementStyles.viewModeScroll,
         children: /*#__PURE__*/_jsxs(View, {
-          style: [styles.viewModeToggle, {
-            backgroundColor: themeStyles.isDarkTheme ? '#181818' : '#FFFFFF',
-            borderWidth: 1,
-            borderColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#E8E9EA'
+          style: [fileManagementStyles.viewModeToggle, {
+            backgroundColor: themeStyles.colors.card
           }],
-          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.viewModeButton, viewMode === 'all' && {
-              backgroundColor: themeStyles.primaryColor
-            }],
+          children: [/*#__PURE__*/_jsx(AnimatedButton, {
+            isSelected: viewMode === 'all',
             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
-            }],
+            icon: viewMode === 'all' ? 'folder' : 'folder-outline',
+            primaryColor: themeStyles.primaryColor,
+            textColor: themeStyles.textColor,
+            style: fileManagementStyles.viewModeButton
+          }), /*#__PURE__*/_jsx(AnimatedButton, {
+            isSelected: viewMode === 'photos',
             onPress: () => setViewMode('photos'),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "images",
-              size: 18,
-              color: viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.viewModeButton, viewMode === 'videos' && {
-              backgroundColor: themeStyles.primaryColor
-            }],
+            icon: viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline',
+            primaryColor: themeStyles.primaryColor,
+            textColor: themeStyles.textColor,
+            style: fileManagementStyles.viewModeButton
+          }), /*#__PURE__*/_jsx(AnimatedButton, {
+            isSelected: viewMode === 'videos',
             onPress: () => setViewMode('videos'),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "videocam",
-              size: 18,
-              color: viewMode === 'videos' ? '#FFFFFF' : themeStyles.textColor
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.viewModeButton, viewMode === 'documents' && {
-              backgroundColor: themeStyles.primaryColor
-            }],
+            icon: viewMode === 'videos' ? 'video' : 'video-outline',
+            primaryColor: themeStyles.primaryColor,
+            textColor: themeStyles.textColor,
+            style: fileManagementStyles.viewModeButton
+          }), /*#__PURE__*/_jsx(AnimatedButton, {
+            isSelected: viewMode === 'documents',
             onPress: () => setViewMode('documents'),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "document-text",
-              size: 18,
-              color: viewMode === 'documents' ? '#FFFFFF' : themeStyles.textColor
-            })
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.viewModeButton, viewMode === 'audio' && {
-              backgroundColor: themeStyles.primaryColor
-            }],
+            icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
+            primaryColor: themeStyles.primaryColor,
+            textColor: themeStyles.textColor,
+            style: fileManagementStyles.viewModeButton
+          }), /*#__PURE__*/_jsx(AnimatedButton, {
+            isSelected: viewMode === 'audio',
             onPress: () => setViewMode('audio'),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: "musical-notes",
-              size: 18,
-              color: viewMode === 'audio' ? '#FFFFFF' : themeStyles.textColor
-            })
+            icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
+            primaryColor: themeStyles.primaryColor,
+            textColor: themeStyles.textColor,
+            style: fileManagementStyles.viewModeButton
           })]
         })
       }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.sortButton, {
-          backgroundColor: themeStyles.isDarkTheme ? '#181818' : '#FFFFFF',
-          borderColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#E8E9EA'
+        style: [fileManagementStyles.sortButton, {
+          backgroundColor: themeStyles.colors.card
         }],
         onPress: () => {
           // Cycle through sort options: date -> size -> name -> type -> date
@@ -2412,33 +2086,33 @@ const FileManagementScreen = ({
             setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
           }
         },
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: sortOrder === 'asc' ? 'arrow-up' : 'arrow-down',
-          size: 18,
-          color: themeStyles.textColor
-        }), /*#__PURE__*/_jsx(Ionicons, {
-          name: sortBy === 'date' ? 'calendar' : sortBy === 'size' ? 'resize' : sortBy === 'name' ? 'text' : 'document',
+        children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: sortBy === 'date' ? 'calendar' : sortBy === 'size' ? 'sort-numeric-variant' : sortBy === 'name' ? 'sort-alphabetical-variant' : 'file-document-outline',
           size: 16,
-          color: themeStyles.textColor,
-          style: {
-            marginLeft: 4
-          }
+          color: themeStyles.textColor
+        }), /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+          name: sortOrder === 'asc' ? 'arrow-up' : 'arrow-down',
+          size: 14,
+          color: themeStyles.colors.secondaryText
         })]
       }), user?.id === targetUserId && (!selectMode || selectMode && allowUploadInSelectMode) && /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.uploadButton, {
+        style: [fileManagementStyles.uploadButton, {
           backgroundColor: themeStyles.primaryColor
         }],
         onPress: handleFileUpload,
-        disabled: uploading,
+        disabled: uploading || isPickingDocument,
         children: uploading ? /*#__PURE__*/_jsxs(View, {
-          style: styles.uploadProgress,
+          style: fileManagementStyles.uploadProgress,
           children: [/*#__PURE__*/_jsx(ActivityIndicator, {
             size: "small",
             color: "#FFFFFF"
           }), uploadProgress && /*#__PURE__*/_jsxs(Text, {
-            style: styles.uploadProgressText,
+            style: fileManagementStyles.uploadProgressText,
             children: [uploadProgress.current, "/", uploadProgress.total]
           })]
+        }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: "#FFFFFF"
         }) : /*#__PURE__*/_jsx(Ionicons, {
           name: "add",
           size: 22,
@@ -2446,80 +2120,78 @@ const FileManagementScreen = ({
         })
       })]
     }), 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'
+      style: [fileManagementStyles.searchContainer, {
+        backgroundColor: themeStyles.colors.card
       }],
       children: [/*#__PURE__*/_jsx(Ionicons, {
         name: "search",
         size: 22,
-        color: themeStyles.isDarkTheme ? '#888888' : '#666666'
+        color: themeStyles.colors.icon
       }), /*#__PURE__*/_jsx(TextInput, {
-        style: [styles.searchInput, {
+        style: [fileManagementStyles.searchInput, {
           color: themeStyles.textColor
         }],
         placeholder: viewMode === 'photos' ? 'Search photos...' : 'Search files...',
-        placeholderTextColor: themeStyles.isDarkTheme ? '#888888' : '#999999',
+        placeholderTextColor: themeStyles.colors.secondaryText,
         value: searchQuery,
         onChangeText: setSearchQuery
       }), searchQuery.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: () => setSearchQuery(''),
-        style: styles.searchClearButton,
+        style: fileManagementStyles.searchClearButton,
         children: /*#__PURE__*/_jsx(Ionicons, {
           name: "close-circle",
           size: 22,
-          color: themeStyles.isDarkTheme ? '#888888' : '#666666'
+          color: themeStyles.colors.icon
         })
       })]
     }), files.length > 0 && /*#__PURE__*/_jsxs(View, {
-      style: [styles.statsContainer, {
-        backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
-        borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA'
+      style: [fileManagementStyles.statsContainer, {
+        backgroundColor: themeStyles.colors.card
       }],
       children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.statItem,
+        style: fileManagementStyles.statItem,
         children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.statValue, {
+          style: [fileManagementStyles.statValue, {
             color: themeStyles.textColor
           }],
           children: filteredFiles.length
         }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.statLabel, {
-            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
+          style: [fileManagementStyles.statLabel, {
+            color: themeStyles.colors.secondaryText
           }],
           children: searchQuery.length > 0 ? 'Found' : filteredFiles.length === 1 ? viewMode === 'photos' ? 'Photo' : 'File' : viewMode === 'photos' ? 'Photos' : 'Files'
         })]
       }), /*#__PURE__*/_jsxs(View, {
-        style: styles.statItem,
+        style: fileManagementStyles.statItem,
         children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.statValue, {
+          style: [fileManagementStyles.statValue, {
             color: themeStyles.textColor
           }],
           children: formatFileSize(filteredFiles.reduce((total, file) => total + file.length, 0))
         }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.statLabel, {
-            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
+          style: [fileManagementStyles.statLabel, {
+            color: themeStyles.colors.secondaryText
           }],
           children: searchQuery.length > 0 ? 'Size' : 'Total Size'
         })]
       }), searchQuery.length > 0 && /*#__PURE__*/_jsxs(View, {
-        style: styles.statItem,
+        style: fileManagementStyles.statItem,
         children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.statValue, {
+          style: [fileManagementStyles.statValue, {
             color: themeStyles.textColor
           }],
           children: files.length
         }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.statLabel, {
-            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
+          style: [fileManagementStyles.statLabel, {
+            color: themeStyles.colors.secondaryText
           }],
           children: "Total"
         })]
       })]
     }), viewMode === 'photos' ? renderPhotoGrid() : /*#__PURE__*/_jsx(ScrollView, {
       ref: scrollViewRef,
-      style: styles.scrollView,
-      contentContainerStyle: styles.scrollContainer,
+      style: fileManagementStyles.scrollView,
+      contentContainerStyle: fileManagementStyles.scrollContainer,
       refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
         refreshing: refreshing,
         onRefresh: () => loadFiles('refresh'),
@@ -2540,23 +2212,23 @@ const FileManagementScreen = ({
       },
       scrollEventThrottle: 250,
       children: filteredFiles.length === 0 && searchQuery.length > 0 ? /*#__PURE__*/_jsxs(View, {
-        style: styles.emptyState,
+        style: fileManagementStyles.emptyState,
         children: [/*#__PURE__*/_jsx(Ionicons, {
           name: "search",
           size: 64,
           color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
         }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.emptyStateTitle, {
+          style: [fileManagementStyles.emptyStateTitle, {
             color: themeStyles.textColor
           }],
           children: "No Results Found"
         }), /*#__PURE__*/_jsxs(Text, {
-          style: [styles.emptyStateDescription, {
+          style: [fileManagementStyles.emptyStateDescription, {
             color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
           children: ["No files match your search for \"", searchQuery, "\""]
         }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: [styles.emptyStateButton, {
+          style: [fileManagementStyles.emptyStateButton, {
             backgroundColor: themeStyles.primaryColor
           }],
           onPress: () => setSearchQuery(''),
@@ -2565,33 +2237,40 @@ const FileManagementScreen = ({
             size: 20,
             color: "#FFFFFF"
           }), /*#__PURE__*/_jsx(Text, {
-            style: styles.emptyStateButtonText,
+            style: fileManagementStyles.emptyStateButtonText,
             children: "Clear Search"
           })]
         })]
       }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(GroupedSection, {
-          items: groupedFileItems,
-          theme: theme
+          items: groupedFileItems
         }), paging.loadingMore && /*#__PURE__*/_jsxs(View, {
-          style: styles.loadingMoreBar,
+          style: fileManagementStyles.loadingMoreBar,
           children: [/*#__PURE__*/_jsx(ActivityIndicator, {
             size: "small",
             color: themeStyles.primaryColor
           }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.loadingMoreText, {
+            style: [fileManagementStyles.loadingMoreText, {
               color: themeStyles.textColor
             }],
             children: "Loading more..."
           })]
         })]
       })
-    }), !selectMode && renderFileDetailsModal(), !selectMode && uploading && /*#__PURE__*/_jsx(View, {
-      style: [styles.uploadBannerContainer, {
+    }), !selectMode && /*#__PURE__*/_jsx(FileDetailsModal, {
+      visible: showFileDetails,
+      file: selectedFile,
+      onClose: () => setShowFileDetails(false),
+      onDownload: handleFileDownload,
+      onDelete: handleFileDelete,
+      themeStyles: themeStyles,
+      isOwner: user?.id === targetUserId
+    }), !selectMode && uploading && /*#__PURE__*/_jsx(View, {
+      style: [fileManagementStyles.uploadBannerContainer, {
         pointerEvents: 'none'
       }],
       children: /*#__PURE__*/_jsxs(View, {
-        style: [styles.uploadBanner, {
+        style: [fileManagementStyles.uploadBanner, {
           backgroundColor: themeStyles.isDarkTheme ? '#222831EE' : '#FFFFFFEE',
           borderColor: themeStyles.borderColor
         }],
@@ -2599,1008 +2278,34 @@ const FileManagementScreen = ({
           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))
-        })]
-      })
-    }), isDragging && Platform.OS === 'web' && /*#__PURE__*/_jsx(View, {
-      style: styles.dragDropOverlay,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: [styles.dragDropContent, {
-          backgroundColor: themeStyles.isDarkTheme ? 'rgba(30, 30, 30, 0.98)' : 'rgba(255, 255, 255, 0.98)',
-          borderColor: themeStyles.primaryColor
-        }],
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.dragDropIconContainer, {
-            backgroundColor: `${themeStyles.primaryColor}15`
-          }],
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: "cloud-upload",
-            size: 64,
-            color: themeStyles.primaryColor
-          })
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.dragDropTitle, {
-            color: themeStyles.primaryColor
-          }],
-          children: "Drop files to upload"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.dragDropSubtitle, {
-            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
-          }],
-          children: "Release to upload multiple files"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: fileManagementStyles.uploadBannerContent,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: [fileManagementStyles.uploadBannerText, {
+              color: themeStyles.textColor
+            }],
+            children: ["Uploading", uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...']
+          }), uploadProgress && uploadProgress.total > 0 && /*#__PURE__*/_jsx(View, {
+            style: [fileManagementStyles.uploadProgressBarContainer, {
+              backgroundColor: themeStyles.isDarkTheme ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'
+            }],
+            children: /*#__PURE__*/_jsx(View, {
+              style: [fileManagementStyles.uploadProgressBar, {
+                width: `${uploadProgress.current / uploadProgress.total * 100}%`,
+                backgroundColor: themeStyles.primaryColor
+              }]
+            })
+          })]
+        }), /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: themeStyles.primaryColor
         })]
       })
     })]
   });
 };
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  selectionBadge: {
-    position: 'absolute',
-    top: 4,
-    right: 4,
-    backgroundColor: 'rgba(0,0,0,0.4)',
-    borderRadius: 12,
-    padding: 2
-  },
-  selectionBar: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    padding: 12,
-    backgroundColor: 'rgba(0,0,0,0.55)',
-    gap: 12
-  },
-  selectionBarButton: {
-    flex: 1,
-    paddingVertical: 14,
-    borderRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  selectionBarButtonText: {
-    color: '#FFFFFF',
-    fontSize: 15,
-    fontWeight: '600'
-  },
-  loadingMoreBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12,
-    gap: 8
-  },
-  loadingMoreText: {
-    fontSize: 13,
-    fontWeight: '500'
-  },
-  dragOverlay: {
-    backgroundColor: 'rgba(0, 122, 255, 0.06)',
-    borderWidth: 1,
-    borderColor: '#66AFFF',
-    borderStyle: 'dashed'
-  },
-  centerContent: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    position: 'relative'
-  },
-  backButton: {
-    padding: 12,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: 44,
-    minHeight: 44
-  },
-  headerTitleContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: 16
-  },
-  headerTitle: {
-    fontSize: 22,
-    fontWeight: '700',
-    fontFamily: fontFamilies.phuduBold,
-    letterSpacing: -0.5,
-    lineHeight: 28
-  },
-  headerSubtitle: {
-    fontSize: 13,
-    fontWeight: '500',
-    fontFamily: fontFamilies.phuduMedium,
-    marginTop: 2,
-    letterSpacing: 0.2
-  },
-  uploadButton: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  uploadProgress: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  uploadProgressText: {
-    color: '#FFFFFF',
-    fontSize: 10,
-    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: 14,
-    paddingVertical: 10,
-    marginHorizontal: 16,
-    marginTop: 12,
-    borderRadius: 10,
-    borderWidth: 1,
-    gap: 10
-  },
-  searchInput: {
-    flex: 1,
-    fontSize: 16,
-    fontFamily: fontFamilies.phudu,
-    lineHeight: 20
-  },
-  searchClearButton: {
-    padding: 4,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  searchIcon: {
-    marginRight: 8
-  },
-  statsContainer: {
-    flexDirection: 'row',
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    marginHorizontal: 16,
-    marginTop: 12,
-    borderRadius: 10,
-    borderWidth: 1
-  },
-  statItem: {
-    flex: 1,
-    alignItems: 'center',
-    paddingVertical: 4
-  },
-  statValue: {
-    fontSize: 20,
-    fontWeight: '800',
-    fontFamily: fontFamilies.phuduBold,
-    letterSpacing: -0.5,
-    lineHeight: 24
-  },
-  statLabel: {
-    fontSize: 12,
-    fontWeight: '500',
-    fontFamily: fontFamilies.phuduMedium,
-    marginTop: 2,
-    letterSpacing: 0.2
-  },
-  scrollView: {
-    flex: 1,
-    backgroundColor: '#e5f1ff'
-  },
-  scrollContainer: {
-    padding: 12
-  },
-  fileItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 10,
-    marginBottom: 8,
-    borderRadius: 10,
-    borderWidth: 1
-  },
-  fileContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1
-  },
-  fileIconContainer: {
-    width: 50,
-    height: 50,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12
-  },
-  filePreviewContainer: {
-    width: 52,
-    height: 52,
-    marginRight: 10
-  },
-  filePreview: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 8,
-    backgroundColor: 'transparent',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    position: 'relative'
-  },
-  previewImage: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 8
-  },
-  pdfPreview: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#FF6B6B20'
-  },
-  pdfLabel: {
-    fontSize: 8,
-    fontWeight: 'bold',
-    marginTop: 2
-  },
-  videoPreview: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#4ECDC420'
-  },
-  videoLabel: {
-    fontSize: 8,
-    fontWeight: 'bold',
-    marginTop: 2
-  },
-  fallbackIcon: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-    borderRadius: 8
-  },
-  previewOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    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
-  },
-  fileName: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 4
-  },
-  fileDetails: {
-    fontSize: 14,
-    marginBottom: 2
-  },
-  fileDescription: {
-    fontSize: 12,
-    fontStyle: 'italic'
-  },
-  fileActions: {
-    flexDirection: 'row',
-    gap: 8
-  },
-  actionButton: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: '#E0E0E0',
-    backgroundColor: 'transparent'
-  },
-  emptyState: {
-    alignItems: 'center',
-    paddingVertical: 40,
-    paddingHorizontal: 24
-  },
-  emptyStateTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    fontFamily: fontFamilies.phuduBold,
-    marginTop: 16,
-    marginBottom: 8
-  },
-  emptyStateDescription: {
-    fontSize: 16,
-    textAlign: 'center',
-    lineHeight: 24,
-    marginBottom: 32
-  },
-  emptyStateButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    borderRadius: 24,
-    gap: 8
-  },
-  emptyStateButtonText: {
-    color: '#FFFFFF',
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  loadingText: {
-    fontSize: 16,
-    marginTop: 16
-  },
-  // Modal styles
-  modalContainer: {
-    flex: 1
-  },
-  modalHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1
-  },
-  modalCloseButton: {
-    padding: 8
-  },
-  modalTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    fontFamily: fontFamilies.phuduSemiBold
-  },
-  modalPlaceholder: {
-    width: 40
-  },
-  modalContent: {
-    flex: 1,
-    padding: 16
-  },
-  fileDetailCard: {
-    padding: 18,
-    borderRadius: 14,
-    borderWidth: 1,
-    alignItems: 'center'
-  },
-  fileDetailIcon: {
-    marginBottom: 16
-  },
-  fileDetailName: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    fontFamily: fontFamilies.phuduBold,
-    textAlign: 'center',
-    marginBottom: 24
-  },
-  fileDetailInfo: {
-    width: '100%',
-    marginBottom: 32
-  },
-  detailRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    marginBottom: 12,
-    flexWrap: 'wrap'
-  },
-  detailLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    flex: 1,
-    minWidth: 100
-  },
-  detailValue: {
-    fontSize: 16,
-    flex: 2,
-    textAlign: 'right'
-  },
-  modalActions: {
-    flexDirection: 'row',
-    gap: 12,
-    width: '100%'
-  },
-  modalActionButton: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 16,
-    borderRadius: 12,
-    gap: 8
-  },
-  modalActionText: {
-    color: '#FFFFFF',
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  // Drag and Drop styles - Enhanced
-  dragDropOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1000
-  },
-  dragDropContent: {
-    alignItems: 'center',
-    padding: 32,
-    borderRadius: 20,
-    borderWidth: 3,
-    borderStyle: 'dashed',
-    minWidth: 280,
-    shadowColor: '#000',
-    shadowOpacity: 0.3,
-    shadowRadius: 20,
-    shadowOffset: {
-      width: 0,
-      height: 10
-    },
-    elevation: 10
-  },
-  dragDropIconContainer: {
-    padding: 24,
-    borderRadius: 50,
-    marginBottom: 16
-  },
-  dragDropTitle: {
-    fontSize: 24,
-    fontWeight: '700',
-    fontFamily: fontFamilies.phuduBold,
-    marginBottom: 8
-  },
-  dragDropSubtitle: {
-    fontSize: 16,
-    fontWeight: '500',
-    fontFamily: fontFamilies.phuduMedium
-  },
-  // Upload Preview Modal styles
-  uploadPreviewContainer: {
-    flex: 1
-  },
-  uploadPreviewHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    borderBottomWidth: 1
-  },
-  uploadPreviewTitle: {
-    fontSize: 20,
-    fontWeight: '700',
-    fontFamily: fontFamilies.phuduBold
-  },
-  uploadPreviewList: {
-    flex: 1,
-    padding: 16
-  },
-  uploadPreviewItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 12,
-    borderWidth: 1,
-    marginBottom: 12,
-    gap: 12
-  },
-  uploadPreviewThumbnail: {
-    width: 60,
-    height: 60,
-    borderRadius: 8
-  },
-  uploadPreviewIconContainer: {
-    width: 60,
-    height: 60,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  uploadPreviewInfo: {
-    flex: 1,
-    minWidth: 0
-  },
-  uploadPreviewName: {
-    fontSize: 16,
-    fontWeight: '600',
-    fontFamily: fontFamilies.phuduSemiBold,
-    marginBottom: 4
-  },
-  uploadPreviewMeta: {
-    fontSize: 13,
-    fontFamily: fontFamilies.phudu
-  },
-  uploadPreviewRemove: {
-    padding: 4
-  },
-  uploadPreviewFooter: {
-    padding: 16,
-    borderTopWidth: 1
-  },
-  uploadPreviewStats: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 16
-  },
-  uploadPreviewStatsText: {
-    fontSize: 15,
-    fontWeight: '600',
-    fontFamily: fontFamilies.phuduSemiBold
-  },
-  uploadPreviewActions: {
-    flexDirection: 'row',
-    gap: 12
-  },
-  uploadPreviewCancelButton: {
-    flex: 1,
-    paddingVertical: 14,
-    borderRadius: 12,
-    borderWidth: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  uploadPreviewCancelText: {
-    fontSize: 16,
-    fontWeight: '600',
-    fontFamily: fontFamilies.phuduSemiBold
-  },
-  uploadPreviewConfirmButton: {
-    flex: 2,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 14,
-    borderRadius: 12,
-    gap: 8
-  },
-  uploadPreviewConfirmText: {
-    color: '#FFFFFF',
-    fontSize: 16,
-    fontWeight: '600',
-    fontFamily: fontFamilies.phuduSemiBold
-  },
-  // File Viewer styles
-  fileViewerContainer: {
-    flex: 1
-  },
-  fileViewerHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1
-  },
-  fileViewerTitleContainer: {
-    flex: 1,
-    marginHorizontal: 16
-  },
-  fileViewerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    fontFamily: fontFamilies.phuduSemiBold,
-    marginBottom: 2
-  },
-  fileViewerSubtitle: {
-    fontSize: 14
-  },
-  fileViewerActions: {
-    flexDirection: 'row',
-    gap: 8
-  },
-  fileViewerContent: {
-    flex: 1
-  },
-  fileViewerContentWithDetails: {
-    paddingBottom: 20
-  },
-  fileViewerContentContainer: {
-    flexGrow: 1,
-    padding: 14
-  },
-  fileViewerLoading: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  fileViewerLoadingText: {
-    fontSize: 16,
-    marginTop: 16
-  },
-  imageContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1
-  },
-  textContainer: {
-    flex: 1,
-    borderRadius: 10,
-    borderWidth: 1,
-    padding: 12,
-    minHeight: 180,
-    maxHeight: '80%'
-  },
-  textContent: {
-    fontSize: 14,
-    fontFamily: Platform.OS === 'web' ? 'monospace' : 'Courier',
-    lineHeight: 20
-  },
-  unsupportedFileContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 40,
-    paddingHorizontal: 24
-  },
-  unsupportedFileTitle: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    fontFamily: fontFamilies.phuduBold,
-    marginTop: 16,
-    marginBottom: 8,
-    textAlign: 'center'
-  },
-  unsupportedFileDescription: {
-    fontSize: 16,
-    textAlign: 'center',
-    lineHeight: 24,
-    marginBottom: 32
-  },
-  downloadButtonLarge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 18,
-    paddingVertical: 12,
-    borderRadius: 20,
-    gap: 8
-  },
-  downloadButtonText: {
-    color: '#FFFFFF',
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  pdfContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  mediaContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 20
-  },
-  unsupportedText: {
-    fontSize: 16,
-    textAlign: 'center',
-    fontStyle: 'italic'
-  },
-  // File Details in Viewer styles
-  fileDetailsSection: {
-    margin: 12,
-    marginTop: 0,
-    padding: 14,
-    borderRadius: 10,
-    borderWidth: 1
-  },
-  fileDetailsSectionTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    fontFamily: fontFamilies.phuduSemiBold,
-    flex: 1
-  },
-  fileDetailsSectionHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 16
-  },
-  fileDetailsSectionToggle: {
-    padding: 4
-  },
-  fileDetailsActions: {
-    flexDirection: 'row',
-    gap: 12,
-    marginTop: 16
-  },
-  fileDetailsActionButton: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 12,
-    borderRadius: 8,
-    gap: 6
-  },
-  fileDetailsActionText: {
-    color: '#FFFFFF',
-    fontSize: 14,
-    fontWeight: '600'
-  },
-  // Header styles
-  headerActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 16
-  },
-  controlsBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 4,
-    gap: 12
-  },
-  viewModeScroll: {
-    flex: 1,
-    maxWidth: '80%'
-  },
-  viewModeToggle: {
-    flexDirection: 'row',
-    borderRadius: 24,
-    padding: 3,
-    overflow: 'hidden'
-  },
-  viewModeButton: {
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    borderRadius: 20,
-    minWidth: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: 1
-  },
-  sortButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderRadius: 20,
-    borderWidth: 1,
-    minWidth: 44
-  },
-  // Photo Grid styles
-  photoScrollContainer: {
-    padding: 10
-  },
-  photoDateSection: {
-    marginBottom: 16
-  },
-  photoDateHeader: {
-    fontSize: 16,
-    fontWeight: '600',
-    fontFamily: fontFamilies.phuduSemiBold,
-    marginBottom: 8,
-    paddingHorizontal: 2
-  },
-  photoGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 4,
-    justifyContent: 'flex-start'
-  },
-  photoItem: {
-    borderRadius: 8,
-    overflow: 'hidden'
-  },
-  photoContainer: {
-    width: '100%',
-    height: '100%',
-    position: 'relative',
-    borderRadius: 8,
-    overflow: 'hidden'
-  },
-  photoImage: {
-    width: '100%',
-    height: '100%'
-  },
-  // Justified Grid styles
-  dimensionsLoadingIndicator: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 16,
-    gap: 8
-  },
-  dimensionsLoadingText: {
-    fontSize: 14,
-    fontStyle: 'italic'
-  },
-  justifiedPhotoGrid: {
-    gap: 4
-  },
-  justifiedPhotoRow: {
-    flexDirection: 'row'
-  },
-  justifiedPhotoItem: {
-    borderRadius: 6,
-    overflow: 'hidden',
-    position: 'relative'
-  },
-  justifiedPhotoContainer: {
-    width: '100%',
-    height: '100%',
-    position: 'relative',
-    borderRadius: 6,
-    overflow: 'hidden',
-    backgroundColor: 'transparent'
-  },
-  justifiedPhotoImage: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 6
-  },
-  // Simple Photo Grid styles  
-  simplePhotoItem: {
-    borderRadius: 8,
-    overflow: 'hidden',
-    backgroundColor: 'transparent'
-  },
-  simplePhotoContainer: {
-    width: '100%',
-    height: '100%',
-    position: 'relative',
-    borderRadius: 8,
-    overflow: 'hidden'
-  },
-  simplePhotoImage: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 8
-  },
-  // Loading skeleton styles
-  photoSkeletonGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 4,
-    marginTop: 20
-  },
-  photoSkeletonItem: {
-    width: '32%',
-    aspectRatio: 1,
-    borderRadius: 8,
-    marginBottom: 4
-  },
-  skeletonFileItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    gap: 12
-  },
-  skeletonFileInfo: {
-    flex: 1,
-    justifyContent: 'center'
-  }
-});
+
+// Styles have been moved to components/fileManagement/styles.ts
+
 export default FileManagementScreen;
 //# sourceMappingURL=FileManagementScreen.js.map