@oxyhq/services 22.6.2 → 22.6.4

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, Animated, Easing, AccessibilityInfo } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, Animated, Easing, AccessibilityInfo, Platform, useWindowDimensions } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
@@ -17,15 +17,39 @@ import { useResolvedFileUrls, fileThumbSource } from "../hooks/useResolvedFileUr
 import { FileViewer } from "../components/fileManagement/FileViewer.js";
 import { FileDetailsModal } from "../components/fileManagement/FileDetailsModal.js";
 import { UploadPreview } from "../components/fileManagement/UploadPreview.js";
-import { fileManagementStyles } from "../components/fileManagement/styles.js";
 import { getErrorMessage } from "./fileManagement/shared.js";
 import { useFileUploadState } from "./fileManagement/hooks/useFileUploadState.js";
 import PhotoPickerView from "./fileManagement/PhotoPickerSection.js";
 import FileListSection from "./fileManagement/FileListSection.js";
 import UploadBar from "./fileManagement/UploadBar.js";
 
-// Animated button component for smooth transitions
+// Genuinely-inline-only styles: `viewModeButton` is spread into an Animated.View
+// style array (interpolated backgroundColor), and the photo tiles are
+// `expo-image` (no className remap). Everything else uses NativeWind classNames.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const screenStyles = StyleSheet.create({
+  viewModeButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 999,
+    minWidth: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 1
+  },
+  photoImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 8
+  },
+  justifiedPhotoImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 6
+  }
+});
+
+// Animated button component for smooth transitions
 const AnimatedButton = ({
   isSelected,
   onPress,
@@ -76,8 +100,7 @@ const FileManagementScreen = ({
   goBack,
   navigate,
   userId,
-  containerWidth = 400,
-  // Fallback for when not provided by the router
+  containerWidth,
   selectMode = false,
   multiSelect = false,
   onSelect,
@@ -108,8 +131,12 @@ const FileManagementScreen = ({
   const visibilityChangeDialog = useDialogControl();
   const [pendingDeleteFile, setPendingDeleteFile] = useState(null);
   const files = useFiles();
-  // Ensure containerWidth is a number (TypeScript guard)
-  const safeContainerWidth = typeof containerWidth === 'number' ? containerWidth : 400;
+  const {
+    width: windowWidth
+  } = useWindowDimensions();
+  // Prefer an explicit sheet width from the router; fall back to the window
+  // so photo grids never size against a hardcoded 400px default.
+  const safeContainerWidth = typeof containerWidth === 'number' && containerWidth > 0 ? containerWidth : windowWidth;
   const uploading = useUploadingStore();
   const uploadProgress = useUploadAggregateProgress();
   const deleting = useDeletingStore();
@@ -738,60 +765,11 @@ const FileManagementScreen = ({
     setSelectedFile(file);
     fileDetailsControl.open();
   };
-  const renderSimplePhotoItem = useCallback((photo, index) => {
-    const downloadUrl = thumbSourceFor(photo);
-
-    // Calculate photo item width based on actual container size from bottom sheet
-    let itemsPerRow = 3; // Default for 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 = safeContainerWidth - scrollContainerPadding;
-    const itemWidth = (availableWidth - gaps) / itemsPerRow;
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [fileManagementStyles.simplePhotoItem, {
-        width: itemWidth,
-        height: itemWidth,
-        marginRight: (index + 1) % itemsPerRow === 0 ? 0 : 4,
-        ...(selectMode && selectedIds.has(photo.id) ? {
-          borderWidth: 2,
-          borderColor: colors.primary
-        } : {})
-      }],
-      onPress: () => handleFileOpen(photo),
-      activeOpacity: 0.8,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.simplePhotoContainer,
-        children: [/*#__PURE__*/_jsx(ExpoImage, {
-          source: {
-            uri: downloadUrl
-          },
-          style: fileManagementStyles.simplePhotoImage,
-          contentFit: "cover",
-          transition: 120,
-          cachePolicy: "memory-disk",
-          onError: () => {
-            // Photo failed to load, will show placeholder
-          },
-          accessibilityLabel: photo.filename
-        }), selectMode && /*#__PURE__*/_jsx(View, {
-          style: fileManagementStyles.selectionBadge,
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline',
-            size: 20,
-            color: selectedIds.has(photo.id) ? colors.primary : colors.text
-          })
-        })]
-      })
-    }, photo.id);
-  }, [thumbSourceFor, safeContainerWidth, selectMode, selectedIds, colors.primary, colors.text]);
   const renderJustifiedPhotoItem = useCallback((photo, width, height, isLast) => {
     const downloadUrl = thumbSourceFor(photo);
     return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [fileManagementStyles.justifiedPhotoItem, {
+      className: "rounded-[6px] overflow-hidden relative",
+      style: {
         width,
         height,
         ...(selectMode && selectedIds.has(photo.id) ? {
@@ -801,16 +779,16 @@ const FileManagementScreen = ({
         ...(selectMode && multiSelect && selectedIds.size > 0 && !selectedIds.has(photo.id) ? {
           opacity: 0.4
         } : {})
-      }],
+      },
       onPress: () => handleFileOpen(photo),
       activeOpacity: 0.8,
       children: /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.justifiedPhotoContainer,
+        className: "w-full h-full relative rounded-[6px] overflow-hidden",
         children: [/*#__PURE__*/_jsx(ExpoImage, {
           source: {
             uri: downloadUrl
           },
-          style: fileManagementStyles.justifiedPhotoImage,
+          style: screenStyles.justifiedPhotoImage,
           contentFit: "cover",
           transition: 120,
           cachePolicy: "memory-disk",
@@ -819,7 +797,10 @@ const FileManagementScreen = ({
           },
           accessibilityLabel: photo.filename
         }), selectMode && /*#__PURE__*/_jsx(View, {
-          style: fileManagementStyles.selectionBadge,
+          className: "absolute top-[4px] right-[4px] rounded-[12px] p-[2px]",
+          style: {
+            backgroundColor: 'rgba(0,0,0,0.4)'
+          },
           children: /*#__PURE__*/_jsx(Ionicons, {
             name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline',
             size: 20,
@@ -840,160 +821,6 @@ const FileManagementScreen = ({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetUserId]);
-  const renderFileItem = file => {
-    const isImage = file.contentType.startsWith('image/');
-    const isPDF = file.contentType.includes('pdf');
-    const isVideo = file.contentType.startsWith('video/');
-    const isAudio = file.contentType.startsWith('audio/');
-    const hasPreview = isImage || isPDF || isVideo;
-    const borderColor = colors.border;
-    return /*#__PURE__*/_jsxs(View, {
-      style: [fileManagementStyles.fileItem, {
-        backgroundColor: colors.backgroundSecondary,
-        borderColor
-      }, selectMode && selectedIds.has(file.id) && {
-        borderColor: colors.primary,
-        borderWidth: 2
-      }],
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: fileManagementStyles.fileContent,
-        onPress: () => handleFileOpen(file),
-        children: [/*#__PURE__*/_jsx(View, {
-          style: fileManagementStyles.filePreviewContainer,
-          children: hasPreview ? /*#__PURE__*/_jsxs(View, {
-            style: fileManagementStyles.filePreview,
-            children: [isImage && /*#__PURE__*/_jsx(ExpoImage, {
-              source: {
-                uri: thumbSourceFor(file)
-              },
-              style: fileManagementStyles.previewImage,
-              contentFit: "cover",
-              transition: 120,
-              cachePolicy: "memory-disk",
-              onError: () => {
-                // Image preview failed to load
-              },
-              accessibilityLabel: file.filename
-            }), isPDF && /*#__PURE__*/_jsxs(View, {
-              style: fileManagementStyles.pdfPreview,
-              children: [/*#__PURE__*/_jsx(Ionicons, {
-                name: "document",
-                size: 32,
-                color: colors.primary
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [fileManagementStyles.pdfLabel, {
-                  color: colors.primary
-                }],
-                children: "PDF"
-              })]
-            }), isVideo && /*#__PURE__*/_jsxs(View, {
-              style: fileManagementStyles.videoPreviewWrapper,
-              children: [/*#__PURE__*/_jsx(ExpoImage, {
-                source: {
-                  uri: thumbSourceFor(file)
-                },
-                style: fileManagementStyles.videoPosterImage,
-                contentFit: "cover",
-                transition: 120,
-                cachePolicy: "memory-disk",
-                onError: _ => {
-                  // If thumbnail not available, we still show icon overlay
-                },
-                accessibilityLabel: `${file.filename} video thumbnail`
-              }), /*#__PURE__*/_jsx(View, {
-                style: fileManagementStyles.videoOverlay,
-                children: /*#__PURE__*/_jsx(Ionicons, {
-                  name: "play",
-                  size: 24,
-                  color: "#FFFFFF"
-                })
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: [fileManagementStyles.fallbackIcon, {
-                display: isImage ? 'none' : 'flex'
-              }],
-              children: /*#__PURE__*/_jsx(Ionicons, {
-                name: getFileIcon(file.contentType),
-                size: 32,
-                color: colors.primary
-              })
-            }), selectMode && /*#__PURE__*/_jsx(View, {
-              style: fileManagementStyles.selectionBadge,
-              children: /*#__PURE__*/_jsx(Ionicons, {
-                name: selectedIds.has(file.id) ? 'checkmark-circle' : 'ellipse-outline',
-                size: 22,
-                color: selectedIds.has(file.id) ? colors.primary : colors.text
-              })
-            })]
-          }) : /*#__PURE__*/_jsx(View, {
-            style: fileManagementStyles.fileIconContainer,
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: getFileIcon(file.contentType),
-              size: 32,
-              color: colors.primary
-            })
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.fileInfo,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [fileManagementStyles.fileName, {
-              color: colors.text
-            }],
-            numberOfLines: 1,
-            children: file.filename
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: [fileManagementStyles.fileDetails, {
-              color: colors.textSecondary
-            }],
-            children: [formatFileSize(file.length), " \u2022 ", new Date(file.uploadDate).toLocaleDateString()]
-          }), file.metadata?.description && /*#__PURE__*/_jsx(Text, {
-            style: [fileManagementStyles.fileDescription, {
-              color: colors.textTertiary
-            }],
-            numberOfLines: 2,
-            children: file.metadata.description
-          })]
-        })]
-      }), !selectMode && /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.fileActions,
-        children: [hasPreview && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [fileManagementStyles.actionButton, {
-            backgroundColor: colors.backgroundSecondary
-          }],
-          onPress: () => handleFileOpen(file),
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: "eye",
-            size: 20,
-            color: colors.primary
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [fileManagementStyles.actionButton, {
-            backgroundColor: colors.backgroundSecondary
-          }],
-          onPress: () => handleFileDownload(file.id, file.filename),
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: "download",
-            size: 20,
-            color: colors.primary
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [fileManagementStyles.actionButton, {
-            backgroundColor: colors.negativeSubtle
-          }],
-          onPress: () => confirmFileDelete(file.id, file.filename),
-          disabled: deleting === file.id,
-          children: deleting === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: colors.error
-          }) : /*#__PURE__*/_jsx(Ionicons, {
-            name: "trash",
-            size: 20,
-            color: colors.error
-          })
-        })]
-      })]
-    }, file.id);
-  };
 
   // SettingsListItem-based file items (for 'all' view)
   const groupedFileItems = useMemo(() => {
@@ -1115,11 +942,12 @@ const FileManagementScreen = ({
         },
         // Hide action buttons when selecting (in selectMode or bulk operations mode)
         rightElement: !selectMode && selectedIds.size === 0 ? /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.groupedActions,
+          className: "flex-row items-center gap-[6px] ml-[12px]",
           children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [fileManagementStyles.groupedActionBtn, {
+            className: "w-[34px] h-[34px] rounded-[8px] items-center justify-center",
+            style: {
               backgroundColor: colors.backgroundSecondary
-            }],
+            },
             onPress: () => handleFileOpen(file),
             children: /*#__PURE__*/_jsx(Ionicons, {
               name: "eye",
@@ -1127,9 +955,10 @@ const FileManagementScreen = ({
               color: colors.primary
             })
           }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [fileManagementStyles.groupedActionBtn, {
+            className: "w-[34px] h-[34px] rounded-[8px] items-center justify-center",
+            style: {
               backgroundColor: colors.backgroundSecondary
-            }],
+            },
             onPress: () => handleFileDownload(file.id, file.filename),
             children: /*#__PURE__*/_jsx(Ionicons, {
               name: "download",
@@ -1137,9 +966,10 @@ const FileManagementScreen = ({
               color: colors.primary
             })
           }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [fileManagementStyles.groupedActionBtn, {
+            className: "w-[34px] h-[34px] rounded-[8px] items-center justify-center",
+            style: {
               backgroundColor: colors.negativeSubtle
-            }],
+            },
             onPress: () => confirmFileDelete(file.id, file.filename),
             disabled: deleting === file.id,
             children: deleting === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
@@ -1199,19 +1029,12 @@ const FileManagementScreen = ({
         const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
         const photoIndex = photos.findIndex(p => p.id === lastSelectedFileId);
         if (photoIndex >= 0) {
-          // Estimate photo item height based on grid layout
-          // Calculate items per row
-          let itemsPerRow = 3;
-          if (safeContainerWidth > 768) itemsPerRow = 6;else if (safeContainerWidth > 480) itemsPerRow = 4;
-          const scrollContainerPadding = 32;
-          const gaps = (itemsPerRow - 1) * 4;
-          const availableWidth = safeContainerWidth - scrollContainerPadding;
-          const itemWidth = (availableWidth - gaps) / itemsPerRow;
-
-          // Calculate row and approximate scroll position
+          // Rough scroll estimate for the justified grid (3 photos/row; variable row heights).
+          const itemsPerRow = 3;
+          const estimatedRowHeight = 150;
+          const rowGap = 4;
           const row = Math.floor(photoIndex / itemsPerRow);
-          const headerHeight = 250;
-          const finalScrollPosition = headerHeight + row * (itemWidth + 4) - 150;
+          const finalScrollPosition = row * (estimatedRowHeight + rowGap) - 100;
 
           // Use requestAnimationFrame to ensure DOM is updated before scrolling
           requestAnimationFrame(() => {
@@ -1237,67 +1060,32 @@ const FileManagementScreen = ({
       return () => clearTimeout(timeoutId);
     }
   }, [lastSelectedFileId]);
-  const renderPhotoItem = (photo, index) => {
-    const downloadUrl = thumbSourceFor(photo);
-
-    // Calculate photo item width based on actual container size from bottom sheet
-    let itemsPerRow = 3; // Default for 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 = safeContainerWidth - scrollContainerPadding;
-    const itemWidth = (availableWidth - gaps) / itemsPerRow;
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [fileManagementStyles.photoItem, {
-        width: itemWidth,
-        height: itemWidth
-      }],
-      onPress: () => handleFileOpen(photo),
-      activeOpacity: 0.8,
-      children: /*#__PURE__*/_jsx(View, {
-        style: fileManagementStyles.photoContainer,
-        children: /*#__PURE__*/_jsx(ExpoImage, {
-          source: {
-            uri: downloadUrl
-          },
-          style: fileManagementStyles.photoImage,
-          contentFit: "cover",
-          transition: 120,
-          cachePolicy: "memory-disk",
-          onError: () => {
-            // Image preview failed to load
-          },
-          accessibilityLabel: photo.filename
-        })
-      })
-    }, photo.id);
-  };
   const renderPhotoGrid = useCallback(() => {
     const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
     if (photos.length === 0) {
       return /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.emptyState,
+        className: "items-center py-[40px] px-[24px]",
         children: [/*#__PURE__*/_jsx(Ionicons, {
           name: "images-outline",
           size: 64,
           color: colors.textTertiary
         }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.emptyStateTitle, {
+          className: "text-[24px] font-bold mt-[16px] mb-[8px]",
+          style: {
             color: colors.text
-          }],
+          },
           children: t('fileManagement.emptyPhotos.title')
         }), /*#__PURE__*/_jsxs(Text, {
-          style: [fileManagementStyles.emptyStateDescription, {
+          className: "text-[16px] text-center leading-[24px] mb-[32px]",
+          style: {
             color: colors.textSecondary
-          }],
+          },
           children: [" ", user?.id === targetUserId ? t('fileManagement.emptyPhotos.ownDescription') : t('fileManagement.emptyPhotos.otherDescription'), " "]
         }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [fileManagementStyles.emptyStateButton, {
+          className: "flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]",
+          style: {
             backgroundColor: colors.primary
-          }],
+          },
           onPress: handleFileUpload,
           disabled: uploading || isPickingDocument,
           children: uploading ? /*#__PURE__*/_jsx(ActivityIndicator, {
@@ -1312,7 +1100,7 @@ const FileManagementScreen = ({
               size: 20,
               color: "#FFFFFF"
             }), /*#__PURE__*/_jsx(Text, {
-              style: fileManagementStyles.emptyStateButtonText,
+              className: "text-white text-[16px] font-semibold",
               children: t('fileManagement.uploadPhotos')
             })]
           })
@@ -1321,8 +1109,8 @@ const FileManagementScreen = ({
     }
     return /*#__PURE__*/_jsxs(ScrollView, {
       ref: photoScrollViewRef,
-      style: fileManagementStyles.scrollView,
-      contentContainerStyle: fileManagementStyles.photoScrollContainer,
+      className: "flex-1",
+      contentContainerClassName: "p-[10px]",
       refreshControl: /*#__PURE__*/_jsx(RefreshControl, {
         refreshing: refreshing,
         onRefresh: () => loadFiles('refresh'),
@@ -1344,14 +1132,15 @@ const FileManagementScreen = ({
       },
       scrollEventThrottle: 250,
       children: [loadingDimensions && /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.dimensionsLoadingIndicator,
+        className: "flex-row items-center justify-center py-[16px] gap-[8px]",
         children: [/*#__PURE__*/_jsx(ActivityIndicator, {
           size: "small",
           color: colors.primary
         }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.dimensionsLoadingText, {
+          className: "text-[14px] italic",
+          style: {
             color: colors.textSecondary
-          }],
+          },
           children: t('fileManagement.loadingPhotoLayout')
         })]
       }), /*#__PURE__*/_jsx(JustifiedPhotoGrid, {
@@ -1360,35 +1149,37 @@ const FileManagementScreen = ({
         loadPhotoDimensions: loadPhotoDimensions,
         createJustifiedRows: createJustifiedRows,
         renderJustifiedPhotoItem: renderJustifiedPhotoItem,
-        renderSimplePhotoItem: renderPhotoItem,
         textColor: colors.text,
-        containerWidth: safeContainerWidth
+        containerWidth: typeof containerWidth === 'number' && containerWidth > 0 ? containerWidth : undefined
       })]
     });
-  }, [filteredFiles, colors, user?.id, targetUserId, uploading, handleFileUpload, refreshing, loadFiles, loadingDimensions, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem, renderPhotoItem, safeContainerWidth]);
+  }, [filteredFiles, colors, user?.id, targetUserId, uploading, handleFileUpload, refreshing, loadFiles, loadingDimensions, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem, containerWidth]);
 
   // Inline justified grid removed (moved to components/photogrid/JustifiedPhotoGrid.tsx)
 
   const renderEmptyState = () => /*#__PURE__*/_jsxs(View, {
-    style: fileManagementStyles.emptyState,
+    className: "items-center py-[40px] px-[24px]",
     children: [/*#__PURE__*/_jsx(Ionicons, {
       name: "folder-open-outline",
       size: 64,
       color: colors.textTertiary
     }), /*#__PURE__*/_jsx(Text, {
-      style: [fileManagementStyles.emptyStateTitle, {
+      className: "text-[24px] font-bold mt-[16px] mb-[8px]",
+      style: {
         color: colors.text
-      }],
+      },
       children: t('fileManagement.emptyFiles.title')
     }), /*#__PURE__*/_jsx(Text, {
-      style: [fileManagementStyles.emptyStateDescription, {
+      className: "text-[16px] text-center leading-[24px] mb-[32px]",
+      style: {
         color: colors.textSecondary
-      }],
+      },
       children: user?.id === targetUserId ? t('fileManagement.emptyFiles.ownDescription') : t('fileManagement.emptyFiles.otherDescription')
     }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [fileManagementStyles.emptyStateButton, {
+      className: "flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]",
+      style: {
         backgroundColor: colors.primary
-      }],
+      },
       onPress: handleFileUpload,
       disabled: uploading || isPickingDocument,
       children: uploading ? /*#__PURE__*/_jsx(ActivityIndicator, {
@@ -1403,7 +1194,7 @@ const FileManagementScreen = ({
           size: 20,
           color: "#FFFFFF"
         }), /*#__PURE__*/_jsx(Text, {
-          style: fileManagementStyles.emptyStateButtonText,
+          className: "text-white text-[16px] font-semibold",
           children: t('fileManagement.uploadFiles')
         })]
       })
@@ -1419,7 +1210,10 @@ const FileManagementScreen = ({
         toValue: 1,
         duration: 2000,
         easing: Easing.linear,
-        useNativeDriver: true
+        // Web has no native animated module; forcing the native
+        // driver there warns and falls back to JS. The shimmer only
+        // drives a transform, so JS-driving it on web is fine.
+        useNativeDriver: Platform.OS !== 'web'
       }));
       shimmer.start();
       return () => shimmer.stop();
@@ -1527,22 +1321,22 @@ const FileManagementScreen = ({
       })]
     });
     return /*#__PURE__*/_jsxs(View, {
-      style: [fileManagementStyles.container, {
+      className: "flex-1",
+      style: {
         backgroundColor
-      }],
+      },
       children: [/*#__PURE__*/_jsxs(View, {
-        style: [fileManagementStyles.header, {
+        className: "flex-row items-center justify-between px-[16px] py-[12px] relative",
+        style: {
           borderBottomColor: colors.border,
           borderBottomWidth: StyleSheet.hairlineWidth
-        }],
+        },
         children: [/*#__PURE__*/_jsx(SkeletonBox, {
           width: 44,
           height: 44,
           borderRadius: 12
         }), /*#__PURE__*/_jsxs(View, {
-          style: [fileManagementStyles.headerTitleContainer, {
-            flex: 1
-          }],
+          className: "flex-1 items-center justify-center mx-[16px]",
           children: [/*#__PURE__*/_jsx(SkeletonBox, {
             width: 140,
             height: 20,
@@ -1559,7 +1353,7 @@ const FileManagementScreen = ({
           borderRadius: 12
         })]
       }), /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.controlsBar,
+        className: "flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]",
         children: [/*#__PURE__*/_jsx(SkeletonBox, {
           width: 100,
           height: 36,
@@ -1570,20 +1364,22 @@ const FileManagementScreen = ({
           borderRadius: 22
         })]
       }), /*#__PURE__*/_jsx(View, {
-        style: [fileManagementStyles.searchContainer, {
+        className: "flex-row items-center px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-full gap-[10px]",
+        style: {
           backgroundColor: colors.card
-        }],
+        },
         children: /*#__PURE__*/_jsx(SkeletonBox, {
           width: "100%",
           height: 44,
           borderRadius: 12
         })
       }), /*#__PURE__*/_jsx(View, {
-        style: [fileManagementStyles.statsContainer, {
+        className: "flex-row px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-[18px]",
+        style: {
           backgroundColor: colors.card
-        }],
+        },
         children: [1, 2, 3].map(i => /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.statItem,
+          className: "flex-1 items-center py-[4px]",
           children: [/*#__PURE__*/_jsx(SkeletonBox, {
             width: 50,
             height: 20,
@@ -1598,8 +1394,8 @@ const FileManagementScreen = ({
           })]
         }, i))
       }), /*#__PURE__*/_jsx(ScrollView, {
-        style: fileManagementStyles.scrollView,
-        contentContainerStyle: fileManagementStyles.scrollContainer,
+        className: "flex-1",
+        contentContainerClassName: "px-[12px] pt-0 pb-[12px]",
         showsVerticalScrollIndicator: false,
         children: /*#__PURE__*/_jsx(View, {
           style: {
@@ -1690,7 +1486,7 @@ const FileManagementScreen = ({
   // If upload preview is showing, render it inline instead of the file list
   if (showUploadPreview) {
     return /*#__PURE__*/_jsxs(View, {
-      style: fileManagementStyles.container,
+      className: "flex-1",
       children: [/*#__PURE__*/_jsx(Header, {
         title: t('fileManagement.reviewFiles'),
         subtitle: t('fileManagement.readyToUpload', {
@@ -1711,7 +1507,7 @@ const FileManagementScreen = ({
     });
   }
   return /*#__PURE__*/_jsxs(View, {
-    style: fileManagementStyles.container,
+    className: "flex-1",
     children: [/*#__PURE__*/_jsx(Header, {
       title: selectMode ? multiSelect ? maxSelection ? t('fileManagement.selectedWithMax', {
         count: selectedIds.size,
@@ -1761,22 +1557,26 @@ const FileManagementScreen = ({
       elevation: "none",
       titleAlignment: "left"
     }), /*#__PURE__*/_jsxs(View, {
-      style: fileManagementStyles.controlsBar,
+      className: "flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]",
       children: [/*#__PURE__*/_jsx(ScrollView, {
         horizontal: true,
         showsHorizontalScrollIndicator: false,
-        style: fileManagementStyles.viewModeScroll,
+        className: "flex-1",
+        style: {
+          maxWidth: '80%'
+        },
         children: /*#__PURE__*/_jsxs(View, {
-          style: [fileManagementStyles.viewModeToggle, {
+          className: "flex-row rounded-full p-[2px] overflow-hidden",
+          style: {
             backgroundColor: colors.card
-          }],
+          },
           children: [/*#__PURE__*/_jsx(AnimatedButton, {
             isSelected: viewMode === 'all',
             onPress: () => setViewMode('all'),
             icon: viewMode === 'all' ? 'folder' : 'folder-outline',
             primaryColor: colors.primary,
             textColor: colors.text,
-            style: fileManagementStyles.viewModeButton,
+            style: screenStyles.viewModeButton,
             accessibilityLabel: t('fileManagement.a11y.viewAll') || 'Show all files'
           }), /*#__PURE__*/_jsx(AnimatedButton, {
             isSelected: viewMode === 'photos',
@@ -1784,7 +1584,7 @@ const FileManagementScreen = ({
             icon: viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline',
             primaryColor: colors.primary,
             textColor: colors.text,
-            style: fileManagementStyles.viewModeButton,
+            style: screenStyles.viewModeButton,
             accessibilityLabel: t('fileManagement.a11y.viewPhotos') || 'Show photos only'
           }), !isImageOnlyPicker && /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(AnimatedButton, {
@@ -1793,7 +1593,7 @@ const FileManagementScreen = ({
               icon: viewMode === 'videos' ? 'video' : 'video-outline',
               primaryColor: colors.primary,
               textColor: colors.text,
-              style: fileManagementStyles.viewModeButton,
+              style: screenStyles.viewModeButton,
               accessibilityLabel: t('fileManagement.a11y.viewVideos') || 'Show videos only'
             }), /*#__PURE__*/_jsx(AnimatedButton, {
               isSelected: viewMode === 'documents',
@@ -1801,7 +1601,7 @@ const FileManagementScreen = ({
               icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
               primaryColor: colors.primary,
               textColor: colors.text,
-              style: fileManagementStyles.viewModeButton,
+              style: screenStyles.viewModeButton,
               accessibilityLabel: t('fileManagement.a11y.viewDocuments') || 'Show documents only'
             }), /*#__PURE__*/_jsx(AnimatedButton, {
               isSelected: viewMode === 'audio',
@@ -1809,15 +1609,16 @@ const FileManagementScreen = ({
               icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
               primaryColor: colors.primary,
               textColor: colors.text,
-              style: fileManagementStyles.viewModeButton,
+              style: screenStyles.viewModeButton,
               accessibilityLabel: t('fileManagement.a11y.viewAudio') || 'Show audio only'
             })]
           })]
         })
       }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [fileManagementStyles.sortButton, {
+        className: "flex-row items-center justify-center px-[10px] py-[6px] rounded-full min-w-[36px] gap-[4px]",
+        style: {
           backgroundColor: colors.card
-        }],
+        },
         accessibilityRole: "button",
         accessibilityLabel: t('fileManagement.a11y.sortBy', {
           field: sortBy,
@@ -1844,9 +1645,10 @@ const FileManagementScreen = ({
           color: colors.textSecondary
         })]
       }), user?.id === targetUserId && (!selectMode || selectMode && allowUploadInSelectMode) && /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [fileManagementStyles.uploadButton, isImageOnlyPicker && fileManagementStyles.uploadButtonExtended, {
+        className: `h-[44px] rounded-[22px] items-center justify-center ${isImageOnlyPicker ? 'w-auto min-w-[44px] px-[14px]' : 'w-[44px]'}`,
+        style: {
           backgroundColor: colors.primary
-        }],
+        },
         onPress: handleFileUpload,
         disabled: uploading || isPickingDocument,
         accessibilityRole: "button",
@@ -1855,25 +1657,25 @@ const FileManagementScreen = ({
           busy: uploading || isPickingDocument
         },
         children: uploading ? /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.uploadProgress,
+          className: "items-center justify-center",
           children: [/*#__PURE__*/_jsx(ActivityIndicator, {
             size: "small",
             color: "#FFFFFF"
           }), uploadProgress && /*#__PURE__*/_jsxs(Text, {
-            style: fileManagementStyles.uploadProgressText,
+            className: "text-white text-[10px] font-semibold mt-[2px]",
             children: [uploadProgress.current, "/", uploadProgress.total]
           })]
         }) : isPickingDocument ? /*#__PURE__*/_jsx(ActivityIndicator, {
           size: "small",
           color: "#FFFFFF"
         }) : isImageOnlyPicker ? /*#__PURE__*/_jsxs(View, {
-          style: fileManagementStyles.uploadButtonContent,
+          className: "flex-row items-center gap-[6px]",
           children: [/*#__PURE__*/_jsx(Ionicons, {
             name: "cloud-upload",
             size: 18,
             color: "#FFFFFF"
           }), /*#__PURE__*/_jsx(Text, {
-            style: fileManagementStyles.uploadButtonLabel,
+            className: "text-white text-[14px] font-semibold",
             numberOfLines: 1,
             children: t('fileManagement.upload') || 'Upload'
           })]
@@ -1884,24 +1686,26 @@ const FileManagementScreen = ({
         })
       })]
     }), files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && /*#__PURE__*/_jsxs(View, {
-      style: [fileManagementStyles.searchContainer, {
+      className: "flex-row items-center px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-full gap-[10px]",
+      style: {
         backgroundColor: colors.card
-      }],
+      },
       children: [/*#__PURE__*/_jsx(Ionicons, {
         name: "search",
         size: 22,
         color: colors.icon
       }), /*#__PURE__*/_jsx(TextInput, {
-        style: [fileManagementStyles.searchInput, {
+        className: "flex-1 text-[16px] leading-[20px]",
+        style: {
           color: colors.text
-        }],
+        },
         placeholder: viewMode === 'photos' ? t('fileManagement.searchPhotos') : t('fileManagement.searchFiles'),
         placeholderTextColor: colors.textSecondary,
         value: searchQuery,
         onChangeText: setSearchQuery
       }), searchQuery.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: () => setSearchQuery(''),
-        style: fileManagementStyles.searchClearButton,
+        className: "p-[4px] rounded-[12px] items-center justify-center",
         children: /*#__PURE__*/_jsx(Ionicons, {
           name: "close-circle",
           size: 22,
@@ -1909,46 +1713,59 @@ const FileManagementScreen = ({
         })
       })]
     }), files.length > 0 && /*#__PURE__*/_jsxs(View, {
-      style: [fileManagementStyles.statsContainer, {
+      className: "flex-row px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-[18px]",
+      style: {
         backgroundColor: colors.card
-      }],
+      },
       children: [/*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.statItem,
+        className: "flex-1 items-center py-[4px]",
         children: [/*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statValue, {
-            color: colors.text
-          }],
+          className: "text-[20px] font-extrabold leading-[24px]",
+          style: {
+            color: colors.text,
+            letterSpacing: -0.5
+          },
           children: filteredFiles.length
         }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statLabel, {
-            color: colors.textSecondary
-          }],
+          className: "text-[12px] font-medium mt-[2px]",
+          style: {
+            color: colors.textSecondary,
+            letterSpacing: 0.2
+          },
           children: searchQuery.length > 0 ? t('fileManagement.found') : filteredFiles.length === 1 ? viewMode === 'photos' ? t('fileManagement.photo') : t('fileManagement.file') : viewMode === 'photos' ? t('fileManagement.photos_stat') : t('fileManagement.files')
         })]
       }), /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.statItem,
+        className: "flex-1 items-center py-[4px]",
         children: [/*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statValue, {
-            color: colors.text
-          }],
+          className: "text-[20px] font-extrabold leading-[24px]",
+          style: {
+            color: colors.text,
+            letterSpacing: -0.5
+          },
           children: formatFileSize(filteredFiles.reduce((total, file) => total + file.length, 0))
         }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statLabel, {
-            color: colors.textSecondary
-          }],
+          className: "text-[12px] font-medium mt-[2px]",
+          style: {
+            color: colors.textSecondary,
+            letterSpacing: 0.2
+          },
           children: searchQuery.length > 0 ? t('fileManagement.size') : t('fileManagement.totalSize')
         })]
       }), searchQuery.length > 0 && /*#__PURE__*/_jsxs(View, {
-        style: fileManagementStyles.statItem,
+        className: "flex-1 items-center py-[4px]",
         children: [/*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statValue, {
-            color: colors.text
-          }],
+          className: "text-[20px] font-extrabold leading-[24px]",
+          style: {
+            color: colors.text,
+            letterSpacing: -0.5
+          },
           children: files.length
         }), /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.statLabel, {
-            color: colors.textSecondary
-          }],
+          className: "text-[12px] font-medium mt-[2px]",
+          style: {
+            color: colors.textSecondary,
+            letterSpacing: 0.2
+          },
           children: t('fileManagement.total')
         })]
       })]
@@ -2026,8 +1843,5 @@ const FileManagementScreen = ({
     })]
   });
 };
-
-// Styles have been moved to components/fileManagement/styles.ts
-
 export default FileManagementScreen;
 //# sourceMappingURL=FileManagementScreen.js.map