beads-ui 0.1.1 → 0.2.0

package/app/views/detail.js

@@ -1,10 +1,13 @@
 // Issue Detail view implementation (lit-html based)
 import { html, render } from 'lit-html';
+import { parseView } from '../router.js';
 import { issueDisplayId } from '../utils/issue-id.js';
+import { issueHashFor } from '../utils/issue-url.js';
 import { renderMarkdown } from '../utils/markdown.js';
 import { emojiForPriority } from '../utils/priority-badge.js';
 import { priority_levels } from '../utils/priority.js';
 import { statusLabel } from '../utils/status.js';
+import { showToast } from '../utils/toast.js';
 import { createTypeBadge } from '../utils/type-badge.js';
 
 /**
@@ -21,6 +24,7 @@ import { createTypeBadge } from '../utils/type-badge.js';
  * @property {string} id
  * @property {string} [title]
  * @property {string} [description]
+ * @property {string} [design]
  * @property {string} [acceptance]
  * @property {string} [notes]
  * @property {string} [status]
@@ -58,42 +62,25 @@ export function createDetailView(
   /** @type {boolean} */
   let edit_desc = false;
   /** @type {boolean} */
+  let edit_design = false;
+  /** @type {boolean} */
+  let edit_notes = false;
+  /** @type {boolean} */
   let edit_accept = false;
   /** @type {boolean} */
   let edit_assignee = false;
   /** @type {string} */
   let new_label_text = '';
 
-  /**
-   * Show a transient toast message.
-   * @param {string} text
-   */
-  function showToast(text) {
-    /** @type {HTMLDivElement} */
-    const toast = document.createElement('div');
-    toast.className = 'toast';
-    toast.textContent = text;
-    toast.style.position = 'absolute';
-    toast.style.right = '12px';
-    toast.style.bottom = '12px';
-    toast.style.background = 'rgba(0,0,0,0.8)';
-    toast.style.color = '#fff';
-    toast.style.padding = '8px 10px';
-    toast.style.borderRadius = '4px';
-    toast.style.fontSize = '12px';
-    mount_element.appendChild(toast);
-    setTimeout(() => {
-      try {
-        toast.remove();
-      } catch {
-        /* ignore */
-      }
-    }, 2800);
-  }
-
   /** @param {string} id */
   function issueHref(id) {
-    return `#/issue/${id}`;
+    try {
+      /** @type {'issues'|'epics'|'board'} */
+      const view = parseView(window.location.hash || '');
+      return issueHashFor(view, id);
+    } catch {
+      return issueHashFor('issues', id);
+    }
   }
 
   /**
@@ -159,7 +146,7 @@ export function createDetailView(
       current.title = prev;
       edit_title = false;
       doRender();
-      showToast('Failed to save title');
+      showToast('Failed to save title', 'error');
     } finally {
       pending = false;
     }
@@ -223,7 +210,7 @@ export function createDetailView(
       /** @type {any} */ (current).assignee = prev;
       edit_assignee = false;
       doRender();
-      showToast('Failed to update assignee');
+      showToast('Failed to update assignee', 'error');
     } finally {
       pending = false;
     }
@@ -271,7 +258,7 @@ export function createDetailView(
         doRender();
       }
     } catch {
-      showToast('Failed to add label');
+      showToast('Failed to add label', 'error');
     } finally {
       pending = false;
     }
@@ -294,7 +281,7 @@ export function createDetailView(
         doRender();
       }
     } catch {
-      showToast('Failed to remove label');
+      showToast('Failed to remove label', 'error');
     } finally {
       pending = false;
     }
@@ -329,7 +316,7 @@ export function createDetailView(
     } catch {
       current.status = prev;
       doRender();
-      showToast('Failed to update status');
+      showToast('Failed to update status', 'error');
     } finally {
       pending = false;
     }
@@ -364,7 +351,7 @@ export function createDetailView(
     } catch {
       current.priority = prev;
       doRender();
-      showToast('Failed to update priority');
+      showToast('Failed to update priority', 'error');
     } finally {
       pending = false;
     }
@@ -427,7 +414,7 @@ export function createDetailView(
       current.description = prev;
       edit_desc = false;
       doRender();
-      showToast('Failed to save description');
+      showToast('Failed to save description', 'error');
     } finally {
       pending = false;
     }
@@ -437,6 +424,150 @@ export function createDetailView(
     doRender();
   };
 
+  // Design inline edit handlers (same UX as Description)
+  const onDesignEdit = () => {
+    edit_design = true;
+    doRender();
+    try {
+      const ta = /** @type {HTMLTextAreaElement|null} */ (
+        mount_element.querySelector('#detail-root .design textarea')
+      );
+      if (ta) {
+        ta.focus();
+      }
+    } catch {
+      // ignore focus errors
+    }
+  };
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  const onDesignKeydown = (ev) => {
+    if (ev.key === 'Escape') {
+      edit_design = false;
+      doRender();
+    } else if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey)) {
+      const btn = /** @type {HTMLButtonElement|null} */ (
+        mount_element.querySelector(
+          '#detail-root .design .editable-actions button'
+        )
+      );
+      if (btn) {
+        btn.click();
+      }
+    }
+  };
+  const onDesignSave = async () => {
+    if (!current || pending) {
+      return;
+    }
+    /** @type {HTMLTextAreaElement|null} */
+    const ta = /** @type {any} */ (
+      mount_element.querySelector('#detail-root .design textarea')
+    );
+    const prev = current.design || '';
+    const next = ta ? ta.value : '';
+    if (next === prev) {
+      edit_design = false;
+      doRender();
+      return;
+    }
+    pending = true;
+    if (ta) {
+      ta.disabled = true;
+    }
+    try {
+      const updated = await sendFn('edit-text', {
+        id: current.id,
+        field: 'design',
+        value: next
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        edit_design = false;
+        doRender();
+      }
+    } catch {
+      current.design = prev;
+      edit_design = false;
+      doRender();
+      showToast('Failed to save design', 'error');
+    } finally {
+      pending = false;
+    }
+  };
+  const onDesignCancel = () => {
+    edit_design = false;
+    doRender();
+  };
+
+  // Notes inline edit handlers
+  const onNotesEdit = () => {
+    edit_notes = true;
+    doRender();
+  };
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  const onNotesKeydown = (ev) => {
+    if (ev.key === 'Escape') {
+      edit_notes = false;
+      doRender();
+    } else if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey)) {
+      const btn = /** @type {HTMLButtonElement|null} */ (
+        mount_element.querySelector(
+          '#detail-root .notes .editable-actions button'
+        )
+      );
+      if (btn) {
+        btn.click();
+      }
+    }
+  };
+  const onNotesSave = async () => {
+    if (!current || pending) {
+      return;
+    }
+    /** @type {HTMLTextAreaElement|null} */
+    const ta = /** @type {any} */ (
+      mount_element.querySelector('#detail-root .notes textarea')
+    );
+    const prev = current.notes || '';
+    const next = ta ? ta.value : '';
+    if (next === prev) {
+      edit_notes = false;
+      doRender();
+      return;
+    }
+    pending = true;
+    if (ta) {
+      ta.disabled = true;
+    }
+    try {
+      const updated = await sendFn('edit-text', {
+        id: current.id,
+        field: 'notes',
+        value: next
+      });
+      if (updated && typeof updated === 'object') {
+        current = /** @type {IssueDetail} */ (updated);
+        edit_notes = false;
+        doRender();
+      }
+    } catch {
+      current.notes = prev;
+      edit_notes = false;
+      doRender();
+      showToast('Failed to save notes', 'error');
+    } finally {
+      pending = false;
+    }
+  };
+  const onNotesCancel = () => {
+    edit_notes = false;
+    doRender();
+  };
+
   const onAcceptEdit = () => {
     edit_accept = true;
     doRender();
@@ -448,10 +579,7 @@ export function createDetailView(
     if (ev.key === 'Escape') {
       edit_accept = false;
       doRender();
-    } else if (
-      ev.key === 'Enter' &&
-      /** @type {KeyboardEvent} */ (ev).ctrlKey
-    ) {
+    } else if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey)) {
       const btn = /** @type {HTMLButtonElement|null} */ (
         mount_element.querySelector(
           '#detail-root .acceptance .editable-actions button'
@@ -496,7 +624,7 @@ export function createDetailView(
       current.acceptance = prev;
       edit_accept = false;
       doRender();
-      showToast('Failed to save acceptance');
+      showToast('Failed to save acceptance', 'error');
     } finally {
       pending = false;
     }
@@ -524,13 +652,10 @@ export function createDetailView(
             : items.map((dep) => {
                 const did = dep.id;
                 const href = issueHref(did);
-                return html` <li
-                  style="display:grid;grid-template-columns:auto auto 1fr auto;gap:6px;align-items:center;padding:2px 0;cursor:pointer;"
+                return html`<li
+                  data-href=${href}
                   @click=${() => navigateFn(href)}
                 >
-                  <a href=${href} @click=${makeDepLinkClick(href)}
-                    >${issueDisplayId(did)}</a
-                  >
                   ${createTypeBadge(dep.issue_type || '')}
                   <span class="text-truncate">${dep.title || ''}</span>
                   <button
@@ -562,14 +687,10 @@ export function createDetailView(
               aria-label="Edit title"
               .value=${issue.title || ''}
               @keydown=${onTitleInputKeydown}
-              style="width:100%;font-size:inherit;line-height:inherit;"
             />
-            <button style="margin-left:6px" @click=${onTitleSave}>Save</button>
-            <button style="margin-left:6px" @click=${onTitleCancel}>
-              Cancel
-            </button>
+            <button @click=${onTitleSave}>Save</button>
+            <button @click=${onTitleCancel}>Cancel</button>
           </h2>
-          <span class="mono detail-id">${issueDisplayId(issue.id)}</span>
         </div>`
       : html`<div class="detail-title">
           <h2>
@@ -583,7 +704,6 @@ export function createDetailView(
               >${issue.title || ''}</span
             >
           </h2>
-          <span class="mono detail-id">${issueDisplayId(issue.id)}</span>
         </div>`;
 
     const status_select = html`<select
@@ -667,7 +787,7 @@ export function createDetailView(
     const accept_block = edit_accept
       ? html`<div class="acceptance">
           ${acceptance_text.trim().length > 0
-            ? html`<div class="props-card__title">Acceptance</div>`
+            ? html`<div class="props-card__title">Acceptance Criteria</div>`
             : ''}
           <textarea
             @keydown=${onAcceptKeydown}
@@ -681,29 +801,66 @@ export function createDetailView(
           </div>
         </div>`
       : html`<div class="acceptance">
-          ${acceptance_text.trim().length > 0
-            ? html`<div class="props-card__title">Acceptance</div>
-                <div
-                  class="md editable"
-                  tabindex="0"
-                  role="button"
-                  aria-label="Edit acceptance"
-                  @click=${onAcceptEdit}
-                  @keydown=${onAcceptEditableKeydown}
-                >
-                  ${renderMarkdown(acceptance_text)}
-                </div>`
-            : ''}
+          ${(() => {
+            const text = acceptance_text;
+            const has = text.trim().length > 0;
+            return html`${has
+                ? html`<div class="props-card__title">Acceptance Criteria</div>`
+                : ''}
+              <div
+                class="md editable"
+                tabindex="0"
+                role="button"
+                aria-label="Edit acceptance criteria"
+                @click=${onAcceptEdit}
+                @keydown=${onAcceptEditableKeydown}
+              >
+                ${has
+                  ? renderMarkdown(text)
+                  : html`<div class="muted">Add acceptance criteria…</div>`}
+              </div>`;
+          })()}
         </div>`;
 
-    // Notes (read-only): show heading only if there is content
+    // Notes: editable in-place similar to Description
     const notes_text = String(issue.notes || '');
-    const notes_block = html`<div class="notes">
-      ${notes_text.trim().length > 0
-        ? html`<div class="props-card__title">Notes</div>
-            <div class="md">${renderMarkdown(notes_text)}</div>`
-        : ''}
-    </div>`;
+    const notes_block = edit_notes
+      ? html`<div class="notes">
+          ${notes_text.trim().length > 0
+            ? html`<div class="props-card__title">Notes</div>`
+            : ''}
+          <textarea
+            @keydown=${onNotesKeydown}
+            .value=${notes_text}
+            rows="6"
+            style="width:100%"
+          ></textarea>
+          <div class="editable-actions">
+            <button @click=${onNotesSave}>Save</button>
+            <button @click=${onNotesCancel}>Cancel</button>
+          </div>
+        </div>`
+      : html`<div class="notes">
+          ${(() => {
+            const text = notes_text;
+            const has = text.trim().length > 0;
+            return html`${has
+                ? html`<div class="props-card__title">Notes</div>`
+                : ''}
+              <div
+                class="md editable"
+                tabindex="0"
+                role="button"
+                aria-label="Edit notes"
+                @click=${onNotesEdit}
+                @keydown=${onNotesEditableKeydown}
+              >
+                ${has
+                  ? renderMarkdown(text)
+                  : html`<div class="muted">Add notes…</div>`}
+              </div>`;
+          })()}
+        </div>`;
 
     // Labels section
     const labels = Array.isArray(issue.labels) ? issue.labels : [];
@@ -729,7 +886,7 @@ export function createDetailView(
           <input
             type="text"
             aria-label="Add label"
-            placeholder="Add label…"
+            placeholder="Add label"
             .value=${new_label_text}
             @input=${onLabelInput}
             @keydown=${onLabelKeydown}
@@ -739,12 +896,53 @@ export function createDetailView(
       </div>
     </div>`;
 
+    // Design section block
+    const design_text = String(issue.design || '');
+    const design_block = edit_design
+      ? html`<div class="design">
+          ${design_text.trim().length > 0
+            ? html`<div class="props-card__title">Design</div>`
+            : ''}
+          <textarea
+            @keydown=${onDesignKeydown}
+            .value=${design_text}
+            rows="6"
+            style="width:100%"
+          ></textarea>
+          <div class="editable-actions">
+            <button @click=${onDesignSave}>Save</button>
+            <button @click=${onDesignCancel}>Cancel</button>
+          </div>
+        </div>`
+      : html`<div class="design">
+          ${(() => {
+            const text = design_text;
+            const has = text.trim().length > 0;
+            return html`${has
+                ? html`<div class="props-card__title">Design</div>`
+                : ''}
+              <div
+                class="md editable"
+                tabindex="0"
+                role="button"
+                aria-label="Edit design"
+                @click=${onDesignEdit}
+                @keydown=${onDesignEditableKeydown}
+              >
+                ${has
+                  ? renderMarkdown(text)
+                  : html`<div class="muted">Add design…</div>`}
+              </div>`;
+          })()}
+        </div>`;
+
     return html`
       <div class="panel__body" id="detail-root">
         <div style="position:relative">
           <div class="detail-layout">
             <div class="detail-main">
-              ${title_zone} ${desc_block} ${notes_block} ${accept_block}
+              ${title_zone} ${desc_block} ${design_block} ${notes_block}
+              ${accept_block}
             </div>
             <div class="detail-side">
               <div class="props-card">
@@ -845,22 +1043,6 @@ export function createDetailView(
     // panel header removed for detail view; ID is shown inline with title
   }
 
-  /**
-   * Create an anchor click handler for dependency links.
-   * @param {string} href
-   * @returns {(ev: Event) => void}
-   */
-  function makeDepLinkClick(href) {
-    return (ev) => {
-      ev.preventDefault();
-      /** @type {Event} */
-      const e = ev;
-      // stop bubbling to the li row click
-      e.stopPropagation();
-      navigateFn(href);
-    };
-  }
-
   /**
    * Create a click handler for the remove button of a dependency row.
    * @param {string} did
@@ -961,7 +1143,7 @@ export function createDetailView(
           }
         }
       } catch {
-        showToast('Failed to add dependency');
+        showToast('Failed to add dependency', 'error');
       } finally {
         pending = false;
       }
@@ -998,6 +1180,24 @@ export function createDetailView(
     }
   }
 
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  function onNotesEditableKeydown(ev) {
+    if (ev.key === 'Enter') {
+      onNotesEdit();
+    }
+  }
+
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  function onDesignEditableKeydown(ev) {
+    if (ev.key === 'Enter') {
+      onDesignEdit();
+    }
+  }
+
   return {
     async load(id) {
       if (!id) {

package/app/views/epics.js

@@ -1,5 +1,5 @@
 import { html, render } from 'lit-html';
-import { issueDisplayId } from '../utils/issue-id.js';
+import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
 import { createIssueRowRenderer } from './issue-row.js';
 
 /**
@@ -62,7 +62,7 @@ export function createEpicsView(mount_element, data, goto_issue) {
           tabindex="0"
           aria-expanded=${is_open}
         >
-          <span class="mono">${issueDisplayId(id)}</span>
+          ${createIssueIdRenderer(id, { class_name: 'mono' })}
           <span class="text-truncate" style="margin-left:8px"
             >${epic.title || '(no title)'}</span
           >