flexdesk 0.17.12 → 0.17.14

package/src/ui/components/managed_window.js

@@ -34,6 +34,17 @@ const MAX_Z_INDEX = 6999;
 const TOP_BAR_HEIGHT = 35;
 const BOTTOM_BAR_HEIGHT = 22;
 
+/** STORY-0119. The space above a window on `document.body`: the top bar, and
+ *  under it a shell's menu row (`.twm-global-menu-bar`, a sibling of the top
+ *  bar in body.twm-body's column) when the page has one. The row is measured,
+ *  not assumed, because its height is its content's. Without a row this is
+ *  TOP_BAR_HEIGHT, exactly as before. */
+function _topInset() {
+    const row = typeof document !== 'undefined'
+        ? document.querySelector('body > .twm-global-menu-bar') : null;
+    return TOP_BAR_HEIGHT + (row ? row.getBoundingClientRect().height : 0);
+}
+
 /** C11. How close to an edge the POINTER must come for a snap zone to arm.
  *  Small enough that it takes intent, large enough to hit without aiming. */
 const SNAP_EDGE = 12;
@@ -953,6 +964,10 @@ export class ManagedWindow {
      *      width  = window.innerWidth
      *      height = window.innerHeight - TOP_BAR_HEIGHT - BOTTOM_BAR_HEIGHT
      *
+     *  (STORY-0119: TOP_BAR_HEIGHT here is `_topInset()`, which is
+     *  TOP_BAR_HEIGHT on a page without a menu row and adds the row's height
+     *  on a page with one.)
+     *
      *  so, substituting into the clamps below:
      *
      *      maxWidth  = width                          = window.innerWidth                      ✓
@@ -1005,11 +1020,12 @@ export class ManagedWindow {
                 height: this.container.clientHeight,
             };
         }
+        const top = _topInset();
         return {
             minX: 0,
-            minY: TOP_BAR_HEIGHT,
+            minY: top,
             width: window.innerWidth,
-            height: window.innerHeight - TOP_BAR_HEIGHT - BOTTOM_BAR_HEIGHT,
+            height: window.innerHeight - top - BOTTOM_BAR_HEIGHT,
         };
     }
 
@@ -1266,7 +1282,8 @@ export class ManagedWindow {
         } else {
             // Center on screen (between top and bottom bars)
             this.x = Math.max(0, (maxWidth - this.width) / 2);
-            this.y = Math.max(TOP_BAR_HEIGHT, TOP_BAR_HEIGHT + (maxHeight - this.height) / 2);
+            const top = _topInset();
+            this.y = Math.max(top, top + (maxHeight - this.height) / 2);
         }
     }
 
@@ -1584,7 +1601,8 @@ export class ManagedWindow {
 
         // Calculate max available dimensions
         const maxWidth = window.innerWidth;
-        const maxHeight = window.innerHeight - TOP_BAR_HEIGHT - BOTTOM_BAR_HEIGHT;
+        const top = _topInset();
+        const maxHeight = window.innerHeight - top - BOTTOM_BAR_HEIGHT;
 
         let newX = state.startWinX;
         let newY = state.startWinY;
@@ -1604,12 +1622,12 @@ export class ManagedWindow {
 
         // Handle vertical resize
         if (dir.includes('s')) {
-            newH = Math.max(this.minHeight, Math.min(state.startHeight + dy, maxHeight - (newY - TOP_BAR_HEIGHT)));
+            newH = Math.max(this.minHeight, Math.min(state.startHeight + dy, maxHeight - (newY - top)));
         }
         if (dir.includes('n')) {
             const maxDy = state.startHeight - this.minHeight;
             const actualDy = Math.min(dy, maxDy);
-            newY = Math.max(TOP_BAR_HEIGHT, state.startWinY + actualDy);
+            newY = Math.max(top, state.startWinY + actualDy);
             newH = state.startHeight - (newY - state.startWinY);
         }
 

package/src/ui/components/tree_view.js

@@ -128,28 +128,39 @@ export function createTreeNode(options) {
     `;
     setText(node, '.twm-tree-node__label', label);
 
-    // Add action buttons if specified
-    if (actions) {
-        const actionsEl = node.querySelector('.twm-tree-node__actions');
-        Object.entries(actions).forEach(([actionId, actionConfig]) => {
-            const btn = document.createElement('button');
-            btn.className = 'twm-tree-node__action-btn';
-            btn.dataset.action = actionId;
-            btn.title = actionConfig.title || actionId;
-            btn.innerHTML = `<span class="material-symbols-outlined">${actionConfig.icon}</span>`;
-            if (actionConfig.onClick) {
-                btn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    actionConfig.onClick(id, e);
-                });
-            }
-            actionsEl.appendChild(btn);
-        });
-    }
+    if (actions) appendActionButtons(node.querySelector('.twm-tree-node__actions'), id, actions);
 
     return node;
 }
 
+/**
+ * Fill a node's or an item's actions slot: one `.twm-tree-node__action-btn`
+ * per entry. A click on an entry with `onClick` runs `onClick(id, event)` and
+ * goes no further, so it neither selects the item nor toggles the node; nor
+ * does a double-click, so it never reaches TreeView's onItemDoubleClick.
+ * @param {HTMLElement} actionsEl
+ * @param {string} id - The node's or item's id
+ * @param {Object<string, { icon: string, title?: string, onClick?: Function }>} actions
+ */
+function appendActionButtons(actionsEl, id, actions) {
+    Object.entries(actions).forEach(([actionId, actionConfig]) => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'twm-tree-node__action-btn';
+        btn.dataset.action = actionId;
+        btn.title = actionConfig.title || actionId;
+        btn.innerHTML = `<span class="material-symbols-outlined">${actionConfig.icon}</span>`;
+        if (actionConfig.onClick) {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                actionConfig.onClick(id, e);
+            });
+            btn.addEventListener('dblclick', (e) => e.stopPropagation());
+        }
+        actionsEl.appendChild(btn);
+    });
+}
+
 /**
  * Create a tree item (leaf node)
  * @param {Object} options - Item options
@@ -164,6 +175,10 @@ export function createTreeNode(options) {
  * @param {Object} [options.badge] - Optional badge config
  * @param {string} [options.badge.text] - Badge text (if empty, renders as status dot)
  * @param {string} [options.badge.variant] - 'muted'|'pass'|'fail'|'error'
+ * @param {Object} [options.actions] - Row actions, as createTreeNode takes them
+ *   ({ id: { icon, title, onClick(id, event) } }): buttons in one line at the
+ *   row's end (`.twm-tree-item__actions`), shown on hover, on focus within and
+ *   on the selected item
  * @returns {HTMLElement} - Item element
  */
 export function createTreeItem(options) {
@@ -177,6 +192,7 @@ export function createTreeItem(options) {
         subtitle = null,
         data = null,
         badge = null,
+        actions = null,
     } = options;
 
     const item = document.createElement('div');
@@ -220,6 +236,13 @@ export function createTreeItem(options) {
     if (subtitle) setText(item, '.twm-tree-item__subtitle', subtitle);
     if (badge?.text) setText(item, '.twm-tree-item__badge', badge.text);
 
+    if (actions) {
+        const actionsEl = document.createElement('span');
+        actionsEl.className = 'twm-tree-item__actions';
+        appendActionButtons(actionsEl, id, actions);
+        item.appendChild(actionsEl);
+    }
+
     return item;
 }