@wasto/cms-components 1.5.10 → 1.5.11

package/src/components/next-collection/NextCollection.tsx

@@ -1,621 +1,636 @@
-import {
-    Dimensions,
-    Platform,
-    Pressable,
-    StyleSheet,
-    Text,
-    View,
-    type NativeScrollEvent,
-    type NativeSyntheticEvent,
-} from "react-native";
-import { Image } from "expo-image";
-import Animated, {
-    Extrapolation,
-    FadeInRight,
-    FadeOutLeft,
-    interpolate,
-    interpolateColor,
-    runOnJS,
-    type SharedValue,
-    useAnimatedReaction,
-    useAnimatedScrollHandler,
-    useAnimatedStyle,
-    useSharedValue,
-} from "react-native-reanimated";
-import { useNextCollection } from "../../hooks/useNextCollection";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react-native";
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { ConsignesModal } from "../consignes-modal/ConsignesModal";
-import { NavButton } from "../nav-button/NavButton";
-import { Button } from "../button/Button";
-import { ContentInset } from "../content-inset/ContentInset";
-import { useTheme } from "../../contexts/ThemeContext";
-import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
-import { hapticSelection } from "../../helpers/haptics";
-import { resolveApiAssetUrl } from "../../helpers/resolveApiAssetUrl";
-import { useWasto } from "../../contexts/WastoContext";
-import { SPACE } from "../../helpers/layout";
-import type { Theme } from "../../types/Theme";
-import { useAppNavigation } from "../../navigation/NavigationContext";
-
-export type NextCollectionProps = {
-    /** Route / screen name for the calendar CTA. Defaults to trying common tab paths. */
-    calendarHref?: string;
-    /** Show calendar CTA under the slider (home mockup). Default true. */
-    showCalendarCta?: boolean;
-    /**
-     * Initial day offset relative to today (0 = today, 1 = tomorrow, -1 = yesterday).
-     * User can still navigate with prev/next.
-     */
-    dayOffset?: number;
-};
-
-/** Maquette: side cards ≈ 174/196 of active height */
-const SIDE_SCALE = 174 / 196;
-const CARD_GAP = 12;
-/** Side inset so current card is centered with a peek of the next (~maquette). */
-const SIDE_INSET = 20;
-const CARD_ASPECT = 196 / 286;
-/** White contour around the light-grey panel (screenshot). */
-const FRAME_PAD = 10;
-/**
- * Figma Ellipse 4 on card 286×196 — only the top of a huge circle is visible
- * (~52px), as a white bump on the bottom border.
- */
-const BUMP = {
-    w: 813 / 286,
-    /** Visible bump height / card height (196 − 144) / 196 */
-    visible: 52 / 196,
-} as const;
-
-type CollectionItem = {
-    id: string;
-    name: string;
-    color?: string | null;
-    imageUrl?: string | null;
-    icon?: string;
-};
-
-function CollectionSlide({
-    item,
-    index,
-    scrollX,
-    cardWidth,
-    cardHeight,
-    snapInterval,
-    theme,
-    imageUri,
-    onPress,
-    isLast,
-}: {
-    item: CollectionItem;
-    index: number;
-    scrollX: SharedValue<number>;
-    cardWidth: number;
-    cardHeight: number;
-    snapInterval: number;
-    theme: Theme;
-    imageUri: string | null;
-    onPress: () => void;
-    isLast: boolean;
-}) {
-    const t = resolveTheme(theme);
-    const accent = item.color ?? theme.colors.primary;
-    const imageSize = Math.round(cardHeight * 0.55);
-    const panelW = cardWidth - FRAME_PAD * 2;
-    // True circle (square + radius/2). A non-square + borderRadius 9999
-    // renders as a rounded rectangle / pill on RN web.
-    const bumpSize = cardWidth * BUMP.w;
-    const bumpVisible = cardHeight * BUMP.visible;
-
-    const animatedStyle = useAnimatedStyle(() => {
-        const center = index * snapInterval;
-        const scale = interpolate(
-            scrollX.value,
-            [center - snapInterval, center, center + snapInterval],
-            [SIDE_SCALE, 1, SIDE_SCALE],
-            Extrapolation.CLAMP,
-        );
-        return {
-            transform: [{ scale }],
-        };
-    }, [index, snapInterval]);
-
-    return (
-        <Animated.View
-            style={[
-                styles.slide,
-                {
-                    width: cardWidth,
-                    height: cardHeight,
-                    marginRight: isLast ? 0 : CARD_GAP,
-                    ...(Platform.OS === "web"
-                        ? ({ scrollSnapAlign: "center", scrollSnapStop: "always" } as object)
-                        : null),
-                },
-                animatedStyle,
-            ]}
-        >
-            <Pressable
-                onPress={onPress}
-                style={[
-                    styles.cardFrame,
-                    {
-                        borderRadius: t.radii.lg,
-                        backgroundColor: "#FFFFFF",
-                        borderWidth: 1,
-                        borderColor: theme.colors.border,
-                        padding: FRAME_PAD,
-                        ...t.shadow.card,
-                    },
-                ]}
-            >
-                {/* Light-grey interior — white bump is the frame swelling up */}
-                <View
-                    style={[
-                        styles.cardPanel,
-                        {
-                            backgroundColor: "#F0F0F0",
-                            borderRadius: Math.max(10, t.radii.lg - 6),
-                        },
-                    ]}
-                >
-                    <View
-                        pointerEvents="none"
-                        style={{
-                            position: "absolute",
-                            width: bumpSize,
-                            height: bumpSize,
-                            borderRadius: bumpSize / 2,
-                            left: (panelW - bumpSize) / 2,
-                            bottom: -(bumpSize - bumpVisible),
-                            backgroundColor: "#FFFFFF",
-                        }}
-                    />
-
-                    <View style={styles.cardContent}>
-                        <Text
-                            style={[styles.wasteName, { color: theme.colors.onSurface }]}
-                            numberOfLines={2}
-                        >
-                            {item.name}
-                        </Text>
-                        {imageUri ? (
-                            <Image
-                                source={imageUri}
-                                style={{ width: imageSize, height: imageSize }}
-                                contentFit="contain"
-                            />
-                        ) : (
-                            <View
-                                style={{
-                                    width: imageSize,
-                                    height: imageSize,
-                                    backgroundColor: `${accent}22`,
-                                    borderRadius: t.radii.md,
-                                }}
-                            />
-                        )}
-                    </View>
-                </View>
-            </Pressable>
-        </Animated.View>
-    );
-}
-
-/** Animated dots driven by scrollX. Maquette: pill 16×6 / dot 6×6. */
-function CollectionPagination({
-    count,
-    scrollX,
-    snapInterval,
-    activeColor,
-    inactiveColor,
-    pageLabelColor,
-}: {
-    count: number;
-    scrollX: SharedValue<number>;
-    snapInterval: number;
-    activeColor: string;
-    inactiveColor: string;
-    pageLabelColor: string;
-}) {
-    const [pageIndex, setPageIndex] = useState(0);
-
-    useAnimatedReaction(
-        () => Math.round(scrollX.value / Math.max(snapInterval, 1)),
-        (current, previous) => {
-            if (current !== previous) {
-                const clamped = Math.max(0, Math.min(current, count - 1));
-                runOnJS(setPageIndex)(clamped);
-            }
-        },
-        [snapInterval, count],
-    );
-
-    return (
-        <View style={styles.pagination}>
-            {Array.from({ length: count }, (_, idx) => (
-                <PaginationDot
-                    key={idx}
-                    index={idx}
-                    scrollX={scrollX}
-                    snapInterval={snapInterval}
-                    activeColor={activeColor}
-                    inactiveColor={inactiveColor}
-                />
-            ))}
-            <Text style={[styles.pageCount, { color: pageLabelColor }]}>
-                {pageIndex + 1}/{count}
-            </Text>
-        </View>
-    );
-}
-
-function PaginationDot({
-    index,
-    scrollX,
-    snapInterval,
-    activeColor,
-    inactiveColor,
-}: {
-    index: number;
-    scrollX: SharedValue<number>;
-    snapInterval: number;
-    activeColor: string;
-    inactiveColor: string;
-}) {
-    const animatedStyle = useAnimatedStyle(() => {
-        const inputRange = [
-            (index - 1) * snapInterval,
-            index * snapInterval,
-            (index + 1) * snapInterval,
-        ];
-        return {
-            width: interpolate(
-                scrollX.value,
-                inputRange,
-                [6, 16, 6],
-                Extrapolation.CLAMP,
-            ),
-            opacity: interpolate(
-                scrollX.value,
-                inputRange,
-                [0.4, 1, 0.4],
-                Extrapolation.CLAMP,
-            ),
-            backgroundColor: interpolateColor(scrollX.value, inputRange, [
-                inactiveColor,
-                activeColor,
-                inactiveColor,
-            ]),
-        };
-    }, [index, snapInterval, activeColor, inactiveColor]);
-
-    return <Animated.View style={[styles.dotBase, animatedStyle]} />;
-}
-
-export function NextCollection({
-    calendarHref,
-    showCalendarCta = true,
-    dayOffset = 0,
-}: NextCollectionProps): ReactNode {
-    const { theme } = useTheme();
-    const { apiUrl } = useWasto();
-    const { push } = useAppNavigation();
-    const t = resolveTheme(theme);
-    const [offset, setOffset] = useState(() => Math.trunc(dayOffset));
-    const { collectionsForDay, dateLabel } = useNextCollection({
-        dateOffset: offset,
-    });
-
-    useEffect(() => {
-        setOffset(Math.trunc(dayOffset));
-    }, [dayOffset]);
-
-    const [selectedWasteTypeId, setSelectedWasteTypeId] = useState<string | null>(null);
-    const listRef = useRef<Animated.FlatList<CollectionItem>>(null);
-    const scrollX = useSharedValue(0);
-    const lastSnappedIndex = useRef(0);
-
-    const screenWidth = Dimensions.get("window").width;
-    // Near full-bleed with SIDE_INSET peek — matches maquette presence (286 on 402 ≈ side 16–58)
-    const cardWidth = Math.round(screenWidth - SIDE_INSET * 2);
-    const cardHeight = Math.round(cardWidth * CARD_ASPECT);
-    const sidePad = SIDE_INSET;
-    const snapInterval = cardWidth + CARD_GAP;
-
-    const snapOffsets = useMemo(
-        () => collectionsForDay.map((_, i) => i * snapInterval),
-        [collectionsForDay, snapInterval],
-    );
-
-    const imageSource = (item: CollectionItem) => {
-        const fromUrl = resolveApiAssetUrl(apiUrl, item.imageUrl);
-        if (fromUrl) return fromUrl;
-        if (
-            typeof item.icon === "string" &&
-            item.icon.trim() &&
-            /^https?:\/\//i.test(item.icon)
-        ) {
-            return item.icon.trim();
-        }
-        return null;
-    };
-
-    const scrollHandler = useAnimatedScrollHandler(
-        {
-            onScroll: (e) => {
-                scrollX.value = e.contentOffset.x;
-            },
-        },
-        [],
-    );
-
-    const snapToNearest = useCallback(
-        (x: number) => {
-            if (collectionsForDay.length === 0) return;
-            const index = Math.round(x / snapInterval);
-            const clamped = Math.max(0, Math.min(index, collectionsForDay.length - 1));
-            const target = clamped * snapInterval;
-            if (clamped !== lastSnappedIndex.current) {
-                lastSnappedIndex.current = clamped;
-                void hapticSelection();
-            }
-            if (Math.abs(x - target) > 1) {
-                listRef.current?.scrollToOffset({ offset: target, animated: true });
-            }
-            scrollX.value = target;
-        },
-        [collectionsForDay.length, snapInterval, scrollX],
-    );
-
-    const onScrollSettle = useCallback(
-        (
-            e:
-                | NativeSyntheticEvent<NativeScrollEvent>
-                | { nativeEvent: { contentOffset: { x: number } } },
-        ) => {
-            snapToNearest(e.nativeEvent.contentOffset.x);
-        },
-        [snapToNearest],
-    );
-
-    const changeDate = async (delta: number) => {
-        await hapticSelection();
-        setOffset((o) => o + delta);
-        lastSnappedIndex.current = 0;
-        scrollX.value = 0;
-        requestAnimationFrame(() => {
-            listRef.current?.scrollToOffset({ offset: 0, animated: true });
-        });
-    };
-
-    const openCalendar = () => {
-        const normalizeHref = (href: string) =>
-            href.startsWith("/") ? href : `/${href}`;
-        const candidates = [
-            calendarHref,
-            "/(tabs)/calendrier",
-            "/(tabs)/calendar",
-            "/calendrier",
-            "/calendar",
-        ]
-            .filter(Boolean)
-            .map((href) => normalizeHref(href as string));
-
-        for (const href of candidates) {
-            try {
-                push(href);
-                return;
-            } catch {
-                // try next
-            }
-        }
-    };
-
-    return (
-        <>
-            <View style={styles.section}>
-                <ContentInset>
-                    <View style={styles.header}>
-                        <Animated.Text
-                            key={dateLabel}
-                            entering={FadeInRight.duration(220)}
-                            exiting={FadeOutLeft.duration(160)}
-                            style={[styles.sectionLabel, { color: t.colors.muted }]}
-                        >
-                            {dateLabel.toUpperCase()}
-                        </Animated.Text>
-                        <View style={styles.navRow}>
-                            <NavButton
-                                icon={ChevronLeftIcon}
-                                onPress={() => changeDate(-1)}
-                                style={styles.navCircle}
-                            />
-                            <NavButton
-                                icon={ChevronRightIcon}
-                                onPress={() => changeDate(1)}
-                                style={styles.navCircle}
-                            />
-                        </View>
-                    </View>
-                </ContentInset>
-
-                {collectionsForDay.length === 0 ? (
-                    <ContentInset>
-                        <View
-                            style={[
-                                styles.emptyCard,
-                                cardStyle(theme),
-                                {
-                                    borderRadius: t.radii.lg,
-                                    minHeight: cardHeight,
-                                },
-                            ]}
-                        >
-                            <Text style={[styles.emptyText, { color: t.colors.muted }]}>
-                                Rien pour aujourd'hui
-                            </Text>
-                        </View>
-                    </ContentInset>
-                ) : (
-                    <View key={offset}>
-                        <Animated.FlatList
-                            ref={listRef}
-                            data={collectionsForDay as CollectionItem[]}
-                            keyExtractor={(item) => item.id}
-                            horizontal
-                            showsHorizontalScrollIndicator={false}
-                            decelerationRate="fast"
-                            snapToInterval={Platform.OS === "web" ? undefined : snapInterval}
-                            snapToOffsets={Platform.OS === "web" ? undefined : snapOffsets}
-                            snapToAlignment="center"
-                            disableIntervalMomentum
-                            bounces={false}
-                            scrollEventThrottle={16}
-                            onScroll={scrollHandler}
-                            onScrollEndDrag={onScrollSettle}
-                            onMomentumScrollEnd={onScrollSettle}
-                            contentContainerStyle={{
-                                paddingHorizontal: sidePad,
-                                alignItems: "center",
-                            }}
-                            style={[
-                                { height: cardHeight },
-                                Platform.OS === "web"
-                                    ? ({
-                                          scrollSnapType: "x mandatory",
-                                          WebkitOverflowScrolling: "touch",
-                                      } as object)
-                                    : null,
-                            ]}
-                            renderItem={({ item, index }) => (
-                                <CollectionSlide
-                                    item={item}
-                                    index={index}
-                                    scrollX={scrollX}
-                                    cardWidth={cardWidth}
-                                    cardHeight={cardHeight}
-                                    snapInterval={snapInterval}
-                                    theme={theme}
-                                    imageUri={imageSource(item)}
-                                    isLast={index === collectionsForDay.length - 1}
-                                    onPress={() => setSelectedWasteTypeId(item.id)}
-                                />
-                            )}
-                        />
-
-                        <CollectionPagination
-                            count={collectionsForDay.length}
-                            scrollX={scrollX}
-                            snapInterval={snapInterval}
-                            activeColor={theme.colors.primary}
-                            inactiveColor={theme.colors.border}
-                            pageLabelColor={t.colors.muted}
-                        />
-                    </View>
-                )}
-
-                {showCalendarCta ? (
-                    <ContentInset>
-                        <Button
-                            onPress={openCalendar}
-                            style={[styles.cta, { borderRadius: t.radii.md }]}
-                        >
-                            Afficher le calendrier
-                        </Button>
-                    </ContentInset>
-                ) : null}
-            </View>
-
-            <ConsignesModal
-                visible={!!selectedWasteTypeId}
-                wasteTypeId={selectedWasteTypeId!}
-                onClose={() => setSelectedWasteTypeId(null)}
-            />
-        </>
-    );
-}
-
-const styles = StyleSheet.create({
-    section: {
-        gap: 14,
-    },
-    header: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-    },
-    sectionLabel: {
-        fontSize: 13,
-        fontWeight: "700",
-        letterSpacing: 0.6,
-    },
-    navRow: {
-        flexDirection: "row",
-        gap: 8,
-    },
-    navCircle: {
-        width: SPACE.iconHit,
-        height: SPACE.iconHit,
-    },
-    slide: {
-        justifyContent: "center",
-    },
-    cardFrame: {
-        flex: 1,
-        overflow: "hidden",
-    },
-    cardPanel: {
-        flex: 1,
-        overflow: "hidden",
-        position: "relative",
-    },
-    cardContent: {
-        flex: 1,
-        zIndex: 1,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: 12,
-        paddingLeft: 14,
-        paddingRight: 12,
-        paddingVertical: 14,
-    },
-    wasteName: {
-        flex: 1,
-        fontSize: 22,
-        fontWeight: "800",
-        lineHeight: 28,
-    },
-    pagination: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "100%",
-        gap: 6,
-        marginTop: 10,
-        paddingHorizontal: SPACE.pageX,
-    },
-    dotBase: {
-        height: 6,
-        borderRadius: 3,
-    },
-    pageCount: {
-        marginLeft: 4,
-        fontSize: 12,
-        fontWeight: "600",
-    },
-    emptyCard: {
-        padding: 24,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    emptyText: {
-        fontSize: 14,
-        fontWeight: "600",
-    },
-    cta: {
-        height: SPACE.buttonH,
-    },
-});
+import {
+    Dimensions,
+    Platform,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+    type NativeScrollEvent,
+    type NativeSyntheticEvent,
+} from "react-native";
+import { Image } from "expo-image";
+import Animated, {
+    Extrapolation,
+    FadeInRight,
+    FadeOutLeft,
+    interpolate,
+    interpolateColor,
+    runOnJS,
+    type SharedValue,
+    useAnimatedReaction,
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useSharedValue,
+} from "react-native-reanimated";
+import { useNextCollection } from "../../hooks/useNextCollection";
+import { NEXT_EVENTS_DAY_RADIUS } from "../../contexts/AppDataContext";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react-native";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { ConsignesModal } from "../consignes-modal/ConsignesModal";
+import { NavButton } from "../nav-button/NavButton";
+import { Button } from "../button/Button";
+import { ContentInset } from "../content-inset/ContentInset";
+import { useTheme } from "../../contexts/ThemeContext";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { hapticSelection } from "../../helpers/haptics";
+import { resolveApiAssetUrl } from "../../helpers/resolveApiAssetUrl";
+import { useWasto } from "../../contexts/WastoContext";
+import { SPACE } from "../../helpers/layout";
+import type { Theme } from "../../types/Theme";
+import { useAppNavigation } from "../../navigation/NavigationContext";
+
+export type NextCollectionProps = {
+    /** Route / screen name for the calendar CTA. Defaults to trying common tab paths. */
+    calendarHref?: string;
+    /** Show calendar CTA under the slider (home mockup). Default true. */
+    showCalendarCta?: boolean;
+    /**
+     * Initial day offset relative to today (0 = today, 1 = tomorrow, -1 = yesterday).
+     * User can still navigate with prev/next.
+     */
+    dayOffset?: number;
+};
+
+/** Maquette: side cards ≈ 174/196 of active height */
+const SIDE_SCALE = 174 / 196;
+const CARD_GAP = 12;
+/** Side inset so current card is centered with a peek of the next (~maquette). */
+const SIDE_INSET = 20;
+const CARD_ASPECT = 196 / 286;
+/** White contour around the light-grey panel (screenshot). */
+const FRAME_PAD = 10;
+/**
+ * Figma Ellipse 4 on card 286×196 — only the top of a huge circle is visible
+ * (~52px), as a white bump on the bottom border.
+ */
+const BUMP = {
+    w: 813 / 286,
+    /** Visible bump height / card height (196 − 144) / 196 */
+    visible: 52 / 196,
+} as const;
+
+type CollectionItem = {
+    id: string;
+    name: string;
+    color?: string | null;
+    imageUrl?: string | null;
+    icon?: string;
+};
+
+function CollectionSlide({
+    item,
+    index,
+    scrollX,
+    cardWidth,
+    cardHeight,
+    snapInterval,
+    theme,
+    imageUri,
+    onPress,
+    isLast,
+}: {
+    item: CollectionItem;
+    index: number;
+    scrollX: SharedValue<number>;
+    cardWidth: number;
+    cardHeight: number;
+    snapInterval: number;
+    theme: Theme;
+    imageUri: string | null;
+    onPress: () => void;
+    isLast: boolean;
+}) {
+    const t = resolveTheme(theme);
+    const accent = item.color ?? theme.colors.primary;
+    const imageSize = Math.round(cardHeight * 0.55);
+    const panelW = cardWidth - FRAME_PAD * 2;
+    // True circle (square + radius/2). A non-square + borderRadius 9999
+    // renders as a rounded rectangle / pill on RN web.
+    const bumpSize = cardWidth * BUMP.w;
+    const bumpVisible = cardHeight * BUMP.visible;
+
+    const animatedStyle = useAnimatedStyle(() => {
+        const center = index * snapInterval;
+        const scale = interpolate(
+            scrollX.value,
+            [center - snapInterval, center, center + snapInterval],
+            [SIDE_SCALE, 1, SIDE_SCALE],
+            Extrapolation.CLAMP,
+        );
+        return {
+            transform: [{ scale }],
+        };
+    }, [index, snapInterval]);
+
+    return (
+        <Animated.View
+            style={[
+                styles.slide,
+                {
+                    width: cardWidth,
+                    height: cardHeight,
+                    marginRight: isLast ? 0 : CARD_GAP,
+                    ...(Platform.OS === "web"
+                        ? ({ scrollSnapAlign: "center", scrollSnapStop: "always" } as object)
+                        : null),
+                },
+                animatedStyle,
+            ]}
+        >
+            <Pressable
+                onPress={onPress}
+                style={[
+                    styles.cardFrame,
+                    {
+                        borderRadius: t.radii.lg,
+                        backgroundColor: "#FFFFFF",
+                        borderWidth: 1,
+                        borderColor: theme.colors.border,
+                        padding: FRAME_PAD,
+                        ...t.shadow.card,
+                    },
+                ]}
+            >
+                {/* Light-grey interior — white bump is the frame swelling up */}
+                <View
+                    style={[
+                        styles.cardPanel,
+                        {
+                            backgroundColor: "#F0F0F0",
+                            borderRadius: Math.max(10, t.radii.lg - 6),
+                        },
+                    ]}
+                >
+                    <View
+                        pointerEvents="none"
+                        style={{
+                            position: "absolute",
+                            width: bumpSize,
+                            height: bumpSize,
+                            borderRadius: bumpSize / 2,
+                            left: (panelW - bumpSize) / 2,
+                            bottom: -(bumpSize - bumpVisible),
+                            backgroundColor: "#FFFFFF",
+                        }}
+                    />
+
+                    <View style={styles.cardContent}>
+                        <Text
+                            style={[styles.wasteName, { color: theme.colors.onSurface }]}
+                            numberOfLines={2}
+                        >
+                            {item.name}
+                        </Text>
+                        {imageUri ? (
+                            <Image
+                                source={imageUri}
+                                style={{ width: imageSize, height: imageSize }}
+                                contentFit="contain"
+                            />
+                        ) : (
+                            <View
+                                style={{
+                                    width: imageSize,
+                                    height: imageSize,
+                                    backgroundColor: `${accent}22`,
+                                    borderRadius: t.radii.md,
+                                }}
+                            />
+                        )}
+                    </View>
+                </View>
+            </Pressable>
+        </Animated.View>
+    );
+}
+
+/** Animated dots driven by scrollX. Maquette: pill 16×6 / dot 6×6. */
+function CollectionPagination({
+    count,
+    scrollX,
+    snapInterval,
+    activeColor,
+    inactiveColor,
+    pageLabelColor,
+}: {
+    count: number;
+    scrollX: SharedValue<number>;
+    snapInterval: number;
+    activeColor: string;
+    inactiveColor: string;
+    pageLabelColor: string;
+}) {
+    const [pageIndex, setPageIndex] = useState(0);
+
+    useAnimatedReaction(
+        () => Math.round(scrollX.value / Math.max(snapInterval, 1)),
+        (current, previous) => {
+            if (current !== previous) {
+                const clamped = Math.max(0, Math.min(current, count - 1));
+                runOnJS(setPageIndex)(clamped);
+            }
+        },
+        [snapInterval, count],
+    );
+
+    return (
+        <View style={styles.pagination}>
+            {Array.from({ length: count }, (_, idx) => (
+                <PaginationDot
+                    key={idx}
+                    index={idx}
+                    scrollX={scrollX}
+                    snapInterval={snapInterval}
+                    activeColor={activeColor}
+                    inactiveColor={inactiveColor}
+                />
+            ))}
+            <Text style={[styles.pageCount, { color: pageLabelColor }]}>
+                {pageIndex + 1}/{count}
+            </Text>
+        </View>
+    );
+}
+
+function PaginationDot({
+    index,
+    scrollX,
+    snapInterval,
+    activeColor,
+    inactiveColor,
+}: {
+    index: number;
+    scrollX: SharedValue<number>;
+    snapInterval: number;
+    activeColor: string;
+    inactiveColor: string;
+}) {
+    const animatedStyle = useAnimatedStyle(() => {
+        const inputRange = [
+            (index - 1) * snapInterval,
+            index * snapInterval,
+            (index + 1) * snapInterval,
+        ];
+        return {
+            width: interpolate(
+                scrollX.value,
+                inputRange,
+                [6, 16, 6],
+                Extrapolation.CLAMP,
+            ),
+            opacity: interpolate(
+                scrollX.value,
+                inputRange,
+                [0.4, 1, 0.4],
+                Extrapolation.CLAMP,
+            ),
+            backgroundColor: interpolateColor(scrollX.value, inputRange, [
+                inactiveColor,
+                activeColor,
+                inactiveColor,
+            ]),
+        };
+    }, [index, snapInterval, activeColor, inactiveColor]);
+
+    return <Animated.View style={[styles.dotBase, animatedStyle]} />;
+}
+
+export function NextCollection({
+    calendarHref,
+    showCalendarCta = true,
+    dayOffset = 0,
+}: NextCollectionProps): ReactNode {
+    const { theme } = useTheme();
+    const { apiUrl } = useWasto();
+    const { push } = useAppNavigation();
+    const t = resolveTheme(theme);
+    const [offset, setOffset] = useState(() => Math.trunc(dayOffset));
+    const { collectionsForDay, dateLabel } = useNextCollection({
+        dateOffset: offset,
+    });
+
+    useEffect(() => {
+        setOffset(Math.trunc(dayOffset));
+    }, [dayOffset]);
+
+    const [selectedWasteTypeId, setSelectedWasteTypeId] = useState<string | null>(null);
+    const listRef = useRef<Animated.FlatList<CollectionItem>>(null);
+    const scrollX = useSharedValue(0);
+    const lastSnappedIndex = useRef(0);
+
+    const screenWidth = Dimensions.get("window").width;
+    // Near full-bleed with SIDE_INSET peek — matches maquette presence (286 on 402 ≈ side 16–58)
+    const cardWidth = Math.round(screenWidth - SIDE_INSET * 2);
+    const cardHeight = Math.round(cardWidth * CARD_ASPECT);
+    const sidePad = SIDE_INSET;
+    const snapInterval = cardWidth + CARD_GAP;
+
+    const snapOffsets = useMemo(
+        () => collectionsForDay.map((_, i) => i * snapInterval),
+        [collectionsForDay, snapInterval],
+    );
+
+    const imageSource = (item: CollectionItem) => {
+        const fromUrl = resolveApiAssetUrl(apiUrl, item.imageUrl);
+        if (fromUrl) return fromUrl;
+        if (
+            typeof item.icon === "string" &&
+            item.icon.trim() &&
+            /^https?:\/\//i.test(item.icon)
+        ) {
+            return item.icon.trim();
+        }
+        return null;
+    };
+
+    const scrollHandler = useAnimatedScrollHandler(
+        {
+            onScroll: (e) => {
+                scrollX.value = e.contentOffset.x;
+            },
+        },
+        [],
+    );
+
+    const snapToNearest = useCallback(
+        (x: number) => {
+            if (collectionsForDay.length === 0) return;
+            const index = Math.round(x / snapInterval);
+            const clamped = Math.max(0, Math.min(index, collectionsForDay.length - 1));
+            const target = clamped * snapInterval;
+            if (clamped !== lastSnappedIndex.current) {
+                lastSnappedIndex.current = clamped;
+                void hapticSelection();
+            }
+            if (Math.abs(x - target) > 1) {
+                listRef.current?.scrollToOffset({ offset: target, animated: true });
+            }
+            scrollX.value = target;
+        },
+        [collectionsForDay.length, snapInterval, scrollX],
+    );
+
+    const onScrollSettle = useCallback(
+        (
+            e:
+                | NativeSyntheticEvent<NativeScrollEvent>
+                | { nativeEvent: { contentOffset: { x: number } } },
+        ) => {
+            snapToNearest(e.nativeEvent.contentOffset.x);
+        },
+        [snapToNearest],
+    );
+
+    const changeDate = async (delta: number) => {
+        await hapticSelection();
+        setOffset((o) => {
+            const next = o + delta;
+            return Math.max(-NEXT_EVENTS_DAY_RADIUS, Math.min(NEXT_EVENTS_DAY_RADIUS, next));
+        });
+        lastSnappedIndex.current = 0;
+        scrollX.value = 0;
+        requestAnimationFrame(() => {
+            listRef.current?.scrollToOffset({ offset: 0, animated: true });
+        });
+    };
+
+    const openCalendar = () => {
+        const normalizeHref = (href: string) =>
+            href.startsWith("/") ? href : `/${href}`;
+        const candidates = [
+            calendarHref,
+            "/(tabs)/calendrier",
+            "/(tabs)/calendar",
+            "/calendrier",
+            "/calendar",
+        ]
+            .filter(Boolean)
+            .map((href) => normalizeHref(href as string));
+
+        for (const href of candidates) {
+            try {
+                push(href);
+                return;
+            } catch {
+                // try next
+            }
+        }
+    };
+
+    return (
+        <>
+            <View style={styles.section}>
+                <ContentInset>
+                    <View style={styles.header}>
+                        <Animated.Text
+                            key={dateLabel}
+                            entering={FadeInRight.duration(220)}
+                            exiting={FadeOutLeft.duration(160)}
+                            style={[styles.sectionLabel, { color: t.colors.muted }]}
+                        >
+                            {dateLabel.toUpperCase()}
+                        </Animated.Text>
+                        <View style={styles.navRow}>
+                            <NavButton
+                                icon={ChevronLeftIcon}
+                                onPress={() => changeDate(-1)}
+                                disabled={offset <= -NEXT_EVENTS_DAY_RADIUS}
+                                style={[
+                                    styles.navCircle,
+                                    offset <= -NEXT_EVENTS_DAY_RADIUS ? styles.navDisabled : null,
+                                ]}
+                            />
+                            <NavButton
+                                icon={ChevronRightIcon}
+                                onPress={() => changeDate(1)}
+                                disabled={offset >= NEXT_EVENTS_DAY_RADIUS}
+                                style={[
+                                    styles.navCircle,
+                                    offset >= NEXT_EVENTS_DAY_RADIUS ? styles.navDisabled : null,
+                                ]}
+                            />
+                        </View>
+                    </View>
+                </ContentInset>
+
+                {collectionsForDay.length === 0 ? (
+                    <ContentInset>
+                        <View
+                            style={[
+                                styles.emptyCard,
+                                cardStyle(theme),
+                                {
+                                    borderRadius: t.radii.lg,
+                                    minHeight: cardHeight,
+                                },
+                            ]}
+                        >
+                            <Text style={[styles.emptyText, { color: t.colors.muted }]}>
+                                Rien pour aujourd'hui
+                            </Text>
+                        </View>
+                    </ContentInset>
+                ) : (
+                    <View key={offset}>
+                        <Animated.FlatList
+                            ref={listRef}
+                            data={collectionsForDay as CollectionItem[]}
+                            keyExtractor={(item) => item.id}
+                            horizontal
+                            showsHorizontalScrollIndicator={false}
+                            decelerationRate="fast"
+                            snapToInterval={Platform.OS === "web" ? undefined : snapInterval}
+                            snapToOffsets={Platform.OS === "web" ? undefined : snapOffsets}
+                            snapToAlignment="center"
+                            disableIntervalMomentum
+                            bounces={false}
+                            scrollEventThrottle={16}
+                            onScroll={scrollHandler}
+                            onScrollEndDrag={onScrollSettle}
+                            onMomentumScrollEnd={onScrollSettle}
+                            contentContainerStyle={{
+                                paddingHorizontal: sidePad,
+                                alignItems: "center",
+                            }}
+                            style={[
+                                { height: cardHeight },
+                                Platform.OS === "web"
+                                    ? ({
+                                          scrollSnapType: "x mandatory",
+                                          WebkitOverflowScrolling: "touch",
+                                      } as object)
+                                    : null,
+                            ]}
+                            renderItem={({ item, index }) => (
+                                <CollectionSlide
+                                    item={item}
+                                    index={index}
+                                    scrollX={scrollX}
+                                    cardWidth={cardWidth}
+                                    cardHeight={cardHeight}
+                                    snapInterval={snapInterval}
+                                    theme={theme}
+                                    imageUri={imageSource(item)}
+                                    isLast={index === collectionsForDay.length - 1}
+                                    onPress={() => setSelectedWasteTypeId(item.id)}
+                                />
+                            )}
+                        />
+
+                        <CollectionPagination
+                            count={collectionsForDay.length}
+                            scrollX={scrollX}
+                            snapInterval={snapInterval}
+                            activeColor={theme.colors.primary}
+                            inactiveColor={theme.colors.border}
+                            pageLabelColor={t.colors.muted}
+                        />
+                    </View>
+                )}
+
+                {showCalendarCta ? (
+                    <ContentInset>
+                        <Button
+                            onPress={openCalendar}
+                            style={[styles.cta, { borderRadius: t.radii.md }]}
+                        >
+                            Afficher le calendrier
+                        </Button>
+                    </ContentInset>
+                ) : null}
+            </View>
+
+            <ConsignesModal
+                visible={!!selectedWasteTypeId}
+                wasteTypeId={selectedWasteTypeId!}
+                onClose={() => setSelectedWasteTypeId(null)}
+            />
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    section: {
+        gap: 14,
+    },
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    sectionLabel: {
+        fontSize: 13,
+        fontWeight: "700",
+        letterSpacing: 0.6,
+    },
+    navRow: {
+        flexDirection: "row",
+        gap: 8,
+    },
+    navCircle: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+    },
+    navDisabled: {
+        opacity: 0.35,
+    },
+    slide: {
+        justifyContent: "center",
+    },
+    cardFrame: {
+        flex: 1,
+        overflow: "hidden",
+    },
+    cardPanel: {
+        flex: 1,
+        overflow: "hidden",
+        position: "relative",
+    },
+    cardContent: {
+        flex: 1,
+        zIndex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        paddingLeft: 14,
+        paddingRight: 12,
+        paddingVertical: 14,
+    },
+    wasteName: {
+        flex: 1,
+        fontSize: 22,
+        fontWeight: "800",
+        lineHeight: 28,
+    },
+    pagination: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        gap: 6,
+        marginTop: 10,
+        paddingHorizontal: SPACE.pageX,
+    },
+    dotBase: {
+        height: 6,
+        borderRadius: 3,
+    },
+    pageCount: {
+        marginLeft: 4,
+        fontSize: 12,
+        fontWeight: "600",
+    },
+    emptyCard: {
+        padding: 24,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    emptyText: {
+        fontSize: 14,
+        fontWeight: "600",
+    },
+    cta: {
+        height: SPACE.buttonH,
+    },
+});