// PAGE CUEILLETTE — panier de récolte du mois, groupé par zone du jardin d'Opio,
// en checklist cochable. Logique pure dans components/cueillette.js (buildPanier,
// clés) ; ici : rendu + localStorage (clé mensuelle → repart vierge chaque mois).
//
// Page volontairement ABSENTE de la barre de nav — on y accède par la ligne
// « À récolter ce mois-ci » de l'Accueil et le bandeau de zone du Catalogue.
// Pensée téléphone en main, debout dans le jardin : toute la ligne coche, le
// nom seul ouvre la fiche.
(function () {
// Une ligne cochable : case + nom (→ fiche) + latin. Cliquer la ligne coche ;
// cliquer le nom ouvre la fiche (stopPropagation).
function LigneCueillette({ p, coche, onToggle, onOpen, isMobile }) {
return (
{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onToggle(); } }}
style={{
display: "flex", alignItems: "center", gap: isMobile ? 14 : 18, cursor: "pointer",
padding: isMobile ? "13px 2px" : "14px 4px", borderBottom: "1px solid var(--line)",
opacity: coche ? 0.55 : 1,
}}>
{coche ? "✓" : ""}
{ e.stopPropagation(); onOpen(p.id); }}
className="h-display"
style={{
background: "none", border: "none", padding: 0, cursor: "pointer",
fontSize: isMobile ? 18 : 21, color: "var(--ink)", textAlign: "left",
textDecoration: coche ? "line-through" : "none", textDecorationThickness: 1,
}}>
{p.nom}
{p.latin && (
{p.latin}
)}
);
}
function Cueillette({ setRoute, setPlantId }) {
const isMobile = useMobile();
const pad = isMobile ? "0 20px" : "0 40px";
const moisNom = window.MOIS_FR[new Date().getMonth()];
const panier = React.useMemo(() => window.buildPanier(window.PLANTS || [], moisNom), [moisNom]);
const storageKey = window.cueilletteStorageKey();
const [coches, setCoches] = React.useState(() => {
try { return new Set(JSON.parse(localStorage.getItem(storageKey) || "[]")); }
catch { return new Set(); }
});
// Purge des paniers des mois passés (la clé courante porte le mois).
React.useEffect(() => {
try {
for (let i = localStorage.length - 1; i >= 0; i--) {
const k = localStorage.key(i);
if (k && k.indexOf("cueillette-") === 0 && k !== storageKey) localStorage.removeItem(k);
}
} catch {}
}, [storageKey]);
const toggle = (key) => setCoches((prev) => {
const next = new Set(prev);
if (next.has(key)) next.delete(key); else next.add(key);
try { localStorage.setItem(storageKey, JSON.stringify([...next])); } catch {}
return next;
});
const goFiche = (id) => { setPlantId(id); setRoute("fiche"); };
// Compteur : ne compte que les clés encore présentes dans le panier du mois
// (une plante dé-taguée entre-temps ne fausse pas le total).
const clesDuMois = [
...panier.zones.flatMap((g) => g.items.map((p) => window.cueilletteItemKey(p.id, g.zone))),
...panier.horsZone.map((p) => window.cueilletteItemKey(p.id)),
];
const faites = clesDuMois.filter((k) => coches.has(k)).length;
const Groupe = ({ titre, items, zone }) => (
{titre}
{items.length}
{items.map((p) => {
const k = window.cueilletteItemKey(p.id, zone);
return
toggle(k)} onOpen={goFiche} isMobile={isMobile} />;
})}
);
return (
{/* En-tête */}
Cueillette · {moisNom}
Le panier du mois .
{!isMobile && panier.total > 0 && (
La tournée de récolte de {moisNom.toLowerCase()}, zone par zone — cochez au fil de la cueillette, le panier se souvient jusqu'à la fin du mois.
)}
{panier.total > 0 && (
{faites} / {panier.total} cueillie{faites > 1 ? "s" : ""}
)}
{/* Checklist par zone (colonne de lecture bornée, comme la prose des fiches) */}
{panier.total === 0 ? (
Rien à cueillir en {moisNom.toLowerCase()} — le jardin dort, le recueil aussi.
) : (
{panier.zones.map((g) =>
)}
);
}
window.Cueillette = Cueillette;
})();