@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/select-street-modal/SelectStreetModal.tsx

@@ -1,475 +1,475 @@
-import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
-import {
-    ActivityIndicator,
-    FlatList,
-    KeyboardAvoidingView,
-    Modal,
-    Platform,
-    Pressable,
-    StyleSheet,
-    Text,
-    TextInput,
-    View,
-} from "react-native";
-import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
-import { Check, MapPin, Search, X } from "lucide-react-native";
-import type { CalendarPdfSector, StreetSectorMatch } from "@wasto/sdk";
-import { useLocal } from "../../contexts/LocalContext";
-import { useTheme } from "../../contexts/ThemeContext";
-import { useWasto } from "../../contexts/WastoContext";
-import { useWastoClient } from "../../hooks/useWastoClient";
-import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
-import { resolveTheme } from "../../helpers/themeStyles";
-import { hapticLight, hapticSelection } from "../../helpers/haptics";
-import { Button } from "../button/Button";
-
-type Step = "search" | "pickSector" | "confirm";
-
-type PendingSelection = {
-    street: StreetSectorMatch;
-    sector: CalendarPdfSector;
-};
-
-export default function SelectStreetModal(): ReactNode {
-    const { hasPlaceSelected, registerDevice, isLoading } = useLocal();
-    const { cityGroupId } = useWasto();
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const client = useWastoClient();
-    const insets = useSafeAreaPadding(["top", "bottom"]);
-    const inputRef = useRef<TextInput>(null);
-
-    const [query, setQuery] = useState("");
-    const [results, setResults] = useState<StreetSectorMatch[]>([]);
-    const [searching, setSearching] = useState(false);
-    const [selectedStreet, setSelectedStreet] = useState<StreetSectorMatch | null>(null);
-    const [pending, setPending] = useState<PendingSelection | null>(null);
-    const [step, setStep] = useState<Step>("search");
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-        if (hasPlaceSelected) return;
-        const timer = setTimeout(() => inputRef.current?.focus(), 350);
-        return () => clearTimeout(timer);
-    }, [hasPlaceSelected, step]);
-
-    useEffect(() => {
-        if (hasPlaceSelected) return;
-        const trimmed = query.trim();
-        if (trimmed.length < 2 || !cityGroupId) {
-            setResults([]);
-            setSearching(false);
-            return;
-        }
-
-        setSearching(true);
-        const handle = setTimeout(async () => {
-            try {
-                setError(null);
-                const res = await client.public.cityGroups.searchStreetSectors(cityGroupId, {
-                    q: trimmed,
-                });
-                setResults(res.data ?? []);
-            } catch (err) {
-                setError(
-                    err instanceof Error ? err.message : "Impossible de rechercher cette rue",
-                );
-                setResults([]);
-            } finally {
-                setSearching(false);
-            }
-        }, 300);
-
-        return () => clearTimeout(handle);
-    }, [cityGroupId, client.public.cityGroups, hasPlaceSelected, query]);
-
-    const resetToSearch = useCallback(() => {
-        setStep("search");
-        setSelectedStreet(null);
-        setPending(null);
-        setTimeout(() => inputRef.current?.focus(), 100);
-    }, []);
-
-    const onSelectStreet = async (street: StreetSectorMatch) => {
-        await hapticSelection();
-        setSelectedStreet(street);
-        setError(null);
-        if ((street.sectors ?? []).length === 0) {
-            setError("Aucun secteur de collecte trouvé pour cette rue.");
-        }
-    };
-
-    const onContinueFromList = async () => {
-        if (!selectedStreet) return;
-        const withSectors = (selectedStreet.sectors ?? []).filter(Boolean);
-        if (withSectors.length === 0) {
-            setError("Aucun secteur de collecte trouvé pour cette rue.");
-            return;
-        }
-        await hapticLight();
-        if (withSectors.length === 1) {
-            setPending({ street: selectedStreet, sector: withSectors[0]! });
-            setStep("confirm");
-            return;
-        }
-        setStep("pickSector");
-    };
-
-    const onSelectSector = async (sector: CalendarPdfSector) => {
-        if (!selectedStreet) return;
-        await hapticSelection();
-        setPending({ street: selectedStreet, sector });
-        setStep("confirm");
-    };
-
-    const onConfirm = async () => {
-        if (!pending) return;
-        await hapticLight();
-        await registerDevice(
-            pending.sector.cityId || pending.street.cityId,
-            pending.sector.id,
-            {
-                cityName: pending.sector.cityName || pending.street.cityName,
-                streetName: pending.street.streetName,
-                sectorName: pending.sector.name,
-            },
-        );
-    };
-
-    const showEmptyHint = query.trim().length < 2 && step === "search";
-    const showResults = step === "search" && query.trim().length >= 2;
-
-    return (
-        <Modal visible={!hasPlaceSelected} animationType="fade">
-            <KeyboardAvoidingView
-                style={[styles.root, { backgroundColor: theme.colors.background }, insets]}
-                behavior={Platform.OS === "ios" ? "padding" : undefined}
-            >
-                {step === "confirm" && pending ? (
-                    <Animated.View entering={FadeIn.duration(220)} exiting={FadeOut.duration(160)} style={styles.confirmWrap}>
-                        <View style={styles.confirmCenter}>
-                            <Text style={[styles.confirmLabel, { color: theme.colors.onBackground }]}>
-                                Votre zone est :
-                            </Text>
-                            <Text style={[styles.confirmZone, { color: theme.colors.onBackground }]}>
-                                “{pending.sector.name}” à {pending.sector.cityName || pending.street.cityName}
-                            </Text>
-                        </View>
-                        <View style={styles.confirmActions}>
-                            <Button
-                                onPress={onConfirm}
-                                loading={isLoading}
-                                style={[styles.confirmPrimaryBtn, { borderRadius: t.radii.lg }]}
-                            >
-                                Continuer
-                            </Button>
-                            <Pressable onPress={resetToSearch} hitSlop={8}>
-                                <Text style={[styles.link, { color: theme.colors.primary }]}>
-                                    Choisir une autre rue
-                                </Text>
-                            </Pressable>
-                        </View>
-                    </Animated.View>
-                ) : (
-                    <Animated.View entering={FadeIn.duration(220)} style={styles.searchWrap}>
-                        <View
-                            style={[
-                                styles.searchBar,
-                                {
-                                    backgroundColor: theme.colors.surface,
-                                    borderColor: theme.colors.border,
-                                    borderRadius: t.radii.lg,
-                                },
-                            ]}
-                        >
-                            <Search size={18} color={t.colors.muted} />
-                            <TextInput
-                                ref={inputRef}
-                                value={query}
-                                onChangeText={setQuery}
-                                placeholder="Rue de Paris, Saint Denis"
-                                placeholderTextColor={t.colors.muted}
-                                style={[styles.input, { color: theme.colors.onSurface }]}
-                                autoFocus
-                                returnKeyType="search"
-                                autoCorrect={false}
-                                autoCapitalize="words"
-                            />
-                            {query.length > 0 ? (
-                                <Pressable
-                                    onPress={() => {
-                                        setQuery("");
-                                        setSelectedStreet(null);
-                                        inputRef.current?.focus();
-                                    }}
-                                    hitSlop={8}
-                                >
-                                    <X size={16} color={t.colors.muted} />
-                                </Pressable>
-                            ) : null}
-                        </View>
-
-                        {!cityGroupId ? (
-                            <Text style={[styles.error, { color: theme.colors.error }]}>
-                                Configuration manquante : cityGroupId requis pour la recherche de rues.
-                            </Text>
-                        ) : null}
-
-                        {showEmptyHint ? (
-                            <View style={styles.hint}>
-                                <Text style={[styles.hintTitle, { color: theme.colors.onBackground }]}>
-                                    Où habitez-vous ?
-                                </Text>
-                                <Text style={[styles.hintSub, { color: t.colors.muted }]}>
-                                    Recherchez le nom de votre rue afin de définir votre secteur de collecte
-                                </Text>
-                            </View>
-                        ) : null}
-
-                        {step === "pickSector" && selectedStreet ? (
-                            <FlatList
-                                data={selectedStreet.sectors}
-                                keyExtractor={(item) => item.id}
-                                contentContainerStyle={styles.listContent}
-                                keyboardShouldPersistTaps="handled"
-                                ListHeaderComponent={
-                                    <Text style={[styles.sectionTitle, { color: t.colors.muted }]}>
-                                        Choisissez votre secteur
-                                    </Text>
-                                }
-                                renderItem={({ item }) => (
-                                    <Pressable
-                                        onPress={() => onSelectSector(item)}
-                                        style={[
-                                            styles.row,
-                                            { borderBottomColor: theme.colors.border },
-                                        ]}
-                                    >
-                                        <View style={[styles.pin, { backgroundColor: theme.colors.border }]}>
-                                            <MapPin size={16} color={t.colors.muted} />
-                                        </View>
-                                        <View style={styles.rowText}>
-                                            <Text style={[styles.rowTitle, { color: theme.colors.onSurface }]}>
-                                                {item.name}
-                                            </Text>
-                                            <Text style={[styles.rowSub, { color: t.colors.muted }]}>
-                                                {item.cityName}
-                                            </Text>
-                                        </View>
-                                    </Pressable>
-                                )}
-                            />
-                        ) : null}
-
-                        {showResults ? (
-                            <>
-                                {searching ? (
-                                    <ActivityIndicator
-                                        color={theme.colors.primary}
-                                        style={{ marginTop: 16 }}
-                                    />
-                                ) : null}
-                                {error ? (
-                                    <Text style={[styles.error, { color: theme.colors.error }]}>{error}</Text>
-                                ) : null}
-                                <FlatList
-                                    data={results}
-                                    keyExtractor={(item) => item.streetId}
-                                    keyboardShouldPersistTaps="handled"
-                                    contentContainerStyle={styles.listContent}
-                                    ListEmptyComponent={
-                                        !searching ? (
-                                            <Text style={[styles.empty, { color: t.colors.muted }]}>
-                                                Aucune rue trouvée
-                                            </Text>
-                                        ) : null
-                                    }
-                                    renderItem={({ item }) => {
-                                        const selected = selectedStreet?.streetId === item.streetId;
-                                        return (
-                                            <Pressable
-                                                onPress={() => onSelectStreet(item)}
-                                                style={[
-                                                    styles.row,
-                                                    {
-                                                        borderBottomColor: theme.colors.border,
-                                                        backgroundColor: selected
-                                                            ? theme.colors.border
-                                                            : "transparent",
-                                                    },
-                                                ]}
-                                            >
-                                                <View
-                                                    style={[
-                                                        styles.pin,
-                                                        { backgroundColor: theme.colors.border },
-                                                    ]}
-                                                >
-                                                    <MapPin size={16} color={t.colors.muted} />
-                                                </View>
-                                                <View style={styles.rowText}>
-                                                    <Text
-                                                        style={[
-                                                            styles.rowTitle,
-                                                            { color: theme.colors.onSurface },
-                                                        ]}
-                                                    >
-                                                        {item.streetName}
-                                                    </Text>
-                                                    <Text style={[styles.rowSub, { color: t.colors.muted }]}>
-                                                        {item.cityName}
-                                                    </Text>
-                                                </View>
-                                                {selected ? (
-                                                    <Check size={18} color={theme.colors.onSurface} />
-                                                ) : null}
-                                            </Pressable>
-                                        );
-                                    }}
-                                />
-                                {selectedStreet ? (
-                                    <Button
-                                        onPress={onContinueFromList}
-                                        style={[styles.primaryBtn, { borderRadius: t.radii.lg }]}
-                                    >
-                                        Continuer
-                                    </Button>
-                                ) : null}
-                            </>
-                        ) : null}
-                    </Animated.View>
-                )}
-            </KeyboardAvoidingView>
-        </Modal>
-    );
-}
-
-const styles = StyleSheet.create({
-    root: {
-        flex: 1,
-        paddingHorizontal: 16,
-        paddingTop: 8,
-    },
-    searchWrap: {
-        flex: 1,
-        gap: 12,
-    },
-    searchBar: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 10,
-        paddingHorizontal: 14,
-        height: 48,
-        borderWidth: 1,
-    },
-    input: {
-        flex: 1,
-        fontSize: 16,
-        paddingVertical: 0,
-    },
-    hint: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        paddingHorizontal: 24,
-        gap: 10,
-        marginBottom: 80,
-    },
-    hintTitle: {
-        fontSize: 22,
-        fontWeight: "800",
-        textAlign: "center",
-    },
-    hintSub: {
-        fontSize: 15,
-        textAlign: "center",
-        lineHeight: 22,
-    },
-    listContent: {
-        paddingBottom: 16,
-    },
-    sectionTitle: {
-        fontSize: 13,
-        fontWeight: "600",
-        textTransform: "uppercase",
-        marginBottom: 8,
-        marginTop: 4,
-    },
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 12,
-        paddingVertical: 12,
-        paddingHorizontal: 8,
-        borderBottomWidth: StyleSheet.hairlineWidth,
-    },
-    pin: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    rowText: {
-        flex: 1,
-        gap: 2,
-    },
-    rowTitle: {
-        fontSize: 16,
-        fontWeight: "700",
-    },
-    rowSub: {
-        fontSize: 13,
-    },
-    empty: {
-        textAlign: "center",
-        marginTop: 24,
-    },
-    error: {
-        marginTop: 8,
-        fontSize: 13,
-    },
-    primaryBtn: {
-        height: 52,
-        marginBottom: 8,
-    },
-    confirmWrap: {
-        flex: 1,
-        justifyContent: "space-between",
-        paddingBottom: 24,
-    },
-    confirmCenter: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        gap: 8,
-        paddingHorizontal: 24,
-    },
-    confirmLabel: {
-        fontSize: 20,
-        fontWeight: "800",
-        textAlign: "center",
-    },
-    confirmZone: {
-        fontSize: 22,
-        fontWeight: "800",
-        textAlign: "center",
-    },
-    confirmActions: {
-        gap: 16,
-        alignItems: "stretch",
-        width: "100%",
-    },
-    confirmPrimaryBtn: {
-        height: 52,
-        width: "100%",
-        alignSelf: "stretch",
-    },
-    link: {
-        fontSize: 15,
-        fontWeight: "700",
-        paddingVertical: 4,
-        textAlign: "center",
-        alignSelf: "center",
-    },
-});
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import {
+    ActivityIndicator,
+    FlatList,
+    KeyboardAvoidingView,
+    Modal,
+    Platform,
+    Pressable,
+    StyleSheet,
+    Text,
+    TextInput,
+    View,
+} from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { Check, MapPin, Search, X } from "lucide-react-native";
+import type { CalendarPdfSector, StreetSectorMatch } from "@wasto/sdk";
+import { useLocal } from "../../contexts/LocalContext";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useWasto } from "../../contexts/WastoContext";
+import { useWastoClient } from "../../hooks/useWastoClient";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { hapticLight, hapticSelection } from "../../helpers/haptics";
+import { Button } from "../button/Button";
+
+type Step = "search" | "pickSector" | "confirm";
+
+type PendingSelection = {
+    street: StreetSectorMatch;
+    sector: CalendarPdfSector;
+};
+
+export default function SelectStreetModal(): ReactNode {
+    const { hasPlaceSelected, registerDevice, isLoading } = useLocal();
+    const { cityGroupId } = useWasto();
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const client = useWastoClient();
+    const insets = useSafeAreaPadding(["top", "bottom"]);
+    const inputRef = useRef<TextInput>(null);
+
+    const [query, setQuery] = useState("");
+    const [results, setResults] = useState<StreetSectorMatch[]>([]);
+    const [searching, setSearching] = useState(false);
+    const [selectedStreet, setSelectedStreet] = useState<StreetSectorMatch | null>(null);
+    const [pending, setPending] = useState<PendingSelection | null>(null);
+    const [step, setStep] = useState<Step>("search");
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (hasPlaceSelected) return;
+        const timer = setTimeout(() => inputRef.current?.focus(), 350);
+        return () => clearTimeout(timer);
+    }, [hasPlaceSelected, step]);
+
+    useEffect(() => {
+        if (hasPlaceSelected) return;
+        const trimmed = query.trim();
+        if (trimmed.length < 2 || !cityGroupId) {
+            setResults([]);
+            setSearching(false);
+            return;
+        }
+
+        setSearching(true);
+        const handle = setTimeout(async () => {
+            try {
+                setError(null);
+                const res = await client.public.cityGroups.searchStreetSectors(cityGroupId, {
+                    q: trimmed,
+                });
+                setResults(res.data ?? []);
+            } catch (err) {
+                setError(
+                    err instanceof Error ? err.message : "Impossible de rechercher cette rue",
+                );
+                setResults([]);
+            } finally {
+                setSearching(false);
+            }
+        }, 300);
+
+        return () => clearTimeout(handle);
+    }, [cityGroupId, client.public.cityGroups, hasPlaceSelected, query]);
+
+    const resetToSearch = useCallback(() => {
+        setStep("search");
+        setSelectedStreet(null);
+        setPending(null);
+        setTimeout(() => inputRef.current?.focus(), 100);
+    }, []);
+
+    const onSelectStreet = async (street: StreetSectorMatch) => {
+        await hapticSelection();
+        setSelectedStreet(street);
+        setError(null);
+        if ((street.sectors ?? []).length === 0) {
+            setError("Aucun secteur de collecte trouvé pour cette rue.");
+        }
+    };
+
+    const onContinueFromList = async () => {
+        if (!selectedStreet) return;
+        const withSectors = (selectedStreet.sectors ?? []).filter(Boolean);
+        if (withSectors.length === 0) {
+            setError("Aucun secteur de collecte trouvé pour cette rue.");
+            return;
+        }
+        await hapticLight();
+        if (withSectors.length === 1) {
+            setPending({ street: selectedStreet, sector: withSectors[0]! });
+            setStep("confirm");
+            return;
+        }
+        setStep("pickSector");
+    };
+
+    const onSelectSector = async (sector: CalendarPdfSector) => {
+        if (!selectedStreet) return;
+        await hapticSelection();
+        setPending({ street: selectedStreet, sector });
+        setStep("confirm");
+    };
+
+    const onConfirm = async () => {
+        if (!pending) return;
+        await hapticLight();
+        await registerDevice(
+            pending.sector.cityId || pending.street.cityId,
+            pending.sector.id,
+            {
+                cityName: pending.sector.cityName || pending.street.cityName,
+                streetName: pending.street.streetName,
+                sectorName: pending.sector.name,
+            },
+        );
+    };
+
+    const showEmptyHint = query.trim().length < 2 && step === "search";
+    const showResults = step === "search" && query.trim().length >= 2;
+
+    return (
+        <Modal visible={!hasPlaceSelected} animationType="fade">
+            <KeyboardAvoidingView
+                style={[styles.root, { backgroundColor: theme.colors.background }, insets]}
+                behavior={Platform.OS === "ios" ? "padding" : undefined}
+            >
+                {step === "confirm" && pending ? (
+                    <Animated.View entering={FadeIn.duration(220)} exiting={FadeOut.duration(160)} style={styles.confirmWrap}>
+                        <View style={styles.confirmCenter}>
+                            <Text style={[styles.confirmLabel, { color: theme.colors.onBackground }]}>
+                                Votre zone est :
+                            </Text>
+                            <Text style={[styles.confirmZone, { color: theme.colors.onBackground }]}>
+                                “{pending.sector.name}” à {pending.sector.cityName || pending.street.cityName}
+                            </Text>
+                        </View>
+                        <View style={styles.confirmActions}>
+                            <Button
+                                onPress={onConfirm}
+                                loading={isLoading}
+                                style={[styles.confirmPrimaryBtn, { borderRadius: t.radii.lg }]}
+                            >
+                                Continuer
+                            </Button>
+                            <Pressable onPress={resetToSearch} hitSlop={8}>
+                                <Text style={[styles.link, { color: theme.colors.primary }]}>
+                                    Choisir une autre rue
+                                </Text>
+                            </Pressable>
+                        </View>
+                    </Animated.View>
+                ) : (
+                    <Animated.View entering={FadeIn.duration(220)} style={styles.searchWrap}>
+                        <View
+                            style={[
+                                styles.searchBar,
+                                {
+                                    backgroundColor: theme.colors.surface,
+                                    borderColor: theme.colors.border,
+                                    borderRadius: t.radii.lg,
+                                },
+                            ]}
+                        >
+                            <Search size={18} color={t.colors.muted} />
+                            <TextInput
+                                ref={inputRef}
+                                value={query}
+                                onChangeText={setQuery}
+                                placeholder="Rue de Paris, Saint Denis"
+                                placeholderTextColor={t.colors.muted}
+                                style={[styles.input, { color: theme.colors.onSurface }]}
+                                autoFocus
+                                returnKeyType="search"
+                                autoCorrect={false}
+                                autoCapitalize="words"
+                            />
+                            {query.length > 0 ? (
+                                <Pressable
+                                    onPress={() => {
+                                        setQuery("");
+                                        setSelectedStreet(null);
+                                        inputRef.current?.focus();
+                                    }}
+                                    hitSlop={8}
+                                >
+                                    <X size={16} color={t.colors.muted} />
+                                </Pressable>
+                            ) : null}
+                        </View>
+
+                        {!cityGroupId ? (
+                            <Text style={[styles.error, { color: theme.colors.error }]}>
+                                Configuration manquante : cityGroupId requis pour la recherche de rues.
+                            </Text>
+                        ) : null}
+
+                        {showEmptyHint ? (
+                            <View style={styles.hint}>
+                                <Text style={[styles.hintTitle, { color: theme.colors.onBackground }]}>
+                                    Où habitez-vous ?
+                                </Text>
+                                <Text style={[styles.hintSub, { color: t.colors.muted }]}>
+                                    Recherchez le nom de votre rue afin de définir votre secteur de collecte
+                                </Text>
+                            </View>
+                        ) : null}
+
+                        {step === "pickSector" && selectedStreet ? (
+                            <FlatList
+                                data={selectedStreet.sectors}
+                                keyExtractor={(item) => item.id}
+                                contentContainerStyle={styles.listContent}
+                                keyboardShouldPersistTaps="handled"
+                                ListHeaderComponent={
+                                    <Text style={[styles.sectionTitle, { color: t.colors.muted }]}>
+                                        Choisissez votre secteur
+                                    </Text>
+                                }
+                                renderItem={({ item }) => (
+                                    <Pressable
+                                        onPress={() => onSelectSector(item)}
+                                        style={[
+                                            styles.row,
+                                            { borderBottomColor: theme.colors.border },
+                                        ]}
+                                    >
+                                        <View style={[styles.pin, { backgroundColor: theme.colors.border }]}>
+                                            <MapPin size={16} color={t.colors.muted} />
+                                        </View>
+                                        <View style={styles.rowText}>
+                                            <Text style={[styles.rowTitle, { color: theme.colors.onSurface }]}>
+                                                {item.name}
+                                            </Text>
+                                            <Text style={[styles.rowSub, { color: t.colors.muted }]}>
+                                                {item.cityName}
+                                            </Text>
+                                        </View>
+                                    </Pressable>
+                                )}
+                            />
+                        ) : null}
+
+                        {showResults ? (
+                            <>
+                                {searching ? (
+                                    <ActivityIndicator
+                                        color={theme.colors.primary}
+                                        style={{ marginTop: 16 }}
+                                    />
+                                ) : null}
+                                {error ? (
+                                    <Text style={[styles.error, { color: theme.colors.error }]}>{error}</Text>
+                                ) : null}
+                                <FlatList
+                                    data={results}
+                                    keyExtractor={(item) => item.streetId}
+                                    keyboardShouldPersistTaps="handled"
+                                    contentContainerStyle={styles.listContent}
+                                    ListEmptyComponent={
+                                        !searching ? (
+                                            <Text style={[styles.empty, { color: t.colors.muted }]}>
+                                                Aucune rue trouvée
+                                            </Text>
+                                        ) : null
+                                    }
+                                    renderItem={({ item }) => {
+                                        const selected = selectedStreet?.streetId === item.streetId;
+                                        return (
+                                            <Pressable
+                                                onPress={() => onSelectStreet(item)}
+                                                style={[
+                                                    styles.row,
+                                                    {
+                                                        borderBottomColor: theme.colors.border,
+                                                        backgroundColor: selected
+                                                            ? theme.colors.border
+                                                            : "transparent",
+                                                    },
+                                                ]}
+                                            >
+                                                <View
+                                                    style={[
+                                                        styles.pin,
+                                                        { backgroundColor: theme.colors.border },
+                                                    ]}
+                                                >
+                                                    <MapPin size={16} color={t.colors.muted} />
+                                                </View>
+                                                <View style={styles.rowText}>
+                                                    <Text
+                                                        style={[
+                                                            styles.rowTitle,
+                                                            { color: theme.colors.onSurface },
+                                                        ]}
+                                                    >
+                                                        {item.streetName}
+                                                    </Text>
+                                                    <Text style={[styles.rowSub, { color: t.colors.muted }]}>
+                                                        {item.cityName}
+                                                    </Text>
+                                                </View>
+                                                {selected ? (
+                                                    <Check size={18} color={theme.colors.onSurface} />
+                                                ) : null}
+                                            </Pressable>
+                                        );
+                                    }}
+                                />
+                                {selectedStreet ? (
+                                    <Button
+                                        onPress={onContinueFromList}
+                                        style={[styles.primaryBtn, { borderRadius: t.radii.lg }]}
+                                    >
+                                        Continuer
+                                    </Button>
+                                ) : null}
+                            </>
+                        ) : null}
+                    </Animated.View>
+                )}
+            </KeyboardAvoidingView>
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 8,
+    },
+    searchWrap: {
+        flex: 1,
+        gap: 12,
+    },
+    searchBar: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        paddingHorizontal: 14,
+        height: 48,
+        borderWidth: 1,
+    },
+    input: {
+        flex: 1,
+        fontSize: 16,
+        paddingVertical: 0,
+    },
+    hint: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 24,
+        gap: 10,
+        marginBottom: 80,
+    },
+    hintTitle: {
+        fontSize: 22,
+        fontWeight: "800",
+        textAlign: "center",
+    },
+    hintSub: {
+        fontSize: 15,
+        textAlign: "center",
+        lineHeight: 22,
+    },
+    listContent: {
+        paddingBottom: 16,
+    },
+    sectionTitle: {
+        fontSize: 13,
+        fontWeight: "600",
+        textTransform: "uppercase",
+        marginBottom: 8,
+        marginTop: 4,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        paddingVertical: 12,
+        paddingHorizontal: 8,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+    pin: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    rowText: {
+        flex: 1,
+        gap: 2,
+    },
+    rowTitle: {
+        fontSize: 16,
+        fontWeight: "700",
+    },
+    rowSub: {
+        fontSize: 13,
+    },
+    empty: {
+        textAlign: "center",
+        marginTop: 24,
+    },
+    error: {
+        marginTop: 8,
+        fontSize: 13,
+    },
+    primaryBtn: {
+        height: 52,
+        marginBottom: 8,
+    },
+    confirmWrap: {
+        flex: 1,
+        justifyContent: "space-between",
+        paddingBottom: 24,
+    },
+    confirmCenter: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 8,
+        paddingHorizontal: 24,
+    },
+    confirmLabel: {
+        fontSize: 20,
+        fontWeight: "800",
+        textAlign: "center",
+    },
+    confirmZone: {
+        fontSize: 22,
+        fontWeight: "800",
+        textAlign: "center",
+    },
+    confirmActions: {
+        gap: 16,
+        alignItems: "stretch",
+        width: "100%",
+    },
+    confirmPrimaryBtn: {
+        height: 52,
+        width: "100%",
+        alignSelf: "stretch",
+    },
+    link: {
+        fontSize: 15,
+        fontWeight: "700",
+        paddingVertical: 4,
+        textAlign: "center",
+        alignSelf: "center",
+    },
+});