);
}
/* P13 — Permanent mode indicator. Sits between the toolbar and the grid.
Tells the user exactly what they're looking at:
- Active preset name + colored dot
- How many calendars are visible
- Hour range (or "24h")
- Names of explicitly hidden calendars (so a missing event reads as
"Famille est éteint" not "où est mon dîner du dimanche ??")
- 1-click "Tout voir" reset when the view is restricted. */
function ModeIndicator({ modeLabel, modeColor, calendarsActive, calendarsTotal, hoursLabel, hiddenCalendars, onReset, isDefault }) {
const restricted = !isDefault;
return (
);
}
/* Pastille = color swatch + 3-state checkbox.
- "on" : filled with the color + check icon
- "off" : outlined only (no fill)
- "partial" : filled with the color + minus (used on group/subgroup parents
when only some leaves are on). */
function ColorSwatch({ color, state, onClick }) {
return (
);
}
function NodeMenu({ node, onOpenColor, onRename, onDelete, onClose }) {
return (
);
}
function MenuItem({ icon: Icon, children, danger, onClick }) {
return (
);
}
/* Color picker — calibrated palette + custom hex. Validates contrast in
dark mode with a soft warning when the picked color is too dark.
Rendered via PORTAL to escape parent overflow / stacking contexts (P17 fix).
Anchored to a trigger element, with auto-flip and shift to stay in viewport. */
function ColorPickerPopover({ anchor, current, onPick, onClose }) {
const [showCustom, setShowCustom] = useState(false);
const [hex, setHex] = useState("#8b5cf6");
const popRef = useRef(null);
const [pos, setPos] = useState({ top: -9999, left: -9999, ready: false });
// Reposition on open, scroll, resize. Anti-collision: flip side if not enough
// room; shift along the cross-axis to stay within viewport with a 12px pad.
useEffect(() => {
if (!anchor) return;
const PAD = 12;
const GAP = 8;
const compute = () => {
const a = anchor.getBoundingClientRect();
const pop = popRef.current;
const w = pop ? pop.offsetWidth : 256;
const h = pop ? pop.offsetHeight : 320;
const vw = window.innerWidth, vh = window.innerHeight;
// Preferred side: right of trigger. Flip to left if not enough room.
let left = a.right + GAP;
if (left + w + PAD > vw) {
// Try left side
const leftSide = a.left - GAP - w;
if (leftSide >= PAD) left = leftSide;
// Otherwise: clamp inside viewport on the right edge
else left = Math.max(PAD, vw - w - PAD);
}
// Preferred align: top of trigger. Shift up if it would overflow bottom.
let top = a.top;
if (top + h + PAD > vh) top = Math.max(PAD, vh - h - PAD);
if (top < PAD) top = PAD;
setPos({ top, left, ready: true });
};
compute();
// Recompute after layout settles (custom panel opening changes height)
const raf = requestAnimationFrame(compute);
window.addEventListener("scroll", compute, true);
window.addEventListener("resize", compute);
return () => {
cancelAnimationFrame(raf);
window.removeEventListener("scroll", compute, true);
window.removeEventListener("resize", compute);
};
}, [anchor, showCustom]);
// Click-outside / Escape close. Stops at trigger so the open toggle still works.
useEffect(() => {
const onDown = (e) => {
if (popRef.current && popRef.current.contains(e.target)) return;
if (anchor && anchor.contains(e.target)) return;
onClose?.();
};
const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
document.addEventListener("mousedown", onDown);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("mousedown", onDown);
document.removeEventListener("keydown", onKey);
};
}, [anchor, onClose]);
// Soft contrast warning: convert hex to luminance and warn if < 30%
const customWarn = (() => {
const c = hex.replace("#","");
if (c.length !== 6) return false;
const r = parseInt(c.slice(0,2), 16);
const g = parseInt(c.slice(2,4), 16);
const b = parseInt(c.slice(4,6), 16);
const lum = (0.299*r + 0.587*g + 0.114*b) / 255;
return lum < 0.3;
})();
const content = (
{/* Big, obvious color preview tile that opens the native picker.
The native is hidden underneath but covers
the whole tile, so the entire surface is the click target. */}
{/* Hex input row */}