beads-ui 0.3.0 → 0.4.0

package/app/views/epics.js

@@ -1,280 +0,0 @@
-import { html, render } from 'lit-html';
-import { createListSelectors } from '../data/list-selectors.js';
-import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
-import { createIssueRowRenderer } from './issue-row.js';
-
-/**
- * @typedef {{ id: string, title?: string, status?: string, priority?: number, issue_type?: string, assignee?: string, created_at?: number, updated_at?: number }} IssueLite
- */
-
-/**
- * Epics view (push-only):
- * - Derives epic groups from the local issues store (no RPC reads)
- * - Subscribes to `tab:epics` for top-level membership
- * - On expand, subscribes to `detail:{id}` (issue-detail) for the epic
- * - Renders children from the epic detail's `dependents` list
- * - Provides inline edits via mutations; UI re-renders on push
- * @param {HTMLElement} mount_element
- * @param {{ updateIssue: (input: any) => Promise<any> }} data
- * @param {(id: string) => void} goto_issue - Navigate to issue detail.
- * @param {{ subscribeList: (client_id: string, spec: { type: string, params?: Record<string, string|number|boolean> }) => Promise<() => Promise<void>>, selectors: { getIds: (client_id: string) => string[], count?: (client_id: string) => number } }} [subscriptions]
- * @param {{ snapshotFor?: (client_id: string) => any[], subscribe?: (fn: () => void) => () => void }} [issue_stores]
- */
-export function createEpicsView(
-  mount_element,
-  data,
-  goto_issue,
-  subscriptions = undefined,
-  issue_stores = undefined
-) {
-  /** @type {any[]} */
-  let groups = [];
-  /** @type {Set<string>} */
-  const expanded = new Set();
-  /** @type {Set<string>} */
-  const loading = new Set();
-  /** @type {Map<string, () => Promise<void>>} */
-  const epic_unsubs = new Map();
-  // Centralized selection helpers
-  const selectors = issue_stores ? createListSelectors(issue_stores) : null;
-  // Live re-render on pushes: recompute groups when stores change
-  if (selectors) {
-    selectors.subscribe(() => {
-      const had_none = groups.length === 0;
-      groups = buildGroupsFromSnapshot();
-      doRender();
-      // Auto-expand first epic when transitioning from empty to non-empty
-      if (had_none && groups.length > 0) {
-        const first_id = String(groups[0].epic?.id || '');
-        if (first_id && !expanded.has(first_id)) {
-          void toggle(first_id);
-        }
-      }
-    });
-  }
-
-  // Shared row renderer used for children rows
-  const renderRow = createIssueRowRenderer({
-    navigate: (id) => goto_issue(id),
-    onUpdate: updateInline,
-    requestRender: doRender,
-    getSelectedId: () => null,
-    row_class: 'epic-row'
-  });
-
-  function doRender() {
-    render(template(), mount_element);
-  }
-
-  function template() {
-    if (!groups.length) {
-      return html`<div class="panel__header muted">No epics found.</div>`;
-    }
-    return html`${groups.map((g) => groupTemplate(g))}`;
-  }
-
-  /**
-   * @param {any} g
-   */
-  function groupTemplate(g) {
-    const epic = g.epic || {};
-    const id = String(epic.id || '');
-    const is_open = expanded.has(id);
-    // Compose children via selectors
-    const list = selectors ? selectors.selectEpicChildren(id) : [];
-    const is_loading = loading.has(id);
-    return html`
-      <div class="epic-group" data-epic-id=${id}>
-        <div
-          class="epic-header"
-          @click=${() => toggle(id)}
-          role="button"
-          tabindex="0"
-          aria-expanded=${is_open}
-        >
-          ${createIssueIdRenderer(id, { class_name: 'mono' })}
-          <span class="text-truncate" style="margin-left:8px"
-            >${epic.title || '(no title)'}</span
-          >
-          <span
-            class="epic-progress"
-            style="margin-left:auto; display:flex; align-items:center; gap:8px;"
-          >
-            <progress
-              value=${Number(g.closed_children || 0)}
-              max=${Math.max(1, Number(g.total_children || 0))}
-            ></progress>
-            <span class="muted mono"
-              >${g.closed_children}/${g.total_children}</span
-            >
-          </span>
-        </div>
-        ${is_open
-          ? html`<div class="epic-children">
-              ${is_loading
-                ? html`<div class="muted">Loading…</div>`
-                : list.length === 0
-                  ? html`<div class="muted">No issues found</div>`
-                  : html`<table class="table">
-                      <colgroup>
-                        <col style="width: 100px" />
-                        <col style="width: 120px" />
-                        <col />
-                        <col style="width: 120px" />
-                        <col style="width: 160px" />
-                        <col style="width: 130px" />
-                      </colgroup>
-                      <thead>
-                        <tr>
-                          <th>ID</th>
-                          <th>Type</th>
-                          <th>Title</th>
-                          <th>Status</th>
-                          <th>Assignee</th>
-                          <th>Priority</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        ${list.map((it) => renderRow(it))}
-                      </tbody>
-                    </table>`}
-            </div>`
-          : null}
-      </div>
-    `;
-  }
-
-  /**
-   * @param {string} id
-   * @param {{ [k: string]: any }} patch
-   */
-  async function updateInline(id, patch) {
-    try {
-      await data.updateIssue({ id, ...patch });
-      // Re-render; view will update on subsequent push
-      doRender();
-    } catch {
-      // swallow; UI remains
-    }
-  }
-
-  /**
-   * @param {string} epic_id
-   */
-  async function toggle(epic_id) {
-    if (!expanded.has(epic_id)) {
-      expanded.add(epic_id);
-      loading.add(epic_id);
-      doRender();
-      // Subscribe to epic detail; children are rendered from `dependents`
-      if (subscriptions && typeof subscriptions.subscribeList === 'function') {
-        try {
-          // Register store first to avoid dropping the initial snapshot
-          try {
-            if (issue_stores && /** @type {any} */ (issue_stores).register) {
-              /** @type {any} */ (issue_stores).register(`detail:${epic_id}`, {
-                type: 'issue-detail',
-                params: { id: epic_id }
-              });
-            }
-          } catch {
-            // ignore
-          }
-          const u = await subscriptions.subscribeList(`detail:${epic_id}`, {
-            type: 'issue-detail',
-            params: { id: epic_id }
-          });
-          epic_unsubs.set(epic_id, u);
-        } catch {
-          // ignore subscription failures
-        }
-      }
-      // Mark as not loading after subscribe attempt; membership will stream in
-      loading.delete(epic_id);
-    } else {
-      expanded.delete(epic_id);
-      // Unsubscribe when collapsing
-      if (epic_unsubs.has(epic_id)) {
-        try {
-          const u = epic_unsubs.get(epic_id);
-          if (u) {
-            await u();
-          }
-        } catch {
-          // ignore
-        }
-        epic_unsubs.delete(epic_id);
-        try {
-          if (issue_stores && /** @type {any} */ (issue_stores).unregister) {
-            /** @type {any} */ (issue_stores).unregister(`detail:${epic_id}`);
-          }
-        } catch {
-          // ignore
-        }
-      }
-    }
-    doRender();
-  }
-
-  /** Build groups from the current `tab:epics` snapshot. */
-  function buildGroupsFromSnapshot() {
-    /** @type {IssueLite[]} */
-    const epic_entities =
-      issue_stores && issue_stores.snapshotFor
-        ? /** @type {IssueLite[]} */ (
-            issue_stores.snapshotFor('tab:epics') || []
-          )
-        : [];
-    const next_groups = [];
-    for (const epic of epic_entities) {
-      const dependents = Array.isArray(/** @type {any} */ (epic).dependents)
-        ? /** @type {any[]} */ (/** @type {any} */ (epic).dependents)
-        : [];
-      // Prefer explicit counters when provided by server; otherwise derive
-      const has_total = Number.isFinite(
-        /** @type {any} */ (epic).total_children
-      );
-      const has_closed = Number.isFinite(
-        /** @type {any} */ (epic).closed_children
-      );
-      const total = has_total
-        ? Number(/** @type {any} */ (epic).total_children) || 0
-        : dependents.length;
-      let closed = has_closed
-        ? Number(/** @type {any} */ (epic).closed_children) || 0
-        : 0;
-      if (!has_closed) {
-        for (const d of dependents) {
-          if (String(d.status || '') === 'closed') {
-            closed++;
-          }
-        }
-      }
-      next_groups.push({
-        epic,
-        total_children: total,
-        closed_children: closed
-      });
-    }
-    return next_groups;
-  }
-
-  return {
-    async load() {
-      groups = buildGroupsFromSnapshot();
-      doRender();
-      // Auto-expand first epic on screen
-      try {
-        if (groups.length > 0) {
-          const first_id = String(groups[0].epic?.id || '');
-          if (first_id && !expanded.has(first_id)) {
-            // This will render and load children lazily
-            await toggle(first_id);
-          }
-        }
-      } catch {
-        // ignore auto-expand failures
-      }
-    }
-  };
-}

package/app/views/issue-dialog.js

@@ -1,163 +0,0 @@
-// Lightweight wrapper around the native <dialog> for issue details
-import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
-
-// Provides: open(id), close(), getMount()
-// Ensures accessibility, backdrop click to close, and Esc handling.
-
-/**
- * @typedef {{ getState: () => { selected_id: string|null } }} Store
- */
-
-/**
- * Create and manage the Issue Details dialog.
- * @param {HTMLElement} mount_element - Container to attach the <dialog> to (e.g., #detail-panel)
- * @param {Store} store - Read-only access to app state
- * @param {() => void} onClose - Called when dialog requests close (backdrop/esc/button)
- * @returns {{ open: (id: string) => void, close: () => void, getMount: () => HTMLElement }}
- */
-export function createIssueDialog(mount_element, store, onClose) {
-  const dialog = document.createElement('dialog');
-  dialog.id = 'issue-dialog';
-  dialog.setAttribute('role', 'dialog');
-  dialog.setAttribute('aria-modal', 'true');
-
-  // Shell: header (id + close) + body mount
-  dialog.innerHTML = `
-    <div class="issue-dialog__container" part="container">
-      <header class="issue-dialog__header">
-        <div class="issue-dialog__title">
-          <span class="mono" id="issue-dialog-title"></span>
-        </div>
-        <button type="button" class="issue-dialog__close" aria-label="Close">×</button>
-      </header>
-      <div class="issue-dialog__body" id="issue-dialog-body"></div>
-    </div>
-  `;
-
-  mount_element.appendChild(dialog);
-
-  const body_mount = /** @type {HTMLElement} */ (
-    dialog.querySelector('#issue-dialog-body')
-  );
-  const title_el = /** @type {HTMLElement} */ (
-    dialog.querySelector('#issue-dialog-title')
-  );
-  const btn_close = /** @type {HTMLButtonElement} */ (
-    dialog.querySelector('.issue-dialog__close')
-  );
-
-  /**
-   * @param {string} id
-   */
-  function setTitle(id) {
-    // Use copyable ID renderer but keep visible text as raw id for tests/clarity
-    title_el.replaceChildren();
-    title_el.appendChild(createIssueIdRenderer(id));
-  }
-
-  // Backdrop click: when clicking the dialog itself (outside container), close
-  dialog.addEventListener('mousedown', (ev) => {
-    if (ev.target === dialog) {
-      ev.preventDefault();
-      requestClose();
-    }
-  });
-  // Esc key produces a cancel event on <dialog>
-  dialog.addEventListener('cancel', (ev) => {
-    ev.preventDefault();
-    requestClose();
-  });
-  // Close button
-  btn_close.addEventListener('click', () => requestClose());
-
-  /** @type {HTMLElement | null} */
-  let last_focus = null;
-
-  function requestClose() {
-    try {
-      if (typeof dialog.close === 'function') {
-        dialog.close();
-      } else {
-        dialog.removeAttribute('open');
-      }
-    } catch {
-      dialog.removeAttribute('open');
-    }
-    try {
-      onClose();
-    } catch {
-      // ignore consumer errors
-    }
-    // Restore focus to the element that had focus before opening
-    restoreFocus();
-  }
-
-  /**
-   * @param {string} id
-   */
-  function open(id) {
-    // Capture currently focused element to restore after closing
-    try {
-      const ae = document.activeElement;
-      if (ae && ae instanceof HTMLElement) {
-        last_focus = ae;
-      } else {
-        last_focus = null;
-      }
-    } catch {
-      last_focus = null;
-    }
-    setTitle(id);
-    try {
-      if ('showModal' in dialog && typeof dialog.showModal === 'function') {
-        dialog.showModal();
-      } else {
-        dialog.setAttribute('open', '');
-      }
-      // Focus the dialog container for keyboard users
-      setTimeout(() => {
-        try {
-          btn_close.focus();
-        } catch {
-          // ignore
-        }
-      }, 0);
-    } catch {
-      // Fallback for environments without <dialog>
-      dialog.setAttribute('open', '');
-    }
-  }
-
-  function close() {
-    try {
-      if (typeof dialog.close === 'function') {
-        dialog.close();
-      } else {
-        dialog.removeAttribute('open');
-      }
-    } catch {
-      dialog.removeAttribute('open');
-    }
-    restoreFocus();
-  }
-
-  function restoreFocus() {
-    try {
-      if (last_focus && document.contains(last_focus)) {
-        last_focus.focus();
-      }
-    } catch {
-      // ignore focus errors
-    } finally {
-      last_focus = null;
-    }
-  }
-
-  return {
-    open,
-    close,
-    getMount() {
-      return body_mount;
-    }
-  };
-}

package/app/views/issue-row.js

@@ -1,190 +0,0 @@
-import { html } from 'lit-html';
-import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
-import { emojiForPriority } from '../utils/priority-badge.js';
-import { priority_levels } from '../utils/priority.js';
-import { statusLabel } from '../utils/status.js';
-import { createTypeBadge } from '../utils/type-badge.js';
-
-/**
- * @typedef {{ id: string, title?: string, status?: string, priority?: number, issue_type?: string, assignee?: string }} IssueRowData
- */
-
-/**
- * Create a reusable issue row renderer used by list and epics views.
- * Handles inline editing for title/assignee and selects for status/priority.
- * @param {{
- *   navigate: (id: string) => void,
- *   onUpdate: (id: string, patch: { title?: string, assignee?: string, status?: 'open'|'in_progress'|'closed', priority?: number }) => Promise<void>,
- *   requestRender: () => void,
- *   getSelectedId?: () => string | null,
- *   row_class?: string
- * }} options
- * @returns {(it: IssueRowData) => import('lit-html').TemplateResult<1>}
- */
-export function createIssueRowRenderer(options) {
-  const navigate = options.navigate;
-  const on_update = options.onUpdate;
-  const request_render = options.requestRender;
-  const get_selected_id = options.getSelectedId || (() => null);
-  const row_class = options.row_class || 'issue-row';
-
-  /** @type {Set<string>} */
-  const editing = new Set();
-
-  /**
-   * @param {string} id
-   * @param {'title'|'assignee'} key
-   * @param {string} value
-   * @param {string} [placeholder]
-   */
-  function editableText(id, key, value, placeholder = '') {
-    const k = `${id}:${key}`;
-    const is_edit = editing.has(k);
-    if (is_edit) {
-      return html`<span>
-        <input
-          type="text"
-          .value=${value}
-          class="inline-edit"
-          @keydown=${
-            /** @param {KeyboardEvent} e */ async (e) => {
-              if (e.key === 'Escape') {
-                editing.delete(k);
-                request_render();
-              } else if (e.key === 'Enter') {
-                const el = /** @type {HTMLInputElement} */ (e.currentTarget);
-                const next = el.value || '';
-                if (next !== value) {
-                  await on_update(id, { [key]: next });
-                }
-                editing.delete(k);
-                request_render();
-              }
-            }
-          }
-          @blur=${
-            /** @param {Event} ev */ async (ev) => {
-              const el = /** @type {HTMLInputElement} */ (ev.currentTarget);
-              const next = el.value || '';
-              if (next !== value) {
-                await on_update(id, { [key]: next });
-              }
-              editing.delete(k);
-              request_render();
-            }
-          }
-          autofocus
-        />
-      </span>`;
-    }
-    return html`<span
-      class="editable text-truncate ${value ? '' : 'muted'}"
-      tabindex="0"
-      role="button"
-      @click=${
-        /** @param {MouseEvent} e */ (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          editing.add(k);
-          request_render();
-        }
-      }
-      @keydown=${
-        /** @param {KeyboardEvent} e */ (e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            e.stopPropagation();
-            editing.add(k);
-            request_render();
-          }
-        }
-      }
-      >${value || placeholder}</span
-    >`;
-  }
-
-  /**
-   * @param {string} id
-   * @param {'priority'|'status'} key
-   * @returns {(ev: Event) => Promise<void>}
-   */
-  function makeSelectChange(id, key) {
-    return async (ev) => {
-      const sel = /** @type {HTMLSelectElement} */ (ev.currentTarget);
-      const val = sel.value || '';
-      /** @type {{ [k:string]: any }} */
-      const patch = {};
-      patch[key] = key === 'priority' ? Number(val) : val;
-      await on_update(id, patch);
-    };
-  }
-
-  /**
-   * @param {string} id
-   * @returns {(ev: Event) => void}
-   */
-  function makeRowClick(id) {
-    return (ev) => {
-      const el = /** @type {HTMLElement|null} */ (ev.target);
-      if (el && (el.tagName === 'INPUT' || el.tagName === 'SELECT')) {
-        return;
-      }
-      navigate(id);
-    };
-  }
-
-  /**
-   * @param {IssueRowData} it
-   */
-  function rowTemplate(it) {
-    const cur_status = String(it.status || 'open');
-    const cur_prio = String(it.priority ?? 2);
-    const is_selected = get_selected_id() === it.id;
-    return html`<tr
-      role="row"
-      class="${row_class} ${is_selected ? 'selected' : ''}"
-      data-issue-id=${it.id}
-      @click=${makeRowClick(it.id)}
-    >
-      <td role="gridcell" class="mono">${createIssueIdRenderer(it.id)}</td>
-      <td role="gridcell">${createTypeBadge(it.issue_type)}</td>
-      <td role="gridcell">${editableText(it.id, 'title', it.title || '')}</td>
-      <td role="gridcell">
-        <select
-          class="badge-select badge--status is-${cur_status}"
-          .value=${cur_status}
-          @change=${makeSelectChange(it.id, 'status')}
-        >
-          ${['open', 'in_progress', 'closed'].map(
-            (s) =>
-              html`<option value=${s} ?selected=${cur_status === s}>
-                ${statusLabel(s)}
-              </option>`
-          )}
-        </select>
-      </td>
-      <td role="gridcell">
-        ${editableText(it.id, 'assignee', it.assignee || '', 'Unassigned')}
-      </td>
-      <td role="gridcell">
-        <select
-          class="badge-select badge--priority ${'is-p' + cur_prio}"
-          .value=${cur_prio}
-          @change=${makeSelectChange(it.id, 'priority')}
-        >
-          ${priority_levels.map(
-            (p, i) =>
-              html`<option
-                value=${String(i)}
-                ?selected=${cur_prio === String(i)}
-              >
-                ${emojiForPriority(i)} ${p}
-              </option>`
-          )}
-        </select>
-      </td>
-    </tr>`;
-  }
-
-  return rowTemplate;
-}