search bar filters

mobile/app/index.tsx

@@ -86,6 +86,9 @@ export function HomeScreen() {
   const [searchQuery, setSearchQuery] = useState('');
   const debouncedSearch = useDebounce(searchQuery, 250);
   const [filters, setFilters] = useState<SearchFilters>({ name: true, ocrText: true });
+  const toggleFilter = useCallback((key: keyof SearchFilters) => {
+    setFilters((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
   const [sort, setSort] = useState<SortState>({ key: 'date', direction: 'desc' });
   const listRef = useRef<FlatList<UnifiedFileItem>>(null);
   const [keyboardOpen, setKeyboardOpen] = useState(false);
@@ -99,6 +102,7 @@ export function HomeScreen() {
   const { data: foldersData } = useFolders();
   const [moveModalVisible, setMoveModalVisible] = useState(false);
   const [settingsModalVisible, setSettingsModalVisible] = useState(false);
+  const [filterModalVisible, setFilterModalVisible] = useState(false);
   const [uploadModalVisible, setUploadModalVisible] = useState(false);
   const [globalSyncMode, setGlobalSyncMode] = useState<SyncGlobalMode>(() => safDirectory.getGlobalSyncMode());
   const [globalSyncCellular, setGlobalSyncCellular] = useState(() => safDirectory.getGlobalSyncCellular());
@@ -524,7 +528,7 @@ export function HomeScreen() {
           filters={filters}
           onFiltersChange={setFilters}
           sort={sort}
-          onSortChange={setSort}
+          onSettingsPress={() => setFilterModalVisible(true)}
           bottomPadding={keyboardOpen ? insets.bottom+8 : 0}
         />
       )}
@@ -614,6 +618,34 @@ export function HomeScreen() {
         </TouchableOpacity>
       </Modal>
 
+      <Modal visible={filterModalVisible} transparent animationType="fade" onRequestClose={() => setFilterModalVisible(false)}>
+        <TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={() => setFilterModalVisible(false)}>
+          <TouchableOpacity activeOpacity={1} style={styles.modalContent} onPress={() => {}}>
+            <Text style={styles.modalTitle}>Rechercher dans</Text>
+            <TouchableOpacity
+              style={styles.folderOption}
+              onPress={() => toggleFilter('name')}
+            >
+              <MaterialIcons name="drive-file-rename-outline" size={20} color="#666" />
+              <Text style={styles.folderOptionText}>Nom</Text>
+              <View style={styles.filterCheck}>
+                {filters.name && <MaterialIcons name="check" size={18} color="#1976D2" />}
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.folderOption}
+              onPress={() => toggleFilter('ocrText')}
+            >
+              <MaterialIcons name="document-scanner" size={20} color="#666" />
+              <Text style={styles.folderOptionText}>Texte OCR</Text>
+              <View style={styles.filterCheck}>
+                {filters.ocrText && <MaterialIcons name="check" size={18} color="#1976D2" />}
+              </View>
+            </TouchableOpacity>
+          </TouchableOpacity>
+        </TouchableOpacity>
+      </Modal>
+
       <UploadModal
         visible={uploadModalVisible}
         onClose={() => setUploadModalVisible(false)}
@@ -806,6 +838,11 @@ const styles = StyleSheet.create({
   folderOptionText: {
     fontSize: 16,
     color: '#333',
+    flex: 1,
+  },
+  filterCheck: {
+    width: 24,
+    alignItems: 'flex-end',
   },
   modalOverlay: {
     flex: 1,

mobile/components/SearchBar.tsx

@@ -1,5 +1,5 @@
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
-import { View, TextInput, TouchableOpacity, Text, StyleSheet, Animated } from 'react-native';
+import { View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import type { ComponentProps } from 'react';
 
@@ -24,38 +24,12 @@ interface SearchBarProps {
   onClear: () => void;
   filters: SearchFilters;
   onFiltersChange: (f: SearchFilters) => void;
+  onSettingsPress: () => void;
   sort: SortState;
-  onSortChange: (s: SortState) => void;
   bottomPadding?: number;
 }
 
-const FILTER_OPTIONS: { key: keyof SearchFilters; label: string; icon: IconName }[] = [
+export function SearchBar({ query, onQueryChange, onClear, filters, onSettingsPress, sort, bottomPadding = 0 }: SearchBarProps) {
-  { key: 'name', label: 'Nom', icon: 'drive-file-rename-outline' },
-  { key: 'ocrText', label: 'Texte OCR', icon: 'document-scanner' },
-];
-
-export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange, sort, bottomPadding = 0 }: SearchBarProps) {
-  const animatedHeight = useRef(new Animated.Value(0)).current;
-  const [panelOpen, setPanelOpen] = React.useState(false);
-
-  useEffect(() => {
-    Animated.spring(animatedHeight, {
-      toValue: panelOpen ? 1 : 0,
-      useNativeDriver: false,
-      tension: 60,
-      friction: 8,
-    }).start();
-  }, [panelOpen]);
-
-  const panelMaxHeight = animatedHeight.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 150],
-  });
-
-  const toggleFilter = (key: keyof SearchFilters) => {
-    onFiltersChange({ ...filters, [key]: !filters[key] });
-  };
-
   const hasActiveFilter = filters.name || filters.ocrText || sort.key !== 'date';
 
   return (
@@ -81,7 +55,7 @@ export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersCha
 
         <TouchableOpacity
           style={[styles.iconBtn, hasActiveFilter && styles.iconBtnActive]}
-          onPress={() => setPanelOpen(!panelOpen)}
+          onPress={onSettingsPress}
         >
           <MaterialIcons
             name="tune"
@@ -90,26 +64,6 @@ export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersCha
           />
         </TouchableOpacity>
       </View>
-
-      <Animated.View style={[styles.filterPanel, { maxHeight: panelMaxHeight, opacity: animatedHeight }]}>
-        <Text style={styles.sectionLabel}>Rechercher dans</Text>
-        {FILTER_OPTIONS.map((opt) => (
-          <TouchableOpacity
-            key={opt.key}
-            style={[styles.filterChip, filters[opt.key] && styles.filterChipActive]}
-            onPress={() => toggleFilter(opt.key)}
-          >
-            <MaterialIcons
-              name={opt.icon}
-              size={16}
-              color={filters[opt.key] ? '#fff' : '#1976D2'}
-            />
-            <Text style={[styles.filterChipText, filters[opt.key] && styles.filterChipTextActive]}>
-              {opt.label}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </Animated.View>
     </View>
   );
 }
@@ -160,42 +114,4 @@ const styles = StyleSheet.create({
   iconBtnActive: {
     backgroundColor: '#1976D2',
   },
-  filterPanel: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingBottom: 10,
-    gap: 8,
-    overflow: 'hidden',
-  },
-  sectionLabel: {
-    width: '100%',
-    fontSize: 12,
-    fontWeight: '700',
-    color: '#666',
-    marginTop: 4,
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
-  },
-  filterChip: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: '#1976D2',
-    gap: 4,
-  },
-  filterChipActive: {
-    backgroundColor: '#1976D2',
-  },
-  filterChipText: {
-    fontSize: 12,
-    color: '#1976D2',
-  },
-  filterChipTextActive: {
-    color: '#fff',
-  },
 });