7c8695cacf
- Update package.json to Expo ~54.0.35, expo-router ~6.0.24, RN 0.81.5 - Remove NativeWind/Tailwind dependencies - Fix babel.config.js: presets babel-preset-expo only - Rewrite all screens with StyleSheet.create (no className) - Add lucide-react-native + react-native-svg - Export design tokens C from _layout.tsx for shared usage - Install node_modules (702 packages) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
100 lines
3.8 KiB
TypeScript
100 lines
3.8 KiB
TypeScript
import { useState } from 'react'
|
|
import {
|
|
View, Text, TextInput, FlatList,
|
|
TouchableOpacity, ActivityIndicator, StyleSheet,
|
|
} from 'react-native'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { Search as SearchIcon, X } from 'lucide-react-native'
|
|
import { useRouter } from 'expo-router'
|
|
import { apiFetch } from '@/lib/api'
|
|
import { ENDPOINTS } from '@/lib/config'
|
|
import { C } from '../_layout'
|
|
|
|
interface SearchResult {
|
|
id: string
|
|
title: string
|
|
snippet: string
|
|
notebookName?: string
|
|
score?: number
|
|
}
|
|
|
|
export default function SearchScreen() {
|
|
const [query, setQuery] = useState('')
|
|
const [results, setResults] = useState<SearchResult[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [searched, setSearched] = useState(false)
|
|
const router = useRouter()
|
|
|
|
const handleSearch = async () => {
|
|
if (!query.trim()) return
|
|
setLoading(true)
|
|
setSearched(true)
|
|
try {
|
|
const res = await apiFetch(`${ENDPOINTS.search}?q=${encodeURIComponent(query)}`)
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setResults(data.results ?? [])
|
|
}
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={s.safe}>
|
|
<View style={s.top}>
|
|
<Text style={s.title}>Recherche</Text>
|
|
<View style={s.inputRow}>
|
|
<SearchIcon size={16} color={C.concrete} />
|
|
<TextInput
|
|
value={query} onChangeText={setQuery}
|
|
placeholder="Chercher dans vos notes…"
|
|
style={s.input} placeholderTextColor={C.concrete}
|
|
returnKeyType="search" onSubmitEditing={handleSearch}
|
|
/>
|
|
{query.length > 0 && (
|
|
<TouchableOpacity onPress={() => { setQuery(''); setResults([]); setSearched(false) }}>
|
|
<X size={14} color={C.concrete} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
</View>
|
|
|
|
{loading
|
|
? <View style={s.center}><ActivityIndicator color={C.brand} /></View>
|
|
: <FlatList
|
|
data={results}
|
|
keyExtractor={(item) => item.id}
|
|
contentContainerStyle={s.list}
|
|
renderItem={({ item }) => (
|
|
<TouchableOpacity onPress={() => router.push(`/note/${item.id}`)} style={s.card}>
|
|
<Text style={s.cardTitle} numberOfLines={1}>{item.title || 'Sans titre'}</Text>
|
|
{item.snippet && <Text style={s.snippet} numberOfLines={2}>{item.snippet}</Text>}
|
|
{item.notebookName && <Text style={s.nb}>{item.notebookName}</Text>}
|
|
</TouchableOpacity>
|
|
)}
|
|
ListEmptyComponent={
|
|
<Text style={s.empty}>
|
|
{searched ? `Aucun résultat pour "${query}"` : 'Tapez votre recherche puis appuyez sur Entrée'}
|
|
</Text>
|
|
}
|
|
/>}
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
safe: { flex: 1, backgroundColor: C.paper },
|
|
top: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
|
|
title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink, marginBottom: 16 },
|
|
inputRow: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 12, paddingHorizontal: 12, paddingVertical: 10, gap: 8 },
|
|
input: { flex: 1, fontSize: 15, color: C.ink },
|
|
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
|
list: { paddingHorizontal: 20, paddingTop: 12, paddingBottom: 32 },
|
|
card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
|
|
cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
|
|
snippet: { fontSize: 12, color: C.concrete, marginTop: 4 },
|
|
nb: { fontSize: 11, color: C.concrete, marginTop: 4, opacity: 0.7 },
|
|
empty: { textAlign: 'center', color: C.concrete, marginTop: 48, fontSize: 13 },
|
|
})
|