beads-ui 0.1.2 → 0.3.0

package/app/views/list.js

@@ -1,6 +1,8 @@
-/* global NodeListOf */
 import { html, render } from 'lit-html';
+import { createListSelectors } from '../data/list-selectors.js';
+import { cmpClosedDesc } from '../data/sort.js';
 import { ISSUE_TYPES, typeLabel } from '../utils/issue-type.js';
+import { issueHashFor } from '../utils/issue-url.js';
 // issueDisplayId not used directly in this file; rendered in shared row
 import { statusLabel } from '../utils/status.js';
 import { createIssueRowRenderer } from './issue-row.js';
@@ -8,7 +10,7 @@ import { createIssueRowRenderer } from './issue-row.js';
 // List view implementation; requires a transport send function.
 
 /**
- * @typedef {{ id: string, title?: string, status?: string, priority?: number, issue_type?: string, assignee?: string, labels?: string[] }} Issue
+ * @typedef {{ id: string, title?: string, status?: 'closed'|'open'|'in_progress', priority?: number, issue_type?: string, assignee?: string, labels?: string[] }} Issue
  */
 
 /**
@@ -17,9 +19,30 @@ import { createIssueRowRenderer } from './issue-row.js';
  * @param {(type: string, payload?: unknown) => Promise<unknown>} sendFn - RPC transport.
  * @param {(hash: string) => void} [navigate_fn] - Navigation function (defaults to setting location.hash).
  * @param {{ getState: () => any, setState: (patch: any) => void, subscribe: (fn: (s:any)=>void)=>()=>void }} [store] - Optional state store.
+ * @param {{ selectors: { getIds: (client_id: string) => string[] } }} [_subscriptions]
+ * @param {{ snapshotFor?: (client_id: string) => any[], subscribe?: (fn: () => void) => () => void }} [issueStores]
  * @returns {{ load: () => Promise<void>, destroy: () => void }} View API.
  */
-export function createListView(mount_element, sendFn, navigate_fn, store) {
+/**
+ * Create the Issues List view.
+ * @param {HTMLElement} mount_element
+ * @param {(type: string, payload?: unknown) => Promise<unknown>} sendFn
+ * @param {(hash: string) => void} [navigateFn]
+ * @param {{ getState: () => any, setState: (patch: any) => void, subscribe: (fn: (s:any)=>void)=>()=>void }} [store]
+ * @param {{ selectors: { getIds: (client_id: string) => string[] } }} [_subscriptions]
+ * @param {{ snapshotFor?: (client_id: string) => any[], subscribe?: (fn: () => void) => () => void }} [issue_stores]
+ * @returns {{ load: () => Promise<void>, destroy: () => void }}
+ */
+export function createListView(
+  mount_element,
+  sendFn,
+  navigateFn,
+  store,
+  _subscriptions = undefined,
+  issue_stores = undefined
+) {
+  // Touch unused param to satisfy lint rules without impacting behavior
+  /** @type {any} */ (void _subscriptions);
   /** @type {string} */
   let status_filter = 'all';
   /** @type {string} */
@@ -35,8 +58,10 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
   // Shared row renderer (used in template below)
   const row_renderer = createIssueRowRenderer({
     navigate: (id) => {
-      const nav = navigate_fn || ((h) => (window.location.hash = h));
-      nav(`#/issue/${id}`);
+      const nav = navigateFn || ((h) => (window.location.hash = h));
+      /** @type {'issues'|'epics'|'board'} */
+      const view = store ? store.getState().view : 'issues';
+      nav(issueHashFor(view, id));
     },
     onUpdate: updateInline,
     requestRender: doRender,
@@ -51,12 +76,11 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
    * @param {Event} ev
    */
   const onStatusChange = async (ev) => {
-    /** @type {HTMLSelectElement} */
-    const sel = /** @type {any} */ (ev.currentTarget);
+    const sel = /** @type {HTMLSelectElement} */ (ev.currentTarget);
     status_filter = sel.value;
     if (store) {
       store.setState({
-        filters: { status: /** @type {any} */ (status_filter) }
+        filters: { status: status_filter }
       });
     }
     // Always reload on status changes
@@ -70,8 +94,7 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
    * @param {Event} ev
    */
   const onSearchInput = (ev) => {
-    /** @type {HTMLInputElement} */
-    const input = /** @type {any} */ (ev.currentTarget);
+    const input = /** @type {HTMLInputElement} */ (ev.currentTarget);
     search_text = input.value;
     if (store) {
       store.setState({ filters: { search: search_text } });
@@ -84,8 +107,7 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
    * @param {Event} ev
    */
   const onTypeChange = (ev) => {
-    /** @type {HTMLSelectElement} */
-    const sel = /** @type {any} */ (ev.currentTarget);
+    const sel = /** @type {HTMLSelectElement} */ (ev.currentTarget);
     type_filter = sel.value || '';
     if (store) {
       store.setState({ filters: { type: type_filter } });
@@ -103,12 +125,13 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
     }
   }
   // Initial values are reflected via bound `.value` in the template
+  // Compose helpers: centralize membership + entity selection + sorting
+  const selectors = issue_stores ? createListSelectors(issue_stores) : null;
 
   /**
    * Build lit-html template for the list view.
    */
   function template() {
-    /** @type {Issue[]} */
     let filtered = issues_cache;
     if (status_filter !== 'all' && status_filter !== 'ready') {
       filtered = filtered.filter(
@@ -128,6 +151,10 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
         (it) => String(it.issue_type || '') === String(type_filter)
       );
     }
+    // Sorting: closed list is a special case → sort by closed_at desc only
+    if (status_filter === 'closed') {
+      filtered = filtered.slice().sort(cmpClosedDesc);
+    }
 
     return html`
       <div class="panel__header">
@@ -164,7 +191,12 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
               <div class="muted" style="padding:10px 12px;">No issues</div>
             </div>`
           : html`<div class="issues-block">
-              <table class="table">
+              <table
+                class="table"
+                role="grid"
+                aria-rowcount=${String(filtered.length)}
+                aria-colcount="6"
+              >
                 <colgroup>
                   <col style="width: 100px" />
                   <col style="width: 120px" />
@@ -174,16 +206,16 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
                   <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 role="row">
+                    <th role="columnheader">ID</th>
+                    <th role="columnheader">Type</th>
+                    <th role="columnheader">Title</th>
+                    <th role="columnheader">Status</th>
+                    <th role="columnheader">Assignee</th>
+                    <th role="columnheader">Priority</th>
                   </tr>
                 </thead>
-                <tbody>
+                <tbody role="rowgroup">
                   ${filtered.map((it) => row_renderer(it))}
                 </tbody>
               </table>
@@ -204,40 +236,55 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
   // no separate ready checkbox when using select option
 
   /**
-   * Load issues from backend and re-render.
+   * Update minimal fields inline via ws mutations and refresh that row's data.
+   * @param {string} id
+   * @param {{ [k: string]: any }} patch
+   */
+  async function updateInline(id, patch) {
+    try {
+      // Dispatch specific mutations based on provided keys
+      if (typeof patch.title === 'string') {
+        await sendFn('edit-text', { id, field: 'title', value: patch.title });
+      }
+      if (typeof patch.assignee === 'string') {
+        await sendFn('update-assignee', { id, assignee: patch.assignee });
+      }
+      if (typeof patch.status === 'string') {
+        await sendFn('update-status', { id, status: patch.status });
+      }
+      if (typeof patch.priority === 'number') {
+        await sendFn('update-priority', { id, priority: patch.priority });
+      }
+    } catch {
+      // ignore failures; UI state remains as-is
+    }
+  }
+
+  /**
+   * Load issues from local push stores and re-render.
    */
   async function load() {
     // Preserve scroll position to avoid jarring jumps on live refresh
-    /** @type {HTMLElement|null} */
-    const beforeEl = /** @type {any} */ (
+    const beforeEl = /** @type {HTMLElement|null} */ (
       mount_element.querySelector('#list-root')
     );
     const prevScroll = beforeEl ? beforeEl.scrollTop : 0;
-    /** @type {any} */
-    const filters = {};
-    if (status_filter !== 'all' && status_filter !== 'ready') {
-      filters.status = status_filter;
-    }
-    if (status_filter === 'ready') {
-      filters.ready = true;
-    }
-    /** @type {unknown} */
-    let result;
+    // Compose items from subscriptions membership and issues store entities
     try {
-      result = await sendFn('list-issues', { filters });
+      if (selectors) {
+        issues_cache = /** @type {Issue[]} */ (
+          selectors.selectIssuesFor('tab:issues')
+        );
+      } else {
+        issues_cache = [];
+      }
     } catch {
-      result = [];
-    }
-    if (!Array.isArray(result)) {
       issues_cache = [];
-    } else {
-      issues_cache = /** @type {Issue[]} */ (result);
     }
     doRender();
     // Restore scroll position if possible
     try {
-      /** @type {HTMLElement|null} */
-      const afterEl = /** @type {any} */ (
+      const afterEl = /** @type {HTMLElement|null} */ (
         mount_element.querySelector('#list-root')
       );
       if (afterEl && prevScroll > 0) {
@@ -251,14 +298,64 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
   // Keyboard navigation
   mount_element.tabIndex = 0;
   mount_element.addEventListener('keydown', (ev) => {
-    /** @type {HTMLTableSectionElement|null} */
-    const tbody = /** @type {any} */ (
+    // Grid cell Up/Down navigation when focus is inside the table and not within
+    // an editable control (input/textarea/select). Preserves column position.
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+      const tgt = /** @type {HTMLElement} */ (ev.target);
+      const table =
+        tgt && typeof tgt.closest === 'function'
+          ? tgt.closest('#list-root table.table')
+          : null;
+      if (table) {
+        // Do not intercept when inside native editable controls
+        const in_editable = Boolean(
+          tgt &&
+            typeof tgt.closest === 'function' &&
+            (tgt.closest('input') ||
+              tgt.closest('textarea') ||
+              tgt.closest('select'))
+        );
+        if (!in_editable) {
+          const cell =
+            tgt && typeof tgt.closest === 'function' ? tgt.closest('td') : null;
+          if (cell && cell.parentElement) {
+            const row = /** @type {HTMLTableRowElement} */ (cell.parentElement);
+            const tbody = /** @type {HTMLTableSectionElement|null} */ (
+              row.parentElement
+            );
+            if (tbody && tbody.querySelectorAll) {
+              const rows = Array.from(tbody.querySelectorAll('tr'));
+              const row_idx = Math.max(0, rows.indexOf(row));
+              const col_idx = cell.cellIndex || 0;
+              const next_idx =
+                ev.key === 'ArrowDown'
+                  ? Math.min(row_idx + 1, rows.length - 1)
+                  : Math.max(row_idx - 1, 0);
+              const next_row = rows[next_idx];
+              const next_cell =
+                next_row && next_row.cells ? next_row.cells[col_idx] : null;
+              if (next_cell) {
+                const focusable = /** @type {HTMLElement|null} */ (
+                  next_cell.querySelector(
+                    'button:not([disabled]), [tabindex]:not([tabindex="-1"]), a[href], select:not([disabled]), input:not([disabled]):not([type="hidden"]), textarea:not([disabled])'
+                  )
+                );
+                if (focusable && typeof focusable.focus === 'function') {
+                  ev.preventDefault();
+                  focusable.focus();
+                  return;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    const tbody = /** @type {HTMLTableSectionElement|null} */ (
       mount_element.querySelector('#list-root tbody')
     );
-    /** @type {NodeListOf<HTMLTableRowElement>} */
-    const items = tbody
-      ? tbody.querySelectorAll('tr')
-      : /** @type {any} */ ([]);
+    const items = tbody ? tbody.querySelectorAll('tr') : [];
     if (items.length === 0) {
       return;
     }
@@ -298,8 +395,10 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
       const current = items[idx];
       const id = current ? current.getAttribute('data-issue-id') : '';
       if (id) {
-        const nav = navigate_fn || ((h) => (window.location.hash = h));
-        nav(`#/issue/${id}`);
+        const nav = navigateFn || ((h) => (window.location.hash = h));
+        /** @type {'issues'|'epics'|'board'} */
+        const view = store ? store.getState().view : 'issues';
+        nav(issueHashFor(view, id));
       }
     }
   });
@@ -338,6 +437,20 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
     });
   }
 
+  // Live updates: recompose and re-render when issue stores change
+  if (selectors) {
+    selectors.subscribe(() => {
+      try {
+        issues_cache = /** @type {Issue[]} */ (
+          selectors.selectIssuesFor('tab:issues')
+        );
+        doRender();
+      } catch {
+        // ignore
+      }
+    });
+  }
+
   return {
     load,
     destroy() {
@@ -348,46 +461,4 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
       }
     }
   };
-
-  /**
-   * Update minimal fields inline via ws mutations and refresh that row's data.
-   * @param {string} id
-   * @param {{ [k: string]: any }} patch
-   */
-  async function updateInline(id, patch) {
-    try {
-      // Dispatch specific mutations based on provided keys
-      if (typeof patch.title === 'string') {
-        await sendFn('edit-text', { id, field: 'title', value: patch.title });
-      }
-      if (typeof patch.assignee === 'string') {
-        await sendFn('update-assignee', { id, assignee: patch.assignee });
-      }
-      if (typeof patch.status === 'string') {
-        await sendFn('update-status', { id, status: patch.status });
-      }
-      if (typeof patch.priority === 'number') {
-        await sendFn('update-priority', { id, priority: patch.priority });
-      }
-      // Refresh the item from backend
-      /** @type {any} */
-      const full = await sendFn('show-issue', { id });
-      // Replace in cache
-      const idx = issues_cache.findIndex((x) => x.id === id);
-      if (idx >= 0 && full && typeof full === 'object') {
-        issues_cache[idx] = /** @type {Issue} */ ({
-          id: full.id,
-          title: full.title,
-          status: full.status,
-          priority: full.priority,
-          issue_type: full.issue_type,
-          assignee: full.assignee,
-          labels: Array.isArray(full.labels) ? full.labels : []
-        });
-      }
-      doRender();
-    } catch {
-      // ignore failures; UI state remains as-is
-    }
-  }
 }