@oxyhq/services 6.9.44 → 6.9.45

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -7,7 +7,6 @@ import {
     StyleSheet,
     ActivityIndicator,
     ScrollView,
-    Alert,
     Platform,
     Image,
     Dimensions,
@@ -17,7 +16,8 @@ import type { ClientSession } from '@oxyhq/core';
 import { fontFamilies } from '../styles/fonts';
 import type { User } from '@oxyhq/core';
 import { toast } from '../../lib/sonner';
-import { confirmAction } from '../utils/confirmAction';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import OxyIcon from '../components/icon/OxyIcon';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../components/Avatar';
@@ -77,6 +77,16 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     const [remotingLogoutSessionId, setRemoteLogoutSessionId] = useState<string | null>(null);
     const [loggingOutAllDevices, setLoggingOutAllDevices] = useState(false);
 
+    // Pending state for prompts
+    const [pendingRemoveSession, setPendingRemoveSession] = useState<{ sessionId: string; displayName: string } | null>(null);
+    const [pendingRemoteLogout, setPendingRemoteLogout] = useState<{ sessionId: string; deviceName: string } | null>(null);
+
+    // Prompt controls
+    const removeSessionPrompt = usePromptControl();
+    const logoutAllPrompt = usePromptControl();
+    const remoteLogoutPrompt = usePromptControl();
+    const logoutAllDevicesPrompt = usePromptControl();
+
     const screenWidth = Dimensions.get('window').width;
     const { t } = useI18n();
 
@@ -171,47 +181,48 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         }
     }, [activeSessionId, switchSession, onClose, t, switchingToUserId]);
 
-    const handleRemoveSession = useCallback(async (sessionId: string, displayName: string) => {
-        if (removingUserId) return; // Already removing
-
-        confirmAction(
-            t('accountSwitcher.confirms.remove', { displayName }) || `Are you sure you want to remove ${displayName} from this device? You'll need to sign in again to access this account.`,
-            async () => {
-                setRemovingUserId(sessionId);
-                try {
-                    await removeSession(sessionId);
-                    toast.success(t('accountSwitcher.toasts.removeSuccess') || 'Account removed successfully!');
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Remove session failed:', error);
-                    }
-                    toast.error(t('accountSwitcher.toasts.removeFailed') || 'There was a problem removing the account. Please try again.');
-                } finally {
-                    setRemovingUserId(null);
-                }
+    const confirmRemoveSession = useCallback((sessionId: string, displayName: string) => {
+        if (removingUserId) return;
+        setPendingRemoveSession({ sessionId, displayName });
+        removeSessionPrompt.open();
+    }, [removingUserId, removeSessionPrompt]);
+
+    const handleRemoveSession = useCallback(async () => {
+        if (!pendingRemoveSession) return;
+        const { sessionId } = pendingRemoveSession;
+        setRemovingUserId(sessionId);
+        try {
+            await removeSession(sessionId);
+            toast.success(t('accountSwitcher.toasts.removeSuccess') || 'Account removed successfully!');
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Remove session failed:', error);
             }
-        );
-    }, [removeSession, t, removingUserId]);
-
-    const handleLogoutAll = useCallback(() => {
-        confirmAction(
-            t('accountSwitcher.confirms.logoutAll') || 'Are you sure you want to sign out of all accounts? This will remove all saved accounts from this device.',
-            async () => {
-                try {
-                    await logoutAll();
-                    toast.success(t('accountSwitcher.toasts.signOutAllSuccess') || 'All accounts signed out successfully!');
-                    if (onClose) {
-                        onClose();
-                    }
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Logout all failed:', error);
-                    }
-                    const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-                    toast.error(t('accountSwitcher.toasts.signOutAllFailed', { error: errorMessage }) || `There was a problem signing out: ${errorMessage}`);
-                }
+            toast.error(t('accountSwitcher.toasts.removeFailed') || 'There was a problem removing the account. Please try again.');
+        } finally {
+            setRemovingUserId(null);
+            setPendingRemoveSession(null);
+        }
+    }, [pendingRemoveSession, removeSession, t]);
+
+    const confirmLogoutAll = useCallback(() => {
+        logoutAllPrompt.open();
+    }, [logoutAllPrompt]);
+
+    const handleLogoutAll = useCallback(async () => {
+        try {
+            await logoutAll();
+            toast.success(t('accountSwitcher.toasts.signOutAllSuccess') || 'All accounts signed out successfully!');
+            if (onClose) {
+                onClose();
             }
-        );
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Logout all failed:', error);
+            }
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+            toast.error(t('accountSwitcher.toasts.signOutAllFailed', { error: errorMessage }) || `There was a problem signing out: ${errorMessage}`);
+        }
     }, [logoutAll, onClose, t]);
 
     const handleSwitchToManagedAccount = useCallback(async (accountId: string) => {
@@ -257,30 +268,32 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         }
     }, [oxyServices, activeSessionId, t]);
 
-    const handleRemoteSessionLogout = useCallback((sessionId: string, deviceName: string) => {
-        if (remotingLogoutSessionId) return; // Already processing
-
-        confirmAction(
-            t('accountSwitcher.confirms.remoteLogout', { deviceName }) || `Are you sure you want to sign out from "${deviceName}"? This will end the session on that device.`,
-            async () => {
-                setRemoteLogoutSessionId(sessionId);
-                try {
-                    await oxyServices?.logoutSession((activeSessionId ?? null) || '', sessionId);
-                    await loadAllDeviceSessions();
-                    toast.success(t('accountSwitcher.toasts.remoteSignOutSuccess', { deviceName }) || `Signed out from ${deviceName} successfully!`);
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Remote logout failed:', error);
-                    }
-                    toast.error(t('accountSwitcher.toasts.remoteSignOutFailed') || 'There was a problem signing out from the device. Please try again.');
-                } finally {
-                    setRemoteLogoutSessionId(null);
-                }
+    const confirmRemoteSessionLogout = useCallback((sessionId: string, deviceName: string) => {
+        if (remotingLogoutSessionId) return;
+        setPendingRemoteLogout({ sessionId, deviceName });
+        remoteLogoutPrompt.open();
+    }, [remotingLogoutSessionId, remoteLogoutPrompt]);
+
+    const handleRemoteSessionLogout = useCallback(async () => {
+        if (!pendingRemoteLogout) return;
+        const { sessionId } = pendingRemoteLogout;
+        setRemoteLogoutSessionId(sessionId);
+        try {
+            await oxyServices?.logoutSession((activeSessionId ?? null) || '', sessionId);
+            await loadAllDeviceSessions();
+            toast.success(t('accountSwitcher.toasts.remoteSignOutSuccess', { deviceName: pendingRemoteLogout.deviceName }) || `Signed out from ${pendingRemoteLogout.deviceName} successfully!`);
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Remote logout failed:', error);
             }
-        );
-    }, [activeSessionId, oxyServices, loadAllDeviceSessions, t, remotingLogoutSessionId]);
+            toast.error(t('accountSwitcher.toasts.remoteSignOutFailed') || 'There was a problem signing out from the device. Please try again.');
+        } finally {
+            setRemoteLogoutSessionId(null);
+            setPendingRemoteLogout(null);
+        }
+    }, [pendingRemoteLogout, activeSessionId, oxyServices, loadAllDeviceSessions, t]);
 
-    const handleLogoutAllDevices = useCallback(() => {
+    const confirmLogoutAllDevices = useCallback(() => {
         const otherDevicesCount = deviceSessions.filter(session => !session.isCurrent).length;
 
         if (otherDevicesCount === 0) {
@@ -288,27 +301,25 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
             return;
         }
 
-        if (loggingOutAllDevices) return; // Already processing
-
-        confirmAction(
-            t('accountSwitcher.confirms.logoutOthers', { count: otherDevicesCount }) || `Are you sure you want to sign out from all ${otherDevicesCount} other device(s)? This will end sessions on all other devices except this one.`,
-            async () => {
-                setLoggingOutAllDevices(true);
-                try {
-                    await oxyServices?.logoutAllDeviceSessions((activeSessionId ?? null) || '');
-                    await loadAllDeviceSessions();
-                    toast.success(t('accountSwitcher.toasts.signOutOthersSuccess') || 'Signed out from all other devices successfully!');
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Logout all devices failed:', error);
-                    }
-                    toast.error(t('accountSwitcher.toasts.signOutOthersFailed') || 'There was a problem signing out from other devices. Please try again.');
-                } finally {
-                    setLoggingOutAllDevices(false);
-                }
+        if (loggingOutAllDevices) return;
+        logoutAllDevicesPrompt.open();
+    }, [deviceSessions, loggingOutAllDevices, logoutAllDevicesPrompt, t]);
+
+    const handleLogoutAllDevices = useCallback(async () => {
+        setLoggingOutAllDevices(true);
+        try {
+            await oxyServices?.logoutAllDeviceSessions((activeSessionId ?? null) || '');
+            await loadAllDeviceSessions();
+            toast.success(t('accountSwitcher.toasts.signOutOthersSuccess') || 'Signed out from all other devices successfully!');
+        } catch (error) {
+            if (__DEV__) {
+                console.error('Logout all devices failed:', error);
             }
-        );
-    }, [deviceSessions, activeSessionId, oxyServices, loadAllDeviceSessions, t, loggingOutAllDevices]);
+            toast.error(t('accountSwitcher.toasts.signOutOthersFailed') || 'There was a problem signing out from other devices. Please try again.');
+        } finally {
+            setLoggingOutAllDevices(false);
+        }
+    }, [activeSessionId, oxyServices, loadAllDeviceSessions, t]);
 
     // Memoize filtered sessions for performance
     const otherSessions = useMemo(
@@ -316,6 +327,11 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         [sessionsWithUsers, activeSessionId]
     );
 
+    const otherDevicesCount = useMemo(
+        () => deviceSessions.filter(session => !session.isCurrent).length,
+        [deviceSessions]
+    );
+
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             {/* Header */}
@@ -440,7 +456,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                 </TouchableOpacity>
                                                 <TouchableOpacity
                                                     style={styles.removeButton}
-                                                    onPress={() => handleRemoveSession(sessionWithUser.sessionId, displayName)}
+                                                    onPress={() => confirmRemoveSession(sessionWithUser.sessionId, displayName)}
                                                     disabled={isSwitching || isRemoving}
                                                 >
                                                     {isRemoving ? (
@@ -629,7 +645,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                         iconColor: '#FF3B30',
                                         title: 'Sign Out All Accounts',
                                         subtitle: 'Remove all accounts from this device',
-                                        onPress: handleLogoutAll,
+                                        onPress: confirmLogoutAll,
                                         disabled: sessionsWithUsers.length === 0,
                                     },
                                 ]}
@@ -681,12 +697,12 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                             iconColor: session.isCurrent ? '#34C759' : '#8E8E93',
                                             title: `${session.deviceName} ${session.isCurrent ? `(${t('accountSwitcher.device.thisDevice') || 'This device'})` : ''}`,
                                             subtitle: t('accountSwitcher.device.lastActive', { date: new Date(session.lastActive).toLocaleDateString() }) || `Last active: ${new Date(session.lastActive).toLocaleDateString()}`,
-                                            onPress: session.isCurrent ? undefined : () => handleRemoteSessionLogout(session.sessionId, session.deviceName),
+                                            onPress: session.isCurrent ? undefined : () => confirmRemoteSessionLogout(session.sessionId, session.deviceName),
                                             disabled: session.isCurrent || remotingLogoutSessionId === session.sessionId,
                                             customContent: !session.isCurrent ? (
                                                 <TouchableOpacity
                                                     style={styles.removeButton}
-                                                    onPress={() => handleRemoteSessionLogout(session.sessionId, session.deviceName)}
+                                                    onPress={() => confirmRemoteSessionLogout(session.sessionId, session.deviceName)}
                                                     disabled={remotingLogoutSessionId === session.sessionId}
                                                 >
                                                     {remotingLogoutSessionId === session.sessionId ? (
@@ -739,6 +755,38 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                     </>
                 )}
             </ScrollView>
+            <Prompt.Basic
+                control={removeSessionPrompt}
+                title={t('accountSwitcher.confirms.removeTitle') || 'Remove Account'}
+                description={pendingRemoveSession ? (t('accountSwitcher.confirms.remove', { displayName: pendingRemoveSession.displayName }) || `Are you sure you want to remove ${pendingRemoveSession.displayName} from this device? You'll need to sign in again to access this account.`) : ''}
+                onConfirm={handleRemoveSession}
+                confirmButtonCta={t('common.remove') || 'Remove'}
+                confirmButtonColor='negative'
+            />
+            <Prompt.Basic
+                control={logoutAllPrompt}
+                title={t('accountSwitcher.confirms.logoutAllTitle') || 'Sign Out All'}
+                description={t('accountSwitcher.confirms.logoutAll') || 'Are you sure you want to sign out of all accounts? This will remove all saved accounts from this device.'}
+                onConfirm={handleLogoutAll}
+                confirmButtonCta={t('common.signOutAll') || 'Sign Out All'}
+                confirmButtonColor='negative'
+            />
+            <Prompt.Basic
+                control={remoteLogoutPrompt}
+                title={t('accountSwitcher.confirms.remoteLogoutTitle') || 'Remote Sign Out'}
+                description={pendingRemoteLogout ? (t('accountSwitcher.confirms.remoteLogout', { deviceName: pendingRemoteLogout.deviceName }) || `Are you sure you want to sign out from "${pendingRemoteLogout.deviceName}"? This will end the session on that device.`) : ''}
+                onConfirm={handleRemoteSessionLogout}
+                confirmButtonCta={t('common.signOut') || 'Sign Out'}
+                confirmButtonColor='negative'
+            />
+            <Prompt.Basic
+                control={logoutAllDevicesPrompt}
+                title={t('accountSwitcher.confirms.logoutOthersTitle') || 'Sign Out Other Devices'}
+                description={t('accountSwitcher.confirms.logoutOthers', { count: otherDevicesCount }) || `Are you sure you want to sign out from all ${otherDevicesCount} other device(s)? This will end sessions on all other devices except this one.`}
+                onConfirm={handleLogoutAllDevices}
+                confirmButtonCta={t('common.signOutAll') || 'Sign Out All'}
+                confirmButtonColor='negative'
+            />
         </View>
     );
 };

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -7,10 +7,11 @@ import {
     TextInput,
     TouchableOpacity,
     ActivityIndicator,
-    Alert,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 import { Header, Section } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -27,9 +28,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 +59,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 +73,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 }]}>
@@ -158,6 +159,14 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                     </Text>
                 </Section>
             </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 +223,3 @@ const styles = StyleSheet.create({
 });
 
 export default React.memo(AccountVerificationScreen);
-

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';
@@ -42,7 +43,6 @@ 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 ? (
@@ -1480,7 +1473,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 ? (
@@ -1498,7 +1491,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 ) : 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(() => {
@@ -1952,15 +1945,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 +1973,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     titleAlignment="left"
                 />
                 <UploadPreview
-                    visible={true}
                     pendingFiles={pendingFiles}
                     onConfirm={handleConfirmUpload}
                     onCancel={handleCancelUpload}
@@ -2019,24 +2010,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',
                     }
@@ -2273,11 +2254,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 +2292,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>
     );
 };