@oxyhq/services 6.9.44 → 6.9.46

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -7,11 +7,13 @@ import {
     TextInput,
     TouchableOpacity,
     ActivityIndicator,
-    Alert,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
-import { Header, Section } from '../components';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
+import { Header } from '../components';
+import { SettingsListGroup } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
@@ -27,9 +29,19 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
     const [reason, setReason] = useState('');
     const [evidence, setEvidence] = useState('');
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [successMessage, setSuccessMessage] = useState('');
 
     const bloomTheme = useTheme();
 
+    // Prompt controls
+    const successPrompt = usePromptControl();
+
+    const handleSuccessAcknowledged = useCallback(() => {
+        setReason('');
+        setEvidence('');
+        goBack?.();
+    }, [goBack]);
+
     const handleSubmit = useCallback(async () => {
         if (!reason.trim()) {
             toast.error(t('accountVerification.reasonRequired') || 'Please provide a reason for verification');
@@ -48,20 +60,10 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                 evidence.trim() || undefined
             );
 
-            Alert.alert(
-                t('accountVerification.successTitle') || 'Request Submitted',
-                t('accountVerification.successMessage') || `Your verification request has been submitted. Request ID: ${result.requestId}`,
-                [
-                    {
-                        text: t('accountVerification.ok') || 'OK',
-                        onPress: () => {
-                            setReason('');
-                            setEvidence('');
-                            goBack?.();
-                        },
-                    },
-                ]
+            setSuccessMessage(
+                t('accountVerification.successMessage') || `Your verification request has been submitted. Request ID: ${result.requestId}`
             );
+            successPrompt.open();
         } catch (error: unknown) {
             if (__DEV__) {
                 console.error('Failed to submit verification request:', error);
@@ -72,7 +74,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
         } finally {
             setIsSubmitting(false);
         }
-    }, [reason, evidence, oxyServices, t, goBack]);
+    }, [reason, evidence, oxyServices, t, successPrompt]);
 
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
@@ -85,13 +87,13 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
             />
 
             <ScrollView style={styles.content}>
-                <Section  isFirst={true}>
+                <SettingsListGroup>
                     <Text style={styles.description} className="text-muted-foreground">
                         {t('accountVerification.description') || 'Request a verified badge for your account. Verified accounts help establish authenticity and credibility.'}
                     </Text>
-                </Section>
+                </SettingsListGroup>
 
-                <Section title={t('accountVerification.sections.request') || 'VERIFICATION REQUEST'} >
+                <SettingsListGroup title={t('accountVerification.sections.request') || 'VERIFICATION REQUEST'}>
                     <View style={styles.inputGroup}>
                         <Text style={styles.label} className="text-foreground">
                             {t('accountVerification.reasonLabel') || 'Reason for Verification *'}
@@ -133,9 +135,9 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                             editable={!isSubmitting}
                         />
                     </View>
-                </Section>
+                </SettingsListGroup>
 
-                <Section >
+                <SettingsListGroup>
                     <TouchableOpacity
                         style={styles.submitButton}
                         className={isSubmitting ? 'bg-muted-foreground' : 'bg-primary'}
@@ -150,14 +152,22 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                             </Text>
                         )}
                     </TouchableOpacity>
-                </Section>
+                </SettingsListGroup>
 
-                <Section >
+                <SettingsListGroup>
                     <Text style={styles.note} className="text-muted-foreground">
                         {t('accountVerification.note') || 'Note: Verification requests are reviewed manually and may take several days. We will notify you once your request has been reviewed.'}
                     </Text>
-                </Section>
+                </SettingsListGroup>
             </ScrollView>
+            <Prompt.Basic
+                control={successPrompt}
+                title={t('accountVerification.successTitle') || 'Request Submitted'}
+                description={successMessage}
+                onConfirm={handleSuccessAcknowledged}
+                confirmButtonCta={t('accountVerification.ok') || 'OK'}
+                showCancel={false}
+            />
         </View>
     );
 };
@@ -214,4 +224,3 @@ const styles = StyleSheet.create({
 });
 
 export default React.memo(AccountVerificationScreen);
-

package/src/ui/screens/FeedbackScreen.tsx

@@ -17,7 +17,8 @@ import { normalizeTheme } from '../utils/themeUtils';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { packageInfo } from '@oxyhq/core';
-import { GroupedSection } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 
@@ -143,40 +144,20 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
         }
     }, [feedbackData, user, isTypeStepValid, isDetailsStepValid, isContactStepValid, resetForm, setFeedbackState, t]);
 
-    const feedbackTypeItems = useMemo(() => FEEDBACK_TYPES.map(type => ({
-        id: type.id,
-        icon: type.icon,
-        iconColor: type.color,
-        title: type.label,
-        subtitle: type.description,
-        onPress: () => { updateField('type', type.id); updateField('category', ''); },
-        selected: feedbackData.type === type.id,
-        showChevron: false,
-        multiRow: true,
-        dense: true,
-    })), [feedbackData.type, updateField]);
-
-    const categoryItems = useMemo(() => (feedbackData.type ? (CATEGORIES[feedbackData.type] || []).map(cat => ({
-        id: cat,
-        icon: feedbackData.category === cat ? 'check-circle' : 'ellipse-outline',
-        iconColor: feedbackData.category === cat ? colors.primary : colors.secondaryText,
-        title: cat,
-        onPress: () => updateField('category', cat),
-        selected: feedbackData.category === cat,
-        showChevron: false,
-        dense: true,
-    })) : []), [feedbackData.type, feedbackData.category, colors.primary, colors.secondaryText, updateField]);
-
-    const priorityItems = useMemo(() => PRIORITY_LEVELS.map(p => ({
-        id: p.id,
-        icon: p.icon,
-        iconColor: p.color,
-        title: p.label,
-        onPress: () => updateField('priority', p.id),
-        selected: feedbackData.priority === p.id,
-        showChevron: false,
-        dense: true,
-    })), [feedbackData.priority, updateField]);
+    const feedbackTypeData = useMemo(() => FEEDBACK_TYPES.map(type => ({
+        ...type,
+        isSelected: feedbackData.type === type.id,
+    })), [feedbackData.type]);
+
+    const categoryData = useMemo(() => (feedbackData.type ? (CATEGORIES[feedbackData.type] || []).map(cat => ({
+        name: cat,
+        isSelected: feedbackData.category === cat,
+    })) : []), [feedbackData.type, feedbackData.category]);
+
+    const priorityData = useMemo(() => PRIORITY_LEVELS.map(p => ({
+        ...p,
+        isSelected: feedbackData.priority === p.id,
+    })), [feedbackData.priority]);
 
     const renderTypeStep = () => (
         <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
@@ -189,7 +170,18 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 </Text>
             </View>
             <View style={styles.fullBleed}>
-                <GroupedSection items={feedbackTypeItems} />
+                <SettingsListGroup>
+                    {feedbackTypeData.map(type => (
+                        <SettingsListItem
+                            key={type.id}
+                            icon={<SettingsIcon name={type.icon} color={type.color} />}
+                            title={type.label}
+                            description={type.description}
+                            onPress={() => { updateField('type', type.id); updateField('category', ''); }}
+                            showChevron={false}
+                        />
+                    ))}
+                </SettingsListGroup>
             </View>
 
             {feedbackData.type && (
@@ -198,7 +190,17 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                         {t('feedback.category.label') || 'Category'}
                     </Text>
                     <View style={styles.fullBleed}>
-                        <GroupedSection items={categoryItems} />
+                        <SettingsListGroup>
+                            {categoryData.map(cat => (
+                                <SettingsListItem
+                                    key={cat.name}
+                                    icon={<SettingsIcon name={cat.isSelected ? 'check-circle' : 'ellipse-outline'} color={cat.isSelected ? colors.primary : colors.secondaryText} />}
+                                    title={cat.name}
+                                    onPress={() => updateField('category', cat.name)}
+                                    showChevron={false}
+                                />
+                            ))}
+                        </SettingsListGroup>
                     </View>
                 </View>
             )}
@@ -274,7 +276,17 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                     {t('feedback.priority.label') || 'Priority Level'}
                 </Text>
                 <View style={styles.fullBleed}>
-                    <GroupedSection items={priorityItems} />
+                    <SettingsListGroup>
+                        {priorityData.map(p => (
+                            <SettingsListItem
+                                key={p.id}
+                                icon={<SettingsIcon name={p.icon} color={p.color} />}
+                                title={p.label}
+                                onPress={() => updateField('priority', p.id)}
+                                showChevron={false}
+                            />
+                        ))}
+                    </SettingsListGroup>
                 </View>
             </View>
 

package/src/ui/screens/FileManagementScreen.tsx

@@ -11,7 +11,6 @@ import {
     Image,
     Animated,
     Easing,
-    Alert,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import type { FileManagementScreenProps } from '../types/fileManagement';
@@ -29,6 +28,8 @@ 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';
@@ -36,13 +37,12 @@ import type { FileMetadata } from '@oxyhq/core';
 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';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { useUploadFile } from '../hooks/mutations/useAccountMutations';
 import {
-    confirmAction,
     convertDocumentPickerAssetToFile,
     formatFileSize,
     getFileIcon,
@@ -51,6 +51,7 @@ import {
 import { FileViewer } from '../components/fileManagement/FileViewer';
 import { FileDetailsModal } from '../components/fileManagement/FileDetailsModal';
 import { UploadPreview } from '../components/fileManagement/UploadPreview';
+import { useDialogControl } from '@oxyhq/bloom/dialog';
 import { fileManagementStyles } from '../components/fileManagement/styles';
 import type { OnConfirmFileSelection } from '../types/fileManagement';
 
@@ -133,6 +134,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const { user, oxyServices } = useOxy();
     const { t } = useI18n();
     const uploadFileMutation = useUploadFile();
+    // Prompt controls
+    const fileDeletePrompt = usePromptControl();
+    const bulkDeletePrompt = usePromptControl();
+    const visibilityChangePrompt = usePromptControl();
+    const [pendingDeleteFile, setPendingDeleteFile] = useState<{ id: string; name: string } | null>(null);
     const files = useFiles();
     // Ensure containerWidth is a number (TypeScript guard)
     const safeContainerWidth: number = typeof containerWidth === 'number' ? containerWidth : 400;
@@ -143,7 +149,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     const [refreshing, setRefreshing] = useState(false);
     const [paging, setPaging] = useState({ offset: 0, limit: 40, total: 0, hasMore: true, loadingMore: false });
     const [selectedFile, setSelectedFile] = useState<FileMetadata | null>(null);
-    const [showFileDetails, setShowFileDetails] = useState(false);
+    const fileDetailsControl = useDialogControl();
     // In selectMode we never open the detailed viewer
     const [openedFile, setOpenedFile] = useState<FileMetadata | null>(null);
     const [fileContent, setFileContent] = useState<string | null>(null);
@@ -889,18 +895,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         }
     };
 
-    const handleFileDelete = async (fileId: string, filename: string) => {
-        // Use platform-aware confirmation dialog
-        const confirmed = await confirmAction(
-            t('fileManagement.confirms.deleteFile', { filename }),
-            t('fileManagement.deleteFile'),
-            t('fileManagement.confirm'),
-            t('common.cancel')
-        );
+    const confirmFileDelete = useCallback((fileId: string, filename: string) => {
+        setPendingDeleteFile({ id: fileId, name: filename });
+        fileDeletePrompt.open();
+    }, [fileDeletePrompt]);
 
-        if (!confirmed) {
-            return;
-        }
+    const handleFileDelete = useCallback(async () => {
+        if (!pendingDeleteFile) return;
+        const { id: fileId } = pendingDeleteFile;
 
         try {
             storeSetDeleting(fileId);
@@ -927,24 +929,17 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             }
         } finally {
             storeSetDeleting(null);
+            setPendingDeleteFile(null);
         }
-    };
+    }, [pendingDeleteFile, storeSetDeleting, oxyServices, loadFiles, t]);
 
-    const handleBulkDelete = useCallback(async () => {
+    const confirmBulkDelete = useCallback(() => {
         if (selectedIds.size === 0) return;
+        bulkDeletePrompt.open();
+    }, [selectedIds.size, bulkDeletePrompt]);
 
-        const fileMap: Record<string, FileMetadata> = {};
-        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;
+    const handleBulkDelete = useCallback(async () => {
+        if (selectedIds.size === 0) return;
 
         try {
             const deletePromises = Array.from(selectedIds).map(async (fileId) => {
@@ -1119,7 +1114,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     const showFileDetailsModal = (file: FileMetadata) => {
         setSelectedFile(file);
-        setShowFileDetails(true);
+        fileDetailsControl.open();
     };
 
     const renderSimplePhotoItem = useCallback((photo: FileMetadata, index: number) => {
@@ -1350,9 +1345,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         {/* Always show delete button for debugging */}
                         <TouchableOpacity
                             style={[fileManagementStyles.actionButton, { backgroundColor: bloomTheme.isDark ? '#400000' : '#FFEBEE' }]}
-                            onPress={() => {
-                                handleFileDelete(file.id, file.filename);
-                            }}
+                            onPress={() => confirmFileDelete(file.id, file.filename)}
                             disabled={deleting === file.id}
                         >
                             {deleting === file.id ? (
@@ -1367,8 +1360,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         );
     };
 
-    // 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: any[] = useMemo(() => {
         // filteredFiles is already sorted, so just use it directly
         const sortedFiles = filteredFiles;
@@ -1385,11 +1378,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             const hasPreview = isImage || isPDF || isVideo;
             const isSelected = selectedIds.has(file.id);
 
-            // Create customIcon for preview thumbnails (36x36 to match GroupedItem iconContainer)
-            let customIcon: React.ReactNode | undefined;
+            // Create icon for preview thumbnails (36x36)
+            let fileIcon: React.ReactNode | undefined;
             if (hasPreview) {
                 if (isImage) {
-                    customIcon = (
+                    fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
                             <ExpoImage
                                 source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
@@ -1405,7 +1398,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </View>
                     );
                 } else if (isVideo) {
-                    customIcon = (
+                    fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden', backgroundColor: '#000000', position: 'relative' }}>
                             <ExpoImage
                                 source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
@@ -1424,7 +1417,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </View>
                     );
                 } else if (isPDF) {
-                    customIcon = (
+                    fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center', backgroundColor: '#FF6B6B20' }}>
                             <Ionicons name="document" size={20} color={colors.primary} />
                         </View>
@@ -1434,12 +1427,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             return {
                 id: file.id,
-                customIcon: customIcon,
-                icon: !hasPreview ? getFileIcon(file.contentType) : undefined,
-                iconColor: colors.primary,
+                icon: fileIcon ?? (!hasPreview ? <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 as 'light' | 'dark',
+                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) {
@@ -1449,20 +1439,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         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) ? (
+                rightElement: (!selectMode && selectedIds.size === 0) ? (
                     <View style={fileManagementStyles.groupedActions}>
                         {(isImage || isVideo || file.contentType.includes('pdf')) && (
                             <TouchableOpacity
@@ -1480,7 +1458,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </TouchableOpacity>
                         <TouchableOpacity
                             style={[fileManagementStyles.groupedActionBtn, { backgroundColor: bloomTheme.isDark ? '#400000' : '#FFEBEE' }]}
-                            onPress={() => handleFileDelete(file.id, file.filename)}
+                            onPress={() => confirmFileDelete(file.id, file.filename)}
                             disabled={deleting === file.id}
                         >
                             {deleting === file.id ? (
@@ -1491,14 +1469,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </TouchableOpacity>
                     </View>
                 ) : undefined,
-                customContentBelow: file.metadata?.description ? (
-                    <Text style={[fileManagementStyles.groupedDescription, { color: bloomTheme.isDark ? '#AAAAAA' : '#666666' }]} numberOfLines={2}>
-                        {file.metadata.description}
-                    </Text>
-                ) : 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(() => {
@@ -1843,7 +1816,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             );
         };
 
-        // Skeleton file item matching GroupedSection structure
+        // Skeleton file item matching SettingsListItem structure
         const SkeletonFileItem = ({ index }: { index: number }) => (
             <View
                 style={[
@@ -1915,7 +1888,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     ))}
                 </View>
 
-                {/* File List Skeleton - Matching GroupedSection */}
+                {/* File List Skeleton - Matching SettingsListItem */}
                 <ScrollView
                     style={fileManagementStyles.scrollView}
                     contentContainerStyle={fileManagementStyles.scrollContainer}
@@ -1952,15 +1925,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     onToggleDetails={() => setShowFileDetailsInViewer(!showFileDetailsInViewer)}
                     onClose={handleCloseFile}
                     onDownload={handleFileDownload}
-                    onDelete={handleFileDelete}
+                    onDelete={confirmFileDelete}
                     isOwner={user?.id === targetUserId}
                 />
                 <FileDetailsModal
-                    visible={showFileDetails}
+                    control={fileDetailsControl}
                     file={selectedFile}
-                    onClose={() => setShowFileDetails(false)}
                     onDownload={handleFileDownload}
-                    onDelete={handleFileDelete}
+                    onDelete={confirmFileDelete}
                     isOwner={user?.id === targetUserId}
                 />
             </>
@@ -1981,7 +1953,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     titleAlignment="left"
                 />
                 <UploadPreview
-                    visible={true}
                     pendingFiles={pendingFiles}
                     onConfirm={handleConfirmUpload}
                     onCancel={handleCancelUpload}
@@ -2019,24 +1990,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     {
                         key: 'delete',
                         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',
                     }
@@ -2259,7 +2220,19 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </View>
                     ) : filteredFiles.length === 0 ? renderEmptyState() : (
                         <>
-                            <GroupedSection items={groupedFileItems} />
+                            <SettingsListGroup>
+                                {groupedFileItems.map(item => (
+                                    <SettingsListItem
+                                        key={item.id}
+                                        icon={item.icon}
+                                        title={item.title}
+                                        description={item.description}
+                                        onPress={item.onPress}
+                                        showChevron={false}
+                                        rightElement={item.rightElement}
+                                    />
+                                ))}
+                            </SettingsListGroup>
                             {paging.loadingMore && (
                                 <View style={fileManagementStyles.loadingMoreBar}>
                                     <ActivityIndicator size="small" color={colors.primary} />
@@ -2273,11 +2246,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             {!selectMode && (
                 <FileDetailsModal
-                    visible={showFileDetails}
+                    control={fileDetailsControl}
                     file={selectedFile}
-                    onClose={() => setShowFileDetails(false)}
                     onDownload={handleFileDownload}
-                    onDelete={handleFileDelete}
+                    onDelete={confirmFileDelete}
                     isOwner={user?.id === targetUserId}
                 />
             )}
@@ -2312,6 +2284,34 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             {/* Selection bar removed; actions are now in header */}
             {/* Global loadingMore bar removed; now inline in scroll areas */}
+            <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'
+            />
+            <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'
+            />
+            <Prompt.Outer control={visibilityChangePrompt}>
+                <Prompt.Content>
+                    <Prompt.TitleText>{t('fileManagement.changeVisibility') || 'Change Visibility'}</Prompt.TitleText>
+                    <Prompt.DescriptionText>{t('fileManagement.changeVisibilityConfirm', { count: selectedIds.size })}</Prompt.DescriptionText>
+                </Prompt.Content>
+                <Prompt.Actions>
+                    <Prompt.Action cta={t('fileManagement.private') || 'Private'} onPress={() => handleBulkVisibilityChange('private')} color='primary' />
+                    <Prompt.Action cta={t('fileManagement.public') || 'Public'} onPress={() => handleBulkVisibilityChange('public')} color='primary_subtle' />
+                    <Prompt.Action cta={t('fileManagement.unlisted') || 'Unlisted'} onPress={() => handleBulkVisibilityChange('unlisted')} color='primary_subtle' />
+                    <Prompt.Cancel cta={t('common.cancel') || 'Cancel'} />
+                </Prompt.Actions>
+            </Prompt.Outer>
         </View>
     );
 };