beads-ui 0.1.2 → 0.3.0

package/app/views/board.js

@@ -1,40 +1,83 @@
 import { html, render } from 'lit-html';
-import { issueDisplayId } from '../utils/issue-id.js';
+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, updated_at?: string }} IssueLite
+ * @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 four columns: Open, Ready, In progress, Closed.
- * Data providers are expected to return raw arrays; this view applies sorting.
+ * Create the Board view with Blocked, Ready, In progress, Closed.
+ * Push-only: derives items from per-subscription stores.
  *
  * Sorting rules:
- * - Open: updated_at desc
- * - Ready: priority asc, then updated_at desc when present
- * - In progress: updated_at desc
- * - Closed: updated_at desc
+ * - Ready/Blocked/In progress: priority asc, then created_at asc
+ * - Closed: closed_at desc
  * @param {HTMLElement} mount_element
- * @param {{ getOpen: () => Promise<any[]>, getReady: () => Promise<any[]>, getInProgress: () => Promise<any[]>, getClosed: (limit?: number) => Promise<any[]> }} data
- * @param {(id: string) => void} goto_issue - Navigate to issue detail.
+ * @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, goto_issue) {
-  /** @type {IssueLite[]} */
-  let list_open = [];
+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('Open', 'open-col', list_open)}
+        ${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)}
@@ -50,10 +93,42 @@ export function createBoardView(mount_element, data, goto_issue) {
   function columnTemplate(title, id, items) {
     return html`
       <section class="board-column" id=${id}>
-        <header class="board-column__header" role="heading" aria-level="2">
-          ${title}
+        <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">
+        <div
+          class="board-column__body"
+          role="list"
+          aria-labelledby=${id + '-header'}
+        >
           ${items.map((it) => cardTemplate(it))}
         </div>
       </section>
@@ -68,15 +143,16 @@ export function createBoardView(mount_element, data, goto_issue) {
       <article
         class="board-card"
         data-issue-id=${it.id}
-        @click=${() => goto_issue(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(/** @type {any} */ (it).issue_type)}
-          ${createPriorityBadge(/** @type {any} */ (it).priority)}
-          <span class="mono">${issueDisplayId(it.id)}</span>
+          ${createTypeBadge(it.issue_type)} ${createPriorityBadge(it.priority)}
+          ${createIssueIdRenderer(it.id, { class_name: 'mono' })}
         </div>
       </article>
     `;
@@ -84,98 +160,374 @@ export function createBoardView(mount_element, data, goto_issue) {
 
   function doRender() {
     render(template(), mount_element);
+    postRenderEnhance();
   }
 
   /**
-   * Sort helpers.
+   * 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 {IssueLite[]} arr
+   * @param {HTMLElement} from
+   * @param {HTMLElement} to
    */
-  function sortReady(arr) {
-    arr.sort((a, b) => {
-      const pa = a.priority ?? 2;
-      const pb = b.priority ?? 2;
-      if (pa !== pb) {
-        return pa - pb;
-      }
-      const ua = a.updated_at || '';
-      const ub = b.updated_at || '';
-      return ua < ub ? 1 : ua > ub ? -1 : 0;
-    });
+  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
+
   /**
-   * @param {IssueLite[]} arr
+   * Recompute closed list from raw using the current filter and sort.
    */
-  function sortByUpdatedDesc(arr) {
-    arr.sort((a, b) => {
-      const ua = a.updated_at || '';
-      const ub = b.updated_at || '';
-      return ua < ub ? 1 : ua > ub ? -1 : 0;
+  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;
   }
 
-  return {
-    async load() {
-      /** @type {IssueLite[]} */
-      let o = [];
-      /** @type {IssueLite[]} */
-      let r = [];
-      /** @type {IssueLite[]} */
-      let p = [];
-      /** @type {IssueLite[]} */
-      let c = [];
-      try {
-        o = /** @type {any} */ (await data.getOpen());
-      } catch {
-        o = [];
+  /**
+   * @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
+        }
       }
-      try {
-        r = /** @type {any} */ (await data.getReady());
-      } catch {
-        r = [];
+      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 {
-        p = /** @type {any} */ (await data.getInProgress());
+        refreshFromStores();
       } catch {
-        p = [];
+        // 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 {
-        c = /** @type {any} */ (await data.getClosed());
-      } catch {
-        c = [];
-      }
+        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 Open that are already in Ready by id
-      if (o.length > 0 && r.length > 0) {
-        /** @type {Set<string>} */
-        const ready_ids = new Set(r.map((it) => it.id));
-        o = o.filter((it) => !ready_ids.has(it.id));
-      }
+          // 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));
 
-      // Remove items from Ready that are already In Progress by id
-      if (r.length > 0 && p.length > 0) {
-        /** @type {Set<string>} */
-        const in_progress_ids = new Set(p.map((it) => it.id));
-        r = r.filter((it) => !in_progress_ids.has(it.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
       }
-
-      sortByUpdatedDesc(o);
-      sortReady(r);
-      sortByUpdatedDesc(p);
-      sortByUpdatedDesc(c);
-
-      list_open = o;
-      list_ready = r;
-      list_in_progress = p;
-      list_closed = c;
-      doRender();
     },
     clear() {
       mount_element.replaceChildren();
-      list_open = [];
       list_ready = [];
+      list_blocked = [];
       list_in_progress = [];
       list_closed = [];
     }