sync files

mobile/app/index.tsx

@@ -10,7 +10,11 @@ import { UnifiedFileItem } from '../hooks/useUnifiedFiles';
 import { FileItem, isFolder } from '../types';
 import { SearchBar, SearchFilters } from '../components/SearchBar';
 import { FileThumbnail } from '../components/FileThumbnail';
-import { safDirectory, StoredFolder } from '../services/safDirectory';
+import { SettingsModal } from '../components/SettingsModal';
+import { SyncStatusIcon } from '../components/SyncStatusIcon';
+import { useSyncQueue } from '../hooks/useSyncQueue';
+import { useAutoSync } from '../hooks/useAutoSync';
+import { safDirectory, StoredFolder, SyncMode } from '../services/safDirectory';
 
 const NUM_COLUMNS = 3;
 const SCREEN_WIDTH = Dimensions.get('window').width;
@@ -23,6 +27,7 @@ type RootStackParamList = {
   FileDetail: { fileIds: string[]; initialIndex: number; deviceFiles?: Record<string, { localUri: string; name: string; mimeType: string; createdAt: string }> };
   FileEdit: { fileIds: string[] };
   Folder: { folderId: string; folderName: string };
+  SyncDetail: undefined;
 };
 
 type NavigationProp = NativeStackNavigationProp<RootStackParamList>;
@@ -149,7 +154,9 @@ export function HomeScreen() {
   const moveFiles = useMoveFiles();
   const { data: foldersData } = useFolders();
   const [moveModalVisible, setMoveModalVisible] = useState(false);
-  const [folderSheetVisible, setFolderSheetVisible] = useState(false);
+  const [settingsModalVisible, setSettingsModalVisible] = useState(false);
+  const { pendingCount, isSyncing } = useSyncQueue();
+  useAutoSync();
 
   useEffect(() => {
     const show = Keyboard.addListener('keyboardDidShow', () => setKeyboardOpen(true));
@@ -160,12 +167,19 @@ export function HomeScreen() {
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <TouchableOpacity onPress={() => setFolderSheetVisible(true)} style={{ marginRight: 4, padding: 8 }}>
-          <MaterialIcons name="settings" size={22} color="#666" />
-        </TouchableOpacity>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <SyncStatusIcon
+            isSyncing={isSyncing}
+            pendingCount={pendingCount}
+            onPress={() => navigation.navigate('SyncDetail')}
+          />
+          <TouchableOpacity onPress={() => setSettingsModalVisible(true)} style={{ marginRight: 4, padding: 8 }}>
+            <MaterialIcons name="settings" size={22} color="#666" />
+          </TouchableOpacity>
+        </View>
       ),
     });
-  }, [navigation]);
+  }, [navigation, pendingCount, isSyncing]);
 
   const selectionMode = selectedIds.size > 0;
 
@@ -305,10 +319,20 @@ export function HomeScreen() {
   }, [refreshFolders]);
 
   const handleAddFolder = useCallback(async () => {
-    setFolderSheetVisible(false);
+    setSettingsModalVisible(false);
     await pickDirectory();
   }, [pickDirectory]);
 
+  const handleUpdateSyncMode = useCallback((folderId: string, mode: SyncMode) => {
+    safDirectory.updateSyncMode(folderId, mode);
+    refreshFolders();
+  }, [refreshFolders]);
+
+  const handleUpdateSyncCellular = useCallback((folderId: string, enabled: boolean) => {
+    safDirectory.updateSyncCellular(folderId, enabled);
+    refreshFolders();
+  }, [refreshFolders]);
+
   const handleItemPress = useCallback((file: UnifiedFileItem) => {
     if (selectionMode) {
       toggleSelection(file.id);
@@ -584,44 +608,16 @@ export function HomeScreen() {
         </TouchableOpacity>
       </Modal>
 
-      <Modal visible={folderSheetVisible} transparent animationType="slide" onRequestClose={() => setFolderSheetVisible(false)}>
-        <TouchableOpacity style={styles.bottomSheetOverlay} activeOpacity={1} onPress={() => setFolderSheetVisible(false)}>
-          <TouchableOpacity activeOpacity={1} style={styles.bottomSheet} onPress={() => {}}>
-            <View style={styles.bottomSheetHandle} />
-            <Text style={styles.bottomSheetTitle}>Mes dossiers</Text>
-            {folders.length === 0 ? (
-              <Text style={styles.emptyFoldersText}>Aucun dossier configuré</Text>
-            ) : (
-              folders.map((folder) => (
-                <View key={folder.id} style={styles.folderRow}>
-                  <MaterialIcons name="folder" size={20} color="#F57C00" />
-                  <Text style={styles.folderRowName} numberOfLines={1}>{folder.name}</Text>
-                  <TouchableOpacity
-                    onPress={() => handleToggleFolderVisibility(folder.id)}
-                    style={styles.folderRowAction}
-                  >
-                    <MaterialIcons
-                      name={folder.visible ? 'visibility' : 'visibility-off'}
-                      size={20}
-                      color={folder.visible ? '#1976D2' : '#999'}
-                    />
-                  </TouchableOpacity>
-                  <TouchableOpacity
-                    onPress={() => handleRemoveFolder(folder.id)}
-                    style={styles.folderRowAction}
-                  >
-                    <MaterialIcons name="delete-outline" size={20} color="#E53935" />
-                  </TouchableOpacity>
-                </View>
-              ))
-            )}
-            <TouchableOpacity style={styles.addFolderBtn} onPress={handleAddFolder}>
-              <MaterialIcons name="add" size={20} color="#fff" />
-              <Text style={styles.addFolderBtnText}>Ajouter un dossier</Text>
-            </TouchableOpacity>
-          </TouchableOpacity>
-        </TouchableOpacity>
-      </Modal>
+      <SettingsModal
+        visible={settingsModalVisible}
+        onClose={() => setSettingsModalVisible(false)}
+        folders={folders}
+        onToggleVisibility={handleToggleFolderVisibility}
+        onRemoveFolder={handleRemoveFolder}
+        onAddFolder={handleAddFolder}
+        onUpdateSyncMode={handleUpdateSyncMode}
+        onUpdateSyncCellular={handleUpdateSyncCellular}
+      />
     </KeyboardAvoidingView>
   );
 }
@@ -884,69 +880,4 @@ const styles = StyleSheet.create({
     color: '#fff',
     fontWeight: '600',
   },
-  emptyFoldersText: {
-    fontSize: 14,
-    color: '#999',
-    textAlign: 'center',
-    marginBottom: 16,
-  },
-  folderRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 10,
-    gap: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-  },
-  folderRowName: {
-    flex: 1,
-    fontSize: 15,
-    color: '#333',
-  },
-  folderRowAction: {
-    padding: 6,
-  },
-  addFolderBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#F57C00',
-    borderRadius: 10,
-    paddingVertical: 12,
-    marginTop: 16,
-    gap: 8,
-  },
-  addFolderBtnText: {
-    fontSize: 15,
-    color: '#fff',
-    fontWeight: '600',
-  },
-  bottomSheetOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.4)',
-    justifyContent: 'flex-end',
-  },
-  bottomSheet: {
-    backgroundColor: '#fff',
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    paddingHorizontal: 20,
-    paddingTop: 12,
-    paddingBottom: 32,
-    maxHeight: '70%',
-  },
-  bottomSheetHandle: {
-    width: 36,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: '#ddd',
-    alignSelf: 'center',
-    marginBottom: 16,
-  },
-  bottomSheetTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: '#333',
-    marginBottom: 16,
-  },
 });