Chronological sort button for projects and tasks

index.html

@@ -708,6 +708,12 @@
               </button>
               <div class="gfly gfleft"><div class="seg gzoom" id="gzoom"></div></div>
             </div>
+            <div class="gfctl gtog" id="ctl-chrono">
+              <button class="gficon" id="gchronobtn" title="Sort by start date" onclick="sortChronological()">
+                <svg width="19" height="19" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5h7"/><path d="M4 10h10"/><path d="M4 14.5h5"/><path d="M15 4.5v11"/><path d="M12.2 13.2 15 16l2.8-2.8"/></svg>
+              </button>
+              <div class="gfly"><span class="gfdesc" id="desc-chrono">Sorted by start date</span></div>
+            </div>
             <div class="gfctl gtog" id="ctl-focus">
               <button class="gficon gfocus" id="gfocusbtn" title="Today's priorities" onclick="toggleFocus()">
                 <svg width="19" height="19" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="4.3" width="14" height="12.4" rx="2.3"/><path d="M3 8.1h14"/><path d="M6.8 4.3V2.7M13.2 4.3V2.7" stroke-linecap="round"/><rect x="5.8" y="10.4" width="3.1" height="3.1" rx="0.7" fill="currentColor" stroke="none"/></svg>

src/app/main.js

@@ -289,6 +289,20 @@ function toggleFocus(){ focusToday=!focusToday; const b=$id("gfocusbtn"); if(b)b
   defer(renderGantt); }
 let GVIEW="proj"; // "proj" | "tasks" | "subs"
 function setGView(v){ GVIEW=v; defer(renderGantt); }
+/* day offset of a node's bar start; undated items sink to the bottom */
+function startDay(n){ const{s}=spanFor(n); return isNaN(s)?Infinity:s; }
+function projectStartDay(p){ const{s}=rollupSpan(p); return isNaN(s)?Infinity:s; }
+function sortChronological(){
+  snap();
+  const byStart=(a,b)=>startDay(a)-startDay(b)||a.title.localeCompare(b.title);
+  DATA.sort((a,b)=>projectStartDay(a)-projectStartDay(b)||a.title.localeCompare(b.title));
+  DATA.forEach(p=>{
+    p.children.sort(byStart);
+    p.children.forEach(t=>{ if(t.children.length) t.children.sort(byStart); });
+  });
+  flashDesc("chrono","Sorted by start date");
+  renderAll();
+}
 function setZoom(i){ ZOOM=i; setTimeout(renderAll,0); }   // drives the scale window and the gantt zoom
 function renderGantt(){
   const VIS=ZOOMS[ZOOM].v;
@@ -1527,6 +1541,7 @@ const _globals = {
   toggleFlyout, toggleFocus, toggleShowDone, toggleSubs, closeCapture, toggleCapLang, minimizeCapture,
   sendTurn, restoreCapture, skipKey, saveKey, clearKey, closeTranscript, runTranscript, closeReview,
   closeTeam, closeSheet, setFilter, setScaleView, ding, toggleDone, openDetail, setZoom, setGView,
+  sortChronological,
   toggleExp, updTask, refreshBarMenu, addChild, addProject, deleteTask, addCapTask, barDown, barContext, pickSearch,
   uploadPhoto, removePhoto, rvToggle, rvText, rvOwner, rvDue, rvSize, pushApproved, attachTranscript,
   doSearch, refreshCard, delCapTask, setTask, setTaskOwner, setTaskSize, setSub, setSubOwner, addSub,

tests/smoke.test.js

@@ -7,6 +7,7 @@ describe("project layout", () => {
     expect(html).toContain('<script type="module" src="src/app/main.js">');
     expect(html).not.toContain("<script>\n/* ================= sample data");
     expect(html).toContain('onclick="addProject()"');
+    expect(html).toContain('onclick="sortChronological()"');
   });
 
   it("exports core lib modules", async () => {