/* global React, Icon, Badge, ModalOverlay, PageHeader, SectionHead, apiGet, apiPost, apiDelete, activeMembers, MEMBERS, MEMBER_CLASSES */
const { useState: useAvState, useEffect: useAvEffect, useMemo: useAvMemo, useRef: useAvRef, useCallback: useAvCallback } = React;
// when2meet, but for a recurring week. Members paint the times they are generally free;
// anyone can shade the same grid by how many of a chosen subset overlap.
//
// The grid's shape is not defined here — /api/availability hands down a descriptor
// (days, day window, slot length) from lib/availability-grid.js and everything below
// renders from it, so the two sides can never disagree about what a slot index means.
// See tasks/weekly-availability-heatmap.md.
// Heat ramp, coolest first. Deliberately restricted to the accent steps the Tweaks panel
// remaps (100/200/300/600) so the map follows a coral, steel, or mist accent rather than
// staying coral while the rest of the page changes.
const HEAT_STEPS = [
'var(--cream-100)',
'var(--coral-100)',
'var(--coral-200)',
'var(--coral-300)',
'var(--coral-600)',
];
function minuteLabel(minute, { compact = false } = {}) {
const hour24 = Math.floor(minute / 60);
const minutes = minute % 60;
const suffix = hour24 >= 12 ? 'PM' : 'AM';
const hour12 = hour24 % 12 === 0 ? 12 : hour24 % 12;
if (compact && minutes === 0) return `${hour12} ${suffix}`;
return `${hour12}:${String(minutes).padStart(2, '0')} ${suffix}`;
}
function slotStartMinute(grid, slotOfDay) {
return grid.dayStartMinute + slotOfDay * grid.slotMinutes;
}
function slotIndex(grid, dayIndex, slotOfDay) {
return dayIndex * grid.slotsPerDay + slotOfDay;
}
function describeSlot(grid, index) {
const dayIndex = Math.floor(index / grid.slotsPerDay);
const slotOfDay = index % grid.slotsPerDay;
const start = slotStartMinute(grid, slotOfDay);
return {
dayIndex,
slotOfDay,
day: grid.days[dayIndex],
label: `${grid.days[dayIndex].short} ${minuteLabel(start)}–${minuteLabel(start + grid.slotMinutes)}`,
};
}
// Contiguous same-day runs of equal head-count, best first. Equal-count runs are the
// honest unit: across one of them the exact same people are free, so "Tue 6:00–7:30 PM,
// 14 free" is a claim that holds for the whole window rather than only its peak.
function bestWindows(counts, grid, limit = 5) {
const runs = [];
for (let dayIndex = 0; dayIndex < grid.days.length; dayIndex += 1) {
let run = null;
for (let slotOfDay = 0; slotOfDay < grid.slotsPerDay; slotOfDay += 1) {
const count = counts[slotIndex(grid, dayIndex, slotOfDay)] || 0;
if (run && run.count === count) {
run.endMinute += grid.slotMinutes;
continue;
}
if (run && run.count > 0) runs.push(run);
run = {
dayIndex,
count,
startMinute: slotStartMinute(grid, slotOfDay),
endMinute: slotStartMinute(grid, slotOfDay) + grid.slotMinutes,
};
}
if (run && run.count > 0) runs.push(run);
}
return runs
.sort((a, b) => (b.count - a.count) || ((b.endMinute - b.startMinute) - (a.endMinute - a.startMinute)))
.slice(0, limit);
}
// Slot lists keyed by member, so a head-count is a map lookup per member rather than a
// scan of the whole response list per cell.
function slotsByMemberMap(responses) {
const map = new Map();
responses.forEach((response) => map.set(response.memberId, response.slots));
return map;
}
// Head-count per slot across a set of members. The subset filter changes constantly, so
// this recomputes on the client rather than round-tripping to the server.
function countAvailability(slotsByMember, memberIds, totalSlots) {
const totals = new Array(totalSlots).fill(0);
memberIds.forEach((memberId) => {
(slotsByMember.get(memberId) || []).forEach((index) => {
if (index >= 0 && index < totals.length) totals[index] += 1;
});
});
return totals;
}
// Position on the heat ramp. Scaled to the busiest cell in view, the way when2meet
// does it — an absolute scale reads as flat whenever nobody is free all at once, and
// the exact head-count is always a hover away.
function heatLevel(count, peak) {
if (!count || !peak) return 0;
return Math.min(HEAT_STEPS.length - 1, 1 + Math.floor((count / peak) * (HEAT_STEPS.length - 1.001)));
}
function withSlots(base, indices, fill) {
const next = new Set(base);
indices.forEach((index) => (fill ? next.add(index) : next.delete(index)));
return next;
}
// Every slot in the rectangle spanned by two cells — the days between their columns
// crossed with the times between their rows.
function slotsInBlock(grid, from, to) {
const a = describeSlot(grid, from);
const b = describeSlot(grid, to);
const indices = [];
for (let day = Math.min(a.dayIndex, b.dayIndex); day <= Math.max(a.dayIndex, b.dayIndex); day += 1) {
for (let slot = Math.min(a.slotOfDay, b.slotOfDay); slot <= Math.max(a.slotOfDay, b.slotOfDay); slot += 1) {
indices.push(slotIndex(grid, day, slot));
}
}
return indices;
}
function AvailabilityGrid({
grid, children, headerAction, onToggleDay, onToggleTime, className = '',
}) {
return (
);
}
// --- My availability ---------------------------------------------------------
function MyAvailability({ grid, saved, onSave, onClear, saving, editingFor }) {
const [draft, setDraft] = useAvState(() => new Set(saved ? saved.slots : []));
const [error, setError] = useAvState('');
// A paint gesture covers the rectangle between the cell it started on and the cell
// the pointer is over, which is how when2meet behaves and what "drag across Tue–Thu
// evenings" means. The value is decided by the first cell: press on a filled cell to
// erase, an empty one to fill.
//
// Each move recomputes from `base` — the draft as it was when the gesture began —
// rather than accumulating, so shrinking the rectangle takes back the cells it no
// longer covers. It also means a fast drag that jumps several cells between move
// events still paints everything in between, which a per-cell "paint what I touched"
// approach silently misses.
const gestureRef = useAvRef(null);
// Reset the draft whenever the saved row changes identity (a fresh load, a completed
// save, or an admin switching to a different member's schedule).
useAvEffect(() => {
setDraft(new Set(saved ? saved.slots : []));
}, [saved?.memberId, saved?.updatedAt, editingFor]);
useAvEffect(() => {
const commit = () => { gestureRef.current = null; };
// pointercancel is what the browser fires when it takes a touch over to pan the
// page (the phone grid is touch-action:pan-y so it can be scrolled past). The
// first cell was already painted on pointerdown for responsiveness, so put the
// draft back as it was — otherwise scrolling the grid on a phone silently flips
// whichever cell the finger happened to land on.
const cancel = () => {
const gesture = gestureRef.current;
gestureRef.current = null;
if (gesture) setDraft(gesture.base);
};
window.addEventListener('pointerup', commit);
window.addEventListener('pointercancel', cancel);
return () => {
window.removeEventListener('pointerup', commit);
window.removeEventListener('pointercancel', cancel);
};
}, []);
const savedSet = useAvMemo(() => new Set(saved ? saved.slots : []), [saved]);
const dirty = draft.size !== savedSet.size || [...draft].some((index) => !savedSet.has(index));
function paint(indices, fill) {
setDraft((current) => withSlots(current, indices, fill));
}
function startPaint(index, event) {
// Touch and pen implicitly capture the pointer on the element they went down on,
// which would keep every later pointermove targeted at that one cell and reduce a
// drag to a single tap. Handing the capture back restores normal hit-testing.
if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
event.currentTarget.releasePointerCapture(event.pointerId);
}
const fill = !draft.has(index);
gestureRef.current = { base: new Set(draft), anchor: index, fill, last: index };
paint([index], fill);
}
function extendPaint(index) {
const gesture = gestureRef.current;
// pointermove fires continuously, most of them inside the cell already handled.
if (!gesture || gesture.last === index) return;
gesture.last = index;
setDraft(withSlots(gesture.base, slotsInBlock(grid, gesture.anchor, index), gesture.fill));
}
function toggleDay(dayIndex) {
const indices = Array.from({ length: grid.slotsPerDay }, (_, slotOfDay) => slotIndex(grid, dayIndex, slotOfDay));
paint(indices, !indices.every((index) => draft.has(index)));
}
function toggleTime(slotOfDay) {
const indices = grid.days.map((day, dayIndex) => slotIndex(grid, dayIndex, slotOfDay));
paint(indices, !indices.every((index) => draft.has(index)));
}
function selectWeekdayBlock(startHour, endHour) {
const indices = [];
for (let dayIndex = 0; dayIndex < Math.min(5, grid.days.length); dayIndex += 1) {
for (let slotOfDay = 0; slotOfDay < grid.slotsPerDay; slotOfDay += 1) {
const start = slotStartMinute(grid, slotOfDay);
if (start >= startHour * 60 && start < endHour * 60) indices.push(slotIndex(grid, dayIndex, slotOfDay));
}
}
paint(indices, true);
}
// Monday is the day people actually fill in first; copying it across Tue–Fri turns a
// repeating class schedule into one gesture instead of four.
function copyMondayAcrossWeekdays() {
setDraft((current) => {
const next = new Set(current);
for (let slotOfDay = 0; slotOfDay < grid.slotsPerDay; slotOfDay += 1) {
const monday = current.has(slotIndex(grid, 0, slotOfDay));
for (let dayIndex = 1; dayIndex < Math.min(5, grid.days.length); dayIndex += 1) {
const index = slotIndex(grid, dayIndex, slotOfDay);
if (monday) next.add(index); else next.delete(index);
}
}
return next;
});
}
async function save() {
setError('');
try {
await onSave([...draft].sort((a, b) => a - b));
} catch (saveError) {
setError(saveError.message || 'Could not save your availability.');
}
}
async function clear() {
setError('');
try {
await onClear();
} catch (clearError) {
setError(clearError.message || 'Could not clear your availability.');
}
}
const hours = (draft.size * grid.slotMinutes) / 60;
return (
{saved
? `Last updated ${new Date(saved.updatedAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}`
: 'Your schedule is not on the heat map until you save it.'}
{saved && (
)}
Mark when you are generally free — a normal week, not a specific one.
Drag across cells to paint, click a day or a time label to toggle the whole
row or column.
);
}
// --- Group heat map ----------------------------------------------------------
// A shortcut that adds or removes a whole group from the explicit member selection.
// `state` is 'all' | 'some' | 'none' so the chip can show a group the viewer has since
// half-unpicked from the roster list below it.
function GroupChip({ label, ids, state, onToggle }) {
if (!ids.length) return null;
return (
);
}
function GroupHeatmap({ grid, responses, members, memberClasses, projects }) {
const roster = useAvMemo(() => activeMembers(members), [members]);
const [selectedIds, setSelectedIds] = useAvState(() => new Set(roster.map((member) => member.id)));
const [search, setSearch] = useAvState('');
const [pinnedSlot, setPinnedSlot] = useAvState(null);
const [hoverSlot, setHoverSlot] = useAvState(null);
// The roster arrives after this page mounts (App fetches /api/members in parallel),
// and members get added while it is open. Either way a member nobody has ever made a
// decision about starts counted — otherwise the heat map would quietly exclude the
// whole club on first paint. Anyone deliberately unchecked stays unchecked, because
// only ids never seen before are added back.
const seenMemberIdsRef = useAvRef(null);
useAvEffect(() => {
const known = new Set(roster.map((member) => member.id));
const seen = seenMemberIdsRef.current;
seenMemberIdsRef.current = known;
setSelectedIds((current) => {
const next = new Set([...current].filter((id) => known.has(id)));
roster.forEach((member) => {
if (!seen || !seen.has(member.id)) next.add(member.id);
});
const unchanged = next.size === current.size && [...next].every((id) => current.has(id));
return unchanged ? current : next;
});
}, [roster]);
const slotsByMember = useAvMemo(() => slotsByMemberMap(responses), [responses]);
const selectedMembers = useAvMemo(
() => roster.filter((member) => selectedIds.has(member.id)),
[roster, selectedIds]
);
const respondents = useAvMemo(
() => selectedMembers.filter((member) => slotsByMember.has(member.id)),
[selectedMembers, slotsByMember]
);
const waitingOn = useAvMemo(
() => selectedMembers.filter((member) => !slotsByMember.has(member.id)),
[selectedMembers, slotsByMember]
);
const counts = useAvMemo(
() => countAvailability(slotsByMember, respondents.map((member) => member.id), grid.totalSlots),
[respondents, slotsByMember, grid.totalSlots]
);
const peak = useAvMemo(() => counts.reduce((max, count) => Math.max(max, count), 0), [counts]);
const windows = useAvMemo(() => bestWindows(counts, grid), [counts, grid]);
const focusSlot = pinnedSlot ?? hoverSlot;
const focusFree = useAvMemo(() => {
if (focusSlot === null || focusSlot === undefined) return null;
const free = [];
const busy = [];
respondents.forEach((member) => {
((slotsByMember.get(member.id) || []).includes(focusSlot) ? free : busy).push(member);
});
return { free, busy };
}, [focusSlot, respondents, slotsByMember]);
function setGroup(ids, on) {
setSelectedIds((current) => {
const next = new Set(current);
ids.forEach((id) => (on ? next.add(id) : next.delete(id)));
return next;
});
}
function groupState(ids) {
const selected = ids.filter((id) => selectedIds.has(id)).length;
if (selected && selected === ids.length) return 'all';
return selected ? 'some' : 'none';
}
const groupShortcuts = useAvMemo(() => [
{ key: 'everyone', label: 'Everyone', ids: roster.map((member) => member.id) },
...memberClasses.map((group) => ({
key: `class:${group.id}`,
label: group.name,
ids: roster.filter((member) => (member.classIds || []).includes(group.id)).map((member) => member.id),
})),
...projects.map((project) => ({
key: `project:${project.id}`,
label: project.title || project.name,
ids: roster
.filter((member) => (project.memberships || []).some((ms) => ms.memberId === member.id))
.map((member) => member.id),
})),
], [roster, memberClasses, projects]);
const visibleRoster = useAvMemo(() => {
const needle = search.trim().toLowerCase();
if (!needle) return roster;
return roster.filter((member) => `${member.name} ${member.email} ${member.role}`.toLowerCase().includes(needle));
}, [roster, search]);
return (
Waiting on {waitingOn.length}{waitingOn.map((member) => member.name.split(' ')[0]).join(', ')}
)}
);
}
// --- Dashboard tile ----------------------------------------------------------
// The whole week at a glance: one 5px cell per slot, no labels, no interaction. Small
// enough to sit under the roster on the dashboard and still show where the club's
// evenings actually are. Faint rules at noon and 6 PM are the only orientation, since
// a time gutter at this scale is unreadable.
function MiniHeatmap({ grid, counts, peak }) {
const tickMinutes = [12 * 60, 18 * 60];
return (
Availability is stored against the club roster, and {currentUser?.email || 'your account'} is
not matched to a member yet. Ask an admin to add you on the Members page — the heat map is
still readable in the meantime.