add filter bar

mobile/app/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo } from 'react';
-import { View, FlatList, StyleSheet, TouchableOpacity, Text, Dimensions, Image, ActivityIndicator } from 'react-native';
+import { View, FlatList, StyleSheet, TouchableOpacity, Text, Dimensions, Image, ActivityIndicator, KeyboardAvoidingView, Platform } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { MaterialIcons } from '@expo/vector-icons';
 import { useFiles, useFileImage } from '../hooks/useFiles';
@@ -98,6 +99,7 @@ function matchesQuery(file: FileItem, query: string, filters: SearchFilters): bo
 
 export function HomeScreen() {
   const navigation = useNavigation<NavigationProp>();
+  const insets = useSafeAreaInsets();
   const { data, isLoading, error } = useFiles();
   const [searchQuery, setSearchQuery] = useState('');
   const [filters, setFilters] = useState<SearchFilters>({ name: true, ocrText: true, tags: true });
@@ -135,11 +137,17 @@ export function HomeScreen() {
   }
 
   return (
-    <View style={styles.container}>
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={Platform.OS === 'ios' ? 96 : 0}
+    >
       <FlatList
         data={groupKeys}
         keyExtractor={(item) => item}
         contentContainerStyle={styles.list}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
         ListEmptyComponent={
           <View style={styles.empty}>
             <Text style={styles.emptyText}>
@@ -177,6 +185,7 @@ export function HomeScreen() {
         onClear={() => setSearchQuery('')}
         filters={filters}
         onFiltersChange={setFilters}
+        bottomPadding={insets.bottom+8}
       />
 
       <View style={styles.bottomNav}>
@@ -201,7 +210,7 @@ export function HomeScreen() {
           <Text style={styles.navText}>Scan</Text>
         </TouchableOpacity>
       </View>
-    </View>
+    </KeyboardAvoidingView>
   );
 }
 

mobile/components/SearchBar.tsx

@@ -17,6 +17,7 @@ interface SearchBarProps {
   onClear: () => void;
   filters: SearchFilters;
   onFiltersChange: (f: SearchFilters) => void;
+  bottomPadding?: number;
 }
 
 const FILTER_OPTIONS: { key: keyof SearchFilters; label: string; icon: IconName }[] = [
@@ -25,7 +26,7 @@ const FILTER_OPTIONS: { key: keyof SearchFilters; label: string; icon: IconName
   { key: 'tags', label: 'Tags', icon: 'label-outline' },
 ];
 
-export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange }: SearchBarProps) {
+export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange, bottomPadding = 0 }: SearchBarProps) {
   const animatedHeight = useRef(new Animated.Value(0)).current;
   const [panelOpen, setPanelOpen] = React.useState(false);
 
@@ -50,7 +51,7 @@ export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersCha
   const hasActiveFilter = filters.name || filters.ocrText || filters.tags;
 
   return (
-    <View style={styles.wrapper}>
+    <View style={[styles.wrapper, { paddingBottom: bottomPadding }]}>
       <View style={styles.inputRow}>
         <View style={styles.inputContainer}>
           <MaterialIcons name="search" size={20} color="#999" style={styles.searchIcon} />