{shown.map(p =>
);
}
// ── Pills ─────────────────────────────────────────────────────
function StatusPill({ status, onClick, fill = true }) {
const s = STATUSES.find(x => x.id === status);
const prev = React.useRef(status);
const [celebrate, setCelebrate] = React.useState(false);
React.useEffect(() => {
if (prev.current !== "done" && status === "done") {
setCelebrate(true);
const t = setTimeout(() => setCelebrate(false), 900);
prev.current = status;
return () => clearTimeout(t);
}
prev.current = status;
}, [status]);
if (!s) return null;
return (
{s.label}
{celebrate && (
)}
);
}
function PriorityPill({ prio, onClick, fill = true }) {
const p = PRIORITIES.find(x => x.id === prio);
if (!p) return null;
return (
{p.label}
);
}
// ── Popover ───────────────────────────────────────────────────
//
// Positioning rules:
// 1. Default: anchor's bottom edge + 4px (open downward).
// 2. If the popover would extend past the viewport's bottom AND there's
// room above the anchor, flip and open upward.
// 3. Clamp `left` so the popover never spills off the right edge.
// 4. Fallback: maxHeight + internal scroll so a popover that's too tall
// for either direction still works (e.g. very long picker on a short
// viewport).
//
// We do a two-pass layout: first render pops with the default position
// so the DOM exists, then a requestAnimationFrame callback measures the
// actual height and flips/clamps if needed.
function Popover({ anchor, children, onClose }) {
const [pos, setPos] = React.useState(null);
const popRef = React.useRef(null);
React.useEffect(() => {
if (!anchor) return;
function update() {
const r = anchor.getBoundingClientRect();
const vh = window.innerHeight;
const vw = window.innerWidth;
const ph = popRef.current ? popRef.current.offsetHeight : 0;
const minWidth = Math.max(r.width, 140);
const pw = popRef.current ? popRef.current.offsetWidth : minWidth;
// Safe gap from viewport edges. Used to be 8px, which left the
// calendar's right chevron flush against the screen edge on the
// Personal page when the Due chip sits in the rightmost column.
// 16px gives breathing room without wasting space on small screens.
const MARGIN = 16;
// Anchors that sit in the bottom 40% of the viewport open
// UPWARD by default. Catches the common case of bottom-pinned
// chrome (the .bulk-bar at bottom: 24px, the floating bug-report
// button, the connection chip) where there's barely any room
// below — and avoids the first-frame flash where ph=0 makes the
// post-measure flip skip on initial render. We use an estimated
// height (200px) on first render so the upward placement is
// approximately right immediately; the rAF re-measure refines.
const anchorIsLow = r.bottom > vh * 0.6;
let top;
if (anchorIsLow) {
const estimated = ph || 200;
top = r.top - estimated - 4;
if (top < MARGIN) {
// Not enough room above either — clamp so the popover sits
// fully inside the viewport and let internal scroll absorb
// any overflow.
top = Math.max(MARGIN, vh - estimated - MARGIN);
}
} else {
// Default: open below. Flip upward only if not enough room.
top = r.bottom + 4;
if (ph > 0 && top + ph > vh - MARGIN) {
const upTop = r.top - ph - 4;
if (upTop >= MARGIN) {
top = upTop;
} else {
// Neither above nor below fits comfortably. Instead of
// pinning the popover to the viewport's top edge (which
// visually detaches it from the trigger), center it on
// the anchor's vertical midpoint and let internal scroll
// handle the height. This keeps the calendar near where
// the user clicked.
const anchorMid = r.top + r.height / 2;
top = Math.max(MARGIN, Math.min(vh - ph - MARGIN, anchorMid - ph / 2));
}
}
}
// Horizontal clamp — keep the popover inside the viewport with
// a comfortable margin on either side.
let left = r.left;
if (left + pw > vw - MARGIN) left = Math.max(MARGIN, vw - pw - MARGIN);
if (left < MARGIN) left = MARGIN;
setPos({ top, left, width: minWidth });
}
update();
// Re-measure after the popover actually renders so the flip decision
// sees the real height (offsetHeight is 0 before first paint).
//
// Three rAFs back-to-back rather than one — children with deferred
// layout (e.g. MiniCalendar's 7-column grid) can still be measuring
// 140px (the bare minWidth) on the first rAF and only settle to
// their true 254px on the second or third frame. Without the chain
// the horizontal clamp uses pw=minWidth=140, decides no clamp is
// needed, and the popover ends up shifted ~80px past the right
// viewport edge — the "Due cannot be set" symptom in BG_94404F77F9.
const rafs = [];
function chainUpdate() {
update();
rafs.push(requestAnimationFrame(() => {
update();
rafs.push(requestAnimationFrame(update));
}));
}
rafs.push(requestAnimationFrame(chainUpdate));
// Belt-and-braces: as soon as the popover (or any of its content)
// resizes, re-run the position calculation. This catches cases where
// images, fonts, or async-rendered subcomponents change the
// popover's measured dimensions AFTER the rAF chain has settled.
let ro = null;
let roFirst = true;
const RO = typeof window !== "undefined" ? window.ResizeObserver : null;
if (RO) {
ro = new RO(() => {
// Skip the very first callback (it fires synchronously on
// observe()) so we don't double-run update().
if (roFirst) { roFirst = false; return; }
update();
});
}
// Attach the observer once popRef.current is non-null. We can't
// attach inside the render path, so poll a couple of frames.
let attachTries = 0;
function tryAttachRO() {
if (!ro) return;
if (popRef.current) {
ro.observe(popRef.current);
return;
}
if (attachTries++ < 8) requestAnimationFrame(tryAttachRO);
}
requestAnimationFrame(tryAttachRO);
function close(e) { if (!anchor.contains(e.target)) onClose(); }
setTimeout(() => document.addEventListener("mousedown", close), 0);
window.addEventListener("scroll", update, true);
window.addEventListener("resize", update);
return () => {
for (const id of rafs) cancelAnimationFrame(id);
if (ro) ro.disconnect();
document.removeEventListener("mousedown", close);
window.removeEventListener("scroll", update, true);
window.removeEventListener("resize", update);
};
}, [anchor]);
if (!pos) return null;
return ReactDOM.createPortal(
e.stopPropagation()}>
{children}
,
document.body
);
}
Object.assign(window, { Icon, Icons, Avatar, AvatarStack, StatusPill, PriorityPill, Popover });