@oxyhq/services 6.9.44 → 6.9.46

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, Alert } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, Animated, Easing } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 // Lazy load expo-document-picker (optional dependency)
 // This allows the screen to work even if expo-document-picker is not installed
@@ -16,21 +16,24 @@ const loadDocumentPicker = async () => {
   }
 };
 import { toast } from '../../lib/sonner';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import { Ionicons } from '@expo/vector-icons';
 // @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from "../stores/fileStore.js";
 import Header from "../components/Header.js";
 import JustifiedPhotoGrid from "../components/photogrid/JustifiedPhotoGrid.js";
-import { GroupedSection } from "../components/index.js";
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from "../context/OxyContext.js";
 import { useI18n } from "../hooks/useI18n.js";
 import { useUploadFile } from "../hooks/mutations/useAccountMutations.js";
-import { confirmAction, convertDocumentPickerAssetToFile, formatFileSize, getFileIcon, getSafeDownloadUrl } from "../utils/fileManagement.js";
+import { convertDocumentPickerAssetToFile, formatFileSize, getFileIcon, getSafeDownloadUrl } from "../utils/fileManagement.js";
 import { FileViewer } from "../components/fileManagement/FileViewer.js";
 import { FileDetailsModal } from "../components/fileManagement/FileDetailsModal.js";
 import { UploadPreview } from "../components/fileManagement/UploadPreview.js";
+import { useDialogControl } from '@oxyhq/bloom/dialog';
 import { fileManagementStyles } from "../components/fileManagement/styles.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /** Extract error message from unknown error type */
@@ -108,6 +111,11 @@ const FileManagementScreen = ({
     t
   } = useI18n();
   const uploadFileMutation = useUploadFile();
+  // Prompt controls
+  const fileDeletePrompt = usePromptControl();
+  const bulkDeletePrompt = usePromptControl();
+  const visibilityChangePrompt = usePromptControl();
+  const [pendingDeleteFile, setPendingDeleteFile] = useState(null);
   const files = useFiles();
   // Ensure containerWidth is a number (TypeScript guard)
   const safeContainerWidth = typeof containerWidth === 'number' ? containerWidth : 400;
@@ -124,7 +132,7 @@ const FileManagementScreen = ({
     loadingMore: false
   });
   const [selectedFile, setSelectedFile] = useState(null);
-  const [showFileDetails, setShowFileDetails] = useState(false);
+  const fileDetailsControl = useDialogControl();
   // In selectMode we never open the detailed viewer
   const [openedFile, setOpenedFile] = useState(null);
   const [fileContent, setFileContent] = useState(null);
@@ -863,14 +871,18 @@ const FileManagementScreen = ({
       setIsPickingDocument(false);
     }
   };
-  const handleFileDelete = async (fileId, filename) => {
-    // Use platform-aware confirmation dialog
-    const confirmed = await confirmAction(t('fileManagement.confirms.deleteFile', {
-      filename
-    }), t('fileManagement.deleteFile'), t('fileManagement.confirm'), t('common.cancel'));
-    if (!confirmed) {
-      return;
-    }
+  const confirmFileDelete = useCallback((fileId, filename) => {
+    setPendingDeleteFile({
+      id: fileId,
+      name: filename
+    });
+    fileDeletePrompt.open();
+  }, [fileDeletePrompt]);
+  const handleFileDelete = useCallback(async () => {
+    if (!pendingDeleteFile) return;
+    const {
+      id: fileId
+    } = pendingDeleteFile;
     try {
       storeSetDeleting(fileId);
       await oxyServices.deleteFile(fileId);
@@ -894,19 +906,15 @@ const FileManagementScreen = ({
       }
     } finally {
       storeSetDeleting(null);
+      setPendingDeleteFile(null);
     }
-  };
+  }, [pendingDeleteFile, storeSetDeleting, oxyServices, loadFiles, t]);
+  const confirmBulkDelete = useCallback(() => {
+    if (selectedIds.size === 0) return;
+    bulkDeletePrompt.open();
+  }, [selectedIds.size, bulkDeletePrompt]);
   const handleBulkDelete = useCallback(async () => {
     if (selectedIds.size === 0) return;
-    const fileMap = {};
-    files.forEach(f => {
-      fileMap[f.id] = f;
-    });
-    const selectedFiles = Array.from(selectedIds).map(id => fileMap[id]).filter(Boolean);
-    const confirmed = await confirmAction(t('fileManagement.confirms.deleteFiles', {
-      count: selectedFiles.length
-    }), t('fileManagement.deleteFiles'), t('fileManagement.confirm'), t('common.cancel'));
-    if (!confirmed) return;
     try {
       const deletePromises = Array.from(selectedIds).map(async fileId => {
         try {
@@ -1081,7 +1089,7 @@ const FileManagementScreen = ({
   };
   const showFileDetailsModal = file => {
     setSelectedFile(file);
-    setShowFileDetails(true);
+    fileDetailsControl.open();
   };
   const renderSimplePhotoItem = useCallback((photo, index) => {
     const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
@@ -1325,9 +1333,7 @@ const FileManagementScreen = ({
           style: [fileManagementStyles.actionButton, {
             backgroundColor: bloomTheme.isDark ? '#400000' : '#FFEBEE'
           }],
-          onPress: () => {
-            handleFileDelete(file.id, file.filename);
-          },
+          onPress: () => confirmFileDelete(file.id, file.filename),
           disabled: deleting === file.id,
           children: deleting === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
             size: "small",
@@ -1342,8 +1348,8 @@ const FileManagementScreen = ({
     }, file.id);
   };
 
-  // GroupedSection-based file items (for 'all' view) replacing legacy flat list look
-  // biome-ignore lint/suspicious/noExplicitAny: GroupedSection items have dynamic props
+  // SettingsListItem-based file items (for 'all' view)
+  // biome-ignore lint/suspicious/noExplicitAny: file items have dynamic props
   const groupedFileItems = useMemo(() => {
     // filteredFiles is already sorted, so just use it directly
     const sortedFiles = filteredFiles;
@@ -1359,11 +1365,11 @@ const FileManagementScreen = ({
       const hasPreview = isImage || isPDF || isVideo;
       const isSelected = selectedIds.has(file.id);
 
-      // Create customIcon for preview thumbnails (36x36 to match GroupedItem iconContainer)
-      let customIcon;
+      // Create icon for preview thumbnails (36x36)
+      let fileIcon;
       if (hasPreview) {
         if (isImage) {
-          customIcon = /*#__PURE__*/_jsx(View, {
+          fileIcon = /*#__PURE__*/_jsx(View, {
             style: {
               width: 36,
               height: 36,
@@ -1388,7 +1394,7 @@ const FileManagementScreen = ({
             })
           });
         } else if (isVideo) {
-          customIcon = /*#__PURE__*/_jsxs(View, {
+          fileIcon = /*#__PURE__*/_jsxs(View, {
             style: {
               width: 36,
               height: 36,
@@ -1431,7 +1437,7 @@ const FileManagementScreen = ({
             })]
           });
         } else if (isPDF) {
-          customIcon = /*#__PURE__*/_jsx(View, {
+          fileIcon = /*#__PURE__*/_jsx(View, {
             style: {
               width: 36,
               height: 36,
@@ -1450,12 +1456,13 @@ const FileManagementScreen = ({
       }
       return {
         id: file.id,
-        customIcon: customIcon,
-        icon: !hasPreview ? getFileIcon(file.contentType) : undefined,
-        iconColor: colors.primary,
+        icon: fileIcon ?? (!hasPreview ? /*#__PURE__*/_jsx(Ionicons, {
+          name: getFileIcon(file.contentType),
+          size: 20,
+          color: colors.primary
+        }) : undefined),
         title: file.filename,
-        subtitle: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
-        theme: theme,
+        description: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
         onPress: () => {
           // Support selection in regular mode with long press or if already selecting
           if (!selectMode && selectedIds.size > 0) {
@@ -1465,20 +1472,8 @@ const FileManagementScreen = ({
             handleFileOpen(file);
           }
         },
-        onLongPress: !selectMode ? () => {
-          // Enable selection mode on long press
-          if (selectedIds.size === 0) {
-            setSelectedIds(new Set([file.id]));
-          } else {
-            toggleSelect(file);
-          }
-        } : undefined,
-        showChevron: false,
-        dense: true,
-        multiRow: !!file.metadata?.description,
-        selected: (selectMode || selectedIds.size > 0) && isSelected,
         // Hide action buttons when selecting (in selectMode or bulk operations mode)
-        customContent: !selectMode && selectedIds.size === 0 ? /*#__PURE__*/_jsxs(View, {
+        rightElement: !selectMode && selectedIds.size === 0 ? /*#__PURE__*/_jsxs(View, {
           style: fileManagementStyles.groupedActions,
           children: [(isImage || isVideo || file.contentType.includes('pdf')) && /*#__PURE__*/_jsx(TouchableOpacity, {
             style: [fileManagementStyles.groupedActionBtn, {
@@ -1504,7 +1499,7 @@ const FileManagementScreen = ({
             style: [fileManagementStyles.groupedActionBtn, {
               backgroundColor: bloomTheme.isDark ? '#400000' : '#FFEBEE'
             }],
-            onPress: () => handleFileDelete(file.id, file.filename),
+            onPress: () => confirmFileDelete(file.id, file.filename),
             disabled: deleting === file.id,
             children: deleting === file.id ? /*#__PURE__*/_jsx(ActivityIndicator, {
               size: "small",
@@ -1515,17 +1510,10 @@ const FileManagementScreen = ({
               color: colors.error
             })
           })]
-        }) : undefined,
-        customContentBelow: file.metadata?.description ? /*#__PURE__*/_jsx(Text, {
-          style: [fileManagementStyles.groupedDescription, {
-            color: bloomTheme.isDark ? '#AAAAAA' : '#666666'
-          }],
-          numberOfLines: 2,
-          children: file.metadata.description
         }) : undefined
       };
     });
-  }, [filteredFiles, theme, deleting, handleFileDownload, handleFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
+  }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
 
   // Scroll to selected file after selection
   useEffect(() => {
@@ -1859,7 +1847,7 @@ const FileManagementScreen = ({
       });
     };
 
-    // Skeleton file item matching GroupedSection structure
+    // Skeleton file item matching SettingsListItem structure
     const SkeletonFileItem = ({
       index
     }) => /*#__PURE__*/_jsxs(View, {
@@ -2001,14 +1989,13 @@ const FileManagementScreen = ({
         onToggleDetails: () => setShowFileDetailsInViewer(!showFileDetailsInViewer),
         onClose: handleCloseFile,
         onDownload: handleFileDownload,
-        onDelete: handleFileDelete,
+        onDelete: confirmFileDelete,
         isOwner: user?.id === targetUserId
       }), /*#__PURE__*/_jsx(FileDetailsModal, {
-        visible: showFileDetails,
+        control: fileDetailsControl,
         file: selectedFile,
-        onClose: () => setShowFileDetails(false),
         onDownload: handleFileDownload,
-        onDelete: handleFileDelete,
+        onDelete: confirmFileDelete,
         isOwner: user?.id === targetUserId
       })]
     });
@@ -2029,7 +2016,6 @@ const FileManagementScreen = ({
         elevation: "none",
         titleAlignment: "left"
       }), /*#__PURE__*/_jsx(UploadPreview, {
-        visible: true,
         pendingFiles: pendingFiles,
         onConfirm: handleConfirmUpload,
         onCancel: handleCancelUpload,
@@ -2073,28 +2059,13 @@ const FileManagementScreen = ({
         text: t('fileManagement.delete', {
           count: selectedIds.size
         }),
-        onPress: handleBulkDelete,
+        onPress: confirmBulkDelete,
         icon: 'delete'
       }, {
         key: 'visibility',
         text: t('fileManagement.visibility'),
         onPress: () => {
-          // Show visibility options menu
-          Alert.alert(t('fileManagement.changeVisibility'), t('fileManagement.changeVisibilityConfirm', {
-            count: selectedIds.size
-          }), [{
-            text: t('common.cancel'),
-            style: 'cancel'
-          }, {
-            text: t('fileManagement.private'),
-            onPress: () => handleBulkVisibilityChange('private')
-          }, {
-            text: t('fileManagement.public'),
-            onPress: () => handleBulkVisibilityChange('public')
-          }, {
-            text: t('fileManagement.unlisted'),
-            onPress: () => handleBulkVisibilityChange('unlisted')
-          }]);
+          visibilityChangePrompt.open();
         },
         icon: 'eye'
       }] : undefined,
@@ -2323,8 +2294,15 @@ const FileManagementScreen = ({
           })]
         })]
       }) : filteredFiles.length === 0 ? renderEmptyState() : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(GroupedSection, {
-          items: groupedFileItems
+        children: [/*#__PURE__*/_jsx(SettingsListGroup, {
+          children: groupedFileItems.map(item => /*#__PURE__*/_jsx(SettingsListItem, {
+            icon: item.icon,
+            title: item.title,
+            description: item.description,
+            onPress: item.onPress,
+            showChevron: false,
+            rightElement: item.rightElement
+          }, item.id))
         }), paging.loadingMore && /*#__PURE__*/_jsxs(View, {
           style: fileManagementStyles.loadingMoreBar,
           children: [/*#__PURE__*/_jsx(ActivityIndicator, {
@@ -2339,11 +2317,10 @@ const FileManagementScreen = ({
         })]
       })
     }), !selectMode && /*#__PURE__*/_jsx(FileDetailsModal, {
-      visible: showFileDetails,
+      control: fileDetailsControl,
       file: selectedFile,
-      onClose: () => setShowFileDetails(false),
       onDownload: handleFileDownload,
-      onDelete: handleFileDelete,
+      onDelete: confirmFileDelete,
       isOwner: user?.id === targetUserId
     }), !selectMode && uploading && /*#__PURE__*/_jsx(View, {
       style: [fileManagementStyles.uploadBannerContainer, {
@@ -2381,6 +2358,51 @@ const FileManagementScreen = ({
           color: colors.primary
         })]
       })
+    }), /*#__PURE__*/_jsx(Prompt.Basic, {
+      control: fileDeletePrompt,
+      title: t('fileManagement.deleteFile') || 'Delete File',
+      description: pendingDeleteFile ? t('fileManagement.confirms.deleteFile', {
+        filename: pendingDeleteFile.name
+      }) : '',
+      onConfirm: handleFileDelete,
+      confirmButtonCta: t('fileManagement.confirm') || 'Delete',
+      confirmButtonColor: "negative"
+    }), /*#__PURE__*/_jsx(Prompt.Basic, {
+      control: bulkDeletePrompt,
+      title: t('fileManagement.deleteFiles') || 'Delete Files',
+      description: t('fileManagement.confirms.deleteFiles', {
+        count: selectedIds.size
+      }),
+      onConfirm: handleBulkDelete,
+      confirmButtonCta: t('fileManagement.confirm') || 'Delete',
+      confirmButtonColor: "negative"
+    }), /*#__PURE__*/_jsxs(Prompt.Outer, {
+      control: visibilityChangePrompt,
+      children: [/*#__PURE__*/_jsxs(Prompt.Content, {
+        children: [/*#__PURE__*/_jsx(Prompt.TitleText, {
+          children: t('fileManagement.changeVisibility') || 'Change Visibility'
+        }), /*#__PURE__*/_jsx(Prompt.DescriptionText, {
+          children: t('fileManagement.changeVisibilityConfirm', {
+            count: selectedIds.size
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Prompt.Actions, {
+        children: [/*#__PURE__*/_jsx(Prompt.Action, {
+          cta: t('fileManagement.private') || 'Private',
+          onPress: () => handleBulkVisibilityChange('private'),
+          color: "primary"
+        }), /*#__PURE__*/_jsx(Prompt.Action, {
+          cta: t('fileManagement.public') || 'Public',
+          onPress: () => handleBulkVisibilityChange('public'),
+          color: "primary_subtle"
+        }), /*#__PURE__*/_jsx(Prompt.Action, {
+          cta: t('fileManagement.unlisted') || 'Unlisted',
+          onPress: () => handleBulkVisibilityChange('unlisted'),
+          color: "primary_subtle"
+        }), /*#__PURE__*/_jsx(Prompt.Cancel, {
+          cta: t('common.cancel') || 'Cancel'
+        })]
+      })]
     })]
   });
 };