beads-ui 0.3.0 → 0.4.0

package/app/utils/status-badge.js

@@ -1,32 +0,0 @@
-/**
- * Create a colored badge for a status value.
- * @param {string | null | undefined} status - 'open' | 'in_progress' | 'closed'
- * @returns {HTMLSpanElement}
- */
-export function createStatusBadge(status) {
-  const el = document.createElement('span');
-  el.className = 'status-badge';
-  const s = String(status || 'open');
-  el.classList.add(`is-${s}`);
-  el.setAttribute('role', 'img');
-  el.setAttribute('title', labelForStatus(s));
-  el.setAttribute('aria-label', `Status: ${labelForStatus(s)}`);
-  el.textContent = labelForStatus(s);
-  return el;
-}
-
-/**
- * @param {string} s
- */
-function labelForStatus(s) {
-  switch (s) {
-    case 'open':
-      return 'Open';
-    case 'in_progress':
-      return 'In progress';
-    case 'closed':
-      return 'Closed';
-    default:
-      return 'Unknown';
-  }
-}

package/app/utils/status.js

@@ -1,23 +0,0 @@
-/**
- * Known status values in canonical order.
- * @type {Array<'open'|'in_progress'|'closed'>}
- */
-export const STATUSES = ['open', 'in_progress', 'closed'];
-
-/**
- * Map canonical status to display label.
- * @param {string | null | undefined} status
- * @returns {string}
- */
-export function statusLabel(status) {
-  switch ((status || '').toString()) {
-    case 'open':
-      return 'Open';
-    case 'in_progress':
-      return 'In progress';
-    case 'closed':
-      return 'Closed';
-    default:
-      return (status || '').toString() || 'Open';
-  }
-}

package/app/utils/toast.js

@@ -1,34 +0,0 @@
-/**
- * Show a transient global toast message anchored to the viewport.
- * @param {string} text - Message text.
- * @param {'info'|'success'|'error'} [variant] - Visual variant.
- * @param {number} [duration_ms] - Auto-dismiss delay in milliseconds.
- */
-export function showToast(text, variant = 'info', duration_ms = 2800) {
-  const el = document.createElement('div');
-  el.className = 'toast';
-  el.textContent = text;
-  el.style.position = 'fixed';
-  el.style.right = '12px';
-  el.style.bottom = '12px';
-  el.style.zIndex = '1000';
-  el.style.color = '#fff';
-  el.style.padding = '8px 10px';
-  el.style.borderRadius = '4px';
-  el.style.fontSize = '12px';
-  if (variant === 'success') {
-    el.style.background = '#156d36';
-  } else if (variant === 'error') {
-    el.style.background = '#9f2011';
-  } else {
-    el.style.background = 'rgba(0,0,0,0.85)';
-  }
-  (document.body || document.documentElement).appendChild(el);
-  setTimeout(() => {
-    try {
-      el.remove();
-    } catch {
-      /* ignore */
-    }
-  }, duration_ms);
-}

package/app/utils/type-badge.js

@@ -1,33 +0,0 @@
-/**
- * Create a compact, colored badge for an issue type.
- * @param {string | undefined | null} issue_type - One of: bug, feature, task, epic, chore
- * @returns {HTMLSpanElement}
- */
-export function createTypeBadge(issue_type) {
-  const el = document.createElement('span');
-  el.className = 'type-badge';
-
-  const t = (issue_type || '').toString().toLowerCase();
-  const KNOWN = new Set(['bug', 'feature', 'task', 'epic', 'chore']);
-  const kind = KNOWN.has(t) ? t : 'neutral';
-  el.classList.add(`type-badge--${kind}`);
-  el.setAttribute('role', 'img');
-  const label = KNOWN.has(t)
-    ? t === 'bug'
-      ? 'Bug'
-      : t === 'feature'
-        ? 'Feature'
-        : t === 'task'
-          ? 'Task'
-          : t === 'epic'
-            ? 'Epic'
-            : 'Chore'
-    : '—';
-  el.setAttribute(
-    'aria-label',
-    KNOWN.has(t) ? `Issue type: ${label}` : 'Issue type: unknown'
-  );
-  el.setAttribute('title', KNOWN.has(t) ? `Type: ${label}` : 'Type: unknown');
-  el.textContent = label;
-  return el;
-}

package/app/views/board.js

@@ -1,535 +0,0 @@
-import { html, render } from 'lit-html';
-import { createListSelectors } from '../data/list-selectors.js';
-import { cmpClosedDesc, cmpPriorityThenCreated } from '../data/sort.js';
-import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
-import { createPriorityBadge } from '../utils/priority-badge.js';
-import { createTypeBadge } from '../utils/type-badge.js';
-
-/**
- * @typedef {{
- *   id: string,
- *   title?: string,
- *   status?: 'open'|'in_progress'|'closed',
- *   priority?: number,
- *   issue_type?: string,
- *   created_at?: number,
- *   updated_at?: number,
- *   closed_at?: number
- * }} IssueLite
- */
-
-/**
- * Create the Board view with Blocked, Ready, In progress, Closed.
- * Push-only: derives items from per-subscription stores.
- *
- * Sorting rules:
- * - Ready/Blocked/In progress: priority asc, then created_at asc
- * - Closed: closed_at desc
- * @param {HTMLElement} mount_element
- * @param {unknown} _data - Unused (legacy param retained for call-compat)
- * @param {(id: string) => void} gotoIssue - Navigate to issue detail.
- * @param {{ getState: () => any, setState: (patch: any) => void, subscribe?: (fn: (s:any)=>void)=>()=>void }} [store]
- * @param {{ selectors: { getIds: (client_id: string) => string[], count?: (client_id: string) => number } }} [subscriptions]
- * @param {{ snapshotFor?: (client_id: string) => any[], subscribe?: (fn: () => void) => () => void }} [issueStores]
- * @returns {{ load: () => Promise<void>, clear: () => void }}
- */
-export function createBoardView(
-  mount_element,
-  _data,
-  gotoIssue,
-  store,
-  subscriptions = undefined,
-  issueStores = undefined
-) {
-  /** @type {IssueLite[]} */
-  let list_ready = [];
-  /** @type {IssueLite[]} */
-  let list_blocked = [];
-  /** @type {IssueLite[]} */
-  let list_in_progress = [];
-  /** @type {IssueLite[]} */
-  let list_closed = [];
-  /** @type {IssueLite[]} */
-  let list_closed_raw = [];
-  // Centralized selection helpers
-  const selectors = issueStores ? createListSelectors(issueStores) : null;
-
-  /**
-   * Closed column filter mode.
-   * 'today' → items with closed_at since local day start
-   * '3' → last 3 days; '7' → last 7 days
-   * @type {'today'|'3'|'7'}
-   */
-  let closed_filter_mode = 'today';
-  if (store) {
-    try {
-      const s = store.getState();
-      const cf =
-        s && s.board ? String(s.board.closed_filter || 'today') : 'today';
-      if (cf === 'today' || cf === '3' || cf === '7') {
-        closed_filter_mode = /** @type {any} */ (cf);
-      }
-    } catch {
-      // ignore store init errors
-    }
-  }
-
-  function template() {
-    return html`
-      <div class="panel__body board-root">
-        ${columnTemplate('Blocked', 'blocked-col', list_blocked)}
-        ${columnTemplate('Ready', 'ready-col', list_ready)}
-        ${columnTemplate('In Progress', 'in-progress-col', list_in_progress)}
-        ${columnTemplate('Closed', 'closed-col', list_closed)}
-      </div>
-    `;
-  }
-
-  /**
-   * @param {string} title
-   * @param {string} id
-   * @param {IssueLite[]} items
-   */
-  function columnTemplate(title, id, items) {
-    return html`
-      <section class="board-column" id=${id}>
-        <header
-          class="board-column__header"
-          id=${id + '-header'}
-          role="heading"
-          aria-level="2"
-        >
-          <span>${title}</span>
-          ${id === 'closed-col'
-            ? html`<label class="board-closed-filter">
-                <span class="visually-hidden">Filter closed issues</span>
-                <select
-                  id="closed-filter"
-                  aria-label="Filter closed issues"
-                  @change=${onClosedFilterChange}
-                >
-                  <option
-                    value="today"
-                    ?selected=${closed_filter_mode === 'today'}
-                  >
-                    Today
-                  </option>
-                  <option value="3" ?selected=${closed_filter_mode === '3'}>
-                    Last 3 days
-                  </option>
-                  <option value="7" ?selected=${closed_filter_mode === '7'}>
-                    Last 7 days
-                  </option>
-                </select>
-              </label>`
-            : ''}
-        </header>
-        <div
-          class="board-column__body"
-          role="list"
-          aria-labelledby=${id + '-header'}
-        >
-          ${items.map((it) => cardTemplate(it))}
-        </div>
-      </section>
-    `;
-  }
-
-  /**
-   * @param {IssueLite} it
-   */
-  function cardTemplate(it) {
-    return html`
-      <article
-        class="board-card"
-        data-issue-id=${it.id}
-        role="listitem"
-        tabindex="-1"
-        @click=${() => gotoIssue(it.id)}
-      >
-        <div class="board-card__title text-truncate">
-          ${it.title || '(no title)'}
-        </div>
-        <div class="board-card__meta">
-          ${createTypeBadge(it.issue_type)} ${createPriorityBadge(it.priority)}
-          ${createIssueIdRenderer(it.id, { class_name: 'mono' })}
-        </div>
-      </article>
-    `;
-  }
-
-  function doRender() {
-    render(template(), mount_element);
-    postRenderEnhance();
-  }
-
-  /**
-   * Enhance rendered board with a11y and keyboard navigation.
-   * - Roving tabindex per column (first card tabbable)
-   * - ArrowUp/ArrowDown within column
-   * - ArrowLeft/ArrowRight to adjacent non-empty column (focus top card)
-   * - Enter/Space to open details for focused card
-   */
-  function postRenderEnhance() {
-    try {
-      /** @type {HTMLElement[]} */
-      const columns = Array.from(
-        mount_element.querySelectorAll('.board-column')
-      );
-      for (const col of columns) {
-        const body = /** @type {HTMLElement|null} */ (
-          col.querySelector('.board-column__body')
-        );
-        if (!body) {
-          continue;
-        }
-        /** @type {HTMLElement[]} */
-        const cards = Array.from(body.querySelectorAll('.board-card'));
-        // Assign aria-label using column header for screen readers
-        const header = /** @type {HTMLElement|null} */ (
-          col.querySelector('.board-column__header')
-        );
-        const col_name = header ? header.textContent?.trim() || '' : '';
-        for (const card of cards) {
-          const title_el = /** @type {HTMLElement|null} */ (
-            card.querySelector('.board-card__title')
-          );
-          const t = title_el ? title_el.textContent?.trim() || '' : '';
-          card.setAttribute(
-            'aria-label',
-            `Issue ${t || '(no title)'} — Column ${col_name}`
-          );
-          // Default roving setup
-          card.tabIndex = -1;
-        }
-        if (cards.length > 0) {
-          cards[0].tabIndex = 0;
-        }
-      }
-    } catch {
-      // non-fatal
-    }
-  }
-
-  // Delegate keyboard handling from mount_element
-  mount_element.addEventListener('keydown', (ev) => {
-    const target = ev.target;
-    if (!target || !(target instanceof HTMLElement)) {
-      return;
-    }
-    // Do not intercept keys inside editable controls
-    const tag = String(target.tagName || '').toLowerCase();
-    if (
-      tag === 'input' ||
-      tag === 'textarea' ||
-      tag === 'select' ||
-      target.isContentEditable === true
-    ) {
-      return;
-    }
-    const card = target.closest('.board-card');
-    if (!card) {
-      return;
-    }
-    const key = String(ev.key || '');
-    if (key === 'Enter' || key === ' ') {
-      ev.preventDefault();
-      const id = card.getAttribute('data-issue-id');
-      if (id) {
-        gotoIssue(id);
-      }
-      return;
-    }
-    if (
-      key !== 'ArrowUp' &&
-      key !== 'ArrowDown' &&
-      key !== 'ArrowLeft' &&
-      key !== 'ArrowRight'
-    ) {
-      return;
-    }
-    ev.preventDefault();
-    // Column context
-    const col = /** @type {HTMLElement|null} */ (card.closest('.board-column'));
-    if (!col) {
-      return;
-    }
-    const body = col.querySelector('.board-column__body');
-    if (!body) {
-      return;
-    }
-    /** @type {HTMLElement[]} */
-    const cards = Array.from(body.querySelectorAll('.board-card'));
-    const idx = cards.indexOf(/** @type {HTMLElement} */ (card));
-    if (idx === -1) {
-      return;
-    }
-    if (key === 'ArrowDown' && idx < cards.length - 1) {
-      moveFocus(cards[idx], cards[idx + 1]);
-      return;
-    }
-    if (key === 'ArrowUp' && idx > 0) {
-      moveFocus(cards[idx], cards[idx - 1]);
-      return;
-    }
-    if (key === 'ArrowRight' || key === 'ArrowLeft') {
-      // Find adjacent column with at least one card
-      /** @type {HTMLElement[]} */
-      const cols = Array.from(mount_element.querySelectorAll('.board-column'));
-      const col_idx = cols.indexOf(col);
-      if (col_idx === -1) {
-        return;
-      }
-      const dir = key === 'ArrowRight' ? 1 : -1;
-      let next_idx = col_idx + dir;
-      /** @type {HTMLElement|null} */
-      let target_col = null;
-      while (next_idx >= 0 && next_idx < cols.length) {
-        const candidate = cols[next_idx];
-        const c_body = /** @type {HTMLElement|null} */ (
-          candidate.querySelector('.board-column__body')
-        );
-        const c_cards = c_body
-          ? Array.from(c_body.querySelectorAll('.board-card'))
-          : [];
-        if (c_cards.length > 0) {
-          target_col = candidate;
-          break;
-        }
-        next_idx += dir;
-      }
-      if (target_col) {
-        const first = /** @type {HTMLElement|null} */ (
-          target_col.querySelector('.board-column__body .board-card')
-        );
-        if (first) {
-          moveFocus(/** @type {HTMLElement} */ (card), first);
-        }
-      }
-      return;
-    }
-  });
-
-  /**
-   * @param {HTMLElement} from
-   * @param {HTMLElement} to
-   */
-  function moveFocus(from, to) {
-    try {
-      from.tabIndex = -1;
-      to.tabIndex = 0;
-      to.focus();
-    } catch {
-      // ignore focus errors
-    }
-  }
-
-  // Sort helpers centralized in app/data/sort.js
-
-  /**
-   * Recompute closed list from raw using the current filter and sort.
-   */
-  function applyClosedFilter() {
-    /** @type {IssueLite[]} */
-    let items = Array.isArray(list_closed_raw) ? [...list_closed_raw] : [];
-    const now = new Date();
-    let since_ts = 0;
-    if (closed_filter_mode === 'today') {
-      const start = new Date(
-        now.getFullYear(),
-        now.getMonth(),
-        now.getDate(),
-        0,
-        0,
-        0,
-        0
-      );
-      since_ts = start.getTime();
-    } else if (closed_filter_mode === '3') {
-      since_ts = now.getTime() - 3 * 24 * 60 * 60 * 1000;
-    } else if (closed_filter_mode === '7') {
-      since_ts = now.getTime() - 7 * 24 * 60 * 60 * 1000;
-    }
-    items = items.filter((it) => {
-      const s = Number.isFinite(it.closed_at)
-        ? /** @type {number} */ (it.closed_at)
-        : NaN;
-      if (!Number.isFinite(s)) {
-        return false;
-      }
-      return s >= since_ts;
-    });
-    items.sort(cmpClosedDesc);
-    list_closed = items;
-  }
-
-  /**
-   * @param {Event} ev
-   */
-  function onClosedFilterChange(ev) {
-    try {
-      const el = /** @type {HTMLSelectElement} */ (ev.target);
-      const v = String(el.value || 'today');
-      closed_filter_mode = v === '3' || v === '7' ? v : 'today';
-      if (store) {
-        try {
-          store.setState({ board: { closed_filter: closed_filter_mode } });
-        } catch {
-          // ignore store errors
-        }
-      }
-      applyClosedFilter();
-      doRender();
-    } catch {
-      // ignore
-    }
-  }
-
-  /**
-   * Compose lists from subscriptions + issues store and render.
-   */
-  function refreshFromStores() {
-    try {
-      if (selectors) {
-        const in_progress = selectors.selectBoardColumn(
-          'tab:board:in-progress',
-          'in_progress'
-        );
-        const blocked = selectors.selectBoardColumn(
-          'tab:board:blocked',
-          'blocked'
-        );
-        const ready_raw = selectors.selectBoardColumn(
-          'tab:board:ready',
-          'ready'
-        );
-        const closed = selectors.selectBoardColumn(
-          'tab:board:closed',
-          'closed'
-        );
-
-        // Ready excludes items that are in progress
-        /** @type {Set<string>} */
-        const in_prog_ids = new Set(in_progress.map((i) => i.id));
-        const ready = ready_raw.filter((i) => !in_prog_ids.has(i.id));
-
-        list_ready = ready;
-        list_blocked = blocked;
-        list_in_progress = in_progress;
-        list_closed_raw = closed;
-      }
-      applyClosedFilter();
-      doRender();
-    } catch {
-      list_ready = [];
-      list_blocked = [];
-      list_in_progress = [];
-      list_closed = [];
-      doRender();
-    }
-  }
-
-  // Live updates: recompose on issue store envelopes
-  if (selectors) {
-    selectors.subscribe(() => {
-      try {
-        refreshFromStores();
-      } catch {
-        // ignore
-      }
-    });
-  }
-
-  return {
-    async load() {
-      // Compose lists from subscriptions + issues store
-      refreshFromStores();
-      // If nothing is present yet (e.g., immediately after switching back
-      // to the Board and before list-delta arrives), fetch via data layer as
-      // a fallback so the board is not empty on initial display.
-      try {
-        const has_subs = Boolean(subscriptions && subscriptions.selectors);
-        /**
-         * @param {string} id
-         */
-        const cnt = (id) => {
-          if (!has_subs || !subscriptions) {
-            return 0;
-          }
-          const sel = subscriptions.selectors;
-          if (typeof sel.count === 'function') {
-            return Number(sel.count(id) || 0);
-          }
-          try {
-            const arr = sel.getIds(id);
-            return Array.isArray(arr) ? arr.length : 0;
-          } catch {
-            return 0;
-          }
-        };
-        const total_items =
-          cnt('tab:board:ready') +
-          cnt('tab:board:blocked') +
-          cnt('tab:board:in-progress') +
-          cnt('tab:board:closed');
-        const data = /** @type {any} */ (_data);
-        const can_fetch =
-          data &&
-          typeof data.getReady === 'function' &&
-          typeof data.getBlocked === 'function' &&
-          typeof data.getInProgress === 'function' &&
-          typeof data.getClosed === 'function';
-        if (total_items === 0 && can_fetch) {
-          /** @type {[IssueLite[], IssueLite[], IssueLite[], IssueLite[]]} */
-          const [ready_raw, blocked_raw, in_prog_raw, closed_raw] =
-            await Promise.all([
-              data.getReady().catch(() => []),
-              data.getBlocked().catch(() => []),
-              data.getInProgress().catch(() => []),
-              data.getClosed().catch(() => [])
-            ]);
-          // Normalize and map unknowns to IssueLite shape
-          /** @type {IssueLite[]} */
-          let ready = Array.isArray(ready_raw) ? ready_raw.map((it) => it) : [];
-          /** @type {IssueLite[]} */
-          const blocked = Array.isArray(blocked_raw)
-            ? blocked_raw.map((it) => it)
-            : [];
-          /** @type {IssueLite[]} */
-          const in_prog = Array.isArray(in_prog_raw)
-            ? in_prog_raw.map((it) => it)
-            : [];
-          /** @type {IssueLite[]} */
-          const closed = Array.isArray(closed_raw)
-            ? closed_raw.map((it) => it)
-            : [];
-
-          // Remove items from Ready that are already In Progress
-          /** @type {Set<string>} */
-          const in_progress_ids = new Set(in_prog.map((i) => i.id));
-          ready = ready.filter((i) => !in_progress_ids.has(i.id));
-
-          // Sort as per column rules
-          ready.sort(cmpPriorityThenCreated);
-          blocked.sort(cmpPriorityThenCreated);
-          in_prog.sort(cmpPriorityThenCreated);
-          list_ready = ready;
-          list_blocked = blocked;
-          list_in_progress = in_prog;
-          list_closed_raw = closed;
-          applyClosedFilter();
-          doRender();
-        }
-      } catch {
-        // ignore fallback errors
-      }
-    },
-    clear() {
-      mount_element.replaceChildren();
-      list_ready = [];
-      list_blocked = [];
-      list_in_progress = [];
-      list_closed = [];
-    }
-  };
-}