app: todos can be marked started (◐ in progress) without checking off — v0.3.0

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/lib/version.mjs

@@ -1 +1 @@
-export const APP_VERSION = "0.2.0";
+export const APP_VERSION = "0.3.0";

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bms-backbone",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "type": "module",
   "scripts": {

app/prisma/schema.prisma

@@ -26,6 +26,7 @@ model Todo {
   id       Int      @id @default(autoincrement())
   text     String
   done     Boolean  @default(false)
+  started  Boolean  @default(false)
   parentId Int?
   created  DateTime @default(now())
 }

app/public/app.js

@@ -67,9 +67,11 @@ document.addEventListener("keydown", (e) => {
 
 // ── Today ────────────────────────────────────────────────────────
 function todoRow(t, sub) {
+  const going = t.started && !t.done;
   return `<div class="todo" ${sub ? 'style="margin-left:26px"' : ""}>
     <input type="checkbox" data-t="${t.id}" ${t.done ? "checked" : ""}>
-    <span class="${t.done ? "done" : ""}" style="flex:1">${sub ? "↳ " : ""}${esc(t.text)}</span>
+    <span class="${t.done ? "done" : going ? "started" : ""}" style="flex:1">${sub ? "↳ " : ""}${esc(t.text)}${going ? ` <span class="pill butter">◐ in progress</span>` : ""}</span>
+    ${t.done ? "" : `<button class="startbtn${going ? " on" : ""}" data-start="${t.id}" title="${going ? "not started after all" : "mark as started"}">◐</button>`}
     ${sub ? "" : `<button class="chip" data-sub="${t.id}" title="add subtask">＋</button>`}</div>
     ${sub ? "" : `<div class="subform" data-subform="${t.id}" hidden style="margin:2px 0 6px 26px">
       <input type="text" placeholder="subtask… ⇧Enter = another · Enter = new task · ⌫ empty = undo · Esc" style="width:88%;padding:7px 12px;font-size:13.5px"></div>`}`;
@@ -138,6 +140,7 @@ async function today() {
       }
     }));
   view.querySelectorAll("[data-t]").forEach((c) => c.addEventListener("change", async () => { await api("/api/todos/toggle", { id: Number(c.dataset.t) }); today(); }));
+  view.querySelectorAll("[data-start]").forEach((b) => b.addEventListener("click", async () => { await api("/api/todos/start", { id: Number(b.dataset.start) }); today(); }));
   view.querySelectorAll("[data-s]").forEach((c) => c.addEventListener("change", async () => { await api("/api/shopping/toggle", { id: Number(c.dataset.s) }); today(); }));
   $("#goto-firing")?.addEventListener("click", () => $('#nav button[data-v="firings"]').click());
 }

app/public/index.html

@@ -51,6 +51,10 @@
   .todo:last-child { border: none; }
   .todo input { width: 17px; height: 17px; accent-color: var(--sage); flex-shrink: 0; }
   .todo .done { text-decoration: line-through; color: #b1a0ae; }
+  .todo .started { color: var(--plum-deep); font-weight: 650; }
+  .startbtn { background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; color: #ddcfd9; padding: 2px 5px; flex-shrink: 0; }
+  .startbtn:hover { color: var(--plum); }
+  .startbtn.on { color: #c9a24a; }
   .pill { display: inline-block; font-size: 12px; font-weight: 650; padding: 3px 11px; border-radius: 999px; background: var(--blush); color: var(--plum-deep); }
   .pill.sage { background: var(--sage-soft); color: #5c7157; }
   .pill.butter { background: var(--butter); color: #8d6a52; }