delete fikes

mobile/components/ConfirmModal.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Modal } from 'react-native';
+
+export interface ConfirmOption {
+  label: string;
+  onPress?: () => void;
+  destructive?: boolean;
+}
+
+interface ConfirmModalProps {
+  visible: boolean;
+  title: string;
+  message?: string;
+  options: ConfirmOption[];
+  onClose: () => void;
+}
+
+export function ConfirmModal({ visible, title, message, options, onClose }: ConfirmModalProps) {
+  const stacked = options.length > 2;
+
+  return (
+    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+      <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={onClose}>
+        <TouchableOpacity activeOpacity={1} style={styles.container} onPress={() => {}}>
+          <View style={styles.handle} />
+          <Text style={styles.title}>{title}</Text>
+          {message ? <Text style={styles.message}>{message}</Text> : null}
+          <View style={[styles.optionsContainer, stacked && styles.optionsStacked]}>
+            {options.map((opt, i) => (
+              <TouchableOpacity
+                key={i}
+                style={[
+                  stacked ? styles.stackedBtn : styles.sideBtn,
+                  opt.destructive && (stacked ? styles.stackedDestructive : styles.sideDestructive),
+                  !opt.destructive && !stacked && styles.sideBtnSecondary,
+                  !opt.destructive && stacked && styles.stackedSecondary,
+                  i < options.length - 1 && stacked && styles.stackedBtnBorder,
+                ]}
+                onPress={() => {
+                  onClose();
+                  opt.onPress?.();
+                }}
+              >
+                <Text
+                  style={[
+                    stacked ? styles.stackedBtnText : styles.sideBtnText,
+                    opt.destructive && (stacked ? styles.stackedDestructiveText : styles.sideDestructiveText),
+                    !opt.destructive && !stacked && styles.sideBtnSecondaryText,
+                    !opt.destructive && stacked && styles.stackedSecondaryText,
+                  ]}
+                >
+                  {opt.label}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </TouchableOpacity>
+      </TouchableOpacity>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 20,
+    width: '85%',
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#ddd',
+    alignSelf: 'center',
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#333',
+    marginBottom: 8,
+  },
+  message: {
+    fontSize: 14,
+    color: '#666',
+    lineHeight: 20,
+    marginBottom: 20,
+  },
+  optionsContainer: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+  optionsStacked: {
+    flexDirection: 'column',
+    gap: 0,
+  },
+  sideBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    alignItems: 'center',
+  },
+  sideDestructive: {
+    backgroundColor: '#E53935',
+  },
+  sideBtnSecondary: {
+    backgroundColor: '#f5f5f5',
+  },
+  sideBtnText: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  sideDestructiveText: {
+    color: '#fff',
+  },
+  sideBtnSecondaryText: {
+    color: '#666',
+  },
+  stackedBtn: {
+    paddingVertical: 14,
+    alignItems: 'center',
+  },
+  stackedBtnBorder: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  stackedDestructive: {},
+  stackedSecondary: {},
+  stackedBtnText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  stackedDestructiveText: {
+    color: '#E53935',
+  },
+  stackedSecondaryText: {
+    color: '#333',
+  },
+});

mobile/components/SettingsModal.tsx

@@ -6,10 +6,10 @@ import {
   TouchableOpacity,
   Modal,
   ScrollView,
-  Alert,
 } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import { StoredFolder, SyncMode, SyncGlobalMode, type FolderSource } from '../services/safDirectory';
+import { ConfirmModal } from './ConfirmModal';
 
 type SettingsView = 'menu' | 'folders' | 'sync';
 
@@ -57,6 +57,7 @@ export function SettingsModal({
   onSetGlobalSyncCellular,
 }: SettingsModalProps) {
   const [view, setView] = useState<SettingsView>('menu');
+  const [confirmRemoveFolder, setConfirmRemoveFolder] = useState<StoredFolder | null>(null);
 
   const handleClose = useCallback(() => {
     setView('menu');
@@ -65,22 +66,18 @@ export function SettingsModal({
 
   const handleRemoveFolder = useCallback(
     (folder: StoredFolder) => {
-      Alert.alert(
-        'Supprimer le dossier',
-        'Le dossier sera retiré de la liste. Les fichiers resteront sur votre appareil.',
-        [
-          { text: 'Annuler', style: 'cancel' },
-          {
-            text: 'Supprimer',
-            style: 'destructive',
-            onPress: () => onRemoveFolder(folder.id),
-          },
-        ]
-      );
+      setConfirmRemoveFolder(folder);
     },
-    [onRemoveFolder]
+    []
   );
 
+  const handleRemoveFolderConfirm = useCallback(() => {
+    if (confirmRemoveFolder) {
+      onRemoveFolder(confirmRemoveFolder.id);
+    }
+    setConfirmRemoveFolder(null);
+  }, [confirmRemoveFolder, onRemoveFolder]);
+
   return (
     <Modal
       visible={visible}
@@ -128,6 +125,17 @@ export function SettingsModal({
           )}
         </TouchableOpacity>
       </TouchableOpacity>
+
+      <ConfirmModal
+        visible={confirmRemoveFolder !== null}
+        title="Supprimer le dossier"
+        message="Le dossier sera retiré de la liste. Les fichiers resteront sur votre appareil."
+        options={[
+          { label: 'Annuler' },
+          { label: 'Supprimer', destructive: true, onPress: handleRemoveFolderConfirm },
+        ]}
+        onClose={() => setConfirmRemoveFolder(null)}
+      />
     </Modal>
   );
 }