// ============================================================
// today.jsx — the day's list. Hand-picked tasks and steps from the cards
// below; the first three are numbered (the day's big three). Rows are the
// live items, so a check-off or edit here shows on the card and vice versa.
// A type-to-add line sits under the open rows: new to-dos go onto a card's
// This week lane, and Tab makes the line a step of the task above it.
// Day tabs (Monday to Sunday) sit over the list: pick one to see and fill
// that day's plan, or drop a row on a tab to move it to that day. A day's
// plan joins Today that morning (see planToday in store.jsx).
// ============================================================
// The week the tabs show: this one, Monday to Sunday — or, once it has been
// closed early (the app's week already starts next Monday, say on a Sunday
// evening), next week, so there are days left to plan.
function tabWeek(state, today) {
const mon = window.addDaysISO(today, -window.weekdayIdx(today));
const next = window.addDaysISO(mon, 7);
const start = state.week.startISO === next ? next : mon;
return [0, 1, 2, 3, 4, 5, 6].map(n => window.addDaysISO(start, n));
}
const dayName = (iso, weekday) => new Date(iso + "T00:00:00").toLocaleDateString("en-US", { weekday });
function Today() {
const { state, dispatch } = window.useFocusStore();
const today = window.todayISO();
const week = tabWeek(state, today);
// today stays reachable when the tabs show next week
const tabs = week.includes(today) ? week : [today, ...week];
// the day on screen: one picked from the tabs, else Today. A picked day
// that has come round (a page left open overnight) is just Today.
const [picked, setPicked] = React.useState(null);
const day = picked && picked > today && week.includes(picked) ? picked : today;
const isToday = day === today;
const rows = window.selDay(state, day);
// drop : null | insertion index; tabOver : the tab a drag is over
const [drop, setDrop] = React.useState(null);
const [tabOver, setTabOver] = React.useState(null);
const [dragKey, setDragKey] = React.useState(null);
const ref = React.useRef(null);
const doneCount = rows.filter(r => r.done).length;
const dateLabel = new Date(day + "T00:00:00").toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" });
function startDrag(e, r) {
e.stopPropagation();
// one kind of drag at a time — clear the card-level globals
window.DRAG = { taskId: null }; window.SUBDRAG = null; window.DRAGCARD = null;
window.TODAYDRAG = { key: r.key, taskId: r.taskId, subId: r.subId, day };
setDragKey(r.key);
e.dataTransfer.effectAllowed = "move";
try { e.dataTransfer.setData("text/plain", r.key); } catch (x) {}
}
function endDrag() {
window.TODAYDRAG = null; window.SUBDRAG = null; window.DRAG = { taskId: null };
setDragKey(null); setDrop(null); setTabOver(null);
}
// Anything draggable in the app can land here: a row of this list
// (reorder), a task row, or a step row (both add). Card drags carry their
// own globals.
function incoming() {
if (window.TODAYDRAG) return window.TODAYDRAG;
if (window.SUBDRAG) return { taskId: window.SUBDRAG.taskId, subId: window.SUBDRAG.subId };
if (window.DRAG && window.DRAG.taskId) return { taskId: window.DRAG.taskId, subId: null };
return null;
}
// The action that lands drag `d` on day `target` at `toIndex` (null: the
// end), or null when it can't land there: a day gone by, a habit on a day
// ahead (habits keep no plan day), or a Today row onto the Today tab.
function landing(d, target, toIndex) {
if (!d || target < today) return null;
if (target === today) {
if (d.key && d.day === today) return toIndex == null ? null : { type: "TODAY_MOVE", key: d.key, toIndex };
return { type: "TODAY_ADD", taskId: d.taskId, subId: d.subId, toIndex };
}
if (!d.subId && state.projects.some(p => p.tasks.some(t => t.id === d.taskId && t.type === "habit"))) return null;
return { type: "PLAN_ADD", taskId: d.taskId, subId: d.subId, day: target, toIndex };
}
function computeDrop(e) {
const list = ref.current;
if (!list) return 0;
const rowEls = [...list.querySelectorAll(":scope > [data-row]")];
for (let i = 0; i < rowEls.length; i++) {
const r = rowEls[i].getBoundingClientRect();
if (e.clientY < r.top + r.height / 2) return i;
}
return rowEls.length;
}
function onDragOver(e) {
if (!landing(incoming(), day, 0)) return;
e.preventDefault();
setDrop(computeDrop(e));
}
function onDrop(e) {
// recompute from the drop event — the cursor may have moved since the
// last dragover, and stale hover state must never pick the slot
const act = landing(incoming(), day, computeDrop(e));
setDrop(null);
if (!act) return;
e.preventDefault();
e.stopPropagation();
dispatch(act);
endDrag();
}
// A tab takes a drop too: the row goes on the end of that day's list, and
// the tab on screen stays put, so a run of rows can be sent out in turn.
// Its events stop here, so the list below shows no drop line meanwhile.
function tabDragOver(e, iso) {
e.stopPropagation();
setDrop(null);
if (!landing(incoming(), iso, null)) return;
e.preventDefault();
setTabOver(iso);
}
function tabDrop(e, iso) {
e.stopPropagation();
const act = landing(incoming(), iso, null);
setTabOver(null);
if (!act) return;
e.preventDefault();
dispatch(act);
endDrag();
}
// Open rows come first (the store keeps them there); the add line sits
// between them and the finished pile. A step right under its own task
// (or under a sibling step that is) indents like an outline.
const split = rows.findIndex(r => r.sortDone);
const openCount = split < 0 ? rows.length : split;
const nested = [];
rows.forEach((r, i) => {
const prev = rows[i - 1];
nested[i] = !!(r.sub && prev && prev.taskId === r.taskId && (!prev.sub || nested[i - 1]));
});
// One keyed list, add line included: a row crossing into the finished pile
// is moved, not rebuilt, so it keeps keyboard focus.
// the add line is keyed by day, so a draft or a pending step doesn't follow
// the tabs to another day
const items = rows.map((r, i) => renderRow(r, i));
if (state.projects.length > 0)
items.splice(openCount, 0, );
if (rows.length === 0) items.unshift(
{isToday
? <>Nothing picked yet — type one in, hit ☀ on any task or step below, or drag one up here.
: <>Nothing planned yet — type one in, or drag a task or step here or onto this tab.}
{tabs.map(iso => {
const past = iso < today, on = iso === day;
// open rows waiting on a day ahead, as a small count on its tab
const waiting = iso > today ? window.selDay(state, iso).filter(r => !r.done).length : 0;
const date = new Date(iso + "T00:00:00");
return (
);
})}
{items}
);
}
// `day` is set on a day ahead, null on Today
function TodayRow({ row, index, nested, day, dragging, dropBefore, dropAfter, onDragStart, onDragEnd }) {
const { state, dispatch } = window.useFocusStore();
const { task, sub, project } = row;
const isHabit = !sub && task.type === "habit";
const status = sub ? (sub.done ? "done" : "todo") : isHabit ? (row.done ? "done" : "todo") : task.status;
function toggle() {
if (sub) dispatch({ type: "TOGGLE_SUB", taskId: task.id, subId: sub.id });
// "today" is resolved inside the reducer, so a page rendered yesterday
// still marks the right day
else if (isHabit) dispatch({ type: "TOGGLE_HABIT_DAY", taskId: task.id, day: "today" });
else dispatch({ type: "CYCLE_STATUS", taskId: task.id });
}
function edit(text) {
if (!text) return; // deleting happens on the card, not from here
if (sub) dispatch({ type: "EDIT_SUB", taskId: task.id, subId: sub.id, text });
else dispatch({ type: "EDIT_TASK_TEXT", taskId: task.id, text });
}
const top3 = index < 3;
return (
⋮⋮{top3 ? index + 1 : "·"}
{sub
?
: isHabit
?
: }
{/* a step tucked under its task needs no label — the task is right above */}
{!nested && (
{/* a step lives in its task, so only a task can switch cards */}
{sub ? project.name : (
dispatch({ type: "MOVE_TASK", taskId: task.id, toProject: id, toLane: "active", toIndex: null })} />
)}
{sub && · {task.text}}
{!sub && task.big ? · big three #{task.big} : null}
)}
);
}
// The card a task lives on, as a quiet dropdown: the label is plain text with
// an invisible native