@oxyhq/services 22.6.2 → 22.6.4

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

@@ -21,7 +21,6 @@ var _useResolvedFileUrls = require("../hooks/useResolvedFileUrls.js");
 var _FileViewer = require("../components/fileManagement/FileViewer.js");
 var _FileDetailsModal = require("../components/fileManagement/FileDetailsModal.js");
 var _UploadPreview = require("../components/fileManagement/UploadPreview.js");
-var _styles = require("../components/fileManagement/styles.js");
 var _shared = require("./fileManagement/shared.js");
 var _useFileUploadState = require("./fileManagement/hooks/useFileUploadState.js");
 var _PhotoPickerSection = _interopRequireDefault(require("./fileManagement/PhotoPickerSection.js"));
@@ -30,6 +29,31 @@ var _UploadBar = _interopRequireDefault(require("./fileManagement/UploadBar.js")
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// 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.
+const screenStyles = _reactNative.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,
@@ -81,8 +105,7 @@ const FileManagementScreen = ({
   goBack,
   navigate,
   userId,
-  containerWidth = 400,
-  // Fallback for when not provided by the router
+  containerWidth,
   selectMode = false,
   multiSelect = false,
   onSelect,
@@ -113,8 +136,12 @@ const FileManagementScreen = ({
   const visibilityChangeDialog = (0, _bloom.useDialogControl)();
   const [pendingDeleteFile, setPendingDeleteFile] = (0, _react.useState)(null);
   const files = (0, _fileStore.useFiles)();
-  // Ensure containerWidth is a number (TypeScript guard)
-  const safeContainerWidth = typeof containerWidth === 'number' ? containerWidth : 400;
+  const {
+    width: windowWidth
+  } = (0, _reactNative.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 = (0, _fileStore.useUploading)();
   const uploadProgress = (0, _fileStore.useUploadAggregateProgress)();
   const deleting = (0, _fileStore.useDeleting)();
@@ -743,60 +770,11 @@ const FileManagementScreen = ({
     setSelectedFile(file);
     fileDetailsControl.open();
   };
-  const renderSimplePhotoItem = (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: [_styles.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.fileManagementStyles.simplePhotoContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-          source: {
-            uri: downloadUrl
-          },
-          style: _styles.fileManagementStyles.simplePhotoImage,
-          contentFit: "cover",
-          transition: 120,
-          cachePolicy: "memory-disk",
-          onError: () => {
-            // Photo failed to load, will show placeholder
-          },
-          accessibilityLabel: photo.filename
-        }), selectMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: _styles.fileManagementStyles.selectionBadge,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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 = (0, _react.useCallback)((photo, width, height, isLast) => {
     const downloadUrl = thumbSourceFor(photo);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: [_styles.fileManagementStyles.justifiedPhotoItem, {
+      className: "rounded-[6px] overflow-hidden relative",
+      style: {
         width,
         height,
         ...(selectMode && selectedIds.has(photo.id) ? {
@@ -806,16 +784,16 @@ const FileManagementScreen = ({
         ...(selectMode && multiSelect && selectedIds.size > 0 && !selectedIds.has(photo.id) ? {
           opacity: 0.4
         } : {})
-      }],
+      },
       onPress: () => handleFileOpen(photo),
       activeOpacity: 0.8,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.fileManagementStyles.justifiedPhotoContainer,
+        className: "w-full h-full relative rounded-[6px] overflow-hidden",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
           source: {
             uri: downloadUrl
           },
-          style: _styles.fileManagementStyles.justifiedPhotoImage,
+          style: screenStyles.justifiedPhotoImage,
           contentFit: "cover",
           transition: 120,
           cachePolicy: "memory-disk",
@@ -824,7 +802,10 @@ const FileManagementScreen = ({
           },
           accessibilityLabel: photo.filename
         }), selectMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: _styles.fileManagementStyles.selectionBadge,
+          className: "absolute top-[4px] right-[4px] rounded-[12px] p-[2px]",
+          style: {
+            backgroundColor: 'rgba(0,0,0,0.4)'
+          },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline',
             size: 20,
@@ -845,160 +826,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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [_styles.fileManagementStyles.fileItem, {
-        backgroundColor: colors.backgroundSecondary,
-        borderColor
-      }, selectMode && selectedIds.has(file.id) && {
-        borderColor: colors.primary,
-        borderWidth: 2
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: _styles.fileManagementStyles.fileContent,
-        onPress: () => handleFileOpen(file),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: _styles.fileManagementStyles.filePreviewContainer,
-          children: hasPreview ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: _styles.fileManagementStyles.filePreview,
-            children: [isImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-              source: {
-                uri: thumbSourceFor(file)
-              },
-              style: _styles.fileManagementStyles.previewImage,
-              contentFit: "cover",
-              transition: 120,
-              cachePolicy: "memory-disk",
-              onError: () => {
-                // Image preview failed to load
-              },
-              accessibilityLabel: file.filename
-            }), isPDF && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: _styles.fileManagementStyles.pdfPreview,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-                name: "document",
-                size: 32,
-                color: colors.primary
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [_styles.fileManagementStyles.pdfLabel, {
-                  color: colors.primary
-                }],
-                children: "PDF"
-              })]
-            }), isVideo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: _styles.fileManagementStyles.videoPreviewWrapper,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-                source: {
-                  uri: thumbSourceFor(file)
-                },
-                style: _styles.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: _styles.fileManagementStyles.videoOverlay,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-                  name: "play",
-                  size: 24,
-                  color: "#FFFFFF"
-                })
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [_styles.fileManagementStyles.fallbackIcon, {
-                display: isImage ? 'none' : 'flex'
-              }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-                name: (0, _fileManagement.getFileIcon)(file.contentType),
-                size: 32,
-                color: colors.primary
-              })
-            }), selectMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: _styles.fileManagementStyles.selectionBadge,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-                name: selectedIds.has(file.id) ? 'checkmark-circle' : 'ellipse-outline',
-                size: 22,
-                color: selectedIds.has(file.id) ? colors.primary : colors.text
-              })
-            })]
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: _styles.fileManagementStyles.fileIconContainer,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: (0, _fileManagement.getFileIcon)(file.contentType),
-              size: 32,
-              color: colors.primary
-            })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: _styles.fileManagementStyles.fileInfo,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [_styles.fileManagementStyles.fileName, {
-              color: colors.text
-            }],
-            numberOfLines: 1,
-            children: file.filename
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: [_styles.fileManagementStyles.fileDetails, {
-              color: colors.textSecondary
-            }],
-            children: [(0, _fileManagement.formatFileSize)(file.length), " \u2022 ", new Date(file.uploadDate).toLocaleDateString()]
-          }), file.metadata?.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [_styles.fileManagementStyles.fileDescription, {
-              color: colors.textTertiary
-            }],
-            numberOfLines: 2,
-            children: file.metadata.description
-          })]
-        })]
-      }), !selectMode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.fileManagementStyles.fileActions,
-        children: [hasPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: [_styles.fileManagementStyles.actionButton, {
-            backgroundColor: colors.backgroundSecondary
-          }],
-          onPress: () => handleFileOpen(file),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: "eye",
-            size: 20,
-            color: colors.primary
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: [_styles.fileManagementStyles.actionButton, {
-            backgroundColor: colors.backgroundSecondary
-          }],
-          onPress: () => handleFileDownload(file.id, file.filename),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: "download",
-            size: 20,
-            color: colors.primary
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: [_styles.fileManagementStyles.actionButton, {
-            backgroundColor: colors.negativeSubtle
-          }],
-          onPress: () => confirmFileDelete(file.id, file.filename),
-          disabled: deleting === file.id,
-          children: deleting === file.id ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-            size: "small",
-            color: colors.error
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: "trash",
-            size: 20,
-            color: colors.error
-          })
-        })]
-      })]
-    }, file.id);
-  };
 
   // SettingsListItem-based file items (for 'all' view)
   const groupedFileItems = (0, _react.useMemo)(() => {
@@ -1120,11 +947,12 @@ const FileManagementScreen = ({
         },
         // Hide action buttons when selecting (in selectMode or bulk operations mode)
         rightElement: !selectMode && selectedIds.size === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: _styles.fileManagementStyles.groupedActions,
+          className: "flex-row items-center gap-[6px] ml-[12px]",
           children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [_styles.fileManagementStyles.groupedActionBtn, {
+            className: "w-[34px] h-[34px] rounded-[8px] items-center justify-center",
+            style: {
               backgroundColor: colors.backgroundSecondary
-            }],
+            },
             onPress: () => handleFileOpen(file),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
               name: "eye",
@@ -1132,9 +960,10 @@ const FileManagementScreen = ({
               color: colors.primary
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [_styles.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__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
               name: "download",
@@ -1142,9 +971,10 @@ const FileManagementScreen = ({
               color: colors.primary
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [_styles.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__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
@@ -1204,19 +1034,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(() => {
@@ -1242,67 +1065,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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: [_styles.fileManagementStyles.photoItem, {
-        width: itemWidth,
-        height: itemWidth
-      }],
-      onPress: () => handleFileOpen(photo),
-      activeOpacity: 0.8,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: _styles.fileManagementStyles.photoContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
-          source: {
-            uri: downloadUrl
-          },
-          style: _styles.fileManagementStyles.photoImage,
-          contentFit: "cover",
-          transition: 120,
-          cachePolicy: "memory-disk",
-          onError: () => {
-            // Image preview failed to load
-          },
-          accessibilityLabel: photo.filename
-        })
-      })
-    }, photo.id);
-  };
   const renderPhotoGrid = (0, _react.useCallback)(() => {
     const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
     if (photos.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.fileManagementStyles.emptyState,
+        className: "items-center py-[40px] px-[24px]",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "images-outline",
           size: 64,
           color: colors.textTertiary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.fileManagementStyles.emptyStateTitle, {
+          className: "text-[24px] font-bold mt-[16px] mb-[8px]",
+          style: {
             color: colors.text
-          }],
+          },
           children: t('fileManagement.emptyPhotos.title')
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [_styles.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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: [_styles.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__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
@@ -1317,7 +1105,7 @@ const FileManagementScreen = ({
               size: 20,
               color: "#FFFFFF"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: _styles.fileManagementStyles.emptyStateButtonText,
+              className: "text-white text-[16px] font-semibold",
               children: t('fileManagement.uploadPhotos')
             })]
           })
@@ -1326,8 +1114,8 @@ const FileManagementScreen = ({
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
       ref: photoScrollViewRef,
-      style: _styles.fileManagementStyles.scrollView,
-      contentContainerStyle: _styles.fileManagementStyles.photoScrollContainer,
+      className: "flex-1",
+      contentContainerClassName: "p-[10px]",
       refreshControl: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
         refreshing: refreshing,
         onRefresh: () => loadFiles('refresh'),
@@ -1349,14 +1137,15 @@ const FileManagementScreen = ({
       },
       scrollEventThrottle: 250,
       children: [loadingDimensions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.fileManagementStyles.dimensionsLoadingIndicator,
+        className: "flex-row items-center justify-center py-[16px] gap-[8px]",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
           size: "small",
           color: colors.primary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.fileManagementStyles.dimensionsLoadingText, {
+          className: "text-[14px] italic",
+          style: {
             color: colors.textSecondary
-          }],
+          },
           children: t('fileManagement.loadingPhotoLayout')
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JustifiedPhotoGrid.default, {
@@ -1365,35 +1154,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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: _styles.fileManagementStyles.emptyState,
+    className: "items-center py-[40px] px-[24px]",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
       name: "folder-open-outline",
       size: 64,
       color: colors.textTertiary
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [_styles.fileManagementStyles.emptyStateTitle, {
+      className: "text-[24px] font-bold mt-[16px] mb-[8px]",
+      style: {
         color: colors.text
-      }],
+      },
       children: t('fileManagement.emptyFiles.title')
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [_styles.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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: [_styles.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__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
@@ -1408,7 +1199,7 @@ const FileManagementScreen = ({
           size: 20,
           color: "#FFFFFF"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: _styles.fileManagementStyles.emptyStateButtonText,
+          className: "text-white text-[16px] font-semibold",
           children: t('fileManagement.uploadFiles')
         })]
       })
@@ -1424,7 +1215,10 @@ const FileManagementScreen = ({
         toValue: 1,
         duration: 2000,
         easing: _reactNative.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: _reactNative.Platform.OS !== 'web'
       }));
       shimmer.start();
       return () => shimmer.stop();
@@ -1532,22 +1326,22 @@ const FileManagementScreen = ({
       })]
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [_styles.fileManagementStyles.container, {
+      className: "flex-1",
+      style: {
         backgroundColor
-      }],
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [_styles.fileManagementStyles.header, {
+        className: "flex-row items-center justify-between px-[16px] py-[12px] relative",
+        style: {
           borderBottomColor: colors.border,
           borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
-        }],
+        },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonBox, {
           width: 44,
           height: 44,
           borderRadius: 12
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [_styles.fileManagementStyles.headerTitleContainer, {
-            flex: 1
-          }],
+          className: "flex-1 items-center justify-center mx-[16px]",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonBox, {
             width: 140,
             height: 20,
@@ -1564,7 +1358,7 @@ const FileManagementScreen = ({
           borderRadius: 12
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.fileManagementStyles.controlsBar,
+        className: "flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonBox, {
           width: 100,
           height: 36,
@@ -1575,20 +1369,22 @@ const FileManagementScreen = ({
           borderRadius: 22
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [_styles.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__*/(0, _jsxRuntime.jsx)(SkeletonBox, {
           width: "100%",
           height: 44,
           borderRadius: 12
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [_styles.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: _styles.fileManagementStyles.statItem,
+          className: "flex-1 items-center py-[4px]",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonBox, {
             width: 50,
             height: 20,
@@ -1603,8 +1399,8 @@ const FileManagementScreen = ({
           })]
         }, i))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        style: _styles.fileManagementStyles.scrollView,
-        contentContainerStyle: _styles.fileManagementStyles.scrollContainer,
+        className: "flex-1",
+        contentContainerClassName: "px-[12px] pt-0 pb-[12px]",
         showsVerticalScrollIndicator: false,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: {
@@ -1695,7 +1491,7 @@ const FileManagementScreen = ({
   // If upload preview is showing, render it inline instead of the file list
   if (showUploadPreview) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: _styles.fileManagementStyles.container,
+      className: "flex-1",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
         title: t('fileManagement.reviewFiles'),
         subtitle: t('fileManagement.readyToUpload', {
@@ -1716,7 +1512,7 @@ const FileManagementScreen = ({
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: _styles.fileManagementStyles.container,
+    className: "flex-1",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
       title: selectMode ? multiSelect ? maxSelection ? t('fileManagement.selectedWithMax', {
         count: selectedIds.size,
@@ -1766,22 +1562,26 @@ const FileManagementScreen = ({
       elevation: "none",
       titleAlignment: "left"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: _styles.fileManagementStyles.controlsBar,
+      className: "flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
         horizontal: true,
         showsHorizontalScrollIndicator: false,
-        style: _styles.fileManagementStyles.viewModeScroll,
+        className: "flex-1",
+        style: {
+          maxWidth: '80%'
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [_styles.fileManagementStyles.viewModeToggle, {
+          className: "flex-row rounded-full p-[2px] overflow-hidden",
+          style: {
             backgroundColor: colors.card
-          }],
+          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
             isSelected: viewMode === 'all',
             onPress: () => setViewMode('all'),
             icon: viewMode === 'all' ? 'folder' : 'folder-outline',
             primaryColor: colors.primary,
             textColor: colors.text,
-            style: _styles.fileManagementStyles.viewModeButton,
+            style: screenStyles.viewModeButton,
             accessibilityLabel: t('fileManagement.a11y.viewAll') || 'Show all files'
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
             isSelected: viewMode === 'photos',
@@ -1789,7 +1589,7 @@ const FileManagementScreen = ({
             icon: viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline',
             primaryColor: colors.primary,
             textColor: colors.text,
-            style: _styles.fileManagementStyles.viewModeButton,
+            style: screenStyles.viewModeButton,
             accessibilityLabel: t('fileManagement.a11y.viewPhotos') || 'Show photos only'
           }), !isImageOnlyPicker && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
@@ -1798,7 +1598,7 @@ const FileManagementScreen = ({
               icon: viewMode === 'videos' ? 'video' : 'video-outline',
               primaryColor: colors.primary,
               textColor: colors.text,
-              style: _styles.fileManagementStyles.viewModeButton,
+              style: screenStyles.viewModeButton,
               accessibilityLabel: t('fileManagement.a11y.viewVideos') || 'Show videos only'
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
               isSelected: viewMode === 'documents',
@@ -1806,7 +1606,7 @@ const FileManagementScreen = ({
               icon: viewMode === 'documents' ? 'file-document' : 'file-document-outline',
               primaryColor: colors.primary,
               textColor: colors.text,
-              style: _styles.fileManagementStyles.viewModeButton,
+              style: screenStyles.viewModeButton,
               accessibilityLabel: t('fileManagement.a11y.viewDocuments') || 'Show documents only'
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedButton, {
               isSelected: viewMode === 'audio',
@@ -1814,15 +1614,16 @@ const FileManagementScreen = ({
               icon: viewMode === 'audio' ? 'music-note' : 'music-note-outline',
               primaryColor: colors.primary,
               textColor: colors.text,
-              style: _styles.fileManagementStyles.viewModeButton,
+              style: screenStyles.viewModeButton,
               accessibilityLabel: t('fileManagement.a11y.viewAudio') || 'Show audio only'
             })]
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [_styles.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,
@@ -1849,9 +1650,10 @@ const FileManagementScreen = ({
           color: colors.textSecondary
         })]
       }), user?.id === targetUserId && (!selectMode || selectMode && allowUploadInSelectMode) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [_styles.fileManagementStyles.uploadButton, isImageOnlyPicker && _styles.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",
@@ -1860,25 +1662,25 @@ const FileManagementScreen = ({
           busy: uploading || isPickingDocument
         },
         children: uploading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: _styles.fileManagementStyles.uploadProgress,
+          className: "items-center justify-center",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
             size: "small",
             color: "#FFFFFF"
           }), uploadProgress && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: _styles.fileManagementStyles.uploadProgressText,
+            className: "text-white text-[10px] font-semibold mt-[2px]",
             children: [uploadProgress.current, "/", uploadProgress.total]
           })]
         }) : isPickingDocument ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
           size: "small",
           color: "#FFFFFF"
         }) : isImageOnlyPicker ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: _styles.fileManagementStyles.uploadButtonContent,
+          className: "flex-row items-center gap-[6px]",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: "cloud-upload",
             size: 18,
             color: "#FFFFFF"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: _styles.fileManagementStyles.uploadButtonLabel,
+            className: "text-white text-[14px] font-semibold",
             numberOfLines: 1,
             children: t('fileManagement.upload') || 'Upload'
           })]
@@ -1889,24 +1691,26 @@ const FileManagementScreen = ({
         })
       })]
     }), files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [_styles.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__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
         name: "search",
         size: 22,
         color: colors.icon
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        style: [_styles.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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: () => setSearchQuery(''),
-        style: _styles.fileManagementStyles.searchClearButton,
+        className: "p-[4px] rounded-[12px] items-center justify-center",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "close-circle",
           size: 22,
@@ -1914,46 +1718,59 @@ const FileManagementScreen = ({
         })
       })]
     }), files.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [_styles.fileManagementStyles.statsContainer, {
+      className: "flex-row px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-[18px]",
+      style: {
         backgroundColor: colors.card
-      }],
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.fileManagementStyles.statItem,
+        className: "flex-1 items-center py-[4px]",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.fileManagementStyles.statValue, {
-            color: colors.text
-          }],
+          className: "text-[20px] font-extrabold leading-[24px]",
+          style: {
+            color: colors.text,
+            letterSpacing: -0.5
+          },
           children: filteredFiles.length
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.fileManagementStyles.statItem,
+        className: "flex-1 items-center py-[4px]",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.fileManagementStyles.statValue, {
-            color: colors.text
-          }],
+          className: "text-[20px] font-extrabold leading-[24px]",
+          style: {
+            color: colors.text,
+            letterSpacing: -0.5
+          },
           children: (0, _fileManagement.formatFileSize)(filteredFiles.reduce((total, file) => total + file.length, 0))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _styles.fileManagementStyles.statItem,
+        className: "flex-1 items-center py-[4px]",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.fileManagementStyles.statValue, {
-            color: colors.text
-          }],
+          className: "text-[20px] font-extrabold leading-[24px]",
+          style: {
+            color: colors.text,
+            letterSpacing: -0.5
+          },
           children: files.length
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_styles.fileManagementStyles.statLabel, {
-            color: colors.textSecondary
-          }],
+          className: "text-[12px] font-medium mt-[2px]",
+          style: {
+            color: colors.textSecondary,
+            letterSpacing: 0.2
+          },
           children: t('fileManagement.total')
         })]
       })]
@@ -2031,7 +1848,5 @@ const FileManagementScreen = ({
     })]
   });
 };
-
-// Styles have been moved to components/fileManagement/styles.ts
 var _default = exports.default = FileManagementScreen;
 //# sourceMappingURL=FileManagementScreen.js.map