@oxyhq/services 5.11.9 → 5.11.10

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

@@ -10,7 +10,10 @@ import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
 import Header from '../components/Header';
+import JustifiedPhotoGrid from '../components/photogrid/JustifiedPhotoGrid';
 import { GroupedSection } from '../components';
+
+// Exporting props & callback types so external callers (e.g. showBottomSheet config objects) can annotate
 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) {
@@ -22,7 +25,17 @@ const FileManagementScreen = ({
   goBack,
   navigate,
   userId,
-  containerWidth = 400 // Fallback for when not provided by the router
+  containerWidth = 400,
+  // Fallback for when not provided by the router
+  selectMode = false,
+  multiSelect = false,
+  onSelect,
+  onConfirmSelection,
+  initialSelectedIds = [],
+  maxSelection,
+  disabledMimeTypes = [],
+  afterSelect = 'close',
+  allowUploadInSelectMode = true
 }) => {
   const {
     user,
@@ -46,8 +59,16 @@ const FileManagementScreen = ({
   const deleting = useDeletingStore();
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
+  const [paging, setPaging] = useState({
+    offset: 0,
+    limit: 40,
+    total: 0,
+    hasMore: true,
+    loadingMore: false
+  });
   const [selectedFile, setSelectedFile] = useState(null);
   const [showFileDetails, setShowFileDetails] = useState(false);
+  // In selectMode we never open the detailed viewer
   const [openedFile, setOpenedFile] = useState(null);
   const [fileContent, setFileContent] = useState(null);
   const [loadingFileContent, setLoadingFileContent] = useState(false);
@@ -72,6 +93,56 @@ const FileManagementScreen = ({
   const [hoveredPreview, setHoveredPreview] = useState(null);
   const uploadStartRef = useRef(null);
   const MIN_BANNER_MS = 600;
+  // Selection state
+  const [selectedIds, setSelectedIds] = useState(new Set(initialSelectedIds));
+  useEffect(() => {
+    if (initialSelectedIds && initialSelectedIds.length) {
+      setSelectedIds(new Set(initialSelectedIds));
+    }
+  }, [initialSelectedIds]);
+  const toggleSelect = useCallback(file => {
+    if (!selectMode) return;
+    if (disabledMimeTypes.length) {
+      const blocked = disabledMimeTypes.some(mt => file.contentType === mt || file.contentType.startsWith(mt.endsWith('/') ? mt : mt + '/'));
+      if (blocked) {
+        toast.error('This file type cannot be selected');
+        return;
+      }
+    }
+    if (!multiSelect) {
+      onSelect?.(file);
+      if (afterSelect === 'back') {
+        goBack?.();
+      } else if (afterSelect === 'close') {
+        onClose?.();
+      }
+      return;
+    }
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      const already = next.has(file.id);
+      if (!already) {
+        if (maxSelection && next.size >= maxSelection) {
+          toast.error(`You can select up to ${maxSelection}`);
+          return prev;
+        }
+        next.add(file.id);
+      } else {
+        next.delete(file.id);
+      }
+      return next;
+    });
+  }, [selectMode, multiSelect, onSelect, onClose, goBack, disabledMimeTypes, maxSelection, afterSelect]);
+  const confirmMultiSelection = useCallback(() => {
+    if (!selectMode || !multiSelect) return;
+    const map = {};
+    files.forEach(f => {
+      map[f.id] = f;
+    });
+    const chosen = Array.from(selectedIds).map(id => map[id]).filter(Boolean);
+    onConfirmSelection?.(chosen);
+    onClose?.();
+  }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose]);
   const endUpload = useCallback(() => {
     const started = uploadStartRef.current;
     const elapsed = started ? Date.now() - started : MIN_BANNER_MS;
@@ -144,8 +215,21 @@ const FileManagementScreen = ({
         setRefreshing(true);
       } else if (mode === 'initial') {
         setLoading(true);
+        setPaging(p => ({
+          ...p,
+          offset: 0,
+          hasMore: true
+        }));
+      } else if (mode === 'more') {
+        // Prevent duplicate fetches
+        setPaging(p => ({
+          ...p,
+          loadingMore: true
+        }));
       }
-      const response = await oxyServices.listUserFiles();
+      const currentPaging = mode === 'more' ? prevPagingRef.current ?? paging : paging;
+      const effectiveOffset = mode === 'more' ? currentPaging.offset + currentPaging.limit : 0;
+      const response = await oxyServices.listUserFiles(currentPaging.limit, effectiveOffset);
       const assets = (response.files || []).map(f => ({
         id: f.id,
         filename: f.originalName || f.sha256,
@@ -156,18 +240,48 @@ const FileManagementScreen = ({
         metadata: f.metadata || {},
         variants: f.variants || []
       }));
-      // Merge to preserve existing order & allow incremental updates
-      useFileStore.getState().setFiles(assets, {
-        merge: true
-      });
+      if (mode === 'more') {
+        // append
+        useFileStore.getState().setFiles(assets, {
+          merge: true
+        });
+        setPaging(p => ({
+          ...p,
+          offset: effectiveOffset,
+          total: response.total || effectiveOffset + assets.length,
+          hasMore: response.hasMore,
+          loadingMore: false
+        }));
+      } else {
+        useFileStore.getState().setFiles(assets, {
+          merge: false
+        });
+        setPaging(p => ({
+          ...p,
+          offset: 0,
+          total: response.total || assets.length,
+          hasMore: response.hasMore,
+          loadingMore: false
+        }));
+      }
     } catch (error) {
       console.error('Failed to load files:', error);
       toast.error(error.message || 'Failed to load files');
     } finally {
       setLoading(false);
       setRefreshing(false);
+      setPaging(p => ({
+        ...p,
+        loadingMore: false
+      }));
     }
-  }, [targetUserId, oxyServices]);
+  }, [targetUserId, oxyServices, paging]);
+
+  // Keep a ref to avoid stale closure when calculating next offset
+  const prevPagingRef = useRef(paging);
+  useEffect(() => {
+    prevPagingRef.current = paging;
+  }, [paging]);
 
   // (removed effect; filteredFiles is memoized)
 
@@ -591,6 +705,10 @@ const FileManagementScreen = ({
     return 'document-outline';
   };
   const handleFileOpen = async file => {
+    if (selectMode) {
+      toggleSelect(file);
+      return;
+    }
     try {
       setLoadingFileContent(true);
       setOpenedFile(file);
@@ -654,13 +772,17 @@ const FileManagementScreen = ({
       style: [styles.simplePhotoItem, {
         width: itemWidth,
         height: itemWidth,
-        marginRight: (index + 1) % itemsPerRow === 0 ? 0 : 4
+        marginRight: (index + 1) % itemsPerRow === 0 ? 0 : 4,
+        ...(selectMode && selectedIds.has(photo.id) ? {
+          borderWidth: 2,
+          borderColor: themeStyles.primaryColor
+        } : {})
       }],
       onPress: () => handleFileOpen(photo),
       activeOpacity: 0.8,
-      children: /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsxs(View, {
         style: styles.simplePhotoContainer,
-        children: /*#__PURE__*/_jsx(ExpoImage, {
+        children: [/*#__PURE__*/_jsx(ExpoImage, {
           source: {
             uri: downloadUrl
           },
@@ -672,22 +794,36 @@ const FileManagementScreen = ({
             console.error('Photo failed to load:', e?.nativeEvent ?? e);
           },
           accessibilityLabel: photo.filename
-        })
+        }), selectMode && /*#__PURE__*/_jsx(View, {
+          style: styles.selectionBadge,
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline',
+            size: 20,
+            color: selectedIds.has(photo.id) ? themeStyles.primaryColor : themeStyles.textColor
+          })
+        })]
       })
     }, photo.id);
-  }, [oxyServices, containerWidth]);
+  }, [oxyServices, containerWidth, selectMode, selectedIds, themeStyles.primaryColor, themeStyles.textColor]);
   const renderJustifiedPhotoItem = useCallback((photo, width, height, isLast) => {
     const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       style: [styles.justifiedPhotoItem, {
         width,
-        height
+        height,
+        ...(selectMode && selectedIds.has(photo.id) ? {
+          borderWidth: 2,
+          borderColor: themeStyles.primaryColor
+        } : {}),
+        ...(selectMode && multiSelect && selectedIds.size > 0 && !selectedIds.has(photo.id) ? {
+          opacity: 0.4
+        } : {})
       }],
       onPress: () => handleFileOpen(photo),
       activeOpacity: 0.8,
-      children: /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsxs(View, {
         style: styles.justifiedPhotoContainer,
-        children: /*#__PURE__*/_jsx(ExpoImage, {
+        children: [/*#__PURE__*/_jsx(ExpoImage, {
           source: {
             uri: downloadUrl
           },
@@ -699,10 +835,17 @@ const FileManagementScreen = ({
             console.error('Photo failed to load:', e?.nativeEvent ?? e);
           },
           accessibilityLabel: photo.filename
-        })
+        }), selectMode && /*#__PURE__*/_jsx(View, {
+          style: styles.selectionBadge,
+          children: /*#__PURE__*/_jsx(Ionicons, {
+            name: selectedIds.has(photo.id) ? 'checkmark-circle' : 'ellipse-outline',
+            size: 20,
+            color: selectedIds.has(photo.id) ? themeStyles.primaryColor : themeStyles.textColor
+          })
+        })]
       })
     }, photo.id);
-  }, [oxyServices]);
+  }, [oxyServices, selectMode, selectedIds, multiSelect, themeStyles.primaryColor, themeStyles.textColor]);
 
   // Run initial load once per targetUserId change to avoid accidental loops
   const lastLoadedFor = useRef(undefined);
@@ -725,6 +868,9 @@ const FileManagementScreen = ({
       style: [styles.fileItem, {
         backgroundColor: themeStyles.secondaryBackgroundColor,
         borderColor
+      }, selectMode && selectedIds.has(file.id) && {
+        borderColor: themeStyles.primaryColor,
+        borderWidth: 2
       }],
       children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
         style: styles.fileContent,
@@ -795,13 +941,20 @@ const FileManagementScreen = ({
                 size: 32,
                 color: themeStyles.primaryColor
               })
-            }), Platform.OS === 'web' && hoveredPreview === file.id && isImage && /*#__PURE__*/_jsx(View, {
+            }), !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,
+              children: /*#__PURE__*/_jsx(Ionicons, {
+                name: selectedIds.has(file.id) ? 'checkmark-circle' : 'ellipse-outline',
+                size: 22,
+                color: selectedIds.has(file.id) ? themeStyles.primaryColor : themeStyles.textColor
+              })
             })]
           }) : /*#__PURE__*/_jsx(View, {
             style: styles.fileIconContainer,
@@ -832,7 +985,7 @@ const FileManagementScreen = ({
             children: file.metadata.description
           })]
         })]
-      }), /*#__PURE__*/_jsxs(View, {
+      }), !selectMode && /*#__PURE__*/_jsxs(View, {
         style: styles.fileActions,
         children: [hasPreview && /*#__PURE__*/_jsx(TouchableOpacity, {
           style: [styles.actionButton, {
@@ -877,12 +1030,12 @@ const FileManagementScreen = ({
 
   // GroupedSection-based file items (for 'all' view) replacing legacy flat list look
   const groupedFileItems = useMemo(() => {
-    return filteredFiles.filter(f => true) // placeholder for future filtering
-    .sort((a, b) => new Date(b.uploadDate).getTime() - new Date(a.uploadDate).getTime()).map(file => {
+    return filteredFiles.filter(f => true).sort((a, b) => new Date(b.uploadDate).getTime() - new Date(a.uploadDate).getTime()).map(file => {
       const isImage = file.contentType.startsWith('image/');
       const isVideo = file.contentType.startsWith('video/');
       const hasPreview = isImage || isVideo;
       const previewUrl = hasPreview ? isVideo ? getSafeDownloadUrl(file, 'poster') : getSafeDownloadUrl(file, 'thumb') : undefined;
+      const isSelected = selectedIds.has(file.id);
       return {
         id: file.id,
         image: previewUrl,
@@ -896,7 +1049,9 @@ const FileManagementScreen = ({
         showChevron: false,
         dense: true,
         multiRow: !!file.metadata?.description,
-        customContent: /*#__PURE__*/_jsxs(View, {
+        selected: selectMode && isSelected,
+        // Hide action buttons when selecting
+        customContent: !selectMode ? /*#__PURE__*/_jsxs(View, {
           style: styles.groupedActions,
           children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/_jsx(TouchableOpacity, {
             style: [styles.groupedActionBtn, {
@@ -933,7 +1088,7 @@ const FileManagementScreen = ({
               color: themeStyles.dangerColor
             })
           })]
-        }),
+        }) : undefined,
         customContentBelow: file.metadata?.description ? /*#__PURE__*/_jsx(Text, {
           style: [styles.groupedDescription, {
             color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666'
@@ -941,9 +1096,9 @@ const FileManagementScreen = ({
           numberOfLines: 2,
           children: file.metadata.description
         }) : undefined
-      }; // GroupedSectionItem shape
+      };
     });
-  }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrl]);
+  }, [filteredFiles, theme, themeStyles, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrl, selectMode, selectedIds]);
   const renderPhotoItem = (photo, index) => {
     const downloadUrl = getSafeDownloadUrl(photo, 'thumb');
 
@@ -1032,6 +1187,20 @@ const FileManagementScreen = ({
         tintColor: themeStyles.primaryColor
       }),
       showsVerticalScrollIndicator: false,
+      onScroll: ({
+        nativeEvent
+      }) => {
+        const {
+          layoutMeasurement,
+          contentOffset,
+          contentSize
+        } = nativeEvent;
+        const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
+        if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
+          loadFiles('more');
+        }
+      },
+      scrollEventThrottle: 250,
       children: [loadingDimensions && /*#__PURE__*/_jsxs(View, {
         style: styles.dimensionsLoadingIndicator,
         children: [/*#__PURE__*/_jsx(ActivityIndicator, {
@@ -1056,98 +1225,8 @@ const FileManagementScreen = ({
     });
   }, [filteredFiles, themeStyles, user?.id, targetUserId, uploading, handleFileUpload, refreshing, loadFiles, loadingDimensions, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem, renderPhotoItem, containerWidth]);
 
-  // Separate component for the photo grid to optimize rendering
-  const JustifiedPhotoGrid = /*#__PURE__*/React.memo(({
-    photos,
-    photoDimensions,
-    loadPhotoDimensions,
-    createJustifiedRows,
-    renderJustifiedPhotoItem,
-    renderSimplePhotoItem,
-    textColor,
-    containerWidth
-  }) => {
-    // Load dimensions for new photos
-    React.useEffect(() => {
-      loadPhotoDimensions(photos);
-      // Depend only on photo IDs to avoid re-running from dimension state changes
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [photos.map(p => p.id).join(',')]);
-
-    // Group photos by date
-    const photosByDate = React.useMemo(() => {
-      return photos.reduce((groups, photo) => {
-        const date = new Date(photo.uploadDate).toDateString();
-        if (!groups[date]) {
-          groups[date] = [];
-        }
-        groups[date].push(photo);
-        return groups;
-      }, {});
-    }, [photos]);
-    const sortedDates = React.useMemo(() => {
-      return Object.keys(photosByDate).sort((a, b) => new Date(b).getTime() - new Date(a).getTime());
-    }, [photosByDate]);
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: sortedDates.map(date => {
-        const dayPhotos = photosByDate[date];
-        const justifiedRows = createJustifiedRows(dayPhotos, containerWidth);
-        return /*#__PURE__*/_jsxs(View, {
-          style: styles.photoDateSection,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.photoDateHeader, {
-              color: themeStyles.textColor
-            }],
-            children: new Date(date).toLocaleDateString('en-US', {
-              weekday: 'long',
-              year: 'numeric',
-              month: 'long',
-              day: 'numeric'
-            })
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.justifiedPhotoGrid,
-            children: justifiedRows.map((row, rowIndex) => {
-              // Calculate row height based on available width
-              const gap = 4;
-              let totalAspectRatio = 0;
-
-              // Calculate total aspect ratio for this row
-              row.forEach(photo => {
-                const dimensions = photoDimensions[photo.id];
-                const aspectRatio = dimensions ? dimensions.width / dimensions.height : 1.33; // Default 4:3 ratio
-                totalAspectRatio += aspectRatio;
-              });
-
-              // Calculate the height that makes the row fill the available width
-              // Account for photoScrollContainer padding (32px total) and gaps between photos
-              const scrollContainerPadding = 32;
-              const availableWidth = containerWidth - scrollContainerPadding - gap * (row.length - 1);
-              const calculatedHeight = availableWidth / totalAspectRatio;
+  // Inline justified grid removed (moved to components/photogrid/JustifiedPhotoGrid.tsx)
 
-              // Clamp height for visual consistency
-              const rowHeight = Math.max(120, Math.min(calculatedHeight, 300));
-              return /*#__PURE__*/_jsx(View, {
-                style: [styles.justifiedPhotoRow, {
-                  height: rowHeight,
-                  maxWidth: containerWidth - 32,
-                  // Account for scroll container padding
-                  gap: 4 // Add horizontal gap between photos in row
-                }],
-                children: row.map((photo, photoIndex) => {
-                  const dimensions = photoDimensions[photo.id];
-                  const aspectRatio = dimensions ? dimensions.width / dimensions.height : 1.33; // Default 4:3 ratio
-
-                  const photoWidth = rowHeight * aspectRatio;
-                  const isLast = photoIndex === row.length - 1;
-                  return renderJustifiedPhotoItem(photo, photoWidth, rowHeight, isLast);
-                })
-              }, `row-${rowIndex}`);
-            })
-          })]
-        }, date);
-      })
-    });
-  });
   const renderFileDetailsModal = () => {
     const backgroundColor = themeStyles.backgroundColor;
     const borderColor = themeStyles.borderColor;
@@ -1683,7 +1762,7 @@ const FileManagementScreen = ({
   }
 
   // If a file is opened, show the file viewer
-  if (openedFile) {
+  if (!selectMode && openedFile) {
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [renderFileViewer(), renderFileDetailsModal()]
     });
@@ -1697,8 +1776,19 @@ const FileManagementScreen = ({
       onDrop: handleDrop
     } : {}),
     children: [/*#__PURE__*/_jsx(Header, {
-      title: viewMode === 'photos' ? 'Photos' : 'File Management',
-      subtitle: `${filteredFiles.length} ${filteredFiles.length === 1 ? 'item' : 'items'}`,
+      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'}`,
+      rightActions: selectMode && multiSelect ? [{
+        key: 'clear',
+        text: 'Clear',
+        onPress: () => setSelectedIds(new Set()),
+        disabled: selectedIds.size === 0
+      }, {
+        key: 'confirm',
+        text: 'Confirm',
+        onPress: confirmMultiSelection,
+        disabled: selectedIds.size === 0
+      }] : undefined,
       onBack: onClose || goBack,
       theme: theme,
       showBackButton: true,
@@ -1734,7 +1824,7 @@ const FileManagementScreen = ({
             color: viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor
           })
         })]
-      }), user?.id === targetUserId && /*#__PURE__*/_jsx(TouchableOpacity, {
+      }), user?.id === targetUserId && (!selectMode || selectMode && allowUploadInSelectMode) && /*#__PURE__*/_jsx(TouchableOpacity, {
         style: [styles.uploadButton, {
           backgroundColor: themeStyles.primaryColor
         }],
@@ -1834,6 +1924,20 @@ const FileManagementScreen = ({
         onRefresh: () => loadFiles('refresh'),
         tintColor: themeStyles.primaryColor
       }),
+      onScroll: ({
+        nativeEvent
+      }) => {
+        const {
+          layoutMeasurement,
+          contentOffset,
+          contentSize
+        } = nativeEvent;
+        const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
+        if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
+          loadFiles('more');
+        }
+      },
+      scrollEventThrottle: 250,
       children: filteredFiles.length === 0 && searchQuery.length > 0 ? /*#__PURE__*/_jsxs(View, {
         style: styles.emptyState,
         children: [/*#__PURE__*/_jsx(Ionicons, {
@@ -1864,11 +1968,24 @@ const FileManagementScreen = ({
             children: "Clear Search"
           })]
         })]
-      }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/_jsx(GroupedSection, {
-        items: groupedFileItems,
-        theme: theme
+      }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(GroupedSection, {
+          items: groupedFileItems,
+          theme: theme
+        }), paging.loadingMore && /*#__PURE__*/_jsxs(View, {
+          style: styles.loadingMoreBar,
+          children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: themeStyles.primaryColor
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.loadingMoreText, {
+              color: themeStyles.textColor
+            }],
+            children: "Loading more..."
+          })]
+        })]
       })
-    }), renderFileDetailsModal(), uploading && /*#__PURE__*/_jsx(View, {
+    }), !selectMode && renderFileDetailsModal(), !selectMode && uploading && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
       style: styles.uploadBannerContainer,
       children: /*#__PURE__*/_jsxs(View, {
@@ -1921,6 +2038,48 @@ 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,
@@ -2081,7 +2240,8 @@ const styles = StyleSheet.create({
     letterSpacing: 0.2
   },
   scrollView: {
-    flex: 1
+    flex: 1,
+    backgroundColor: '#e5f1ff'
   },
   scrollContainer: {
     padding: 12