// table.jsx — Project table view with Epic groups, sprint/backlog tabs, inline edits
function ProjectHeader({ activeTab, onTab, projectId, projectTitle, projectColor, activeSprintId, onSprintChange, sprints, onStartSprint, onPlanSprint, onActivateSprint, sprintCount, backlogCount, tasksCount, kanbanCount, onManageAccess, memberIds, canDeleteProject, onDeleteProject, canEditProject, onOpenSettings }) {
const [sprintMenu, setSprintMenu] = React.useState(null);
const allSprints = sprints || SPRINTS;
const active = allSprints.find(s => s.id === activeSprintId);
const activeSprints = allSprints.filter(s => s.active);
const upcomingSprints = allSprints.filter(s => !s.active && !s.completed);
const pastSprints = allSprints.filter(s => !!s.completed);
const hasAnySprints = allSprints.length > 0;
const sprintLabel = active?.label || (hasAnySprints ? "Sprint" : "No active sprint");
// ── Per-user favorite star ──────────────────────────────────────
// Reads window.MY_FAVORITES (set by data.jsx). The state is in
// `isFav` so an SSE / cross-tab update via flowboard:favorites:changed
// re-renders only this header instead of the whole app.
const [isFav, setIsFav] = React.useState(() =>
(typeof window !== "undefined" && Array.isArray(window.MY_FAVORITES))
? window.MY_FAVORITES.includes(projectId) : false
);
React.useEffect(() => {
function sync() {
const ids = (typeof window !== "undefined" && Array.isArray(window.MY_FAVORITES))
? window.MY_FAVORITES : [];
setIsFav(!!projectId && ids.includes(projectId));
}
sync();
window.addEventListener("flowboard:favorites:changed", sync);
return () => window.removeEventListener("flowboard:favorites:changed", sync);
}, [projectId]);
function toggleFav(e) {
e.preventDefault();
e.stopPropagation();
if (!projectId) return;
if (typeof window.flowboardToggleFavorite === "function") {
window.flowboardToggleFavorite(projectId);
}
}
return (
{projectTitle || "Project"}
{/* Real project members — was hardcoded to a fake set of six
ids that showed the same faces on every project. Now
driven by the project's actual member list, with the
project's owner kept first when present. */}
{Array.isArray(memberIds) && memberIds.length > 0 && (
)}
{(canEditProject || canDeleteProject) && (
)}
{canDeleteProject && (
)}
This project doesn't have a sprint yet. Start one now or plan one for later.
)}
{ setSprintMenu(null); onStartSprint && onStartSprint(); }}>
Start new sprint
{onPlanSprint && (
{ setSprintMenu(null); onPlanSprint(); }}>
Plan upcoming sprint
)}
)}
);
}
// Columns that can be hidden via the Hide menu. "name" is always shown.
const HIDEABLE_COLS = [
{ id: "owners", label: "Owner" },
{ id: "status", label: "Status" },
{ id: "prio", label: "Priority" },
{ id: "due", label: "Due date" },
{ id: "sprint", label: "Sprint" },
{ id: "points", label: "Points" },
{ id: "updated", label: "Updated" },
];
const SORT_OPTIONS = [
{ id: "default", label: "Default order", fn: null },
{ id: "name-asc", label: "Name A → Z", fn: (a, b) => a.name.localeCompare(b.name) },
{ id: "name-dsc", label: "Name Z → A", fn: (a, b) => b.name.localeCompare(a.name) },
{ id: "prio-dsc", label: "Priority (high → low)", fn: (a, b) => PRIO_RANK[a.prio] - PRIO_RANK[b.prio] },
{ id: "prio-asc", label: "Priority (low → high)", fn: (a, b) => PRIO_RANK[b.prio] - PRIO_RANK[a.prio] },
{ id: "pts-dsc", label: "Points (high → low)", fn: (a, b) => b.points - a.points },
{ id: "pts-asc", label: "Points (low → high)", fn: (a, b) => a.points - b.points },
{ id: "due-asc", label: "Due date (soonest)", fn: (a, b) => dueRank(a.due) - dueRank(b.due) },
{ id: "upd-dsc", label: "Recently updated", fn: (a, b) => updRank(a.updated) - updRank(b.updated) },
];
const PRIO_RANK = { critical: 0, high: 1, medium: 2, low: 3 };
function dueRank(s) {
if (!s || s === "—") return 9999;
// Seed data uses "Apr 12" / "May 02" / "Today" / "Tomorrow".
// New format may include trailing " @ H:MM AM/PM" — strip before matching.
if (s === "Today") return -1;
if (s === "Tomorrow") return 0;
const head = String(s).split(" @ ")[0].trim();
const m = /^([A-Za-z]{3})\s+(\d{1,2})$/.exec(head);
if (!m) return 9999;
const mo = { Jan:0,Feb:1,Mar:2,Apr:3,May:4,Jun:5,Jul:6,Aug:7,Sep:8,Oct:9,Nov:10,Dec:11 }[m[1]] ?? 12;
// Time bumps the rank within the day so morning sorts before evening.
let timeBoost = 0;
const tail = String(s).split(" @ ")[1];
if (tail) {
const tm = /^(\d{1,2}):(\d{2})\s*([AP])M$/i.exec(tail.trim());
if (tm) {
let hh = parseInt(tm[1], 10) % 12;
if (/p/i.test(tm[3])) hh += 12;
const mm = parseInt(tm[2], 10);
timeBoost = (hh * 60 + mm) / (24 * 60); // 0..<1
}
}
return mo * 31 + parseInt(m[2], 10) + timeBoost;
}
function updRank(s) {
if (!s) return 9999;
if (s === "now") return 0;
const m = /^(\d+)([hdw])$/.exec(s);
if (!m) return 9999;
const n = parseInt(m[1], 10);
return n * ({ h: 1, d: 24, w: 24 * 7 }[m[2]]);
}
function ToolbarButton({ icon: Icon, label, active, count, onClick }) {
return (
);
}
const EMPTY_FILTERS = { q: "", people: [], creators: [], statuses: [], priorities: [], types: [], sort: "default", hidden: [], mine: false };
function BoardToolbar({
sprintMode, activeSprint, onStartSprint, onPlanSprint, onCompleteSprint, backlogMode,
kanbanMode = false,
filters = EMPTY_FILTERS, setFilters = () => {}, onNewTask, onNewEpic, onNewStory,
hiddenDoneCount = 0,
currentUserId = null, projectAccess, activeProjectId,
}) {
// Person-filter is scoped to the project's members. Anyone selected
// who's no longer a member sticks around so the active filter chip
// doesn't silently disappear.
const _accessMap = projectAccess || (typeof window !== "undefined" ? window.PROJECT_ACCESS : null) || {};
const _projMembers = activeProjectId && _accessMap[activeProjectId]
? new Set((_accessMap[activeProjectId].members || []).map(m => m.id))
: null;
const _filterablePeople = _projMembers
? PEOPLE.filter(p => _projMembers.has(p.id) || (filters.people || []).includes(p.id))
: PEOPLE;
const [open, setOpen] = React.useState(null); // {key, anchor}
const close = () => setOpen(null);
const openFor = (key) => (e) => setOpen({ key, anchor: e.currentTarget });
const f = filters;
const searchCount = f.q ? 1 : 0;
const personCount = f.people.length;
const creatorCount = Array.isArray(f.creators) ? f.creators.length : 0;
const filterCount = f.statuses.length + f.priorities.length;
const sortActive = f.sort !== "default";
const hideCount = f.hidden.length;
return (
{onNewEpic && (
)}
{onNewStory && (
)}
{currentUserId && (
)}
{/* Hide-done — session-aware preference, persisted across
reloads. ON by default. Just-completed tasks (this tab)
AND done subtasks under a still-open top parent stay
visible regardless of the toggle — the visibility rule
lives in app.jsx `filtered`. The button shows the count
of rows currently being suppressed so the user knows
something's hidden. Click flips the toggle: when ON,
flipping reveals everything; when OFF, the next click
hides done again. */}
{/* Subtasks are always shown alongside their parents in the
table (use the per-row chevron to collapse a particular
parent's children). The kanban still hides subtasks because
they're not first-class cards there — that filter lives in
app.jsx's `filtered` memo, not here. */}
{/* "By epic" / "By story" toggle was dropped in May 2026 —
stories now render as inline rows in the task table
regardless of grouping (see StoryRow in this file). The old
"Reviews" badge that filtered to stories-waiting-on-me
also went away because the same affordance is now the
Approve / Request changes buttons that appear on the story
row itself when the current user is a listed reviewer. */}
{/* Type filter — quick-pill for "Bugs only" + a chevron that
opens the full multi-select dropdown (Task / Bug / Chore /
Spike) for power users. Bug BG_02E81DCE4B — Nandana
asked for a one-click bug filter; the dropdown is the
natural generalization. The pill flips into a Bug-only
shortcut on single click; chevron opens picker for the
rest. */}
{(() => {
const types = Array.isArray(f.types) ? f.types : [];
const bugsOnly = types.length === 1 && types[0] === "bug";
const toggleBugsOnly = () => {
if (bugsOnly) setFilters({ ...f, types: [] });
else setFilters({ ...f, types: ["bug"] });
};
return (
);
})()}
0)}
onClick={openFor("type")}/>
0} onClick={openFor("search")}/>
0} onClick={openFor("person")}/>
{/* Creator filter — narrow tasks to those raised by a given
person (e.g. "show me everything I created"). Same UI as the
Person picker, drawing from the same project-member list. */}
0} onClick={openFor("creator")}/>
0} onClick={openFor("filter")}/>
{/* Sort + Hide-columns are table-only — they have no visible
effect on the kanban (cards are drag-positioned within their
status column, and the kanban has no toggleable columns). */}
{!kanbanMode && (
)}
{!kanbanMode && (
0} onClick={openFor("hide")}/>
)}
{(searchCount + personCount + creatorCount + filterCount + (sortActive ? 1 : 0) + hideCount + (f.mine ? 1 : 0) + (f.hideDone ? 1 : 0) + (f.reviewMine ? 1 : 0) + (Array.isArray(f.types) ? f.types.length : 0)) > 0 && (
)}
{open?.key === "search" && (
Search tasks
setFilters({ ...f, q: e.target.value })}
placeholder="Search by name or epic…"
style={{ width: "100%", padding: "7px 10px", border: "1px solid var(--border)", borderRadius: 6, fontSize: 13, outline: "none" }}
onKeyDown={(e) => { if (e.key === "Enter") close(); }}/>
{f.q && (
Matching “{f.q}” — press Enter to apply
)}
)}
{open?.key === "person" && (
Filter by person
{_filterablePeople.map(p => {
const on = f.people.includes(p.id);
return (
{
const next = on ? f.people.filter(x => x !== p.id) : [...f.people, p.id];
setFilters({ ...f, people: next });
}}>
{p.name}
{on && }
);
})}
{f.people.length > 0 && (
<>
setFilters({ ...f, people: [] })}>
Clear person filter
)}
)}
{/* Creator popover — multi-select of project members. A
quick "Just me" row at the top lets a user filter to their
own raised tasks in one click without having to find
themselves in the list. Empty selection == "show all". */}
{open?.key === "creator" && (
)}
{/* Type-filter popover — multi-select across the four task types.
Empty selection == "show all". The Bug shortcut pill above is
a convenience over the same `filters.types` field. */}
{open?.key === "type" && (
);
}
// ── Mini calendar for the due-date cell ─────────────────────────
const MONTH_FULL = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const MONTH_SHORT = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
// Due-date string format
// "" | "—" → no date
// "Apr 28" → date only (legacy / default)
// "Apr 28 @ 4:30 PM" → date + time
// The " @ " separator is the canonical hint that a time portion follows.
// All parsers below tolerate either form so existing rows keep working.
function _splitDueString(s) {
if (!s || s === "—") return { datePart: "", timePart: "" };
const idx = String(s).indexOf(" @ ");
if (idx < 0) return { datePart: String(s), timePart: "" };
return { datePart: String(s).slice(0, idx), timePart: String(s).slice(idx + 3).trim() };
}
function parseDateLoose(s) {
// Backwards-compat: callers pass the full due string (with optional time);
// strip the time portion before parsing.
const { datePart } = _splitDueString(s);
if (!datePart) return null;
const m = datePart.match(/^([A-Za-z]+)\s+(\d{1,2})(?:,\s*(\d{4}))?/);
if (!m) return null;
const idx = MONTH_SHORT.findIndex(x => x.toLowerCase() === m[1].slice(0, 3).toLowerCase());
if (idx < 0) return null;
const yr = m[3] ? parseInt(m[3], 10) : new Date().getFullYear();
return new Date(yr, idx, parseInt(m[2], 10));
}
// Returns { hh, mm } 24h, or null if no time present.
function parseDueTime(s) {
const { timePart } = _splitDueString(s);
if (!timePart) return null;
const m = /^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/i.exec(timePart);
if (!m) return null;
let hh = parseInt(m[1], 10);
const mm = parseInt(m[2], 10);
const ampm = (m[3] || "").toUpperCase();
if (ampm === "PM" && hh < 12) hh += 12;
if (ampm === "AM" && hh === 12) hh = 0;
if (hh < 0 || hh > 23 || mm < 0 || mm > 59) return null;
return { hh, mm };
}
function _fmt12(hh, mm) {
const ampm = hh >= 12 ? "PM" : "AM";
const h12 = ((hh + 11) % 12) + 1;
return `${h12}:${String(mm).padStart(2, "0")} ${ampm}`;
}
function formatDateShort(d) { return `${MONTH_SHORT[d.getMonth()]} ${d.getDate()}`; }
function formatDueWithTime(d, hh, mm) {
const datePart = formatDateShort(d);
if (hh == null || mm == null) return datePart;
return `${datePart} @ ${_fmt12(hh, mm)}`;
}
// Expose the helpers globally so other modules (drawer, mytasks, task-detail)
// can render time consistently.
window.parseDateLoose = parseDateLoose;
window.parseDueTime = parseDueTime;
window.formatDateShort = formatDateShort;
window.formatDueWithTime = formatDueWithTime;
function MiniCalendar({ value, onChange, onClear }) {
const today = new Date();
const init = parseDateLoose(value) || today;
const [view, setView] = React.useState({ y: init.getFullYear(), m: init.getMonth() });
const sel = parseDateLoose(value);
const initTime = parseDueTime(value);
// Time state lives inside the picker — empty string means "no time".
const [time, setTime] = React.useState(initTime ? `${String(initTime.hh).padStart(2,"0")}:${String(initTime.mm).padStart(2,"0")}` : "");
const firstDow = new Date(view.y, view.m, 1).getDay();
const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
const cells = [];
for (let i = 0; i < firstDow; i++) cells.push(null);
for (let d = 1; d <= daysInMonth; d++) cells.push(d);
const isToday = (d) => d === today.getDate() && view.m === today.getMonth() && view.y === today.getFullYear();
const isSelected = (d) => sel && d === sel.getDate() && view.m === sel.getMonth() && view.y === sel.getFullYear();
function _emit(d, t) {
if (!t) {
onChange(formatDateShort(d));
return;
}
const m = /^(\d{1,2}):(\d{2})$/.exec(t);
if (!m) { onChange(formatDateShort(d)); return; }
onChange(formatDueWithTime(d, parseInt(m[1], 10), parseInt(m[2], 10)));
}
function pick(d) {
_emit(new Date(view.y, view.m, d), time);
}
function pickToday() {
_emit(new Date(), time);
}
function onTimeChange(e) {
const next = e.target.value || "";
setTime(next);
// If we already have a date selected, persist the new time straight away.
if (sel) _emit(sel, next);
}
function clearTime() {
setTime("");
if (sel) _emit(sel, "");
}
function step(delta) {
setView(v => {
const m = v.m + delta;
if (m < 0) return { y: v.y - 1, m: 11 };
if (m > 11) return { y: v.y + 1, m: 0 };
return { y: v.y, m };
});
}
return (
e.stopPropagation()}>
{MONTH_FULL[view.m]} {view.y}
{["S","M","T","W","T","F","S"].map((d, i) =>
{d}
)}
{cells.map((d, i) => (
d === null
?
:
))}
{time && (
)}
);
}
// Single task row with inline-editable status, priority, owner, date.
// Wrapped in React.memo at the bottom so unchanged rows don't re-run
// their full render every time the parent state ticks. With ~hundreds
// of rows on My Work, that was the perf bottleneck on status edits.
function TaskRowImpl({ task, onUpdate, onOpen, onDelete, onSelect, selected, hideSprintCol, hidden = EMPTY_SET, sprints, onAddSubtask, childCount = 0, collapsed = false, onToggleCollapse,
onDragStart, onDragOverRow, onDropOnRow, dropIndicator, isDragging, isJustDropped, showProjectPill, projectAccess, currentUserId }) {
// Resolve "me" — prefer the prop, fall back to api.getUser() so the
// row stays usable in standalone demos that don't pass it down.
const _me = currentUserId
|| (typeof window !== "undefined" && window.api && window.api.getUser && window.api.getUser() && window.api.getUser().id)
|| null;
// Owner picker is scoped to the task's project members. Currently-
// assigned users are kept in the list even if they're no longer
// members so the row never silently drops them. Falls back to the
// full PEOPLE list when projectAccess isn't supplied (e.g. legacy
// callers / standalone demos) so the picker stays usable.
const _accessMap = projectAccess || (typeof window !== "undefined" ? window.PROJECT_ACCESS : null) || {};
const _taskProjectId = task.projectId || task.project_id || null;
const _projMemberIds = _taskProjectId
? new Set(((_accessMap[_taskProjectId] && _accessMap[_taskProjectId].members) || []).map(m => m.id))
: null;
const _assignablePeople = _projMemberIds
? PEOPLE.filter(p => _projMemberIds.has(p.id) || (task.owners || []).includes(p.id))
: PEOPLE;
const [editing, setEditing] = React.useState(null); // {field, anchor}
const statusClose = () => setEditing(null);
const sprintList = sprints || SPRINTS;
const sprintObj = sprintList.find(s => s.id === task.sprint);
// Real overdue check (used to be a hardcoded "Apr 0X | 1X" regex
// that rotted as time moved past April). isOverdueNow lives in
// lateness.jsx and answers: due in the past + not done.
const overdue = typeof isOverdueNow === "function" ? isOverdueNow(task) : false;
const showSprint = !hideSprintCol && !hidden.has("sprint");
// Row celebration when status transitions to "done"
const prevStatus = React.useRef(task.status);
const [rowCelebrate, setRowCelebrate] = React.useState(false);
React.useEffect(() => {
if (prevStatus.current !== "done" && task.status === "done") {
setRowCelebrate(true);
const t = setTimeout(() => setRowCelebrate(false), 1100);
prevStatus.current = task.status;
return () => clearTimeout(t);
}
prevStatus.current = task.status;
}, [task.status]);
const dropStyle = dropIndicator === "above" ? { boxShadow: "inset 0 3px 0 var(--brand)" }
: dropIndicator === "below" ? { boxShadow: "inset 0 -3px 0 var(--brand)" }
: dropIndicator === "into" ? { boxShadow: "inset 0 0 0 2px var(--brand)", background: "rgba(0,115,234,.06)" }
: null;
const isSubtask = !!task.parentTaskId;
const cls = [
selected ? "is-selected" : "",
isDragging ? "is-dragging-row" : "",
isJustDropped ? "is-just-dropped-row" : "",
rowCelebrate ? "is-row-celebrate" : "",
isSubtask ? "is-subtask-row" : "",
].filter(Boolean).join(" ");
// For subtask rows, look up the parent in window.ALL_TASKS so we
// can render a "↳ in " chip. The chip is also
// clickable: it opens the parent's drawer. We do this lookup at
// render time (cheap — parents are cached in the same array)
// rather than threading the parent through every prop chain.
let parentTask = null;
if (isSubtask && typeof window !== "undefined" && Array.isArray(window.ALL_TASKS)) {
parentTask = window.ALL_TASKS.find(x => x && x.id === task.parentTaskId) || null;
}
return (
{
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/plain", task.id);
onDragStart && onDragStart(task);
}}
onDragOver={(e) => {
if (!onDragOverRow) return;
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = "move";
// Drag is REORDER by default — split the row 50/50 into
// above/below. The "into" reparent gesture used to occupy the
// middle 40% of every row's height, which caused tasks to get
// accidentally pulled into a neighbour as a subtask during
// normal reorder drags. We now require an explicit modifier:
// hold Shift (or Ctrl/Meta) on dragover/drop to reparent.
// Subtask rows already never accept "into" (we don't want
// deeper nesting via drag — use the + Subtask button).
const r = e.currentTarget.getBoundingClientRect();
const ratio = (e.clientY - r.top) / Math.max(1, r.height);
const wantsInto = (e.shiftKey || e.ctrlKey || e.metaKey) && !task.parentTaskId;
let side;
if (wantsInto && ratio > 0.20 && ratio < 0.80) {
side = "into";
} else {
side = ratio < 0.5 ? "above" : "below";
}
onDragOverRow(task, side);
}}
onDrop={(e) => {
if (!onDropOnRow) return;
e.preventDefault();
e.stopPropagation();
const r = e.currentTarget.getBoundingClientRect();
const ratio = (e.clientY - r.top) / Math.max(1, r.height);
const wantsInto = (e.shiftKey || e.ctrlKey || e.metaKey) && !task.parentTaskId;
let side;
if (wantsInto && ratio > 0.20 && ratio < 0.80) {
side = "into";
} else {
side = ratio < 0.5 ? "above" : "below";
}
onDropOnRow(e, task, side);
}}
>
onSelect(task.id, e.target.checked)}/>
{/* depth → indent. Each level adds ~22px of left padding so
nested subtasks read as a clear tree. depth=0 (top-level)
gets no extra padding so the visual rhythm matches every
other table. The CSS var lets CSS pick up the value
without re-running the React layout pass. */}
{isSubtask ? (
↳
) : childCount > 0 && onToggleCollapse ? (
) : (
// Spacer keeps every row's title cell aligned even when
// there's no chevron to render (childless top-level row).
)}
{showProjectPill && task.projectName && (
{task.projectName}
)}
{/* Long titles used to wrap and break row alignment in the
cross-project My Work table. The .name-text class
ellipsises overflow so every row stays the same height,
and the title attr surfaces the full string on hover for
anyone who needs to read it without opening the drawer.
Empty-title rows (rare data oddity — usually a subtask
that was created without a name) get a muted "(Untitled)"
fallback so they're still visible and clickable; without
this, the row appeared blank and users couldn't open the
drawer to fix the title. */}
{task.name && task.name.trim()
? {task.name}
: (Untitled)}
{/* Type marker — small inline chip after the task name. Only
rendered for non-default types (bug / chore / spike) so the
vast majority of rows (plain tasks) stay visually clean.
Bug BG_02E81DCE4B — Nandana asked for a Bug tag visible
wherever tasks render. Kanban gets a bigger chip; here on
the table the marker is compact. */}
{(() => {
const tm = (typeof taskTypeMeta === "function") ? taskTypeMeta(task) : null;
if (!tm || tm.id === "task") return null;
return (
{tm.emoji}
{tm.label}
);
})()}
{/* Subtask "in " chip — keeps the parent-child link
visible even after sort/filter scatters the rows. Click
opens the parent task's drawer in place. */}
{isSubtask && parentTask && (
)}
{task.subtasks > 0 && {task.subtasks}}
{/* Recurring marker — visible on the template AND every
materialised instance, so the user can spot which rows
are part of a series at a glance. The drawer's Repeat
field is the place to actually edit / stop / pause. */}
{(task.recurrenceRuleId || task.isRecurringTemplate) && (
↻
)}
{/* Two badges, two intents:
· OverdueBadge — task is currently late (not yet done) → red, pulses.
· LateBadge — task was completed late (already shipped) → amber.
They're mutually exclusive (LateBadge only renders when status==="done"
AND it shipped late; OverdueBadge needs status!=="done"). */}
{typeof OverdueBadge !== "undefined" && }
{typeof LateBadge !== "undefined" && }
{typeof QaRequiredMark !== "undefined" && task.qaRequired && task.status !== "qa" && }
{typeof QaReopenBadge !== "undefined" && }
{/* Hover-only "+ Subtask" — visible on any row whose depth
is below the cap. depth=4 is the max; we hide the button
there since the server would reject the insert anyway. */}
{onAddSubtask && (task.depth || 0) < 4 && (
)}
{/* Hover-only delete affordance — keeps rows clean at rest, but
gives a one-click "move to bin" without opening the drawer. */}
{onDelete && (
)}
);
}
// ── StoryRow ──────────────────────────────────────────────────────
// A user story rendered inline as a row in the project task table.
// Sits at the position of its first child task (built upstream by
// EpicGroup's orderedRows memo) and shows: 📖 + title + review-state
// pill + progress (done/total). Its chevron collapses/expands the
// indented child tasks (same `collapsedParents` set as task subtasks
// — the key is "story_" so namespaces don't collide). Hover-only
// Approve / Request changes buttons surface for listed reviewers when
// the story is at review or changes_req.
//
// Clicking the row's name area opens the story drawer (onOpenStory).
function StoryRow({ story, childCount, doneCount, colspan, collapsed, onToggleCollapse, onOpenStory, onUpdate, currentUserId, onToast }) {
const stMeta = (typeof STORY_STATUSES !== "undefined" && Array.isArray(STORY_STATUSES))
? STORY_STATUSES.find(s => s.id === story.status)
: null;
const stLabel = (stMeta && stMeta.label) || (story.status || "Backlog");
const stCls = (stMeta && stMeta.cls) || "pill-backlog";
const reviewerIds = Array.isArray(story.reviewers) ? story.reviewers : [];
const isReviewer = !!(currentUserId && reviewerIds.includes(currentUserId));
const inReview = story.status === "review";
const needsReview = isReviewer && (story.status === "review" || story.status === "changes_req");
// Mirrors the StoryGroup approve/requestChanges helpers but acts at
// row scope. Same inline-note popover the group header uses.
const [acting, setActing] = React.useState(false);
const [reqNoteAnchor, setReqNoteAnchor] = React.useState(null);
const [reqNoteText, setReqNoteText] = React.useState("");
// Patch the live window.USER_STORIES array in place so the parent
// EpicGroup's orderedRows memo (which reads from it) sees the new
// status on next render. Previous behavior: the API succeeded but
// the table kept showing the OLD status forever — the user clicked
// Approve, saw the success toast, but the "Changes Requested" pill
// and the action buttons stayed visible. Local-first patch + SSE
// event dispatch keeps the UI honest even if the EventSource is
// disconnected.
function _patchStoryInPlace(updated) {
if (!updated || !updated.id) return;
try {
const all = window.USER_STORIES;
if (!Array.isArray(all)) return;
const idx = all.findIndex(s => s && s.id === updated.id);
if (idx === -1) return;
// Shallow merge so any extra fields the response includes (e.g.
// reverted_task_ids on request_changes) tag along without
// clobbering local-only fields.
all[idx] = Object.assign({}, all[idx], updated);
// Mirror the SSE event so the rest of the app gets the same
// refresh signal it would have from the server's event bus.
try {
window.dispatchEvent(new CustomEvent("flowboard:rt:stories.updated", {
detail: { id: updated.id, status: updated.status, local: true },
}));
} catch {}
} catch {}
}
async function approve(e) {
if (e) e.stopPropagation();
if (acting) return;
setActing(true);
try {
const updated = await window.api.stories.approve(story.id);
_patchStoryInPlace(updated || { id: story.id, status: "done" });
onToast && onToast("Approved — thanks for the sign-off.");
} catch (err) {
const msg = (err && err.body && (err.body.message || err.body.error)) || (err && err.message) || "network error";
onToast && onToast("Couldn't approve: " + msg, 4500);
} finally { setActing(false); }
}
async function runRequestChanges(note) {
if (acting) return;
setActing(true); setReqNoteAnchor(null);
try {
const updated = await window.api.stories.requestChanges(story.id, note || "");
_patchStoryInPlace(updated || { id: story.id, status: "changes_req" });
// Reverted child tasks come back to "in_progress" on the server,
// but the local task list won't know unless we refresh. Fire a
// background refetch so the rows flip back to To Do without a
// manual reload.
if (typeof window.flowboardLoad === "function") {
window.flowboardLoad().catch(() => {});
}
onToast && onToast(
note ? "Changes requested — owners notified."
: "Changes requested — child tasks reverted to To Do.",
4000
);
} catch (err) {
const msg = (err && err.body && (err.body.message || err.body.error)) || (err && err.message) || "network error";
onToast && onToast("Couldn't request changes: " + msg, 4500);
} finally { setActing(false); setReqNoteText(""); }
}
function requestChanges(e) {
if (e) e.stopPropagation();
if (acting) return;
if (e && e.shiftKey) { runRequestChanges(""); return; }
setReqNoteText("");
setReqNoteAnchor(e ? e.currentTarget : null);
}
// Layout: chevron + emoji + title + status pill + progress in the
// name cell. Approve / Request changes buttons live in the TAIL
// cell (which spans all remaining columns) so they get the right-
// side real estate and don't clip the title. Earlier version
// crammed them into the name cell and the title got over-ellipsized
// while the buttons were cut off at the cell boundary.
const rightSpan = Math.max(1, (colspan || 10) - 3);
return (
{/* Approve / Request changes — pinned to the right of the row.
Visible only when this user is a listed reviewer AND the
story wants their attention. Spans the empty data columns
(status / priority / due / sprint / pts / updated) so the
buttons get full breathing room and never get clipped. */}
{needsReview && (
e.stopPropagation()}>
)}
{/* Note popover for Request changes — single click opens, ⌘/Ctrl
+ Enter submits, Esc cancels. Shift-clicking the button on the
row bypasses this entirely (power-user shortcut). */}
{reqNoteAnchor && typeof Popover !== "undefined" && (
setReqNoteAnchor(null)}>
e.stopPropagation()}>
Request changes
Every Done child task reverts to To Do. Owners are notified.