synabun 2.0.9 → 2.1.0

package/neural-interface/public/shared/assistant/asst-menu.js

@@ -17,7 +17,7 @@
 // `footer`: items under the list that stay in view while the list scrolls.
 // Every menu is measured at the width it is shown at, never wider than its box less the margins,
 // and opens where that box has room (the list scrolls inside it). The box is the Assistant
-// panel or root around the anchor, else the window.
+// panel or root around the anchor, else the app frame (app-frame.js; the window on a page without it).
 // `bounds`: an element (or () => DOMRect) to use as that box instead: the menu is then exactly
 // `width` wide (or the box's room) and follows the box on resize.
 // `onEscape`: returns true when it handled Esc (e.g. went back a view): the menu stays open.
@@ -31,6 +31,10 @@
 //   tag             { label }                        → non-interactive badge row
 //   input           { placeholder, value, onSubmit } → inline text field
 //   buttons         { label, buttons: [item…] }      → one row of compact items (a group)
+// `action: { icon, label, tooltip, id, onSelect }` on an item (or radio / check) adds one icon button at the
+// row's end, shown on hover and keyboard focus (the Sessions menu's Remove). It is not a stop of ↑/↓: → from
+// its row reaches it, ← goes back, Delete on the row presses it; choosing it never chooses the row and leaves
+// the menu open (its onSelect usually redraws it with update()).
 // `render(button, { checked })` on an item draws its content instead of label/desc/tag.
 // `className` on an item or an info row adds its own class.
 // `keepOpen` on an item leaves the menu open when it is chosen.
@@ -38,7 +42,9 @@
 // Keys: ↑/↓ move, Home/End jump, Enter/Space activate, Esc closes (focus back
 // to the anchor), Tab closes. The optional filter hides non-matching items and
 // any group left empty. The handle's update({ title, items, footer, focus }) redraws
-// an open menu in place (focus: the data-id to land on).
+// an open menu in place (focus: the data-id to land on; the filter's text still applies).
+
+import { frameRect } from '../app-frame.js';
 
 let _open = null;
 let _uid = 0;
@@ -101,6 +107,11 @@ export function currentMenu() {
   return _open?.menu || null;
 }
 
+/** The element the open menu belongs to (null when none is open). */
+export function currentMenuAnchor() {
+  return _open?.anchor || null;
+}
+
 function itemButton(item, kind, { role, list, onActivate }) {
   const btn = el('button', `asst-dd-item${item.danger ? ' danger' : ''}${item.className ? ` ${item.className}` : ''}`);
   btn.type = 'button';
@@ -145,12 +156,28 @@ function itemButton(item, kind, { role, list, onActivate }) {
   return btn;
 }
 
+/** A row's own action (item.action): an icon button beside the row, outside the ↑/↓ cycle. */
+function actionButton(action, item, { role }) {
+  const btn = el('button', `asst-iconbtn asst-dd-item-action${action.className ? ` ${action.className}` : ''}`);
+  btn.type = 'button';
+  btn.tabIndex = -1;
+  btn.setAttribute('role', role === 'listbox' ? 'option' : 'menuitem');
+  if (action.id != null) btn.dataset.id = String(action.id);
+  const label = String(action.label || '');
+  if (label) btn.setAttribute('aria-label', label);
+  if (action.tooltip || label) btn.dataset.tooltip = action.tooltip || label;
+  btn.innerHTML = action.icon || '';
+  btn.querySelector('svg')?.setAttribute('aria-hidden', 'true');
+  btn.addEventListener('click', (e) => { e.stopPropagation(); action.onSelect?.(item, btn); });
+  return btn;
+}
+
 function buildItems(list, items, { role, onActivate }) {
   for (const item of items || []) {
     const kind = itemKind(item);
     if (kind === 'separator') { list.appendChild(el('div', 'asst-dd-sep')).setAttribute('role', 'separator'); continue; }
     if (kind === 'buttons') {
-      const row = el('div', 'asst-dd-btnrow');
+      const row = el('div', `asst-dd-btnrow${item.className ? ` ${item.className}` : ''}`);
       row.setAttribute('role', 'group');
       if (item.id != null) row.dataset.id = String(item.id);
       if (item.ariaLabel || item.label) row.setAttribute('aria-label', item.ariaLabel || item.label);
@@ -188,6 +215,14 @@ function buildItems(list, items, { role, onActivate }) {
       list.appendChild(input);
       continue;
     }
+    if (item.action && typeof item.action === 'object' && !item.disabled) {
+      const row = el('div', 'asst-dd-itemrow');
+      row.setAttribute('role', 'none');
+      row.appendChild(itemButton(item, kind, { role, list, onActivate }));
+      row.appendChild(actionButton(item.action, item, { role }));
+      list.appendChild(row);
+      continue;
+    }
     list.appendChild(itemButton(item, kind, { role, list, onActivate }));
   }
   if (!list.querySelector('.asst-dd-item, .asst-dd-input, .asst-dd-info, .asst-dd-tagrow')) list.appendChild(el('div', 'asst-dd-empty', '—'));
@@ -199,6 +234,8 @@ export function applyMenuFilter(list, query, emptyLabel = 'No matches') {
   const rows = [...list.children];
   for (const row of rows) {
     if (row.classList.contains('asst-dd-item')) row.hidden = !!q && !row.dataset.search.includes(q);
+    // A row with its own action: shown while its item matches.
+    else if (row.classList.contains('asst-dd-itemrow')) row.hidden = !!q && !(row.querySelector('.asst-dd-item')?.dataset.search || '').includes(q);
     // A button row stays whole: shown while one of its buttons matches.
     else if (row.classList.contains('asst-dd-btnrow')) row.hidden = !!q && ![...row.querySelectorAll('.asst-dd-item')].some(b => b.dataset.search.includes(q));
     else if (row.classList.contains('asst-dd-info') || row.classList.contains('asst-dd-tagrow')) row.hidden = !!q;
@@ -226,7 +263,7 @@ export function applyMenuFilter(list, query, emptyLabel = 'No matches') {
   const last = visible[visible.length - 1];
   if (last?.classList.contains('asst-dd-sep')) last.hidden = true;
   let empty = list.querySelector('.asst-dd-empty.asst-dd-noresults');
-  const hasItem = rows.some(r => !r.hidden && (r.classList.contains('asst-dd-item') || r.classList.contains('asst-dd-btnrow') || r.classList.contains('asst-dd-input')));
+  const hasItem = rows.some(r => !r.hidden && (r.classList.contains('asst-dd-item') || r.classList.contains('asst-dd-itemrow') || r.classList.contains('asst-dd-btnrow') || r.classList.contains('asst-dd-input')));
   if (q && !hasItem) {
     if (!empty) { empty = el('div', 'asst-dd-empty asst-dd-noresults', emptyLabel); list.appendChild(empty); }
     empty.hidden = false;
@@ -255,14 +292,13 @@ const BOUNDED_MIN_WIDTH = 248;
 const MENU_MIN_HEIGHT = 96;
 const BOUNDED_MIN_HEIGHT = 140;
 
-/** The box a menu stays inside: its bounds clipped to the window (the window when it has none). */
+/** The box a menu stays inside: its bounds clipped to the app frame (the frame when it has none). */
 function boundsBox(bounds) {
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
+  const f = frameRect();
   let r = null;
   try { r = typeof bounds === 'function' ? bounds() : bounds?.getBoundingClientRect?.(); } catch { r = null; }
-  if (!r || !(r.width > 0) || !(r.height > 0)) return { left: 0, top: 0, right: vw, bottom: vh };
-  return { left: Math.max(0, r.left), top: Math.max(0, r.top), right: Math.min(vw, r.right), bottom: Math.min(vh, r.bottom) };
+  if (!r || !(r.width > 0) || !(r.height > 0)) return { left: f.left, top: f.top, right: f.right, bottom: f.bottom };
+  return { left: Math.max(f.left, r.left), top: Math.max(f.top, r.top), right: Math.min(f.right, r.right), bottom: Math.min(f.bottom, r.bottom) };
 }
 
 /** Where a menu without `bounds` stays: the Assistant around its anchor (the sidepanel, or a tab's own root). */
@@ -422,7 +458,9 @@ export function openMenu(anchor, opts = {}) {
     const target = e.target;
     const inInput = target?.classList?.contains('asst-dd-input');
     const nodes = focusables(menu);
-    const idx = nodes.indexOf(document.activeElement);
+    // On a row's action (item.action) the keys move from its row.
+    const onAction = document.activeElement?.classList?.contains('asst-dd-item-action') && menu.contains(document.activeElement) ? document.activeElement : null;
+    const idx = nodes.indexOf(onAction ? onAction.previousElementSibling : document.activeElement);
     if (e.key === 'Escape') {
       e.preventDefault(); e.stopPropagation();
       if (typeof opts.onEscape === 'function' && opts.onEscape() === true) return;
@@ -447,6 +485,18 @@ export function openMenu(anchor, opts = {}) {
       setFocused(menu, nodes[next]);
       return;
     }
+    if (!inInput && (e.key === 'ArrowRight' || e.key === 'ArrowLeft' || e.key === 'Delete')) {
+      const row = onAction ? null : document.activeElement?.closest?.('.asst-dd-item');
+      const action = onAction || (row?.parentElement?.classList.contains('asst-dd-itemrow') ? row.nextElementSibling : null);
+      if (action?.classList.contains('asst-dd-item-action')) {
+        e.preventDefault(); e.stopPropagation();
+        const main = action.previousElementSibling;
+        if (e.key === 'ArrowLeft') { if (onAction) setFocused(menu, main); return; }
+        if (!onAction) { setFocused(menu, main); try { action.focus({ preventScroll: true }); } catch { action.focus(); } }
+        if (e.key === 'Delete') action.click();
+        return;
+      }
+    }
     if ((e.key === 'Home' || e.key === 'End') && !inInput) {
       e.preventDefault(); e.stopPropagation();
       if (nodes.length) setFocused(menu, nodes[e.key === 'Home' ? 0 : nodes.length - 1]);
@@ -464,6 +514,7 @@ export function openMenu(anchor, opts = {}) {
       return;
     }
     if ((e.key === 'Enter' || e.key === ' ') && !inInput) {
+      if (onAction) { e.preventDefault(); e.stopPropagation(); onAction.click(); return; }
       const current = document.activeElement?.closest?.('.asst-dd-item');
       if (current && menu.contains(current)) { e.preventDefault(); e.stopPropagation(); current.click(); }
       return;
@@ -499,14 +550,35 @@ export function openMenu(anchor, opts = {}) {
     setFocused(menu, selected || first || null);
   }
   // Redraw in place (another view of the same menu): the anchor, the listeners and the focus stay in it.
+  // `keepPlace` (fresher data for the same view, read in the background): the scroll position, the row the
+  // keyboard is on and the filter's text and focus are left where the user had them.
   const update = (next = {}) => {
     if (!_open || _open.menu !== menu) return;
+    const keep = next.keepPlace === true;
+    const scrollBefore = list.scrollTop;
+    const active = document.activeElement;
+    const typing = !!active && active.classList?.contains('asst-dd-input') && menu.contains(active);
+    const onRowId = !typing ? (menu.querySelector('.asst-dd-item.focused')?.dataset?.id ?? null) : null;
     if (typeof next.title === 'string' && heading) heading.textContent = next.title;
-    if (Array.isArray(next.items)) { list.replaceChildren(); buildItems(list, next.items, { role, onActivate: activate }); list.scrollTop = 0; }
+    if (Array.isArray(next.items)) {
+      list.replaceChildren();
+      buildItems(list, next.items, { role, onActivate: activate });
+      if (filterInput?.value) applyMenuFilter(list, filterInput.value, opts.filterEmptyLabel);
+      list.scrollTop = keep ? scrollBefore : 0;
+    }
     if ('footer' in next) fillFooter(next.footer);
     place();
-    const wanted = next.focus != null ? [...menu.querySelectorAll('.asst-dd-item')].find(n => n.dataset.id === String(next.focus) && !n.disabled) : null;
+    if (keep && typing) {
+      // The input keeps the caret; the row highlight follows the selection as it did when it opened.
+      menu.querySelectorAll('.asst-dd-item.focused').forEach(n => n.classList.remove('focused'));
+      list.querySelector('.asst-dd-item[data-checked="1"]:not([disabled])')?.classList.add('focused');
+      return;
+    }
+    const keptRow = keep && onRowId != null ? [...menu.querySelectorAll('.asst-dd-item')].find(n => n.dataset.id === onRowId && !n.disabled) : null;
+    const wanted = keptRow || (next.focus != null ? [...menu.querySelectorAll('.asst-dd-item')].find(n => n.dataset.id === String(next.focus) && !n.disabled) : null);
+    if (keep && !keptRow && !menu.contains(document.activeElement)) return; // focus is elsewhere: not taken back
     setFocused(menu, wanted || list.querySelector('.asst-dd-item[data-checked="1"]:not([disabled])') || focusables(menu)[0] || null);
+    if (keep) list.scrollTop = scrollBefore;
   };
   return { el: menu, list, close: closeMenu, reposition: place, update };
 }