yarlo-plugin-board 0.2.0 → 0.2.1

package/dist/board-ui.html

@@ -132,12 +132,33 @@
     .card:active { cursor: grabbing; }
     .card:hover { border-color: var(--accent-dim); }
     .card.dragging { opacity: 0.45; }
+    .card-head {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 0.5rem;
+      margin-bottom: 0.45rem;
+    }
     .card-title {
       font-size: 0.9rem;
       font-weight: 600;
       line-height: 1.35;
-      margin: 0 0 0.45rem;
+      margin: 0;
+      flex: 1;
+      min-width: 0;
+    }
+    button.card-open {
+      font-family: inherit;
+      font-size: 0.7rem;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      border: 1px solid var(--border);
+      background: var(--bg);
+      color: var(--accent);
+      cursor: pointer;
+      flex-shrink: 0;
     }
+    button.card-open:hover { border-color: var(--accent-dim); }
     .badges {
       display: flex;
       flex-wrap: wrap;
@@ -158,6 +179,160 @@
       text-align: center;
       color: var(--muted);
     }
+    .overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.55);
+      z-index: 100;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 1.5rem;
+      overflow-y: auto;
+    }
+    .overlay[hidden] { display: none !important; }
+    .panel {
+      width: min(560px, 100%);
+      max-height: calc(100vh - 3rem);
+      margin-top: 0.5rem;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
+    }
+    .panel-header {
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+    }
+    .panel-header h2 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 700;
+    }
+    .panel-body {
+      padding: 1rem 1.25rem;
+      overflow-y: auto;
+      flex: 1;
+    }
+    .panel-footer {
+      padding: 0.85rem 1.25rem;
+      border-top: 1px solid var(--border);
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      justify-content: flex-end;
+    }
+    .panel-footer button {
+      font-family: inherit;
+      font-size: 0.85rem;
+      padding: 0.45rem 0.9rem;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--card);
+      color: var(--text);
+      cursor: pointer;
+    }
+    .panel-footer button.primary {
+      background: var(--accent-dim);
+      border-color: var(--accent);
+      color: #fff;
+    }
+    .panel-footer button.primary:hover { filter: brightness(1.08); }
+    .panel-footer button:disabled { opacity: 0.5; cursor: not-allowed; }
+    .view-title {
+      font-size: 1.25rem;
+      font-weight: 700;
+      margin: 0 0 0.75rem;
+      line-height: 1.3;
+    }
+    .view-meta {
+      font-family: "JetBrains Mono", monospace;
+      font-size: 0.7rem;
+      color: var(--muted);
+      margin-bottom: 1rem;
+    }
+    .view-content {
+      white-space: pre-wrap;
+      word-break: break-word;
+      font-size: 0.9rem;
+      line-height: 1.5;
+      color: var(--text);
+      margin: 0 0 1rem;
+      padding: 0.75rem;
+      background: var(--bg);
+      border-radius: 8px;
+      border: 1px solid var(--border);
+      min-height: 3rem;
+    }
+    .view-content.empty { color: var(--muted); font-style: italic; }
+    dl.field-list { margin: 0; }
+    dl.field-list dt {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--muted);
+      margin-top: 0.65rem;
+    }
+    dl.field-list dt:first-child { margin-top: 0; }
+    dl.field-list dd { margin: 0.2rem 0 0; font-size: 0.9rem; }
+    .form-group { margin-bottom: 1rem; }
+    .form-group label {
+      display: block;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: var(--muted);
+      margin-bottom: 0.35rem;
+    }
+    .form-group input[type="text"],
+    .form-group input[type="url"],
+    .form-group input[type="number"],
+    .form-group input[type="date"],
+    .form-group input[type="datetime-local"],
+    .form-group select,
+    .form-group textarea {
+      width: 100%;
+      font-family: inherit;
+      font-size: 0.9rem;
+      padding: 0.5rem 0.65rem;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--bg);
+      color: var(--text);
+    }
+    .form-group textarea { min-height: 140px; resize: vertical; }
+    .form-group .checkbox-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .form-group .checkbox-row input { width: auto; }
+    .multi-options {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+    }
+    .multi-options label {
+      text-transform: none;
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+      gap: 0.45rem;
+      color: var(--text);
+    }
+    #panel-error {
+      font-size: 0.85rem;
+      color: var(--danger);
+      margin-bottom: 0.75rem;
+    }
+    #panel-error[hidden] { display: none; }
   </style>
 </head>
 <body>
@@ -172,6 +347,27 @@
   <div id="board" class="board" hidden></div>
   <div id="empty" hidden>No tasks yet. Use <code>yarlo add</code> to create one.</div>
 
+  <div id="overlay" class="overlay" hidden>
+    <div class="panel" role="dialog" aria-modal="true" aria-labelledby="panel-heading">
+      <div class="panel-header">
+        <h2 id="panel-heading">Task</h2>
+        <button type="button" id="panel-close" aria-label="Close">✕</button>
+      </div>
+      <div class="panel-body">
+        <div id="panel-error" hidden></div>
+        <div id="panel-content"></div>
+      </div>
+      <div class="panel-footer" id="panel-footer-view">
+        <button type="button" id="btn-edit">Edit</button>
+        <button type="button" id="btn-close-footer">Close</button>
+      </div>
+      <div class="panel-footer" id="panel-footer-edit" hidden>
+        <button type="button" id="btn-cancel">Cancel</button>
+        <button type="button" class="primary" id="btn-save">Save</button>
+      </div>
+    </div>
+  </div>
+
   <script>
     (function () {
       const ORPHAN_KEY = "__orphan__";
@@ -180,15 +376,69 @@
       const emptyEl = document.getElementById("empty");
       const statusEl = document.getElementById("status");
       const refreshBtn = document.getElementById("refresh");
+      const overlayEl = document.getElementById("overlay");
+      const panelContentEl = document.getElementById("panel-content");
+      const panelErrorEl = document.getElementById("panel-error");
+      const panelHeadingEl = document.getElementById("panel-heading");
+      const panelFooterView = document.getElementById("panel-footer-view");
+      const panelFooterEdit = document.getElementById("panel-footer-edit");
+      const btnEdit = document.getElementById("btn-edit");
+      const btnCloseFooter = document.getElementById("btn-close-footer");
+      const btnCloseX = document.getElementById("panel-close");
+      const btnCancel = document.getElementById("btn-cancel");
+      const btnSave = document.getElementById("btn-save");
 
       let columns = [];
       let tasks = [];
+      let fieldDefinitions = [];
+      let panelMode = "view";
+      let panelDetail = null;
+      let panelLoading = false;
 
       function setStatus(msg, isError) {
         statusEl.textContent = msg || "";
         statusEl.classList.toggle("error", !!isError);
       }
 
+      function setPanelError(msg) {
+        if (!msg) {
+          panelErrorEl.hidden = true;
+          panelErrorEl.textContent = "";
+          return;
+        }
+        panelErrorEl.hidden = false;
+        panelErrorEl.textContent = msg;
+      }
+
+      function summaryFromDetail(d) {
+        const f = d.fields || {};
+        return {
+          id: d.id,
+          title: d.title,
+          status: f.status != null ? f.status : null,
+          priority: f.priority != null ? f.priority : null,
+          labels: f.labels != null ? f.labels : null,
+          assignee: f.assignee != null ? f.assignee : null,
+          due_date: f.due_date != null ? f.due_date : null,
+          estimate: f.estimate != null ? f.estimate : null,
+          updated_at: d.updated_at,
+        };
+      }
+
+      function mergeTaskIntoBoard(detail) {
+        const s = summaryFromDetail(detail);
+        const idx = tasks.findIndex(function (t) { return t.id === s.id; });
+        if (idx >= 0) tasks[idx] = s;
+        else tasks.push(s);
+      }
+
+      function syncTaskUrl(id) {
+        const u = new URL(window.location.href);
+        if (id) u.searchParams.set("task", id);
+        else u.searchParams.delete("task");
+        window.history.replaceState({}, "", u.pathname + u.search);
+      }
+
       function priorityClass(p) {
         if (!p || typeof p !== "string") return "";
         return "priority-" + p.replace(/_/g, "-");
@@ -199,6 +449,40 @@
         return String(key).replace(/_/g, " ");
       }
 
+      function formatFieldValueForView(def, value) {
+        if (value === undefined || value === null) return "—";
+        if (def.type === "boolean") return value ? "Yes" : "No";
+        if (def.type === "multi_select" && Array.isArray(value)) {
+          return value.length ? value.join(", ") : "—";
+        }
+        return String(value);
+      }
+
+      function isoToDateInput(iso) {
+        if (typeof iso !== "string" || !iso) return "";
+        const d = new Date(iso);
+        if (isNaN(d.getTime())) return "";
+        return d.toISOString().slice(0, 10);
+      }
+
+      function isoToDatetimeLocal(iso) {
+        if (typeof iso !== "string" || !iso) return "";
+        const d = new Date(iso);
+        if (isNaN(d.getTime())) return "";
+        const pad = function (n) { return String(n).padStart(2, "0"); };
+        return (
+          d.getFullYear() +
+          "-" +
+          pad(d.getMonth() + 1) +
+          "-" +
+          pad(d.getDate()) +
+          "T" +
+          pad(d.getHours()) +
+          ":" +
+          pad(d.getMinutes())
+        );
+      }
+
       function bucketTasks(cols, taskList) {
         const colSet = new Set(cols);
         const buckets = new Map();
@@ -222,10 +506,30 @@
         card.dataset.taskId = task.id;
         card.dataset.status = typeof task.status === "string" ? task.status : "";
 
+        const head = document.createElement("div");
+        head.className = "card-head";
+
         const title = document.createElement("h2");
         title.className = "card-title";
         title.textContent = task.title || "(no title)";
 
+        const openBtn = document.createElement("button");
+        openBtn.type = "button";
+        openBtn.className = "card-open";
+        openBtn.textContent = "Open";
+        openBtn.draggable = false;
+        openBtn.addEventListener("click", function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+          openTaskPanel(task.id);
+        });
+        openBtn.addEventListener("mousedown", function (e) {
+          e.stopPropagation();
+        });
+
+        head.appendChild(title);
+        head.appendChild(openBtn);
+
         const badges = document.createElement("div");
         badges.className = "badges";
         if (task.priority) {
@@ -249,7 +553,7 @@
           badges.appendChild(b);
         }
 
-        card.appendChild(title);
+        card.appendChild(head);
         if (badges.children.length) card.appendChild(badges);
 
         card.addEventListener("dragstart", function (e) {
@@ -345,9 +649,7 @@
           }
           const updated = data.task;
           if (updated && updated.id) {
-            tasks = tasks.map(function (t) {
-              return t.id === updated.id ? updated : t;
-            });
+            mergeTaskIntoBoard(updated);
           }
           setStatus("Saved");
           render();
@@ -356,6 +658,374 @@
         }
       }
 
+      function renderPanelView() {
+        const d = panelDetail;
+        if (!d) return;
+        panelContentEl.innerHTML = "";
+        const titleEl = document.createElement("h3");
+        titleEl.className = "view-title";
+        titleEl.textContent = d.title || "(no title)";
+
+        const meta = document.createElement("div");
+        meta.className = "view-meta";
+        meta.textContent =
+          d.id +
+          " · updated " +
+          (d.updated_at || "—") +
+          " · created " +
+          (d.created_at || "—");
+
+        const contentEl = document.createElement("div");
+        const body = (d.content || "").trim();
+        contentEl.className = "view-content" + (body ? "" : " empty");
+        contentEl.textContent = body || "No description.";
+
+        panelContentEl.appendChild(titleEl);
+        panelContentEl.appendChild(meta);
+        panelContentEl.appendChild(contentEl);
+
+        const dl = document.createElement("dl");
+        dl.className = "field-list";
+        fieldDefinitions.forEach(function (def) {
+          const dt = document.createElement("dt");
+          dt.textContent = def.name.replace(/_/g, " ");
+          const dd = document.createElement("dd");
+          dd.textContent = formatFieldValueForView(def, d.fields[def.name]);
+          dl.appendChild(dt);
+          dl.appendChild(dd);
+        });
+        panelContentEl.appendChild(dl);
+      }
+
+      function renderFieldEditor(def, fields) {
+        const wrap = document.createElement("div");
+        wrap.className = "form-group";
+        const label = document.createElement("label");
+        label.setAttribute("for", "fld-" + def.name);
+        label.textContent = (def.description || def.name).replace(/_/g, " ");
+        wrap.appendChild(label);
+
+        const raw = fields[def.name];
+        const id = "fld-" + def.name;
+
+        if (def.type === "single_select") {
+          const sel = document.createElement("select");
+          sel.id = id;
+          sel.dataset.fieldName = def.name;
+          sel.dataset.fieldType = def.type;
+          const opts = def.options || [];
+          if (!def.required) {
+            const o = document.createElement("option");
+            o.value = "";
+            o.textContent = "—";
+            sel.appendChild(o);
+          }
+          opts.forEach(function (op) {
+            const o = document.createElement("option");
+            o.value = op;
+            o.textContent = op;
+            sel.appendChild(o);
+          });
+          sel.value = typeof raw === "string" ? raw : "";
+          wrap.appendChild(sel);
+          return wrap;
+        }
+
+        if (def.type === "multi_select") {
+          const box = document.createElement("div");
+          box.className = "multi-options";
+          box.dataset.fieldName = def.name;
+          box.dataset.fieldType = def.type;
+          const selected = Array.isArray(raw) ? raw.map(String) : [];
+          (def.options || []).forEach(function (op) {
+            const row = document.createElement("label");
+            const cb = document.createElement("input");
+            cb.type = "checkbox";
+            cb.value = op;
+            cb.checked = selected.indexOf(op) >= 0;
+            row.appendChild(cb);
+            row.appendChild(document.createTextNode(" " + op));
+            box.appendChild(row);
+          });
+          wrap.appendChild(box);
+          return wrap;
+        }
+
+        if (def.type === "boolean") {
+          const row = document.createElement("div");
+          row.className = "checkbox-row";
+          const cb = document.createElement("input");
+          cb.type = "checkbox";
+          cb.id = id;
+          cb.dataset.fieldName = def.name;
+          cb.dataset.fieldType = def.type;
+          cb.checked = !!raw;
+          row.appendChild(cb);
+          row.appendChild(document.createTextNode(" Enabled"));
+          wrap.appendChild(row);
+          return wrap;
+        }
+
+        if (def.type === "number") {
+          const inp = document.createElement("input");
+          inp.type = "number";
+          inp.id = id;
+          inp.step = "any";
+          inp.dataset.fieldName = def.name;
+          inp.dataset.fieldType = def.type;
+          inp.value = raw != null && raw !== "" ? String(raw) : "";
+          wrap.appendChild(inp);
+          return wrap;
+        }
+
+        if (def.type === "date") {
+          const inp = document.createElement("input");
+          inp.type = "datetime-local";
+          inp.id = id;
+          inp.dataset.fieldName = def.name;
+          inp.dataset.fieldType = def.type;
+          inp.value = isoToDatetimeLocal(typeof raw === "string" ? raw : "");
+          wrap.appendChild(inp);
+          return wrap;
+        }
+
+        const inp = document.createElement("input");
+        inp.type = def.type === "url" ? "url" : "text";
+        inp.id = id;
+        inp.dataset.fieldName = def.name;
+        inp.dataset.fieldType = def.type;
+        inp.value = raw != null && raw !== undefined ? String(raw) : "";
+        wrap.appendChild(inp);
+        return wrap;
+      }
+
+      function renderPanelEdit() {
+        const d = panelDetail;
+        if (!d) return;
+        panelContentEl.innerHTML = "";
+
+        const titleGroup = document.createElement("div");
+        titleGroup.className = "form-group";
+        const tl = document.createElement("label");
+        tl.setAttribute("for", "edit-title");
+        tl.textContent = "Title";
+        const titleInp = document.createElement("input");
+        titleInp.type = "text";
+        titleInp.id = "edit-title";
+        titleInp.value = d.title || "";
+        titleGroup.appendChild(tl);
+        titleGroup.appendChild(titleInp);
+        panelContentEl.appendChild(titleGroup);
+
+        const contentGroup = document.createElement("div");
+        contentGroup.className = "form-group";
+        const cl = document.createElement("label");
+        cl.setAttribute("for", "edit-content");
+        cl.textContent = "Content (markdown)";
+        const ta = document.createElement("textarea");
+        ta.id = "edit-content";
+        ta.value = d.content || "";
+        contentGroup.appendChild(cl);
+        contentGroup.appendChild(ta);
+        panelContentEl.appendChild(contentGroup);
+
+        const f = { ...d.fields };
+        fieldDefinitions.forEach(function (def) {
+          panelContentEl.appendChild(renderFieldEditor(def, f));
+        });
+      }
+
+      function collectEditPayload() {
+        const titleInp = document.getElementById("edit-title");
+        const contentTa = document.getElementById("edit-content");
+        const payload = {
+          title: titleInp ? titleInp.value : "",
+          content: contentTa ? contentTa.value : "",
+          fields: {},
+        };
+
+        fieldDefinitions.forEach(function (def) {
+          if (def.type === "single_select") {
+            const sel = panelContentEl.querySelector(
+              'select[data-field-name="' + def.name + '"]',
+            );
+            if (!sel) return;
+            const v = sel.value;
+            if (v === "" && !def.required) {
+              return;
+            }
+            payload.fields[def.name] = v;
+            return;
+          }
+          if (def.type === "multi_select") {
+            const box = panelContentEl.querySelector(
+              'div[data-field-name="' + def.name + '"][data-field-type="multi_select"]',
+            );
+            if (!box) return;
+            const checked = [];
+            box.querySelectorAll('input[type="checkbox"]').forEach(function (cb) {
+              if (cb.checked) checked.push(cb.value);
+            });
+            payload.fields[def.name] = checked;
+            return;
+          }
+          if (def.type === "boolean") {
+            const cb = panelContentEl.querySelector(
+              'input[data-field-name="' + def.name + '"][data-field-type="boolean"]',
+            );
+            if (cb) payload.fields[def.name] = !!cb.checked;
+            return;
+          }
+          if (def.type === "number") {
+            const inp = panelContentEl.querySelector(
+              'input[data-field-name="' + def.name + '"][data-field-type="number"]',
+            );
+            if (!inp || inp.value === "") return;
+            const n = Number.parseFloat(inp.value);
+            if (!Number.isNaN(n)) payload.fields[def.name] = n;
+            return;
+          }
+          if (def.type === "date") {
+            const inp = panelContentEl.querySelector(
+              'input[data-field-name="' + def.name + '"][data-field-type="date"]',
+            );
+            if (!inp || !inp.value) return;
+            const iso = new Date(inp.value);
+            if (!isNaN(iso.getTime())) {
+              payload.fields[def.name] = iso.toISOString();
+            }
+            return;
+          }
+          const inp = panelContentEl.querySelector(
+            'input[data-field-name="' + def.name + '"]',
+          );
+          if (inp) payload.fields[def.name] = inp.value;
+        });
+
+        return payload;
+      }
+
+      function setPanelMode(mode) {
+        panelMode = mode;
+        if (mode === "view") {
+          panelFooterView.hidden = false;
+          panelFooterEdit.hidden = true;
+          renderPanelView();
+        } else {
+          panelFooterView.hidden = true;
+          panelFooterEdit.hidden = false;
+          renderPanelEdit();
+        }
+      }
+
+      function closeTaskPanel() {
+        overlayEl.hidden = true;
+        panelDetail = null;
+        setPanelError("");
+        syncTaskUrl(null);
+      }
+
+      async function openTaskPanel(id) {
+        setPanelError("");
+        overlayEl.hidden = false;
+        panelHeadingEl.textContent = "Task";
+        panelContentEl.innerHTML =
+          '<p class="view-meta">Loading…</p>';
+        panelFooterView.hidden = false;
+        panelFooterEdit.hidden = true;
+        btnEdit.disabled = true;
+        panelLoading = true;
+        syncTaskUrl(id);
+
+        try {
+          const res = await fetch("/api/tasks/" + encodeURIComponent(id));
+          const data = await res.json().catch(function () { return {}; });
+          if (!res.ok) {
+            panelContentEl.innerHTML = "";
+            setPanelError(data.error || res.statusText);
+            btnEdit.disabled = true;
+            panelLoading = false;
+            return;
+          }
+          panelDetail = data.task;
+          panelHeadingEl.textContent = panelDetail.title || panelDetail.id;
+          btnEdit.disabled = false;
+          setPanelMode("view");
+        } catch (err) {
+          panelContentEl.innerHTML = "";
+          setPanelError(err.message || "Request failed");
+          btnEdit.disabled = true;
+        }
+        panelLoading = false;
+      }
+
+      async function saveTask() {
+        if (!panelDetail) return;
+        setPanelError("");
+        const p = collectEditPayload();
+        btnSave.disabled = true;
+        try {
+          const res = await fetch(
+            "/api/tasks/" + encodeURIComponent(panelDetail.id),
+            {
+              method: "PATCH",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                title: p.title,
+                content: p.content,
+                fields: p.fields,
+              }),
+            },
+          );
+          const data = await res.json().catch(function () { return {}; });
+          if (!res.ok) {
+            setPanelError(data.error || res.statusText);
+            btnSave.disabled = false;
+            return;
+          }
+          panelDetail = data.task;
+          panelHeadingEl.textContent = panelDetail.title || panelDetail.id;
+          mergeTaskIntoBoard(panelDetail);
+          render();
+          setPanelMode("view");
+        } catch (err) {
+          setPanelError(err.message || "Request failed");
+        }
+        btnSave.disabled = false;
+      }
+
+      btnEdit.addEventListener("click", function () {
+        if (panelLoading || !panelDetail) return;
+        setPanelMode("edit");
+      });
+
+      btnCancel.addEventListener("click", function () {
+        setPanelMode("view");
+        setPanelError("");
+      });
+
+      btnSave.addEventListener("click", saveTask);
+
+      function closePanelClick(e) {
+        if (e.target === overlayEl) closeTaskPanel();
+      }
+      overlayEl.addEventListener("click", closePanelClick);
+      btnCloseX.addEventListener("click", closeTaskPanel);
+      btnCloseFooter.addEventListener("click", closeTaskPanel);
+
+      document.addEventListener("keydown", function (e) {
+        if (e.key === "Escape" && !overlayEl.hidden) {
+          closeTaskPanel();
+        }
+      });
+
+      const panelInner = overlayEl.querySelector(".panel");
+      if (panelInner) {
+        panelInner.addEventListener("click", function (e) {
+          e.stopPropagation();
+        });
+      }
+
       async function load() {
         setStatus("");
         loadingEl.hidden = false;
@@ -367,9 +1037,15 @@
           if (!res.ok) throw new Error(data.error || res.statusText);
           columns = data.columns || [];
           tasks = data.tasks || [];
+          fieldDefinitions = data.fieldDefinitions || [];
           loadingEl.hidden = true;
           render();
           setStatus(columns.length + " columns · " + tasks.length + " tasks");
+
+          const qTask = new URLSearchParams(window.location.search).get("task");
+          if (qTask) {
+            openTaskPanel(qTask);
+          }
         } catch (err) {
           loadingEl.hidden = true;
           setStatus(err.message || "Failed to load", true);