@oxyhq/services 22.8.7 → 22.10.0

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

@@ -3,11 +3,14 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, TextInput, Image, AccessibilityInfo, useWindowDimensions } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
-import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 import * as Skeleton from '@oxyhq/bloom/skeleton';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { Pressable } from 'react-native';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from "../stores/fileStore.js";
-import Header from "../components/Header.js";
+import { useSurfaceHeader } from "../hooks/useSurfaceHeader.js";
+import { SurfaceHeaderAction } from "../components/SurfaceHeaderAction.js";
 import JustifiedPhotoGrid from "../components/photogrid/JustifiedPhotoGrid.js";
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from "../context/OxyContext.js";
@@ -16,8 +19,9 @@ import { useUploadFile } from "../hooks/mutations/useAccountMutations.js";
 import { formatFileSize, getFileIcon } from "../utils/fileManagement.js";
 import { useResolvedFileUrls, fileThumbSource } from "../hooks/useResolvedFileUrls.js";
 import { FileViewer } from "../components/fileManagement/FileViewer.js";
-import { FileDetailsModal } from "../components/fileManagement/FileDetailsModal.js";
+import { presentFileDetails } from "../components/fileManagement/FileDetailsModal.js";
 import { UploadPreview } from "../components/fileManagement/UploadPreview.js";
+import { presentActionSheet } from "../components/surfaces/ActionSheetSurface.js";
 import { getErrorMessage } from "./fileManagement/shared.js";
 import { useFileUploadState } from "./fileManagement/hooks/useFileUploadState.js";
 import PhotoPickerView from "./fileManagement/PhotoPickerSection.js";
@@ -28,7 +32,21 @@ import { AnimatedButton } from "../components/fileManagement/AnimatedButton.js";
 // 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.
+// Nav-header slot layout for this screen's action row + review-mode back button.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const fmHeaderStyles = StyleSheet.create({
+  actionsRow: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  backButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
 const screenStyles = StyleSheet.create({
   viewModeButton: {
     paddingHorizontal: 10,
@@ -55,6 +73,7 @@ const FileManagementScreen = ({
   theme,
   goBack,
   navigate,
+  dismiss,
   userId,
   containerWidth,
   selectMode = false,
@@ -81,11 +100,6 @@ const FileManagementScreen = ({
     t
   } = useI18n();
   const uploadFileMutation = useUploadFile();
-  // Prompt controls
-  const fileDeleteDialog = useDialogControl();
-  const bulkDeleteDialog = useDialogControl();
-  const visibilityChangeDialog = useDialogControl();
-  const [pendingDeleteFile, setPendingDeleteFile] = useState(null);
   const files = useFiles();
   const {
     width: windowWidth
@@ -105,8 +119,6 @@ const FileManagementScreen = ({
     hasMore: true,
     loadingMore: false
   });
-  const [selectedFile, setSelectedFile] = useState(null);
-  const fileDetailsControl = useDialogControl();
   // In selectMode we never open the detailed viewer
   const [openedFile, setOpenedFile] = useState(null);
   const [fileContent, setFileContent] = useState(null);
@@ -230,11 +242,19 @@ const FileManagementScreen = ({
       }
     }
     if (!multiSelect) {
-      onSelect?.(file);
-      if (afterSelect === 'back') {
-        goBack?.();
-      } else if (afterSelect === 'close') {
-        onClose?.();
+      if (onSelect) {
+        // Legacy callback caller (inbox, WelcomeNewUser): keep the
+        // callback + afterSelect behaviour unchanged.
+        onSelect(file);
+        if (afterSelect === 'back') {
+          goBack?.();
+        } else if (afterSelect === 'close') {
+          onClose?.();
+        }
+      } else {
+        // Promise-based picker (avatar picker): resolve the surface's
+        // present() promise with the picked file.
+        dismiss?.(file);
       }
       return;
     }
@@ -254,7 +274,7 @@ const FileManagementScreen = ({
       }
       return next;
     });
-  }, [selectMode, multiSelect, onSelect, onClose, goBack, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext]);
+  }, [selectMode, multiSelect, onSelect, onClose, goBack, dismiss, disabledMimeTypes, maxSelection, afterSelect, defaultVisibility, oxyServices, linkContext]);
   const confirmMultiSelection = useCallback(async () => {
     if (!selectMode || !multiSelect) return;
     const map = {};
@@ -287,9 +307,15 @@ const FileManagementScreen = ({
 
     // Wait for all updates (but don't block on failures)
     await Promise.allSettled(updatePromises);
-    onConfirmSelection?.(chosen);
-    onClose?.();
-  }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);
+    if (onConfirmSelection) {
+      // Legacy callback caller (inbox): keep the callback + close.
+      onConfirmSelection(chosen);
+      onClose?.();
+    } else {
+      // Promise-based picker: resolve the surface with the chosen files.
+      dismiss?.(chosen);
+    }
+  }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, dismiss, defaultVisibility, oxyServices, linkContext]);
 
   // Private-safe thumbnail URLs for the currently-shown files, resolved in
   // ONE batch per page (not N per-tile) and cached by React Query. Uploads
@@ -498,18 +524,17 @@ const FileManagementScreen = ({
     }
     return rows;
   }, []);
-  const confirmFileDelete = useCallback((fileId, filename) => {
-    setPendingDeleteFile({
-      id: fileId,
-      name: filename
+  const confirmFileDelete = useCallback(async (fileId, filename) => {
+    const confirmed = await surfaces.confirm({
+      title: t('fileManagement.deleteFile') || 'Delete File',
+      message: t('fileManagement.confirms.deleteFile', {
+        filename
+      }),
+      confirmLabel: t('fileManagement.confirm') || 'Delete',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true
     });
-    fileDeleteDialog.open();
-  }, [fileDeleteDialog]);
-  const handleFileDelete = useCallback(async () => {
-    if (!pendingDeleteFile) return;
-    const {
-      id: fileId
-    } = pendingDeleteFile;
+    if (!confirmed) return;
     try {
       storeSetDeleting(fileId);
       await oxyServices.deleteFile(fileId);
@@ -533,15 +558,20 @@ const FileManagementScreen = ({
       }
     } finally {
       storeSetDeleting(null);
-      setPendingDeleteFile(null);
     }
-  }, [pendingDeleteFile, storeSetDeleting, oxyServices, loadFiles, t]);
-  const confirmBulkDelete = useCallback(() => {
-    if (selectedIds.size === 0) return;
-    bulkDeleteDialog.open();
-  }, [selectedIds.size, bulkDeleteDialog]);
-  const handleBulkDelete = useCallback(async () => {
+  }, [storeSetDeleting, oxyServices, loadFiles, t]);
+  const confirmBulkDelete = useCallback(async () => {
     if (selectedIds.size === 0) return;
+    const confirmed = await surfaces.confirm({
+      title: t('fileManagement.deleteFiles') || 'Delete Files',
+      message: t('fileManagement.confirms.deleteFiles', {
+        count: selectedIds.size
+      }),
+      confirmLabel: t('fileManagement.confirm') || 'Delete',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true
+    });
+    if (!confirmed) return;
     try {
       const deletePromises = Array.from(selectedIds).map(async fileId => {
         try {
@@ -577,7 +607,7 @@ const FileManagementScreen = ({
     } catch (error) {
       toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
     }
-  }, [selectedIds, files, oxyServices, loadFiles]);
+  }, [selectedIds, oxyServices, loadFiles, t]);
   const handleBulkVisibilityChange = useCallback(async visibility => {
     if (selectedIds.size === 0) return;
     try {
@@ -623,7 +653,28 @@ const FileManagementScreen = ({
     } catch (error) {
       toast.error(getErrorMessage(error) || t('fileManagement.toasts.visibilityError'));
     }
-  }, [selectedIds, oxyServices, files, loadFiles]);
+  }, [selectedIds, oxyServices, files, loadFiles, t]);
+  const handleVisibilityChange = useCallback(async () => {
+    if (selectedIds.size === 0) return;
+    const visibility = await presentActionSheet({
+      title: t('fileManagement.changeVisibility') || 'Change Visibility',
+      message: t('fileManagement.changeVisibilityConfirm', {
+        count: selectedIds.size
+      }),
+      options: [{
+        label: t('fileManagement.private') || 'Private',
+        value: 'private'
+      }, {
+        label: t('fileManagement.public') || 'Public',
+        value: 'public'
+      }, {
+        label: t('fileManagement.unlisted') || 'Unlisted',
+        value: 'unlisted'
+      }],
+      cancelLabel: t('common.cancel') || 'Cancel'
+    });
+    if (visibility) await handleBulkVisibilityChange(visibility);
+  }, [selectedIds.size, handleBulkVisibilityChange, t]);
 
   // Unified download function - works on all platforms
   const handleFileDownload = async (fileId, filename) => {
@@ -718,8 +769,12 @@ const FileManagementScreen = ({
     // Don't reset view mode when closing a file
   };
   const showFileDetailsModal = file => {
-    setSelectedFile(file);
-    fileDetailsControl.open();
+    presentFileDetails({
+      file,
+      onDownload: handleFileDownload,
+      onDelete: confirmFileDelete,
+      isOwner: user?.id === targetUserId
+    });
   };
   const renderJustifiedPhotoItem = useCallback((photo, width, height, isLast) => {
     const downloadUrl = thumbSourceFor(photo);
@@ -1167,6 +1222,84 @@ const FileManagementScreen = ({
   // picker's placement-aware container width / columns / tile size and the
   // Dialog-vs-bottom-sheet sizing. Skipping the browse chrome here is what keeps
   // the picker from flashing the wrong (file-manager) skeleton inside the Dialog.
+  // The Dialog owns the nav header; this screen contributes its state-dependent
+  // title/subtitle + action slots. The image-only picker mode is headerless
+  // (PhotoPickerView owns its own bar), so this config is simply ignored there.
+  const fmHeaderRight = useMemo(() => {
+    const actions = selectMode && multiSelect ? [{
+      key: 'clear',
+      label: t('fileManagement.clear'),
+      onPress: () => setSelectedIds(new Set()),
+      disabled: selectedIds.size === 0
+    }, {
+      key: 'confirm',
+      label: t('fileManagement.confirm'),
+      onPress: confirmMultiSelection,
+      disabled: selectedIds.size === 0
+    }] : !selectMode && selectedIds.size > 0 ? [{
+      key: 'clear',
+      label: t('fileManagement.clear'),
+      onPress: () => setSelectedIds(new Set()),
+      disabled: false
+    }, {
+      key: 'delete',
+      label: t('fileManagement.delete', {
+        count: selectedIds.size
+      }),
+      onPress: confirmBulkDelete,
+      disabled: false
+    }, {
+      key: 'visibility',
+      label: t('fileManagement.visibility'),
+      onPress: handleVisibilityChange,
+      disabled: false
+    }] : [];
+    if (actions.length === 0) return undefined;
+    return /*#__PURE__*/_jsx(View, {
+      style: fmHeaderStyles.actionsRow,
+      children: actions.map(a => /*#__PURE__*/_jsx(SurfaceHeaderAction, {
+        label: a.label,
+        onPress: a.onPress,
+        disabled: a.disabled
+      }, a.key))
+    });
+  }, [selectMode, multiSelect, selectedIds, t, confirmMultiSelection, confirmBulkDelete, handleVisibilityChange]);
+  const fmHeaderBack = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
+    onPress: handleCancelUpload,
+    accessibilityRole: "button",
+    accessibilityLabel: t('common.back') || 'Back',
+    hitSlop: 8,
+    style: fmHeaderStyles.backButton,
+    children: /*#__PURE__*/_jsx(Ionicons, {
+      name: "chevron-back",
+      size: 20,
+      color: colors.text
+    })
+  }), [handleCancelUpload, colors.text, t]);
+  useSurfaceHeader(showUploadPreview ? {
+    title: t('fileManagement.reviewFiles'),
+    subtitle: t('fileManagement.readyToUpload', {
+      count: pendingFiles.length
+    }),
+    left: fmHeaderBack,
+    largeTitle: false
+  } : {
+    title: selectMode ? multiSelect ? maxSelection ? t('fileManagement.selectedWithMax', {
+      count: selectedIds.size,
+      max: maxSelection
+    }) : t('fileManagement.selected', {
+      count: selectedIds.size
+    }) : t('fileManagement.selectFile') : viewMode === 'photos' ? t('fileManagement.photos') : t('fileManagement.title'),
+    subtitle: selectMode ? multiSelect ? t('fileManagement.available', {
+      count: filteredFiles.length
+    }) : t('fileManagement.tapToSelect') : filteredFiles.length === 1 ? t('fileManagement.itemCount', {
+      count: filteredFiles.length
+    }) : t('fileManagement.itemCount_plural', {
+      count: filteredFiles.length
+    }),
+    right: fmHeaderRight,
+    largeTitle: false
+  });
   if (loading && !isImageOnlyPicker) {
     const GRID_PADDING = 10;
     const TILE_GAP = 4;
@@ -1260,141 +1393,75 @@ const FileManagementScreen = ({
     const photosOnly = filteredFiles.filter(file => file.contentType.startsWith('image/'));
     const isOwner = user?.id === targetUserId;
     const allowUpload = isOwner && allowUploadInSelectMode;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(PhotoPickerView, {
-        photos: photosOnly,
-        selectedIds: selectedIds,
-        multiSelect: multiSelect,
-        maxSelection: maxSelection,
-        allowUpload: allowUpload,
-        refreshing: refreshing,
-        uploading: uploading,
-        isPickingDocument: isPickingDocument,
-        uploadProgress: uploadProgress,
-        hasMore: paging.hasMore,
-        loadingMore: paging.loadingMore,
-        loading: loading,
-        reduceMotion: reduceMotion,
-        getThumbUrl: thumbSourceFor,
-        primaryColor: colors.primary,
-        isOwner: isOwner,
-        onTogglePhoto: toggleSelect,
-        onPreviewPhoto: file => showFileDetailsModal(file),
-        onUpload: handleFileUpload,
-        onRefresh: () => loadFiles('refresh'),
-        onLoadMore: () => loadFiles('more'),
-        onCancel: () => {
+    return /*#__PURE__*/_jsx(PhotoPickerView, {
+      photos: photosOnly,
+      selectedIds: selectedIds,
+      multiSelect: multiSelect,
+      maxSelection: maxSelection,
+      allowUpload: allowUpload,
+      refreshing: refreshing,
+      uploading: uploading,
+      isPickingDocument: isPickingDocument,
+      uploadProgress: uploadProgress,
+      hasMore: paging.hasMore,
+      loadingMore: paging.loadingMore,
+      loading: loading,
+      reduceMotion: reduceMotion,
+      getThumbUrl: thumbSourceFor,
+      primaryColor: colors.primary,
+      isOwner: isOwner,
+      onTogglePhoto: toggleSelect
+      // Long-press preview surfaces the file-detail panel on the stack.
+      ,
+      onPreviewPhoto: file => showFileDetailsModal(file),
+      onUpload: handleFileUpload,
+      onRefresh: () => loadFiles('refresh'),
+      onLoadMore: () => loadFiles('more'),
+      onCancel: () => {
+        if (onSelect || onConfirmSelection) {
+          // Legacy callback caller: preserve close/back behaviour.
           if (onClose) onClose();else goBack?.();
-        },
-        onConfirm: confirmMultiSelection,
-        t: t
-      }), /*#__PURE__*/_jsx(FileDetailsModal, {
-        control: fileDetailsControl,
-        file: selectedFile,
-        onDownload: handleFileDownload,
-        onDelete: confirmFileDelete,
-        isOwner: isOwner
-      })]
+        } else {
+          // Promise picker (avatar): dismiss just this surface.
+          dismiss?.();
+        }
+      },
+      onConfirm: confirmMultiSelection,
+      t: t
     });
   }
 
   // If a file is opened, show the file viewer
   if (!selectMode && openedFile) {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(FileViewer, {
-        file: openedFile,
-        fileContent: fileContent,
-        loadingFileContent: loadingFileContent,
-        showFileDetailsInViewer: showFileDetailsInViewer,
-        onToggleDetails: () => setShowFileDetailsInViewer(!showFileDetailsInViewer),
-        onClose: handleCloseFile,
-        onDownload: handleFileDownload,
-        onDelete: confirmFileDelete,
-        isOwner: user?.id === targetUserId
-      }), /*#__PURE__*/_jsx(FileDetailsModal, {
-        control: fileDetailsControl,
-        file: selectedFile,
-        onDownload: handleFileDownload,
-        onDelete: confirmFileDelete,
-        isOwner: user?.id === targetUserId
-      })]
+    return /*#__PURE__*/_jsx(FileViewer, {
+      file: openedFile,
+      fileContent: fileContent,
+      loadingFileContent: loadingFileContent,
+      showFileDetailsInViewer: showFileDetailsInViewer,
+      onToggleDetails: () => setShowFileDetailsInViewer(!showFileDetailsInViewer),
+      onClose: handleCloseFile,
+      onDownload: handleFileDownload,
+      onDelete: confirmFileDelete,
+      isOwner: user?.id === targetUserId
     });
   }
 
   // If upload preview is showing, render it inline instead of the file list
   if (showUploadPreview) {
-    return /*#__PURE__*/_jsxs(View, {
+    return /*#__PURE__*/_jsx(View, {
       className: "flex-1",
-      children: [/*#__PURE__*/_jsx(Header, {
-        title: t('fileManagement.reviewFiles'),
-        subtitle: t('fileManagement.readyToUpload', {
-          count: pendingFiles.length
-        }),
-        onBack: handleCancelUpload,
-        showBackButton: true,
-        variant: "minimal",
-        elevation: "none",
-        titleAlignment: "left"
-      }), /*#__PURE__*/_jsx(UploadPreview, {
+      children: /*#__PURE__*/_jsx(UploadPreview, {
         pendingFiles: pendingFiles,
         onConfirm: handleConfirmUpload,
         onCancel: handleCancelUpload,
         onRemoveFile: removePendingFile,
         inline: true
-      })]
+      })
     });
   }
   return /*#__PURE__*/_jsxs(View, {
     className: "flex-1",
-    children: [/*#__PURE__*/_jsx(Header, {
-      title: selectMode ? multiSelect ? maxSelection ? t('fileManagement.selectedWithMax', {
-        count: selectedIds.size,
-        max: maxSelection
-      }) : t('fileManagement.selected', {
-        count: selectedIds.size
-      }) : t('fileManagement.selectFile') : viewMode === 'photos' ? t('fileManagement.photos') : t('fileManagement.title'),
-      subtitle: selectMode ? multiSelect ? t('fileManagement.available', {
-        count: filteredFiles.length
-      }) : t('fileManagement.tapToSelect') : filteredFiles.length === 1 ? t('fileManagement.itemCount', {
-        count: filteredFiles.length
-      }) : t('fileManagement.itemCount_plural', {
-        count: filteredFiles.length
-      }),
-      actions: selectMode && multiSelect ? [{
-        key: 'clear',
-        text: t('fileManagement.clear'),
-        onPress: () => setSelectedIds(new Set()),
-        disabled: selectedIds.size === 0
-      }, {
-        key: 'confirm',
-        text: t('fileManagement.confirm'),
-        onPress: confirmMultiSelection,
-        disabled: selectedIds.size === 0
-      }] : !selectMode && selectedIds.size > 0 ? [{
-        key: 'clear',
-        text: t('fileManagement.clear'),
-        onPress: () => setSelectedIds(new Set())
-      }, {
-        key: 'delete',
-        text: t('fileManagement.delete', {
-          count: selectedIds.size
-        }),
-        onPress: confirmBulkDelete,
-        icon: 'delete'
-      }, {
-        key: 'visibility',
-        text: t('fileManagement.visibility'),
-        onPress: () => {
-          visibilityChangeDialog.open();
-        },
-        icon: 'eye'
-      }] : undefined,
-      onBack: onClose || goBack,
-      showBackButton: true,
-      variant: "minimal",
-      elevation: "none",
-      titleAlignment: "left"
-    }), /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsxs(View, {
       className: "flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]",
       children: [/*#__PURE__*/_jsx(ScrollView, {
         horizontal: true,
@@ -1620,64 +1687,11 @@ const FileManagementScreen = ({
       onLoadMore: () => loadFiles('more'),
       onClearSearch: () => setSearchQuery(''),
       renderEmptyState: renderEmptyState
-    }), !selectMode && /*#__PURE__*/_jsx(FileDetailsModal, {
-      control: fileDetailsControl,
-      file: selectedFile,
-      onDownload: handleFileDownload,
-      onDelete: confirmFileDelete,
-      isOwner: user?.id === targetUserId
     }), !selectMode && uploading && /*#__PURE__*/_jsx(UploadBar, {
       uploadProgress: uploadProgress,
       isDark: bloomTheme.isDark,
       colors: colors,
       t: t
-    }), /*#__PURE__*/_jsx(Dialog, {
-      control: fileDeleteDialog,
-      title: t('fileManagement.deleteFile') || 'Delete File',
-      description: pendingDeleteFile ? t('fileManagement.confirms.deleteFile', {
-        filename: pendingDeleteFile.name
-      }) : '',
-      actions: [{
-        label: t('fileManagement.confirm') || 'Delete',
-        color: 'destructive',
-        onPress: handleFileDelete
-      }, {
-        label: t('common.cancel') || 'Cancel',
-        color: 'cancel'
-      }]
-    }), /*#__PURE__*/_jsx(Dialog, {
-      control: bulkDeleteDialog,
-      title: t('fileManagement.deleteFiles') || 'Delete Files',
-      description: t('fileManagement.confirms.deleteFiles', {
-        count: selectedIds.size
-      }),
-      actions: [{
-        label: t('fileManagement.confirm') || 'Delete',
-        color: 'destructive',
-        onPress: handleBulkDelete
-      }, {
-        label: t('common.cancel') || 'Cancel',
-        color: 'cancel'
-      }]
-    }), /*#__PURE__*/_jsx(Dialog, {
-      control: visibilityChangeDialog,
-      title: t('fileManagement.changeVisibility') || 'Change Visibility',
-      description: t('fileManagement.changeVisibilityConfirm', {
-        count: selectedIds.size
-      }),
-      actions: [{
-        label: t('fileManagement.private') || 'Private',
-        onPress: () => handleBulkVisibilityChange('private')
-      }, {
-        label: t('fileManagement.public') || 'Public',
-        onPress: () => handleBulkVisibilityChange('public')
-      }, {
-        label: t('fileManagement.unlisted') || 'Unlisted',
-        onPress: () => handleBulkVisibilityChange('unlisted')
-      }, {
-        label: t('common.cancel') || 'Cancel',
-        color: 'cancel'
-      }]
     })]
   });
 };