collavre 0.22.0 → 0.24.0

data/app/javascript/controllers/creatives/tree_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import { renderCreativeTree, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
+import { renderCreativeTree, appendCreativeNodes, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
 import { parseEmojis } from '../../utils/emoji_parser'
 
 const TREE_RETRY_DELAYS_MS = [200, 600]
@@ -14,6 +14,12 @@ export default class extends Controller {
     this.abortController = null
     this.loadingIndicator = null
     this._editing = false
+    this._pagination = null
+    this._sentinel = null
+    this._sentinelObserver = null
+    this._loadingMore = false
+    this._loadMoreAbort = null
+    this._loadMoreIndicator = null
     this.handleResize = this.updateAlignmentOffset.bind(this)
     this.handleTreeUpdated = () => this.queueAlignmentUpdate()
     this._handleEditStart = () => { this._editing = true }
@@ -60,6 +66,7 @@ export default class extends Controller {
     document.removeEventListener('creative-editing:start', this._handleEditStart)
     document.removeEventListener('creative-editing:stop', this._handleEditStop)
     document.removeEventListener('creative-sync:refetch', this._handleSyncRefetch)
+    this._teardownPagination()
     if (this._debouncedLoadTimer) clearTimeout(this._debouncedLoadTimer)
     if (this._archiveToggleHandler) {
       document.getElementById('toggle-archived-btn')?.removeEventListener('click', this._archiveToggleHandler)
@@ -140,6 +147,11 @@ export default class extends Controller {
   load() {
     if (!this.hasUrlValue) return
 
+    // A fresh load replaces the whole list (filter change, archive toggle, sync
+    // refetch), so any active load-more session is stale — tear it down before
+    // re-rendering page 1.
+    this._teardownPagination()
+
     if (this.abortController) {
       this.abortController.abort()
     }
@@ -196,6 +208,135 @@ export default class extends Controller {
     this.markContentLoaded()
     dispatchCreativeTreeUpdated(this.element)
     this.queueAlignmentUpdate()
+    this._setupPagination(data?.pagination)
+  }
+
+  // --- Load-more (paginated "Chats" feed) -------------------------------------
+  // Only engaged when the JSON response carries a `pagination` object (the
+  // comment filter). For the tree and search views the payload has no
+  // pagination, so none of this runs and behavior is unchanged.
+
+  _setupPagination(pagination) {
+    this._teardownPagination()
+    this._pagination = pagination || null
+    if (!this._pagination || !this._pagination.has_more) return
+    if (typeof IntersectionObserver === 'undefined') return
+    this._createSentinel()
+  }
+
+  _createSentinel() {
+    const sentinel = document.createElement('div')
+    sentinel.className = 'creative-chats-load-sentinel'
+    sentinel.setAttribute('aria-hidden', 'true')
+    this.element.appendChild(sentinel)
+    this._sentinel = sentinel
+    this._sentinelObserver = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) this._loadMore()
+    }, { root: null, rootMargin: '300px' })
+    this._sentinelObserver.observe(sentinel)
+  }
+
+  _loadMore() {
+    if (this._loadingMore) return
+    const nextPage = this._pagination && this._pagination.next_page
+    if (!nextPage) return
+
+    this._loadingMore = true
+    this._showLoadMoreIndicator()
+
+    // Tie this request to an AbortController so a fresh load() / teardown (filter
+    // change, archive toggle, sync refetch, disconnect) cancels an in-flight
+    // page fetch. Without this the stale promise could append rows for a
+    // different urlValue into the freshly rendered list and resurrect the
+    // pagination state via _repositionSentinel().
+    if (this._loadMoreAbort) this._loadMoreAbort.abort()
+    this._loadMoreAbort = new AbortController()
+    const signal = this._loadMoreAbort.signal
+
+    const url = new URL(this.urlValue, window.location.origin)
+    url.searchParams.set('page', String(nextPage))
+
+    fetch(url.pathname + url.search, { headers: { Accept: 'application/json' }, signal })
+      .then((response) => {
+        if (!response.ok) throw new Error(`Failed to load more chats: ${response.status}`)
+        return response.json()
+      })
+      .then((data) => {
+        if (signal.aborted) return
+        this._hideLoadMoreIndicator()
+        const nodes = Array.isArray(data?.creatives) ? data.creatives : []
+        if (nodes.length > 0) {
+          appendCreativeNodes(this.element, nodes)
+          dispatchCreativeTreeUpdated(this.element)
+          this.queueAlignmentUpdate()
+        }
+        this._loadingMore = false
+        this._pagination = data?.pagination || null
+        if (this._pagination && this._pagination.has_more) {
+          this._repositionSentinel()
+        } else {
+          this._teardownPagination()
+        }
+      })
+      .catch((error) => {
+        if (error.name === 'AbortError') return
+        console.error(error)
+        this._hideLoadMoreIndicator()
+        this._loadingMore = false
+        // Leave the sentinel in place so a later scroll can retry the page.
+      })
+  }
+
+  _repositionSentinel() {
+    // New rows were appended after the sentinel; move it back to the tail so it
+    // keeps trailing the list and can trigger the following page.
+    if (this._sentinel && this._sentinel.parentNode === this.element) {
+      this.element.appendChild(this._sentinel)
+    } else {
+      this._createSentinel()
+    }
+  }
+
+  _teardownPagination() {
+    if (this._loadMoreAbort) {
+      this._loadMoreAbort.abort()
+      this._loadMoreAbort = null
+    }
+    if (this._sentinelObserver) {
+      this._sentinelObserver.disconnect()
+      this._sentinelObserver = null
+    }
+    if (this._sentinel && this._sentinel.parentNode) {
+      this._sentinel.remove()
+    }
+    this._sentinel = null
+    this._pagination = null
+    this._loadingMore = false
+    this._hideLoadMoreIndicator()
+  }
+
+  _showLoadMoreIndicator() {
+    if (this._loadMoreIndicator) return
+    const indicator = document.createElement('div')
+    indicator.className = 'creative-tree-loading-placeholder creative-chats-load-more'
+    indicator.setAttribute('role', 'status')
+    indicator.setAttribute('aria-live', 'polite')
+    indicator.innerHTML = `
+      <span class="creative-loading-indicator" aria-hidden="true">
+        <span class="creative-loading-dot">.</span>
+        <span class="creative-loading-dot">.</span>
+        <span class="creative-loading-dot">.</span>
+      </span>
+    `
+    this.element.appendChild(indicator)
+    this._loadMoreIndicator = indicator
+  }
+
+  _hideLoadMoreIndicator() {
+    if (this._loadMoreIndicator && this._loadMoreIndicator.parentNode) {
+      this._loadMoreIndicator.remove()
+    }
+    this._loadMoreIndicator = null
   }
 
   showEmptyState() {

data/app/javascript/controllers/image_lightbox_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { confirmDialog } from "../lib/utils/dialog"
 
 // Connects to data-controller="image-lightbox"
 // Provides a fullscreen image carousel with navigation, download, and zoom
@@ -338,7 +339,7 @@ export default class extends Controller {
 
   async _deleteCurrentImage() {
     if (!this.hasDownloadAllUrlValue) return
-    if (!confirm(this.i18nDeleteConfirmValue)) return
+    if (!(await confirmDialog(this.i18nDeleteConfirmValue, { danger: true }))) return
 
     const url = `${this.downloadAllUrlValue.replace("download_images", "remove_image")}?index=${this._currentIndex}`
     const csrfToken = document.querySelector("meta[name='csrf-token']")?.content

data/app/javascript/controllers/inbox_badge_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus'
+import { Turbo } from '@hotwired/turbo-rails'
+import { createSubscription } from '../services/cable'
+
+// Keeps the global inbox badge live across WebSocket gaps.
+//
+// Steady-state, the badge is updated by Turbo Stream broadcasts on the
+// `["inbox", user]` stream (see Comment::Broadcastable). Those broadcasts are
+// fire-and-forget: ActionCable never replays a message missed while the socket
+// was down, so a badge update sent during a Turbo navigation gap, sleep/wake,
+// network blip, or server restart was lost until the next full page render
+// (the "badge only appears after refresh" bug).
+//
+// Subscribing to InboxBadgeChannel closes that gap: ActionCable re-runs the
+// channel's #subscribed on every (re)connect, and the server transmits the
+// authoritative badge snapshot straight back over THIS subscription. We render
+// it ourselves (rather than relying on the sibling turbo_stream_from stream,
+// which may not have re-attached yet) so the catch-up can't race a reconnect.
+export default class extends Controller {
+  connect() {
+    this.subscription = createSubscription(
+      { channel: 'Collavre::InboxBadgeChannel' },
+      { received: (snapshot) => Turbo.renderStreamMessage(snapshot) },
+    )
+  }
+
+  disconnect() {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+      this.subscription = null
+    }
+  }
+}

data/app/javascript/controllers/index.js

@@ -22,6 +22,7 @@ import ClickTargetController from "./click_target_controller"
 import TabsController from "./tabs_controller"
 import LinkCreativeController from "./link_creative_controller"
 import TopicSearchController from "./topic_search_controller"
+import TopicListController from "./topic_list_controller"
 import CommonPopupController from "./common_popup_controller"
 import CommentController from "./comment_controller"
 import ReactionPickerController from "./reaction_picker_controller"
@@ -34,6 +35,7 @@ import ShareModalController from "./share_modal_controller"
 import ImageLightboxController from "./image_lightbox_controller"
 import SearchPopupController from "./search_popup_controller"
 import LandingVideoController from "./landing_video_controller"
+import InboxBadgeController from "./inbox_badge_controller"
 
 // Export all controllers
 export {
@@ -58,6 +60,7 @@ export {
   TabsController,
   LinkCreativeController,
   TopicSearchController,
+  TopicListController,
   CommonPopupController,
   CommentController,
   ReactionPickerController,
@@ -69,7 +72,8 @@ export {
   ImageLightboxController,
   SearchPopupController,
   CommentBadgeController,
-  LandingVideoController
+  LandingVideoController,
+  InboxBadgeController
 }
 
 // Registration function for use with a Stimulus application
@@ -96,6 +100,7 @@ export function registerControllers(application) {
   application.register("tabs", TabsController)
   application.register("link-creative", LinkCreativeController)
   application.register("topic-search", TopicSearchController)
+  application.register("topic-list", TopicListController)
   application.register("common-popup", CommonPopupController)
   application.register("comment", CommentController)
   application.register("reaction-picker", ReactionPickerController)
@@ -108,4 +113,5 @@ export function registerControllers(application) {
   application.register("search-popup", SearchPopupController)
   application.register("comment-badge", CommentBadgeController)
   application.register("landing-video", LandingVideoController)
+  application.register("inbox-badge", InboxBadgeController)
 }

data/app/javascript/controllers/search_popup_controller.js

@@ -9,9 +9,14 @@ export default class extends Controller {
     }
     document.addEventListener('keydown', this._escHandler)
 
-    // Global keyboard shortcut: Cmd/Ctrl + K to open search
+    // Global keyboard shortcut: Cmd/Ctrl + K to open search.
+    // Skip when focus is inside an editable element (input, textarea,
+    // contenteditable, or the inline Lexical editor) so that element's own
+    // Ctrl+K behavior (e.g. delete-to-end-of-line) takes precedence over the
+    // global search popup.
     this._shortcutHandler = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        if (this._isEditableTarget(e.target)) return
         e.preventDefault()
         this.toggle()
       }
@@ -19,6 +24,17 @@ export default class extends Controller {
     document.addEventListener('keydown', this._shortcutHandler)
   }
 
+  _isEditableTarget(target) {
+    const el = target instanceof Element ? target : document.activeElement
+    if (!el || typeof el.closest !== 'function') return false
+    const tag = el.tagName
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true
+    if (el.isContentEditable) return true
+    return Boolean(
+      el.closest('[contenteditable]:not([contenteditable="false"]), [data-lexical-editor-root]')
+    )
+  }
+
   disconnect() {
     document.removeEventListener('keydown', this._escHandler)
     document.removeEventListener('keydown', this._shortcutHandler)

data/app/javascript/controllers/share_modal_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { confirmDialog, alertDialog } from "../lib/utils/dialog"
 
 export default class extends Controller {
   static targets = ["container"]
@@ -277,13 +278,13 @@ export default class extends Controller {
       const methodInput = form.querySelector("input[name='_method'][value='delete']")
       if (!methodInput) return
 
-      form.addEventListener("submit", (e) => {
+      form.addEventListener("submit", async (e) => {
         e.preventDefault()
 
         const confirmMessage = form.dataset.turboConfirm
           || form.querySelector("button[type='submit']")?.dataset?.turboConfirm
           || form.querySelector("button")?.dataset?.confirm
-        if (confirmMessage && !window.confirm(confirmMessage)) return
+        if (confirmMessage && !(await confirmDialog(confirmMessage, { danger: true }))) return
 
         const listItem = form.closest("li")
         if (listItem) {
@@ -379,7 +380,7 @@ export default class extends Controller {
       const copiedTemplate = inviteLinkBtn.dataset.copiedTemplate
 
       if (permission === "no_access") {
-        alert(noAccessMessage)
+        alertDialog(noAccessMessage)
         return
       }
 

data/app/javascript/controllers/topic_list_controller.js

@@ -0,0 +1,78 @@
+import CommonPopupController from './common_popup_controller'
+
+const ICON_ARCHIVE = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="5" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>`
+
+export default class extends CommonPopupController {
+    static targets = ['input', 'list', 'close']
+
+    connect() {
+        super.connect()
+        this._allItems = []
+        this._onInputBound = this._onInput.bind(this)
+        this._onKeydownBound = this.handleInputKeydown.bind(this)
+        this._onCloseBound = () => this.close()
+        this.inputTarget.addEventListener('input', this._onInputBound)
+        this.inputTarget.addEventListener('keydown', this._onKeydownBound)
+        this.closeTarget.addEventListener('click', this._onCloseBound)
+    }
+
+    disconnect() {
+        this.inputTarget?.removeEventListener('input', this._onInputBound)
+        this.inputTarget?.removeEventListener('keydown', this._onKeydownBound)
+        this.closeTarget?.removeEventListener('click', this._onCloseBound)
+        super.disconnect()
+    }
+
+    openForTopics({ topics = [], archivedTopics = [], mainTopicId = null, allMessagesLabel = 'All Messages' }, anchorRect, onSelectCallback, boundsElement = null) {
+        this.onSelectCallback = onSelectCallback
+        this._allItems = this._buildItems({ topics, archivedTopics, mainTopicId, allMessagesLabel })
+        this.inputTarget.value = ''
+        this.setItems(this._allItems)
+        super.open(anchorRect, boundsElement)
+        requestAnimationFrame(() => this.inputTarget.focus())
+    }
+
+    _buildItems({ topics, archivedTopics, mainTopicId, allMessagesLabel }) {
+        const main = mainTopicId ? topics.find(t => String(t.id) === String(mainTopicId)) : null
+        const others = topics.filter(t => !main || String(t.id) !== String(mainTopicId))
+        const items = []
+        if (main) items.push({ id: main.id, label: `#${main.name}`, archived: false })
+        others.forEach(t => items.push({ id: t.id, label: `#${t.name}`, archived: false }))
+        items.push({ id: '', label: `📋 ${allMessagesLabel}`, archived: false })
+        archivedTopics.forEach(t => items.push({ id: t.id, label: `#${t.name}`, archived: true }))
+        return items
+    }
+
+    _onInput() {
+        const q = this.inputTarget.value.toLowerCase().trim()
+        if (!q) { this.setItems(this._allItems); return }
+        const filtered = this._allItems.filter(i => (i.label || '').toLowerCase().includes(q))
+        this.setItems(filtered)
+    }
+
+    handleInputKeydown(event) {
+        if (this.handleKey(event)) return
+        if (event.key === 'Escape') this.close()
+    }
+
+    select(item) {
+        if (this.onSelectCallback) this.onSelectCallback(item)
+        this.close()
+    }
+
+    renderItem(item) {
+        const escaped = String(item.label || '')
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+        if (item.archived) {
+            return `<span class="topic-list-item topic-list-item--archived">${ICON_ARCHIVE} ${escaped}</span>`
+        }
+        return `<span class="topic-list-item">${escaped}</span>`
+    }
+
+    dispatchClose(reason) {
+        this.onSelectCallback = null
+        super.dispatchClose(reason)
+    }
+}

data/app/javascript/controllers/topic_search_controller.js

@@ -1,5 +1,6 @@
 import CommonPopupController from './common_popup_controller'
 import { fetchNextTopicName, createTopicWithComments } from '../lib/api/topics'
+import { alertDialog } from '../lib/utils/dialog'
 
 export default class extends CommonPopupController {
     static targets = ['input', 'list', 'close']
@@ -148,7 +149,7 @@ export default class extends CommonPopupController {
                 this.onSelectCallback({ id: result.topic.id, label: `#${result.topic.name}`, created: true })
             }
         } else {
-            alert(result.error)
+            alertDialog(result.error)
         }
     }
 

data/app/javascript/creatives/drag_drop/event_handlers.js

@@ -26,6 +26,8 @@ import {
 import { createMoveContext, applyMove, revertMove } from './operations';
 import { sendNewOrder, sendLinkedCreative, sendTopicMove } from '../../lib/api/drag_drop';
 import { initIndicator, showLinkHover, hideLinkHover } from './indicator';
+import { showMissingMembersPopup } from '../topic_move_members_popup';
+import { alertDialog } from '../../lib/utils/dialog';
 
 const childZoneRatio = 0.3;
 const coordPrecision = 5;
@@ -500,9 +502,7 @@ function getDraggedContext(event) {
 
 function notifyInvalidDrop() {
   console.error('Rejected invalid creative drop payload');
-  if (typeof window !== 'undefined' && typeof window.alert === 'function') {
-    window.alert(INVALID_DROP_MESSAGE);
-  }
+  alertDialog(INVALID_DROP_MESSAGE);
 }
 
 import { attachBundleDragImage } from '../../utils/drag_bundle_image.js';
@@ -640,15 +640,24 @@ export function handleDrop(event) {
       if (sourceCreativeId === targetCreativeId) return;
 
       sendTopicMove({ topicId, sourceCreativeId, targetCreativeId })
-        .then(() => {
+        .then((data) => {
           // Dispatch event so topic list refreshes
           window.dispatchEvent(new CustomEvent('collavre:topic-moved', {
             detail: { topicId, sourceCreativeId, targetCreativeId }
           }));
+
+          // Offer to re-add members who lose access at the new location.
+          if (data && Array.isArray(data.missing_members) && data.missing_members.length > 0) {
+            showMissingMembersPopup({
+              members: data.missing_members,
+              targetCreativeId: data.target_creative_id || targetCreativeId,
+              targetCreativeName: data.target_creative_name,
+            });
+          }
         })
         .catch((error) => {
           console.error('Failed to move topic', error);
-          alert(error.message || 'Failed to move topic');
+          alertDialog(error.message || 'Failed to move topic');
         });
     } catch (error) {
       console.error('Failed to parse topic move data', error);

data/app/javascript/creatives/topic_move_members_popup.js

@@ -0,0 +1,156 @@
+import csrfFetch from '../lib/api/csrf_fetch';
+
+// After a topic is moved to another creative, TopicsController#move returns the
+// members who had access on the source creative but not on the target. This
+// module renders the (hidden) `#topic-move-members-modal` partial with those
+// members and lets the user re-add them with one click. All user-facing text
+// comes from the partial's i18n data-attributes — nothing is hardcoded here.
+
+function getModal() {
+  return document.getElementById('topic-move-members-modal');
+}
+
+function closeModal(modal) {
+  modal.style.display = 'none';
+  document.body.classList.remove('no-scroll');
+  const list = modal.querySelector('#topic-move-members-list');
+  if (list) list.innerHTML = '';
+  const message = modal.querySelector('#topic-move-members-message');
+  if (message) message.innerHTML = '';
+}
+
+function buildRow(modal, member) {
+  const template = modal.querySelector('#topic-move-member-row');
+  const row = template.content.firstElementChild.cloneNode(true);
+  const user = member.user || {};
+
+  const avatar = row.querySelector('.tmm-avatar');
+  if (user.avatar_url && !user.default_avatar) {
+    const img = document.createElement('img');
+    img.src = user.avatar_url;
+    img.alt = '';
+    img.style.width = '100%';
+    img.style.height = '100%';
+    img.style.objectFit = 'cover';
+    avatar.appendChild(img);
+  } else {
+    avatar.textContent = user.initial || '?';
+  }
+
+  row.querySelector('.tmm-name').textContent = user.name || user.email || '';
+  row.querySelector('.tmm-email').textContent = user.email || '';
+
+  const select = row.querySelector('.tmm-permission');
+  if (member.permission) {
+    const option = Array.from(select.options).find((o) => o.value === member.permission);
+    if (option) select.value = member.permission;
+  }
+
+  row.dataset.userEmail = user.email || '';
+  return row;
+}
+
+function setMessage(modal, text) {
+  const message = modal.querySelector('#topic-move-members-message');
+  if (message) message.textContent = text || '';
+}
+
+async function addSelected(modal, targetCreativeId) {
+  const addBtn = modal.querySelector('#topic-move-members-add');
+  const rows = Array.from(modal.querySelectorAll('.topic-move-member-row')).filter((row) => {
+    const checkbox = row.querySelector('.tmm-checkbox');
+    return checkbox && checkbox.checked && row.dataset.userEmail;
+  });
+
+  if (rows.length === 0) {
+    closeModal(modal);
+    return;
+  }
+
+  addBtn.disabled = true;
+  setMessage(modal, addBtn.dataset.addingText || modal.dataset.addingText || '');
+
+  const urlTemplate = modal.dataset.sharesUrlTemplate || modal.dataset.sharesUrl;
+  const url = urlTemplate.replace('__CREATIVE_ID__', encodeURIComponent(targetCreativeId));
+
+  let added = 0;
+  let failed = 0;
+
+  // Sequential so we reuse the existing per-user share endpoint (with all its
+  // invitation / linked-creative / contact side effects) and keep ordering.
+  for (const row of rows) {
+    const status = row.querySelector('.tmm-status');
+    const select = row.querySelector('.tmm-permission');
+    const body = new FormData();
+    body.append('user_email', row.dataset.userEmail);
+    body.append('permission', select ? select.value : 'feedback');
+
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      const response = await csrfFetch(url, {
+        method: 'POST',
+        headers: { Accept: 'application/json' },
+        body,
+      });
+      if (response.ok) {
+        added += 1;
+        if (status) status.textContent = '✓';
+        row.style.opacity = '0.6';
+      } else {
+        failed += 1;
+        if (status) status.textContent = '✗';
+      }
+    } catch (error) {
+      failed += 1;
+      if (status) status.textContent = '✗';
+    }
+  }
+
+  if (failed === 0) {
+    const template = added === 1
+      ? (modal.dataset.addedOne || '')
+      : (modal.dataset.addedOther || '');
+    setMessage(modal, template.replace('__COUNT__', added));
+    setTimeout(() => closeModal(modal), 1200);
+  } else if (added === 0) {
+    setMessage(modal, modal.dataset.failedText || '');
+    addBtn.disabled = false;
+  } else {
+    const template = modal.dataset.partialText || '';
+    setMessage(modal, template.replace('__ADDED__', added).replace('__FAILED__', failed));
+    addBtn.disabled = false;
+  }
+}
+
+export function showMissingMembersPopup({ members, targetCreativeId, targetCreativeName }) {
+  if (!Array.isArray(members) || members.length === 0) return;
+  const modal = getModal();
+  if (!modal) return;
+
+  const list = modal.querySelector('#topic-move-members-list');
+  list.innerHTML = '';
+  members.forEach((member) => list.appendChild(buildRow(modal, member)));
+
+  const description = modal.querySelector('#topic-move-members-description');
+  if (description) {
+    const template = modal.dataset.descriptionTemplate || '';
+    description.textContent = template.replace('__CREATIVE_NAME__', targetCreativeName || '');
+  }
+
+  setMessage(modal, '');
+  const addBtn = modal.querySelector('#topic-move-members-add');
+  addBtn.disabled = false;
+
+  // (Re)wire controls. Using onclick keeps a single handler across re-opens.
+  modal.querySelector('#topic-move-members-close').onclick = () => closeModal(modal);
+  modal.querySelector('#topic-move-members-skip').onclick = () => closeModal(modal);
+  modal.onclick = (event) => {
+    if (event.target === modal) closeModal(modal);
+  };
+  addBtn.onclick = () => addSelected(modal, targetCreativeId);
+
+  modal.style.display = 'flex';
+  modal.style.alignItems = 'center';
+  modal.style.justifyContent = 'center';
+  document.body.classList.add('no-scroll');
+}

data/app/javascript/creatives/tree_renderer.js

@@ -169,6 +169,9 @@ function applyRowProperties(row, node) {
   if (Object.prototype.hasOwnProperty.call(inlinePayload, 'markdown_source')) {
     setDatasetValue(row, 'markdownSource', inlinePayload.markdown_source ?? '')
   }
+  if (Object.prototype.hasOwnProperty.call(inlinePayload, 'markdown_editor')) {
+    setDatasetValue(row, 'markdownEditor', inlinePayload.markdown_editor ?? '')
+  }
 
   if (dirty && typeof row.requestUpdate === 'function') {
     // Before Lit re-renders, sync progressHtml from current DOM.
@@ -308,6 +311,14 @@ export function renderCreativeTree(container, nodes, { replace = true } = {}) {
   reconcileNodes(container, nodes)
 }
 
+// Append a page of flat nodes to an already-rendered list without clearing the
+// existing rows. Used by the "Chats" feed's load-more, where each page is added
+// below the previous one rather than replacing it.
+export function appendCreativeNodes(container, nodes) {
+  if (!container) return
+  appendNodes(container, nodes)
+}
+
 export function dispatchCreativeTreeUpdated(container) {
   if (!container) return
   const event = new CustomEvent('creative-tree:updated', { bubbles: true })