@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/header/Header.tsx

@@ -1,391 +1,415 @@
-import { Bell, ChevronLeftIcon, User } from "lucide-react-native";
-import {
-    Image,
-    Pressable,
-    StyleSheet,
-    View,
-    type ImageStyle,
-} from "react-native";
-import { useTheme } from "../../contexts/ThemeContext";
-import { useWasto } from "../../contexts/WastoContext";
-import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
-import { Title } from "../title/Title";
-import { Theme } from "../../types/Theme";
-import { useMemo, type ReactNode } from "react";
-import { resolveTheme } from "../../helpers/themeStyles";
-import { useAnnouncements } from "../../contexts/AnnouncementsContext";
-import { hapticSelection } from "../../helpers/haptics";
-import { SPACE } from "../../helpers/layout";
-import { SYSTEM_ROUTES } from "../../helpers/systemRoutes";
-import { useAppNavigation } from "../../navigation/NavigationContext";
-import { publicMediaUrl } from "../../helpers/publicMediaUrl";
-
-export type AppHeaderSlot = "left" | "center" | "right";
-
-export type AppHeaderLogoElement = {
-    id: string;
-    type: "logo";
-    slot: AppHeaderSlot;
-    sourceType: "url" | "media";
-    url?: string;
-    mediaId?: string;
-};
-
-export type AppHeaderTitleElement = {
-    id: string;
-    type: "title";
-    slot: AppHeaderSlot;
-    useScreenTitle?: boolean;
-    text?: string;
-};
-
-export type AppHeaderActionElement = {
-    id: string;
-    type: "action";
-    slot: AppHeaderSlot;
-    icon: string;
-    label?: string;
-    action: "navigate" | "back";
-    href?: string;
-};
-
-export type AppHeaderElement =
-    | AppHeaderLogoElement
-    | AppHeaderTitleElement
-    | AppHeaderActionElement;
-
-export type AppHeaderConfig = {
-    elements: AppHeaderElement[];
-};
-
-export type HeaderProps = {
-    readonly options: { title?: string; headerBackVisible?: boolean };
-    readonly route: { name: string };
-    readonly navigation: {
-        canGoBack: () => boolean;
-        goBack: () => void;
-    };
-    /** Flotte au-dessus du contenu (ex. carte) : fond transparent. */
-    readonly overlay?: boolean;
-    /** Config layout (`header.elements`) — logo / titre / actions. */
-    readonly headerConfig?: AppHeaderConfig | null;
-};
-
-function resolveLogoUri(
-    apiUrl: string,
-    el: AppHeaderLogoElement,
-): string | null {
-    if (el.sourceType === "media") {
-        return publicMediaUrl(apiUrl, el.mediaId);
-    }
-    const url = (el.url || "").trim();
-    return url || null;
-}
-
-function HeaderLogo({
-    element,
-}: {
-    readonly element: AppHeaderLogoElement;
-}): ReactNode {
-    const { apiUrl } = useWasto();
-    const uri = resolveLogoUri(apiUrl, element);
-    if (!uri) return null;
-    return (
-        <Image
-            source={{ uri }}
-            style={styles.logo as ImageStyle}
-            resizeMode="contain"
-            accessibilityLabel="Logo"
-        />
-    );
-}
-
-function HeaderActionButton({
-    onPress,
-    accessibilityLabel,
-    children,
-    themedStyles,
-    borderRadius,
-}: {
-    readonly onPress: () => void;
-    readonly accessibilityLabel: string;
-    readonly children: ReactNode;
-    readonly themedStyles: ReturnType<typeof createThemedStyles>;
-    readonly borderRadius: number;
-}): ReactNode {
-    return (
-        <Pressable
-            onPress={onPress}
-            style={[styles.iconBtn, themedStyles.iconBtn, { borderRadius }]}
-            accessibilityLabel={accessibilityLabel}
-        >
-            {children}
-        </Pressable>
-    );
-}
-
-export function Header({
-    options,
-    route,
-    navigation,
-    overlay = false,
-    headerConfig,
-}: HeaderProps): ReactNode {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const themedStyles = createThemedStyles(theme);
-    const topInset = useSafeAreaPadding(["top"]);
-    const { hasUnread } = useAnnouncements();
-    const { push } = useAppNavigation();
-
-    const screenTitle = useMemo(
-        () => options.title ?? route.name,
-        [options.title, route.name],
-    );
-
-    const elements = headerConfig?.elements ?? [];
-    const hasCustom = elements.length > 0;
-    const hasCustomActions = elements.some((el) => el.type === "action");
-
-    const bySlot = useMemo(() => {
-        const left: AppHeaderElement[] = [];
-        const center: AppHeaderElement[] = [];
-        const right: AppHeaderElement[] = [];
-        for (const el of elements) {
-            if (el.slot === "center") center.push(el);
-            else if (el.slot === "right") right.push(el);
-            else left.push(el);
-        }
-        return { left, center, right };
-    }, [elements]);
-
-    const onBell = async () => {
-        await hapticSelection();
-        push(SYSTEM_ROUTES.notifications);
-    };
-
-    const onProfile = async () => {
-        await hapticSelection();
-        push(SYSTEM_ROUTES.profile);
-    };
-
-    const renderElement = (el: AppHeaderElement): ReactNode => {
-        if (el.type === "logo") {
-            return <HeaderLogo key={el.id} element={el} />;
-        }
-        if (el.type === "title") {
-            const text =
-                el.useScreenTitle !== false
-                    ? screenTitle
-                    : (el.text || "").trim() || screenTitle;
-            return <Title key={el.id} text={text} level="1" />;
-        }
-        // action
-        const onPress = async () => {
-            await hapticSelection();
-            if (el.action === "back") {
-                if (navigation.canGoBack()) navigation.goBack();
-                return;
-            }
-            const href = (el.href || "").trim();
-            if (href) push(href);
-        };
-        const label = el.label?.trim() || el.icon || "Action";
-        // Icônes système connues (bell / person) — le reste tombe sur Bell.
-        const Icon =
-            el.icon === "person" || el.icon === "users"
-                ? User
-                : Bell;
-        return (
-            <HeaderActionButton
-                key={el.id}
-                onPress={onPress}
-                accessibilityLabel={label}
-                themedStyles={themedStyles}
-                borderRadius={t.radii.pill}
-            >
-                <Icon size={SPACE.iconGlyph} color={theme.colors.primary} />
-                {el.icon === "bell" && hasUnread ? (
-                    <View
-                        style={[
-                            styles.badge,
-                            { backgroundColor: theme.colors.error },
-                        ]}
-                    />
-                ) : null}
-            </HeaderActionButton>
-        );
-    };
-
-    const showBack =
-        navigation.canGoBack() && options.headerBackVisible !== false;
-
-    const defaultActions = (
-        <>
-            <HeaderActionButton
-                onPress={onBell}
-                accessibilityLabel="Notifications"
-                themedStyles={themedStyles}
-                borderRadius={t.radii.pill}
-            >
-                <Bell size={SPACE.iconGlyph} color={theme.colors.primary} />
-                {hasUnread ? (
-                    <View
-                        style={[
-                            styles.badge,
-                            { backgroundColor: theme.colors.error },
-                        ]}
-                    />
-                ) : null}
-            </HeaderActionButton>
-            <HeaderActionButton
-                onPress={onProfile}
-                accessibilityLabel="Profil"
-                themedStyles={themedStyles}
-                borderRadius={t.radii.pill}
-            >
-                <User size={SPACE.iconGlyph} color={theme.colors.primary} />
-            </HeaderActionButton>
-        </>
-    );
-
-    return (
-        <View
-            style={[
-                styles.headerWrap,
-                overlay ? undefined : themedStyles.headerWrap,
-                topInset,
-            ]}
-            pointerEvents="box-none"
-        >
-            <View style={styles.header} pointerEvents="box-none">
-                {hasCustom ? (
-                    <>
-                        <View style={styles.slotLeft} pointerEvents="box-none">
-                            {showBack ? (
-                                <HeaderActionButton
-                                    onPress={() => navigation.goBack()}
-                                    accessibilityLabel="Retour"
-                                    themedStyles={themedStyles}
-                                    borderRadius={t.radii.pill}
-                                >
-                                    <ChevronLeftIcon
-                                        size={SPACE.iconGlyph}
-                                        color={theme.colors.onSurface}
-                                    />
-                                </HeaderActionButton>
-                            ) : null}
-                            {bySlot.left.map(renderElement)}
-                        </View>
-                        <View
-                            style={styles.slotCenter}
-                            pointerEvents="box-none"
-                        >
-                            {bySlot.center.map(renderElement)}
-                        </View>
-                        <View style={styles.slotRight} pointerEvents="box-none">
-                            {bySlot.right.map(renderElement)}
-                            {!hasCustomActions ? defaultActions : null}
-                        </View>
-                    </>
-                ) : (
-                    <>
-                        <View style={styles.left} pointerEvents="box-none">
-                            {showBack ? (
-                                <HeaderActionButton
-                                    onPress={() => navigation.goBack()}
-                                    accessibilityLabel="Retour"
-                                    themedStyles={themedStyles}
-                                    borderRadius={t.radii.pill}
-                                >
-                                    <ChevronLeftIcon
-                                        size={SPACE.iconGlyph}
-                                        color={theme.colors.onSurface}
-                                    />
-                                </HeaderActionButton>
-                            ) : null}
-                            <Title text={screenTitle} level="1" />
-                        </View>
-                        <View style={styles.actions}>{defaultActions}</View>
-                    </>
-                )}
-            </View>
-        </View>
-    );
-}
-
-const createThemedStyles = (theme: Theme) =>
-    StyleSheet.create({
-        headerWrap: {
-            backgroundColor: theme.colors.background,
-        },
-        iconBtn: {
-            backgroundColor: theme.colors.surface,
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-        },
-    });
-
-const styles = StyleSheet.create({
-    headerWrap: {},
-    header: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        paddingHorizontal: SPACE.pageX,
-        paddingVertical: 12,
-        gap: 10,
-        minHeight: 56,
-    },
-    left: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 10,
-        flex: 1,
-    },
-    slotLeft: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 10,
-        flexShrink: 1,
-        minWidth: 0,
-    },
-    slotCenter: {
-        flex: 1,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 8,
-        minWidth: 0,
-    },
-    slotRight: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 8,
-        flexShrink: 0,
-    },
-    actions: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 8,
-    },
-    iconBtn: {
-        width: SPACE.iconHit,
-        height: SPACE.iconHit,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    badge: {
-        position: "absolute",
-        top: 4,
-        right: 4,
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-    },
-    logo: {
-        height: 32,
-        width: 120,
-        maxWidth: 160,
-    },
-});
+import { Bell, ChevronLeftIcon, User } from "lucide-react-native";
+import {
+    Image,
+    Pressable,
+    StyleSheet,
+    View,
+    type ImageStyle,
+} from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useWasto } from "../../contexts/WastoContext";
+import { useSafeAreaPadding } from "../../helpers/useSafeAreaPadding";
+import { Title } from "../title/Title";
+import { Theme } from "../../types/Theme";
+import { useMemo, type ReactNode } from "react";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { useAnnouncements } from "../../contexts/AnnouncementsContext";
+import { hapticSelection } from "../../helpers/haptics";
+import { SPACE } from "../../helpers/layout";
+import { SYSTEM_ROUTES } from "../../helpers/systemRoutes";
+import { useAppNavigation } from "../../navigation/NavigationContext";
+import { publicMediaUrl } from "../../helpers/publicMediaUrl";
+
+export type AppHeaderSlot = "left" | "center" | "right";
+
+export type AppHeaderLogoElement = {
+    id: string;
+    type: "logo";
+    slot: AppHeaderSlot;
+    sourceType: "url" | "media";
+    url?: string;
+    mediaId?: string;
+};
+
+export type AppHeaderTitleElement = {
+    id: string;
+    type: "title";
+    slot: AppHeaderSlot;
+    useScreenTitle?: boolean;
+    text?: string;
+};
+
+export type AppHeaderActionElement = {
+    id: string;
+    type: "action";
+    slot: AppHeaderSlot;
+    icon: string;
+    label?: string;
+    action: "navigate" | "back";
+    href?: string;
+};
+
+export type AppHeaderElement =
+    | AppHeaderLogoElement
+    | AppHeaderTitleElement
+    | AppHeaderActionElement;
+
+export type AppHeaderConfig = {
+    elements: AppHeaderElement[];
+};
+
+/** Actions standard (notifications + profil) pour navbar sans titre. */
+export const DEFAULT_HEADER_ACTIONS: readonly AppHeaderActionElement[] = [
+    {
+        id: "notifications",
+        type: "action",
+        slot: "right",
+        icon: "bell",
+        action: "navigate",
+        href: SYSTEM_ROUTES.notifications,
+    },
+    {
+        id: "profile",
+        type: "action",
+        slot: "right",
+        icon: "person",
+        action: "navigate",
+        href: SYSTEM_ROUTES.profile,
+    },
+];
+
+export type HeaderProps = {
+    readonly options: { title?: string; headerBackVisible?: boolean };
+    readonly route: { name: string };
+    readonly navigation: {
+        canGoBack: () => boolean;
+        goBack: () => void;
+    };
+    /** Flotte au-dessus du contenu (ex. carte) : fond transparent. */
+    readonly overlay?: boolean;
+    /**
+     * Config layout (`header.elements`) — logo / actions.
+     * Si fournie (même vide), le fallback titre d’écran ne s’applique pas.
+     */
+    readonly headerConfig?: AppHeaderConfig | null;
+};
+
+function resolveLogoUri(
+    apiUrl: string,
+    el: AppHeaderLogoElement,
+): string | null {
+    if (el.sourceType === "media") {
+        return publicMediaUrl(apiUrl, el.mediaId);
+    }
+    const url = (el.url || "").trim();
+    return url || null;
+}
+
+function HeaderLogo({
+    element,
+}: {
+    readonly element: AppHeaderLogoElement;
+}): ReactNode {
+    const { apiUrl } = useWasto();
+    const uri = resolveLogoUri(apiUrl, element);
+    if (!uri) return null;
+    return (
+        <Image
+            source={{ uri }}
+            style={styles.logo as ImageStyle}
+            resizeMode="contain"
+            accessibilityLabel="Logo"
+        />
+    );
+}
+
+function HeaderActionButton({
+    onPress,
+    accessibilityLabel,
+    children,
+    themedStyles,
+    borderRadius,
+}: {
+    readonly onPress: () => void;
+    readonly accessibilityLabel: string;
+    readonly children: ReactNode;
+    readonly themedStyles: ReturnType<typeof createThemedStyles>;
+    readonly borderRadius: number;
+}): ReactNode {
+    return (
+        <Pressable
+            onPress={onPress}
+            style={[styles.iconBtn, themedStyles.iconBtn, { borderRadius }]}
+            accessibilityLabel={accessibilityLabel}
+        >
+            {children}
+        </Pressable>
+    );
+}
+
+export function Header({
+    options,
+    route,
+    navigation,
+    overlay = false,
+    headerConfig,
+}: HeaderProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const topInset = useSafeAreaPadding(["top"]);
+    const { hasUnread } = useAnnouncements();
+    const { push } = useAppNavigation();
+
+    const screenTitle = useMemo(
+        () => options.title ?? route.name,
+        [options.title, route.name],
+    );
+
+    /** Config explicite → navbar (logo/actions), jamais le fallback titre d’écran. */
+    const hasExplicitConfig = headerConfig != null;
+    const elements = useMemo(() => {
+        const raw = headerConfig?.elements ?? [];
+        // `type: "title"` est déprécié (navbar uniquement).
+        return raw.filter((el) => el.type !== "title");
+    }, [headerConfig]);
+    const hasCustomActions = elements.some((el) => el.type === "action");
+
+    const bySlot = useMemo(() => {
+        const left: AppHeaderElement[] = [];
+        const center: AppHeaderElement[] = [];
+        const right: AppHeaderElement[] = [];
+        for (const el of elements) {
+            if (el.slot === "center") center.push(el);
+            else if (el.slot === "right") right.push(el);
+            else left.push(el);
+        }
+        return { left, center, right };
+    }, [elements]);
+
+    const onBell = async () => {
+        await hapticSelection();
+        push(SYSTEM_ROUTES.notifications);
+    };
+
+    const onProfile = async () => {
+        await hapticSelection();
+        push(SYSTEM_ROUTES.profile);
+    };
+
+    const renderElement = (el: AppHeaderElement): ReactNode => {
+        if (el.type === "logo") {
+            return <HeaderLogo key={el.id} element={el} />;
+        }
+        if (el.type === "title") {
+            return null;
+        }
+        // action
+        const onPress = async () => {
+            await hapticSelection();
+            if (el.action === "back") {
+                if (navigation.canGoBack()) navigation.goBack();
+                return;
+            }
+            const href = (el.href || "").trim();
+            if (href) push(href);
+        };
+        const label = el.label?.trim() || el.icon || "Action";
+        // Icônes système connues (bell / person) — le reste tombe sur Bell.
+        const Icon =
+            el.icon === "person" || el.icon === "users"
+                ? User
+                : Bell;
+        return (
+            <HeaderActionButton
+                key={el.id}
+                onPress={onPress}
+                accessibilityLabel={label}
+                themedStyles={themedStyles}
+                borderRadius={t.radii.pill}
+            >
+                <Icon size={SPACE.iconGlyph} color={theme.colors.primary} />
+                {el.icon === "bell" && hasUnread ? (
+                    <View
+                        style={[
+                            styles.badge,
+                            { backgroundColor: theme.colors.error },
+                        ]}
+                    />
+                ) : null}
+            </HeaderActionButton>
+        );
+    };
+
+    const showBack =
+        navigation.canGoBack() && options.headerBackVisible !== false;
+
+    const defaultActions = (
+        <>
+            <HeaderActionButton
+                onPress={onBell}
+                accessibilityLabel="Notifications"
+                themedStyles={themedStyles}
+                borderRadius={t.radii.pill}
+            >
+                <Bell size={SPACE.iconGlyph} color={theme.colors.primary} />
+                {hasUnread ? (
+                    <View
+                        style={[
+                            styles.badge,
+                            { backgroundColor: theme.colors.error },
+                        ]}
+                    />
+                ) : null}
+            </HeaderActionButton>
+            <HeaderActionButton
+                onPress={onProfile}
+                accessibilityLabel="Profil"
+                themedStyles={themedStyles}
+                borderRadius={t.radii.pill}
+            >
+                <User size={SPACE.iconGlyph} color={theme.colors.primary} />
+            </HeaderActionButton>
+        </>
+    );
+
+    return (
+        <View
+            style={[
+                styles.headerWrap,
+                overlay ? undefined : themedStyles.headerWrap,
+                topInset,
+            ]}
+            pointerEvents="box-none"
+        >
+            <View style={styles.header} pointerEvents="box-none">
+                {hasExplicitConfig ? (
+                    <>
+                        <View style={styles.slotLeft} pointerEvents="box-none">
+                            {showBack ? (
+                                <HeaderActionButton
+                                    onPress={() => navigation.goBack()}
+                                    accessibilityLabel="Retour"
+                                    themedStyles={themedStyles}
+                                    borderRadius={t.radii.pill}
+                                >
+                                    <ChevronLeftIcon
+                                        size={SPACE.iconGlyph}
+                                        color={theme.colors.onSurface}
+                                    />
+                                </HeaderActionButton>
+                            ) : null}
+                            {bySlot.left.map(renderElement)}
+                        </View>
+                        <View
+                            style={styles.slotCenter}
+                            pointerEvents="box-none"
+                        >
+                            {bySlot.center.map(renderElement)}
+                        </View>
+                        <View style={styles.slotRight} pointerEvents="box-none">
+                            {bySlot.right.map(renderElement)}
+                            {!hasCustomActions ? defaultActions : null}
+                        </View>
+                    </>
+                ) : (
+                    <>
+                        <View style={styles.left} pointerEvents="box-none">
+                            {showBack ? (
+                                <HeaderActionButton
+                                    onPress={() => navigation.goBack()}
+                                    accessibilityLabel="Retour"
+                                    themedStyles={themedStyles}
+                                    borderRadius={t.radii.pill}
+                                >
+                                    <ChevronLeftIcon
+                                        size={SPACE.iconGlyph}
+                                        color={theme.colors.onSurface}
+                                    />
+                                </HeaderActionButton>
+                            ) : null}
+                            <Title text={screenTitle} level="1" />
+                        </View>
+                        <View style={styles.actions}>{defaultActions}</View>
+                    </>
+                )}
+            </View>
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        headerWrap: {
+            backgroundColor: theme.colors.background,
+        },
+        iconBtn: {
+            backgroundColor: theme.colors.surface,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+        },
+    });
+
+const styles = StyleSheet.create({
+    headerWrap: {},
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: SPACE.pageX,
+        paddingVertical: 12,
+        gap: 10,
+        minHeight: 56,
+    },
+    left: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        flex: 1,
+    },
+    slotLeft: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    slotCenter: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        minWidth: 0,
+    },
+    slotRight: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        flexShrink: 0,
+    },
+    actions: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    iconBtn: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    badge: {
+        position: "absolute",
+        top: 4,
+        right: 4,
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+    },
+    logo: {
+        height: 32,
+        width: 120,
+        maxWidth: 160,
+    },
+});