Adom Gantt

@@ -225,6 +225,8 @@ body.col-resizing { cursor: col-resize; user-select: none; } .label-row.dim { opacity: 0.15; } .label-row.multi-sel { background: rgba(0,184,176,0.06); } .tag { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9px; padding: 1px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }+.label-row .status-pill { cursor: pointer; }+.label-row .status-pill:hover { box-shadow: inset 0 0 0 1px currentColor; filter: brightness(1.12); } .tag-not-started { background: rgba(139,148,158,0.10); color: var(--text2); } .tag-in-progress { background: rgba(0,184,177,0.14); color: var(--accent); } .tag-blocked { background: rgba(210,153,34,0.15); color: var(--warn); }@@ -2492,7 +2494,7 @@ function buildRowDom(r,idx){     lDiv.appendChild(Object.assign(document.createElement('span'),{className:'row-name'}));     lDiv.appendChild(makeEditBtn(r));     r._nameSpan=lDiv.querySelector('.row-name');-    const sk=statusOf(r);const tg=sk?`<span class="tag ${statusTagFor(sk)}">${esc(statusTextFor(sk))}</span>`:'';+    const sk=statusOf(r);const tg=sk?`<span class="tag status-pill ${statusTagFor(sk)}" title="Click to change status">${esc(statusTextFor(sk))}</span>`:'';     r._nameSpan.innerHTML=esc(r.name)+tg;     bDiv.className='bar-row';const x1=toX(r.start),x2=toX(r.end),b=document.createElement('div');b.className='bar'+(r.striped?' bar-striped':'');b.style.left=x1+'px';b.style.width=Math.max(x2-x1,6)+'px';b.style.background=phaseColor(r.phase);b.dataset.title=r.name;b.dataset.dates=fmt(r.start)+' → '+fmt(r.end);b.dataset.body=r.description||'';b.dataset.prov=provLabel(r);b.dataset.id=r.id;     const nt=document.createElement('div');nt.className='bar-note';nt.textContent=r.note||'';b.appendChild(nt);r._noteEl=nt;@@ -2905,6 +2907,17 @@ labelsEl.addEventListener('click',e=>{   // the next real click.   if(Date.now()-dragEndedAt<150)return;   if(e.target.closest('.lane-toggle')||e.target.closest('.row-edit'))return;+  // The status pill is its own control. A plain click on it edits the status and+  // goes no further, so it never also opens the name editor or selects the row. A+  // modified click falls through to selection, the same as clicking the name.+  const pill=e.target.closest('.status-pill');+  if(pill&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey){+    e.stopPropagation();+    const prow=e.target.closest('.label-row[data-id]');+    const pr=prow&&items.find(x=>x._lDiv===prow);+    if(pr&&pr.id)openStatusPill(pr,pill);+    return;+  }   const row=e.target.closest('.label-row[data-id], .label-row.ms, .label-row.group');   // Empty space in the label column is a click on nothing, which is how every list   // in the world drops a selection.@@ -3030,6 +3043,7 @@ function hideDropIndicators(){  function wireLabelDragArm(){ labelsEl.addEventListener('mousedown',e=>{+  if(e.target.closest('.status-pill'))return;   // editing status, not starting a drag   const row=e.target.closest('.label-row[data-id]');   if(!row)return;   gesture={id:row.dataset.id,startX:e.clientX,startY:e.clientY,src:'label'};@@ -4732,7 +4746,7 @@ function rowItem(key){ function refreshLabelRow(r){   if(!r||!r._lDiv||!r.id)return;   const sk=statusOf(r);-  const tg=sk?`<span class="tag ${statusTagFor(sk)}">${esc(statusTextFor(sk))}</span>`:'';+  const tg=sk?`<span class="tag status-pill ${statusTagFor(sk)}" title="Click to change status">${esc(statusTextFor(sk))}</span>`:'';   // into the name span only: rewriting the row would take the edit button with it   if(r._nameSpan)r._nameSpan.innerHTML=esc(r.name)+tg;   else r._lDiv.innerHTML=esc(r.name)+tg;@@ -5366,6 +5380,33 @@ function syncCellList(){     if(on&&o.scrollIntoView)o.scrollIntoView({block:'nearest'});   }); }+// The status pill in the label column is editable in place. It reuses the table's+// custom option list (openCellList) rather than a native <select> popup, for the+// same reason the table does (no double-list bug, on-brand styling), and it commits+// through commitCell, the SAME path the table's status editor uses: one snapshot+// for undo, the chart and bar refreshed, and a save whose diff logs the status+// event. So a status changed here and one changed in the table are the same edit.+function openStatusPill(r,pillEl){+  if(!r||!r.id)return;+  closeCellList(); closeLabelEditors(true);+  const sel=document.createElement('select');+  sel.innerHTML=STATUS_OPTS.map(x=>`<option value="${x}">${statusLabel[x]}</option>`).join('');+  const cur=statusOf(r);+  if(cur&&!STATUS_OPTS.includes(cur))sel.innerHTML+=`<option value="${esc(cur)}">${esc(cur)}</option>`;+  sel.value=cur;+  // Offscreen: the list reads its options and current value from it, but nothing+  // ever focuses or shows the select itself.+  sel.style.cssText='position:fixed;left:-9999px;top:0;opacity:0';+  document.body.appendChild(sel);+  openCellList(sel,pillEl);+  const cleanup=()=>{ closeCellList(); if(sel.parentNode)sel.remove();+    document.removeEventListener('mousedown',outside,true); document.removeEventListener('keydown',esc,true); };+  const outside=ev=>{ if(!ev.target.closest('.cell-list'))cleanup(); };+  const esc=ev=>{ if(ev.key==='Escape'){ ev.stopPropagation(); cleanup(); } };+  sel.addEventListener('change',()=>{ const v=sel.value; cleanup(); commitCell(r,'status',v); renderTable(); });+  // Deferred, so the click that opened the list does not immediately close it.+  setTimeout(()=>{ document.addEventListener('mousedown',outside,true); document.addEventListener('keydown',esc,true); },0);+} function openCellList(sel,td){   closeCellList();   const el=document.createElement('div');