beads-ui 0.2.0 → 0.3.1

package/app/views/board.js

@@ -1,4 +1,6 @@
 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';
@@ -10,29 +12,36 @@ import { createTypeBadge } from '../utils/type-badge.js';
  *   status?: 'open'|'in_progress'|'closed',
  *   priority?: number,
  *   issue_type?: string,
- *   updated_at?: string,
- *   closed_at?: string
+ *   created_at?: number,
+ *   updated_at?: number,
+ *   closed_at?: number
  * }} IssueLite
  */
 
 /**
- * Create the Board view with Open + Blocked stacked, then 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: priority asc, then updated_at desc when present
- * - Ready: priority asc, then updated_at desc when present
- * - In progress: updated_at desc
- * - Closed: closed_at desc (fallback to updated_at)
+ * - 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[]>, getBlocked?: () => Promise<any[]>, getInProgress: () => Promise<any[]>, getClosed: (limit?: number) => Promise<any[]> }} data
+ * @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) {
-  /** @type {IssueLite[]} */
-  let list_open = [];
+export function createBoardView(
+  mount_element,
+  _data,
+  gotoIssue,
+  store,
+  subscriptions = undefined,
+  issueStores = undefined
+) {
   /** @type {IssueLite[]} */
   let list_ready = [];
   /** @type {IssueLite[]} */
@@ -43,11 +52,14 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
   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';
@@ -67,10 +79,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
   function template() {
     return html`
       <div class="panel__body board-root">
-        <div class="board-stack-2">
-          ${columnTemplate('Open', 'open-col', list_open)}
-          ${columnTemplate('Blocked', 'blocked-col', list_blocked)}
-        </div>
+        ${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)}
@@ -144,8 +153,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
           ${it.title || '(no title)'}
         </div>
         <div class="board-card__meta">
-          ${createTypeBadge(/** @type {any} */ (it).issue_type)}
-          ${createPriorityBadge(/** @type {any} */ (it).priority)}
+          ${createTypeBadge(it.issue_type)} ${createPriorityBadge(it.priority)}
           ${createIssueIdRenderer(it.id, { class_name: 'mono' })}
         </div>
       </article>
@@ -159,10 +167,10 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
 
   /**
    * 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
+   * - 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 {
@@ -171,8 +179,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
         mount_element.querySelectorAll('.board-column')
       );
       for (const col of columns) {
-        /** @type {HTMLElement|null} */
-        const body = /** @type {any} */ (
+        const body = /** @type {HTMLElement|null} */ (
           col.querySelector('.board-column__body')
         );
         if (!body) {
@@ -208,8 +215,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
 
   // Delegate keyboard handling from mount_element
   mount_element.addEventListener('keydown', (ev) => {
-    /** @type {HTMLElement} */
-    const target = /** @type {any} */ (ev.target);
+    const target = ev.target;
     if (!target || !(target instanceof HTMLElement)) {
       return;
     }
@@ -219,7 +225,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
       tag === 'input' ||
       tag === 'textarea' ||
       tag === 'select' ||
-      /** @type {any} */ (target).isContentEditable === true
+      target.isContentEditable === true
     ) {
       return;
     }
@@ -230,9 +236,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
     const key = String(ev.key || '');
     if (key === 'Enter' || key === ' ') {
       ev.preventDefault();
-      const id = /** @type {HTMLElement} */ (card).getAttribute(
-        'data-issue-id'
-      );
+      const id = card.getAttribute('data-issue-id');
       if (id) {
         gotoIssue(id);
       }
@@ -252,9 +256,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
     if (!col) {
       return;
     }
-    const body = /** @type {HTMLElement|null} */ (
-      col.querySelector('.board-column__body')
-    );
+    const body = col.querySelector('.board-column__body');
     if (!body) {
       return;
     }
@@ -324,47 +326,7 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
     }
   }
 
-  /**
-   * Sort helpers.
-   */
-  /**
-   * @param {IssueLite[]} arr
-   */
-  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;
-    });
-  }
-
-  /**
-   * @param {IssueLite[]} arr
-   */
-  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;
-    });
-  }
-
-  /**
-   * Sort by closed_at desc with updated_at fallback.
-   * @param {IssueLite[]} arr
-   */
-  function sortByClosedDesc(arr) {
-    arr.sort((a, b) => {
-      const ca = a.closed_at || a.updated_at || '';
-      const cb = b.closed_at || b.updated_at || '';
-      return ca < cb ? 1 : ca > cb ? -1 : 0;
-    });
-  }
+  // Sort helpers centralized in app/data/sort.js
 
   /**
    * Recompute closed list from raw using the current filter and sort.
@@ -373,7 +335,6 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
     /** @type {IssueLite[]} */
     let items = Array.isArray(list_closed_raw) ? [...list_closed_raw] : [];
     const now = new Date();
-    /** @type {number} */
     let since_ts = 0;
     if (closed_filter_mode === 'today') {
       const start = new Date(
@@ -392,14 +353,15 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
       since_ts = now.getTime() - 7 * 24 * 60 * 60 * 1000;
     }
     items = items.filter((it) => {
-      const s = it.closed_at || '';
-      if (!s || isNaN(Date.parse(s))) {
+      const s = Number.isFinite(it.closed_at)
+        ? /** @type {number} */ (it.closed_at)
+        : NaN;
+      if (!Number.isFinite(s)) {
         return false;
       }
-      const t = Date.parse(s);
-      return t >= since_ts;
+      return s >= since_ts;
     });
-    sortByClosedDesc(items);
+    items.sort(cmpClosedDesc);
     list_closed = items;
   }
 
@@ -425,85 +387,147 @@ export function createBoardView(mount_element, data, gotoIssue, store) {
     }
   }
 
-  return {
-    async load() {
-      /** @type {IssueLite[]} */
-      let o = [];
-      /** @type {IssueLite[]} */
-      let r = [];
-      /** @type {IssueLite[]} */
-      let b = [];
-      /** @type {IssueLite[]} */
-      let p = [];
-      /** @type {IssueLite[]} */
-      let c = [];
-      try {
-        o = /** @type {any} */ (await data.getOpen());
-      } catch {
-        o = [];
-      }
-      try {
-        r = /** @type {any} */ (await data.getReady());
-      } catch {
-        r = [];
-      }
-      try {
-        // getBlocked is optional for backward compatibility in tests
-        const fn = /** @type {any} */ (data).getBlocked;
-        b = typeof fn === 'function' ? /** @type {any} */ (await fn()) : [];
-      } catch {
-        b = [];
-      }
-      try {
-        p = /** @type {any} */ (await data.getInProgress());
-      } catch {
-        p = [];
-      }
-      try {
-        c = /** @type {any} */ (await data.getClosed());
-      } catch {
-        c = [];
-      }
+  /**
+   * 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'
+        );
 
-      // Remove items from Open that are already in Ready by id
-      if (o.length > 0 && r.length > 0) {
+        // Ready excludes items that are in progress
         /** @type {Set<string>} */
-        const ready_ids = new Set(r.map((it) => it.id));
-        o = o.filter((it) => !ready_ids.has(it.id));
-      }
+        const in_prog_ids = new Set(in_progress.map((i) => i.id));
+        const ready = ready_raw.filter((i) => !in_prog_ids.has(i.id));
 
-      // Remove items from Open that are blocked (UI-121)
-      if (o.length > 0 && b.length > 0) {
-        /** @type {Set<string>} */
-        const blocked_ids = new Set(b.map((it) => it.id));
-        o = o.filter((it) => !blocked_ids.has(it.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();
+    }
+  }
 
-      // 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));
+  // Live updates: recompose on issue store envelopes
+  if (selectors) {
+    selectors.subscribe(() => {
+      try {
+        refreshFromStores();
+      } catch {
+        // ignore
       }
+    });
+  }
 
-      // UI-119: Open sorted like Ready (priority asc, then updated desc)
-      sortReady(o);
-      sortReady(r);
-      sortReady(b);
-      sortByUpdatedDesc(p);
-      // Closed handled separately to use closed_at and filtering
+  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)
+            : [];
 
-      list_open = o;
-      list_ready = r;
-      list_blocked = b;
-      list_in_progress = p;
-      list_closed_raw = c;
-      applyClosedFilter();
-      doRender();
+          // 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_open = [];
       list_ready = [];
       list_blocked = [];
       list_in_progress = [];