collavre 0.24.0 → 0.25.0

data/app/javascript/modules/creative_row_editor_delegated_clicks.js

@@ -0,0 +1,87 @@
+import { creativeIdFrom } from './creative_tree_dom';
+
+export function createDelegatedClickHandler(session) {
+  return function handleDelegatedClick(event) {
+    const target = event.target;
+    if (!target || typeof target.closest !== 'function') return;
+
+    const editBtn = target.closest('.edit-inline-btn');
+    if (editBtn) {
+      event.preventDefault();
+      const tree = editBtn.closest('.creative-tree');
+      if (tree) session.handleEditButtonClick(tree);
+      return;
+    }
+
+    const addBtn = target.closest('.add-creative-btn:not(#inline-add):not(#inline-level-down):not(#inline-level-up)');
+    if (addBtn) {
+      event.preventDefault();
+      if (session.template.style.display === 'block') {
+        session.hideCurrent();
+        return;
+      }
+
+      const tree = addBtn.closest('.creative-tree');
+      let parentId;
+      let container;
+      let insertBefore;
+      let beforeId = '';
+
+      if (tree) {
+        parentId = tree.dataset.id;
+        container = tree.querySelector('.creative-children');
+        if (!container) {
+          container = document.createElement('div');
+          container.className = 'creative-children';
+          container.id = `creative-children-${parentId}`;
+          tree.appendChild(container);
+        }
+        insertBefore = container.firstElementChild;
+        beforeId = insertBefore ? creativeIdFrom(insertBefore) : '';
+      } else {
+        parentId = addBtn.dataset.parentId || '';
+        container = document.getElementById('creatives');
+        if (!container) return;
+        insertBefore = container.firstElementChild;
+        beforeId = insertBefore ? creativeIdFrom(insertBefore) : '';
+      }
+
+      session.startNew(parentId, container, insertBefore, beforeId);
+      return;
+    }
+
+    const newRootBtn = target.closest('.new-root-creative-btn');
+    if (newRootBtn) {
+      event.preventDefault();
+      const container = document.getElementById('creatives');
+      if (!container) return;
+
+      if (session.template.style.display === 'block') {
+        session.hideCurrent();
+        return;
+      }
+
+      const insertBefore = container.firstElementChild;
+      const beforeId = insertBefore ? creativeIdFrom(insertBefore) : '';
+      session.startNew('', container, insertBefore, beforeId);
+      return;
+    }
+
+    const appendParentBtn = target.closest('.append-parent-btn');
+    if (!appendParentBtn) return;
+
+    event.preventDefault();
+    const targetId = appendParentBtn.dataset.childId;
+    const targetTree = document.getElementById(`creative-${targetId}`);
+    if (!targetTree) return;
+    const container = targetTree.parentNode;
+    session.startNew(
+      container.id.startsWith('creative-children-') ? container.id.replace('creative-children-', '') : '',
+      container,
+      targetTree,
+      targetId,
+      '',
+      targetId
+    );
+  };
+}

data/app/javascript/modules/creative_tree_dom.js

@@ -21,6 +21,7 @@
 // apply here. The only DOM writes are element mutations (insertBefore, appendChild,
 // setAttribute, dataset, style, requestUpdate) invoked on the passed nodes.
 import { treeRowElement, readRowLevel, buildChildrenLoadUrl } from './creative_row_editor_helpers';
+import { restoreTreeEmptyState } from './creative_tree_empty_state';
 
 export function creativeTreeElement(node) {
   if (!node) return null;
@@ -257,4 +258,7 @@ export function removeTreeElement(tree) {
   } else if (tree.remove) {
     tree.remove();
   }
+  // Covers every editor-side removal: abandoned new row, delete, level moves that
+  // empty the tree. No-op while any row remains.
+  restoreTreeEmptyState();
 }

data/app/javascript/modules/creative_tree_empty_state.js

@@ -0,0 +1,80 @@
+// Empty-state placeholder ("No sub-creatives found." / "No creatives found.")
+// lifecycle for the creative tree.
+//
+// The placeholder is server-rendered inside #creatives (see creatives/index.html.erb)
+// and marked with data-creatives-empty-state. Rows, however, are inserted into that
+// same container purely client-side — by the inline row editor (local add) and by the
+// websocket broadcast handler (another user / MCP add). Neither path re-renders the
+// container, so without an explicit hook the placeholder stays visible next to the
+// freshly created row.
+//
+// hideTreeEmptyState() hides the placeholder as soon as a row lands;
+// restoreTreeEmptyState() shows it again when the last row leaves.
+//
+// The placeholder is toggled rather than removed and re-created: keeping the original
+// node means no markup has to be cached and re-parsed as HTML (which would both
+// re-introduce an HTML sink and lose the server-rendered button_to CSRF token in the
+// "request permission" variant of the placeholder).
+//
+// The container itself is wiped on every client-side tree load (tree_controller's
+// showLoadingIndicator / renderCreativeTree), so on a populated tree the placeholder
+// is gone by the time the rows arrive. #creatives-empty-state-template holds a
+// pristine copy outside the container; restoreTreeEmptyState() clones it when the
+// tree empties out and nothing is left to un-hide. Cloning a <template> is not an
+// HTML sink — the browser parsed the markup at page load, server-side-escaped.
+//
+// One more wrinkle: the "Chats" feed is paginated, so an empty container does not
+// mean an empty result set — there may be further pages waiting behind the
+// load-more sentinel. tree_controller marks the container with
+// data-creatives-pagination-pending while that is the case, and restoreTreeEmptyState()
+// stays out of the way until the last page has landed.
+const EMPTY_STATE_SELECTOR = '[data-creatives-empty-state]';
+const EMPTY_STATE_TEMPLATE_ID = 'creatives-empty-state-template';
+export const PAGINATION_PENDING_ATTRIBUTE = 'data-creatives-pagination-pending';
+
+export function creativeTreeContainer() {
+  return document.getElementById('creatives');
+}
+
+function emptyStateElements(container) {
+  if (!container || !container.querySelectorAll) return [];
+  return Array.from(container.querySelectorAll(EMPTY_STATE_SELECTOR));
+}
+
+export function hideTreeEmptyState(container = creativeTreeContainer()) {
+  emptyStateElements(container).forEach((element) => {
+    element.hidden = true;
+    // Belt and braces: `hidden` is a UA-stylesheet rule that any `display` rule
+    // on the element would win over.
+    element.style.display = 'none';
+  });
+}
+
+function clonedEmptyStatePlaceholder() {
+  const template = document.getElementById(EMPTY_STATE_TEMPLATE_ID);
+  if (!template || !template.content) return null;
+  return template.content.cloneNode(true).querySelector(EMPTY_STATE_SELECTOR);
+}
+
+export function restoreTreeEmptyState(container = creativeTreeContainer()) {
+  if (!container || !container.querySelector) return;
+  // Still populated — the placeholder stays hidden.
+  if (container.querySelector('creative-tree-row')) return;
+  // Rendered rows are gone but the feed has further pages queued: the list is not
+  // empty, it is just between pages. Showing "No creatives found." here would both
+  // lie and survive the append, sitting above the rows the next page brings in.
+  if (container.hasAttribute && container.hasAttribute(PAGINATION_PENDING_ATTRIBUTE)) return;
+
+  const existing = emptyStateElements(container);
+  if (existing.length > 0) {
+    existing.forEach((element) => {
+      element.hidden = false;
+      element.style.removeProperty('display');
+    });
+    return;
+  }
+
+  // Nothing to un-hide — the tree render wiped the container. Re-attach a copy.
+  const placeholder = clonedEmptyStatePlaceholder();
+  if (placeholder) container.appendChild(placeholder);
+}

data/app/javascript/modules/dom_listener_registry.js

@@ -0,0 +1,23 @@
+export function createListenerRegistry() {
+  const bindings = [];
+
+  return {
+    add(target, type, handler, options) {
+      if (!target || typeof target.addEventListener !== 'function') return;
+
+      target.addEventListener(type, handler, options);
+      bindings.push({ target, type, handler, options });
+    },
+
+    releaseAll() {
+      while (bindings.length > 0) {
+        const { target, type, handler, options } = bindings.pop();
+        target.removeEventListener(type, handler, options);
+      }
+    },
+
+    get size() {
+      return bindings.length;
+    },
+  };
+}

data/app/javascript/modules/mention_menu.js

@@ -1,5 +1,5 @@
 import CommonPopup from '../lib/common_popup'
-import { getCaretClientRect } from '../utils/caret_position'
+import { caretAnchor } from '../utils/caret_position'
 
 let mentionMenuInitialized = false
 
@@ -42,8 +42,7 @@ if (!mentionMenuInitialized) {
         return
       }
       popupMenu.setItems(users)
-      const caretRect = getCaretClientRect(textarea) || textarea.getBoundingClientRect()
-      popupMenu.showAt(caretRect)
+      popupMenu.showAt(caretAnchor(textarea))
     }
 
     textarea.addEventListener('keydown', function (event) {

data/app/javascript/utils/__tests__/caret_anchor.test.js

@@ -0,0 +1,75 @@
+/**
+ * @jest-environment jsdom
+ */
+import { caretAnchor } from '../caret_position'
+
+// caretAnchor is what a caret-anchored popup hands to CommonPopup.showAt in
+// place of a rect: the caret is not an element, so the only way placement can
+// re-measure it later is to re-derive it from the input each time.
+describe('caretAnchor', () => {
+    let textarea
+
+    // jsdom measures every element as a zeroed rect, so the mirror-div path in
+    // getCaretClientRect cannot produce distinguishable coordinates. Dropping
+    // selectionStart takes the documented fallback branch instead, where the
+    // rect is the input's own and therefore stubbable.
+    const useInputRectFallback = () => {
+        Object.defineProperty(textarea, 'selectionStart', { value: null, configurable: true })
+    }
+
+    beforeEach(() => {
+        textarea = document.createElement('textarea')
+        textarea.value = 'hello'
+        document.body.appendChild(textarea)
+    })
+
+    afterEach(() => {
+        document.body.innerHTML = ''
+    })
+
+    test('re-derives the rect on every call, so a moved input moves the anchor', () => {
+        useInputRectFallback()
+        const anchor = caretAnchor(textarea)
+
+        textarea.getBoundingClientRect = () => ({ left: 10, top: 500, bottom: 540 })
+        const before = anchor()
+        // The keyboard opens and the composer is lifted clear of it.
+        textarea.getBoundingClientRect = () => ({ left: 10, top: 200, bottom: 240 })
+        const after = anchor()
+
+        expect(before.top).toBe(500)
+        expect(after.top).toBe(200)
+    })
+
+    test('falls back to the input rect when the caret cannot be located', () => {
+        const inputRect = { left: 10, top: 200, bottom: 240 }
+        textarea.getBoundingClientRect = () => inputRect
+        useInputRectFallback()
+
+        expect(caretAnchor(textarea)()).toBe(inputRect)
+    })
+
+    test('measures the caret, not the whole input, when the caret is locatable', () => {
+        const inputRect = { left: 10, top: 200, bottom: 240 }
+        textarea.getBoundingClientRect = () => inputRect
+        textarea.setSelectionRange(3, 3)
+
+        const rect = caretAnchor(textarea)()
+
+        expect(rect).not.toBe(inputRect)
+        expect(rect).not.toBeNull()
+    })
+
+    test('returns nothing once the input has left the document', () => {
+        const anchor = caretAnchor(textarea)
+        textarea.remove()
+
+        // A detached input measures as all zeros, which would pin the popup to
+        // the top-left corner; CommonPopup keeps its last rect on a null.
+        expect(anchor()).toBeNull()
+    })
+
+    test('returns nothing when there is no input at all', () => {
+        expect(caretAnchor(null)()).toBeNull()
+    })
+})

data/app/javascript/utils/__tests__/chevron_icons.test.js

@@ -0,0 +1,15 @@
+import { CHEVRON_COLLAPSED, CHEVRON_EXPANDED } from '../chevron_icons'
+
+describe('tree chevron icons', () => {
+  test('shares consistent SVG attributes and the expected toggle directions', () => {
+    const collapsed = document.createElement('template')
+    collapsed.innerHTML = CHEVRON_COLLAPSED
+    const expanded = document.createElement('template')
+    expanded.innerHTML = CHEVRON_EXPANDED
+
+    expect(collapsed.content.querySelector('svg').getAttribute('aria-hidden')).toBe('true')
+    expect(collapsed.content.querySelector('path').getAttribute('d')).toBe('M9 6L15 12L9 18')
+    expect(expanded.content.querySelector('svg').getAttribute('aria-hidden')).toBe('true')
+    expect(expanded.content.querySelector('path').getAttribute('d')).toBe('M6 9L12 15L18 9')
+  })
+})

data/app/javascript/utils/caret_position.js

@@ -1,3 +1,13 @@
+// Anchor provider for a popup hung off the caret of `input`, for CommonPopup's
+// showAt. The caret has no element to hold on to, so its rect has to be
+// re-derived from the input's live geometry every time placement runs.
+export function caretAnchor(input) {
+  return () => {
+    if (!input?.isConnected) return null
+    return getCaretClientRect(input) || input.getBoundingClientRect()
+  }
+}
+
 export function getCaretClientRect(input) {
   if (!input || typeof input.selectionStart !== 'number') return null
 

data/app/javascript/utils/chevron_icons.js

@@ -0,0 +1,7 @@
+const CHEVRON_ATTRIBUTES =
+  'width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"'
+
+export const CHEVRON_COLLAPSED =
+  `<svg ${CHEVRON_ATTRIBUTES}><path d="M9 6L15 12L9 18"/></svg>`
+export const CHEVRON_EXPANDED =
+  `<svg ${CHEVRON_ATTRIBUTES}><path d="M6 9L12 15L18 9"/></svg>`