/* project-todos.jsx — redesigned "Todos" panel for the Project ▸ Planning tab. ──────────────────────────────────────────────────────────────────────────── DROP-IN REPLACEMENT for the … block (and its TodoCluster rows) inside ProjectPlanningExec in project-planning.jsx. It renders its own , so you replace the whole Todos Panel with a single and delete the now-unused TodoCluster component. Design goals (from the redesign brief): • Title + status are the prominent elements. Status is a colored pill you click to change. "Done" is just a status — the old checkbox is gone. • Milestone + cluster are quiet chips that open a picker on click. • Remarks / "after" are tucked behind chips, shown only when present. • Clicking the empty area of a card opens a slide-in edit drawer; the chips, pill and title handle their own clicks (they stopPropagation). • Group by Cluster (default) or Milestone, toggled in the panel header. • Header actions: "+ Cluster" and "+ Todo". ── Props (all map 1:1 onto mutators that already exist in ProjectPlanningExec) ── categories active.todoPlan.categories → [{ id, name, items:[…] }] item: { id, title, status, done, remarks, after, milestoneId, category } milestones sectionMs → [{ id, title, completed }] statuses window.AC.PROJECT_TODO_STATUSES (string[]) onRenameCluster (catId, name) → renameCat(catId, name) onAddCluster () → addCluster() onRemoveCluster (catId) → removeCluster(catId) onAddTodo (catId) → addTodo(catId) onPatchTodo (catId, todoId, patch) → patchTodo(catId, todoId, patch) NB: when patching status, also set done:(status==='Done') onMoveTodo (fromCatId, todoId, toCatId) → moveTodo(fromCatId, todoId, toCatId) onRemoveTodo (catId, todoId) → removeTodo(catId, todoId) Requires: window.Panel, window.Icon (already in ui.jsx / icons.jsx) and project-todos.css loaded after app.css. ──────────────────────────────────────────────────────────────────────────── */ (function () { const { useState, useRef, useEffect, useLayoutEffect } = React; /* Status → color system. Tweak these hexes to taste; they sit in the slate/ blue brand and intentionally echo the app's pill palette. */ const STATUS_META = { 'To do': { fg: '#64748b', bg: '#f1f4f9', bd: '#d4dbe6', dot: '#94a3b8' }, 'In progress': { fg: '#1e429f', bg: '#eaf0fb', bd: '#c5d6f5', dot: '#2856c4' }, 'Partially done': { fg: '#b45309', bg: '#fbf1e3', bd: '#f0d9b8', dot: '#d08a3a' }, 'Missing info': { fg: '#0e7490', bg: '#e7f2f5', bd: '#c2dee5', dot: '#0e9bb8' }, 'Blocked': { fg: '#c0392b', bg: '#fcecea', bd: '#f0c7c1', dot: '#d65648' }, 'Done': { fg: '#15803d', bg: '#e7f5ec', bd: '#bfe3cc', dot: '#1f9a64' }, }; const META = (s) => STATUS_META[s] || STATUS_META['To do']; const isDoneStatus = (s) => s === 'Done'; const statusChoices = (status, statuses) => { const configured = statuses && statuses.length ? statuses : Object.keys(STATUS_META); return configured.includes(status) ? configured : [status, ...configured]; }; const categoryLabel = (value) => window.AC.projectTodoCategoryLabel(value); /* ───────────────────────── popover (portal into ) ───────────────────────── */ function Popover({ trigger, align, children }) { const [open, setOpen] = useState(false); const [pos, setPos] = useState(null); const wrapRef = useRef(null); const menuRef = useRef(null); const place = () => { const el = wrapRef.current; if (!el) return; const r = el.getBoundingClientRect(); setPos({ left: r.left, right: window.innerWidth - r.right, top: r.bottom + 5, anchorTop: r.top }); }; useLayoutEffect(() => { if (open) place(); }, [open]); useLayoutEffect(() => { if (!open || !menuRef.current || !pos) return; const mr = menuRef.current.getBoundingClientRect(); if (pos.top + mr.height > window.innerHeight - 8 && pos.anchorTop - 5 - mr.height > 8) { menuRef.current.style.top = (pos.anchorTop - 5 - mr.height) + 'px'; } }, [open, pos]); useEffect(() => { if (!open) return; const off = (e) => { if (wrapRef.current && wrapRef.current.contains(e.target)) return; if (menuRef.current && menuRef.current.contains(e.target)) return; setOpen(false); }; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; const reflow = () => place(); document.addEventListener('pointerdown', off, true); document.addEventListener('keydown', onKey); window.addEventListener('scroll', reflow, true); window.addEventListener('resize', reflow); return () => { document.removeEventListener('pointerdown', off, true); document.removeEventListener('keydown', onKey); window.removeEventListener('scroll', reflow, true); window.removeEventListener('resize', reflow); }; }, [open]); const style = align === 'right' ? { top: pos && pos.top, right: pos && pos.right, left: 'auto' } : { top: pos && pos.top, left: pos && pos.left, right: 'auto' }; const menu = (open && pos) ? ReactDOM.createPortal(
e.stopPropagation()}> {typeof children === 'function' ? children({ close: () => setOpen(false) }) : children}
, document.body) : null; return ( {trigger({ open, toggle: (e) => { if (e) e.stopPropagation(); setOpen((o) => !o); } })} {menu} ); } /* ───────────────────────── status pill + picker ───────────────────────── */ function StatusPill({ status, statuses, sm, onChange }) { const m = META(status); const options = statusChoices(status, statuses); return ( ( )}> {({ close }) => (
Status
{options.map((s) => ( ))} )} ); } /* ───────────────────────── quiet chips ───────────────────────── */ function MilestoneChip({ milestoneId, milestones, align, onChange }) { const cur = milestones.find((m) => m.id === milestoneId); const name = cur ? cur.title : ''; return ( ( )}> {({ close }) => (
Milestone
{milestoneId && !cur && ( )} {milestones.length > 0 &&
} {milestones.map((m) => ( ))} )} ); } function ClusterChip({ categoryId, categories, align, onMove }) { const cur = categories.find((c) => c.id === categoryId); return ( ( )}> {({ close }) => (
Move to cluster
{categories.map((c) => ( ))} )} ); } /* ───────────────────────── inline title editor ───────────────────────── */ function InlineTitle({ value, autoFocus, onCommit }) { const [editing, setEditing] = useState(!!autoFocus); const [val, setVal] = useState(value); const ref = useRef(null); useEffect(() => { setVal(value); }, [value]); useEffect(() => { if (editing && ref.current) { ref.current.focus(); ref.current.select(); } }, [editing]); const commit = () => { setEditing(false); if (val.trim() !== value) onCommit(val.trim()); }; if (editing) { return e.stopPropagation()} onChange={(e) => setVal(e.target.value)} onBlur={commit} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); commit(); } if (e.key === 'Escape') { setVal(value); setEditing(false); } }} />; } return { e.stopPropagation(); setEditing(true); }}> {value || Untitled todo} ; } /* ───────────────────────── the two-line card ───────────────────────── */ function TodoCard({ project, todo, catId, categories, milestones, statuses, onAction, onOpen, onPatch, onMove }) { const done = isDoneStatus(todo.status); const after = todo.after; const [docOver, setDocOver] = useState(false); const docTarget = { todoId: todo.id }; const docs = window.projectDocumentsFor ? window.projectDocumentsFor(project, docTarget) : []; const dropProps = window.projectDocumentDropProps ? window.projectDocumentDropProps(project, onAction, docTarget, setDocOver) : {}; return (
onOpen()} onKeyDown={(e) => { if (e.key === 'Enter') onOpen(); }}>
e.stopPropagation()}> onPatch({ title: v })} /> e.stopPropagation()}> onPatch({ status: s, done: isDoneStatus(s) })} />
e.stopPropagation()}> {categoryLabel(todo.category)} onPatch({ milestoneId: v })} /> onMove(toId)} /> {todo.remarks ? ( ) : null} {after ? ( ) : null} {docs.map((doc) => ( ))}
); } /* ───────────────────────── group section ───────────────────────── */ function Group({ project, group, groupBy, categories, milestones, statuses, onAction, onRenameCluster, onRemoveCluster, onAddTodo, onPatchTodo, onMoveTodo, onOpen }) { const [open, setOpen] = useState(true); const [renaming, setRenaming] = useState(false); const items = group.items; const doneCount = items.filter((i) => isDoneStatus(i.status)).length; const pct = items.length ? doneCount / items.length : 0; const allDone = items.length > 0 && doneCount === items.length; const isCluster = groupBy === 'cluster'; const canDeleteCluster = isCluster && group.catId && items.length === 0; return (
setOpen((o) => !o)}> {isCluster && group.catId ? ( e.stopPropagation()}> {renaming ? { setRenaming(false); onRenameCluster(group.catId, v); }} /> : setRenaming(true)}>{group.name || Untitled cluster}} ) : ( {group.name} )} {doneCount}/{items.length} e.stopPropagation()}> {isCluster && group.catId && ( )} {isCluster && group.catId && ( )}
{open && (
{items.map((t) => ( onOpen(t._catId, t.id)} onPatch={(patch) => onPatchTodo(t._catId, t.id, patch)} onMove={(toId) => onMoveTodo(t._catId, t.id, toId)} /> ))} {items.length === 0 &&
No todos here yet.
} {isCluster && group.catId && ( )}
)}
); } /* ───────────────────────── the panel ───────────────────────── */ function ProjectTodosPanel({ project, categories, milestones, statuses, onAction, onRenameCluster, onAddCluster, onRemoveCluster, onAddTodo, onPatchTodo, onMoveTodo, onMoveTodoStatus, onRemoveTodo }) { const [groupBy, setGroupBy] = useState('cluster'); const [editing, setEditing] = useState(null); // { catId, todoId } const cats = categories || []; const ms = milestones || []; const sts = statuses || Object.keys(STATUS_META); // flatten with provenance so we can regroup by milestone const flat = []; cats.forEach((c) => (c.items || []).forEach((it) => flat.push({ ...it, _catId: c.id }))); const total = flat.length; const done = flat.filter((i) => isDoneStatus(i.status)).length; let groups; if (groupBy === 'milestone') { groups = ms.map((m) => ({ key: m.id, name: m.title, items: flat.filter((t) => t.milestoneId === m.id) })); const none = flat.filter((t) => !t.milestoneId || !ms.some((m) => m.id === t.milestoneId)); if (none.length) groups.push({ key: '_none', name: 'No milestone', ghost: true, items: none }); } else { groups = cats.map((c) => ({ key: c.id, catId: c.id, name: c.name, items: flat.filter((t) => t._catId === c.id) })); } const firstCatId = cats[0] && cats[0].id; const groupWord = groupBy === 'cluster' ? 'cluster' : 'milestone'; const TodoEditDrawer = window.ProjectTodoEditDrawer; const header = (
Group
); return (
{groups.map((g) => ( setEditing({ catId, todoId })} /> ))} {cats.length === 0 && (
No clusters yet.
)}
{TodoEditDrawer && ( setEditing(null)} onSave={onPatchTodo} onMove={onMoveTodoStatus || onMoveTodo} onRemove={onRemoveTodo} /> )} ); } Object.assign(window, { ProjectTodosPanel, PROJECT_TODO_STATUS_META: STATUS_META }); })();