collavre 0.8.2 → 0.9.0

data/app/javascript/controllers/comments/list_controller.js

@@ -513,14 +513,19 @@ export default class extends Controller {
     if (this.selection.size === 0) return
 
     const count = this.selection.size
+    const total = this.listTarget.querySelectorAll('.comment-select-checkbox').length
+    const allSelected = count === total
     const i18n = (key, fallback) => this.element.dataset[key] || fallback
+    const selectAllLabel = i18n('selectionSelectAllText', 'All')
 
     const bar = document.createElement('div')
     bar.className = 'selection-action-bar'
     bar.innerHTML = `
       <div class="selection-action-bar-main">
-        <span class="selection-action-bar-count">${i18n('selectionCountText', '{count}개 선택').replace('{count}', count)}</span>
+        <label class="selection-action-bar-select-all"><input type="checkbox" class="selection-action-bar-select-all-checkbox"${allSelected ? ' checked' : ''}> ${selectAllLabel}</label>
+        <span class="selection-action-bar-count">${i18n('selectionCountText', '{count}/{total}개 선택').replace('{count}', count).replace('{total}', total)}</span>
         <button type="button" class="selection-action-bar-btn selection-action-delete" title="${i18n('selectionDeleteText', 'Delete')}">🗑 ${i18n('selectionDeleteText', 'Delete')}</button>
+        <button type="button" class="selection-action-bar-btn selection-action-merge" title="${i18n('selectionMergeText', 'Merge')}"${count < 2 ? ' disabled' : ''}>🔗 ${i18n('selectionMergeText', 'Merge')}</button>
         <button type="button" class="selection-action-bar-btn selection-action-move" title="${i18n('selectionMoveText', 'Move')}">📤 ${i18n('selectionMoveText', 'Move')}</button>
         <button type="button" class="selection-action-bar-btn selection-action-topic" title="${i18n('selectionTopicMoveText', 'Move to topic')}">🏷 ${i18n('selectionTopicMoveText', 'Move to topic')}</button>
         <button type="button" class="selection-action-bar-close" title="${i18n('selectionCloseText', 'Cancel')}">✕</button>
@@ -530,7 +535,40 @@ export default class extends Controller {
       </div>
     `
 
+    // Set indeterminate state if partially selected
+    const selectAllCheckbox = bar.querySelector('.selection-action-bar-select-all-checkbox')
+    if (count > 0 && !allSelected) {
+      selectAllCheckbox.indeterminate = true
+    }
+
+    // Select All toggle handler
+    selectAllCheckbox.addEventListener('change', () => {
+      const shouldSelect = selectAllCheckbox.checked
+      this.listTarget.querySelectorAll('.comment-select-checkbox').forEach((checkbox) => {
+        const commentId = checkbox.value
+        const item = checkbox.closest('.comment-item')
+        if (shouldSelect && !checkbox.checked) {
+          checkbox.checked = true
+          this.selection.add(commentId)
+          if (item) {
+            item.classList.add('selected-for-move')
+            item.setAttribute('draggable', 'true')
+          }
+        } else if (!shouldSelect && checkbox.checked) {
+          checkbox.checked = false
+          this.selection.delete(commentId)
+          if (item) {
+            item.classList.remove('selected-for-move')
+            item.removeAttribute('draggable')
+          }
+        }
+      })
+      this.notifySelectionChange()
+      this.updateSelectionActionBar()
+    })
+
     bar.querySelector('.selection-action-delete').addEventListener('click', (e) => { e.stopPropagation(); this.deleteSelectedComments() })
+    bar.querySelector('.selection-action-merge').addEventListener('click', (e) => { e.stopPropagation(); this.mergeSelectedComments() })
     bar.querySelector('.selection-action-move').addEventListener('click', (e) => this.openMoveModal(e))
     bar.querySelector('.selection-action-topic').addEventListener('click', (e) => this.openTopicSearchPopup(e))
     bar.querySelector('.selection-action-bar-close').addEventListener('click', () => this.clearSelection())
@@ -575,6 +613,34 @@ export default class extends Controller {
     }
   }
 
+  async mergeSelectedComments() {
+    if (this.selection.size < 2) return
+    const confirmText = this.element.dataset.mergeConfirmText || 'Merge the selected messages into one?'
+    if (!confirm(confirmText)) return
+
+    const commentIds = Array.from(this.selection)
+    try {
+      const response = await fetch(`/creatives/${this.creativeId}/comments/merge`, {
+        method: 'POST',
+        headers: {
+          'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ comment_ids: commentIds }),
+      })
+      if (response.ok || response.status === 202) {
+        this.clearSelection()
+        // Job is async — the merged comment will update via broadcast
+      } else {
+        const data = await response.json().catch(() => ({}))
+        alert(data.error || 'Failed to merge comments')
+      }
+    } catch (error) {
+      console.error('Error merging comments:', error)
+      alert('Failed to merge comments')
+    }
+  }
+
   openTopicSearchPopup(event) {
     if (this.selection.size === 0) return
 

data/app/javascript/controllers/comments/popup_controller.js

@@ -2,6 +2,7 @@ import { Controller } from '@hotwired/stimulus'
 
 const SIZE_STORAGE_KEY = 'commentsPopupSize'
 const CREATIVE_CLICK_EVENT = 'creative-comments-click'
+const CREATIVE_DESTROYED_EVENT = 'creative-destroyed'
 
 export default class extends Controller {
   static targets = [
@@ -24,6 +25,7 @@ export default class extends Controller {
     this.openFromUrlObserver = null
     this.openFromUrlTimeout = null
     this.handleCreativeClick = this.handleCreativeClick.bind(this)
+    this.handleCreativeDestroyed = this.handleCreativeDestroyed.bind(this)
     this.handleTouchStart = this.handleTouchStart.bind(this)
     this.handleTouchEnd = this.handleTouchEnd.bind(this)
     this.handleResizeMove = this.handleResizeMove.bind(this)
@@ -37,6 +39,7 @@ export default class extends Controller {
     this.handlePopupWheel = this.handlePopupWheel.bind(this)
 
     document.addEventListener(CREATIVE_CLICK_EVENT, this.handleCreativeClick)
+    document.addEventListener(CREATIVE_DESTROYED_EVENT, this.handleCreativeDestroyed)
     this.element.addEventListener('wheel', this.handlePopupWheel, { passive: false })
     window.addEventListener('online', this.handleOnline)
     window.addEventListener('focus', this.handleWindowFocus)
@@ -92,6 +95,7 @@ export default class extends Controller {
   disconnect() {
     this.clearPendingOpenFromUrl()
     document.removeEventListener(CREATIVE_CLICK_EVENT, this.handleCreativeClick)
+    document.removeEventListener(CREATIVE_DESTROYED_EVENT, this.handleCreativeDestroyed)
     this.element.removeEventListener('wheel', this.handlePopupWheel)
     window.removeEventListener('online', this.handleOnline)
     window.removeEventListener('focus', this.handleWindowFocus)
@@ -147,6 +151,14 @@ export default class extends Controller {
     this.open(button, { creativeId })
   }
 
+  handleCreativeDestroyed(event) {
+    const destroyedIds = event.detail?.creativeIds || []
+    if (this.element.style.display !== 'flex') return
+    if (destroyedIds.includes(this.element.dataset.creativeId)) {
+      this.close()
+    }
+  }
+
   async open(button, { creativeId, highlightId } = {}) {
     this.currentButton = button
     const resolvedCreativeId = creativeId || button?.dataset.creativeId
@@ -157,6 +169,8 @@ export default class extends Controller {
     this.element.dataset.canComment = canComment ? 'true' : 'false'
     this.titleTarget.textContent = snippet
 
+    this._markChatActiveRow(resolvedCreativeId)
+
     this.prepareSize()
 
     this.showPopup()
@@ -184,6 +198,8 @@ export default class extends Controller {
     this.element.dataset.canComment = canComment ? 'true' : 'false'
     this.titleTarget.textContent = snippet
 
+    this._markChatActiveRow(resolvedCreativeId)
+
     this.showPopup()
 
     await this.notifyChildControllers({ creativeId: resolvedCreativeId, canComment })
@@ -268,6 +284,8 @@ export default class extends Controller {
       }
     }))
 
+    this._clearChatActiveRow()
+
     this.element.style.display = 'none'
     this.element.classList.remove('open')
     this.element.style.width = ''
@@ -313,14 +331,27 @@ export default class extends Controller {
   updatePosition() {
     if (this.isFullscreen() || !this.currentButton || this.isMobile() || this.element.dataset.resized === 'true') return
     const rect = this.currentButton.getBoundingClientRect()
+    const popupWidth = this.element.offsetWidth
+    const popupHeight = this.element.offsetHeight
+    const gap = 8
+
     let top = rect.bottom + 4
-    const bottom = top + this.element.offsetHeight
+    const bottom = top + popupHeight
     if (bottom > window.innerHeight) {
-      top = Math.max(4, window.innerHeight - this.element.offsetHeight - 4)
+      top = Math.max(4, window.innerHeight - popupHeight - 4)
     }
     this.element.style.top = `${top}px`
-    this.element.style.right = `${window.innerWidth - rect.right + 24}px`
-    this.element.style.left = ''
+
+    // If there's enough space to the right of the button, align popup to the right
+    // so the creative list on the left remains visible
+    const spaceRight = window.innerWidth - rect.right - gap
+    if (spaceRight >= popupWidth) {
+      this.element.style.left = `${rect.right + gap}px`
+      this.element.style.right = ''
+    } else {
+      this.element.style.right = `${window.innerWidth - rect.right + 24}px`
+      this.element.style.left = ''
+    }
   }
 
   startResize(event, direction) {
@@ -440,6 +471,38 @@ export default class extends Controller {
   handlePopupWheel(event) {
     if (this.isFullscreen()) return // fullscreen already blocks body scroll via CSS
 
+    // Don't interfere with scroll inside overlays (e.g., share modal)
+    if (event.target.closest('#share-creative-modal')) return
+
+    // Allow scroll inside any independently scrollable child element.
+    // Walk up from the event target to find any element (other than the main
+    // comments list, which is handled below) that can scroll on its own.
+    const { element: scrollableChild, axis } = this._findScrollableAncestor(event.target, event)
+    if (scrollableChild) {
+      if (axis === 'x') {
+        // Horizontal scroll — check left/right boundaries
+        const { scrollLeft, scrollWidth, clientWidth } = scrollableChild
+        const isScrollingRight = event.deltaX > 0
+        const atLeft = scrollLeft <= 0
+        const atRight = scrollLeft + clientWidth >= scrollWidth - 1
+
+        if ((isScrollingRight && atRight) || (!isScrollingRight && atLeft)) {
+          event.preventDefault()
+        }
+      } else {
+        // Vertical scroll — check top/bottom boundaries
+        const { scrollTop, scrollHeight, clientHeight } = scrollableChild
+        const isScrollingDown = event.deltaY > 0
+        const atTop = scrollTop <= 0
+        const atBottom = scrollTop + clientHeight >= scrollHeight - 1
+
+        if ((isScrollingDown && atBottom) || (!isScrollingDown && atTop)) {
+          event.preventDefault()
+        }
+      }
+      return
+    }
+
     if (!this.hasListTarget) {
       event.preventDefault()
       return
@@ -622,7 +685,7 @@ export default class extends Controller {
       if (targetButton) {
         this.currentButton = targetButton
         const btnRect = targetButton.getBoundingClientRect()
-        const rightPx = window.innerWidth - btnRect.right + 24
+        const gap = 8
 
         animWidth = parseFloat(finalWidth) || 420
         animHeight = parseFloat(finalHeight) || 640
@@ -635,10 +698,20 @@ export default class extends Controller {
         }
 
         finalTop = `${top}px`
-        finalRight = `${rightPx}px`
 
-        animTop = top
-        animLeft = window.innerWidth - rightPx - animWidth
+        // Right-align if enough space to the right of the button
+        const spaceRight = window.innerWidth - btnRect.right - gap
+        if (spaceRight >= animWidth) {
+          this._exitToRight = true
+          animLeft = btnRect.right + gap
+          animTop = top
+        } else {
+          this._exitToRight = false
+          const rightPx = window.innerWidth - btnRect.right + 24
+          finalRight = `${rightPx}px`
+          animTop = top
+          animLeft = window.innerWidth - rightPx - animWidth
+        }
       } else if (savedStyles && Object.values(savedStyles).some(v => v)) {
         // Fallback to saved styles (already viewport-relative since popup is fixed)
         const rightVal = parseFloat(savedStyles.right) || 32
@@ -692,10 +765,15 @@ export default class extends Controller {
 
         if (targetButton) {
           el.style.top = finalTop
-          el.style.right = finalRight
-          el.style.left = ''
           el.style.width = finalWidth
           el.style.height = finalHeight
+          if (this._exitToRight) {
+            el.style.left = `${animLeft}px`
+            el.style.right = ''
+          } else {
+            el.style.right = finalRight
+            el.style.left = ''
+          }
         } else if (savedStyles) {
           el.style.top = ''
           el.style.left = ''
@@ -855,4 +933,59 @@ export default class extends Controller {
       this.openFromUrlTimeout = null
     }
   }
+
+  _markChatActiveRow(creativeId) {
+    this._clearChatActiveRow()
+    if (!creativeId) return
+    const row = document.querySelector(`creative-tree-row[creative-id="${creativeId}"]`)
+    if (row) row.classList.add('chat-active')
+  }
+
+  _clearChatActiveRow() {
+    document.querySelectorAll('creative-tree-row.chat-active').forEach(el => {
+      el.classList.remove('chat-active')
+    })
+  }
+
+  // Walk up from the target element to find the nearest scrollable ancestor
+  // that is NOT the main comments list (which has its own scroll handling).
+  // Detects both vertical and horizontal scrollable elements.
+  // Returns { element, axis } or { element: null, axis: null }.
+  _findScrollableAncestor(target, event) {
+    let el = target
+    const listEl = this.hasListTarget ? this.listTarget : null
+    const dominantAxis = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? 'x' : 'y'
+
+    while (el && el !== this.element) {
+      // Skip the main comments list — it's handled separately
+      if (el === listEl) return { element: null, axis: null }
+
+      // Cheap size checks first to avoid expensive getComputedStyle calls
+      const hasOverflowY = el.scrollHeight > el.clientHeight
+      const hasOverflowX = el.scrollWidth > el.clientWidth
+
+      if (hasOverflowY || hasOverflowX) {
+        const style = getComputedStyle(el)
+
+        // Check dominant axis first for better matching
+        if (dominantAxis === 'x' && hasOverflowX) {
+          const scrollableX = style.overflowX === 'auto' || style.overflowX === 'scroll'
+          if (scrollableX) return { element: el, axis: 'x' }
+        }
+
+        if (hasOverflowY) {
+          const scrollableY = style.overflowY === 'auto' || style.overflowY === 'scroll'
+          if (scrollableY) return { element: el, axis: 'y' }
+        }
+
+        if (dominantAxis !== 'x' && hasOverflowX) {
+          const scrollableX = style.overflowX === 'auto' || style.overflowX === 'scroll'
+          if (scrollableX) return { element: el, axis: 'x' }
+        }
+      }
+
+      el = el.parentElement
+    }
+    return { element: null, axis: null }
+  }
 }

data/app/javascript/controllers/comments/presence_controller.js

@@ -204,6 +204,28 @@ export default class extends Controller {
       if (user.email) img.dataset.email = user.email
       img.dataset.userId = user.id
       img.dataset.userName = user.name
+
+      // AI agents are draggable to topic tabs
+      if (user.ai_user) {
+        wrapper.draggable = true
+        wrapper.classList.add('ai-agent-draggable')
+        wrapper.dataset.agentId = user.id
+        wrapper.dataset.agentName = user.name
+        wrapper.dataset.agentAvatarUrl = user.avatar_url
+        wrapper.addEventListener('dragstart', (e) => {
+          e.dataTransfer.setData('application/x-agent-drop', JSON.stringify({
+            id: user.id,
+            name: user.name,
+            avatar_url: user.avatar_url
+          }))
+          e.dataTransfer.effectAllowed = 'copy'
+          wrapper.classList.add('dragging')
+        })
+        wrapper.addEventListener('dragend', () => {
+          wrapper.classList.remove('dragging')
+        })
+      }
+
       wrapper.appendChild(img)
 
       if (user.default_avatar) {

data/app/javascript/controllers/comments/topics_controller.js

@@ -114,10 +114,13 @@ export default class extends Controller {
             // Ensure comparison handles string/number difference
             const isActive = String(this.currentTopicId) === String(topic.id) ? 'active' : ''
             const draggable = canManage ? 'draggable="true"' : ''
+            const agentAvatar = topic.primary_agent?.avatar_url
+                ? `<img src="${this.escapeAttr(topic.primary_agent.avatar_url)}" class="topic-agent-avatar" alt="${this.escapeAttr(topic.primary_agent.name)}" title="${this.escapeAttr(topic.primary_agent.name)}">`
+                : ''
             html += `<span class="topic-tag topic-drop-target ${isActive}" ${draggable}
                           data-action="click->comments--topics#select ${dropActions} ${dragActions} ${topicDropActions}" 
                           data-id="${topic.id}">
-                        #${topic.name}`
+                        ${agentAvatar}#${topic.name}`
 
             if (canManage) {
                 html += `<button class="archive-topic-btn" data-action="click->comments--topics#archiveTopic" data-id="${topic.id}" title="Archive">${ICON_ARCHIVE}</button>`
@@ -144,7 +147,8 @@ export default class extends Controller {
 
         // Add create button container (write permission is sufficient for topic creation)
         if (canCreateTopic) {
-            html += `<span class="topic-creation-container" data-comments--topics-target="creationContainer">
+            html += `<span class="topic-creation-container" data-comments--topics-target="creationContainer"
+                          data-action="dragover->comments--topics#handleAddButtonDragOver dragleave->comments--topics#handleDragLeave drop->comments--topics#handleAddButtonDrop">
                   <button class="add-topic-btn" data-action="click->comments--topics#showInput">+</button>
                  </span>`
         }
@@ -153,11 +157,13 @@ export default class extends Controller {
     }
 
     handleDragOver(event) {
-        // Only accept comment drops
-        if (!event.dataTransfer.types.includes('application/x-comment-ids')) return
+        // Accept comment drops or agent drops
+        const isComment = event.dataTransfer.types.includes('application/x-comment-ids')
+        const isAgent = event.dataTransfer.types.includes('application/x-agent-drop')
+        if (!isComment && !isAgent) return
 
         event.preventDefault()
-        event.dataTransfer.dropEffect = 'move'
+        event.dataTransfer.dropEffect = isAgent ? 'copy' : 'move'
         event.currentTarget.classList.add('drag-over')
     }
 
@@ -169,6 +175,18 @@ export default class extends Controller {
         event.preventDefault()
         event.currentTarget.classList.remove('drag-over')
 
+        // Handle agent drop
+        const agentJson = event.dataTransfer.getData('application/x-agent-drop')
+        if (agentJson) {
+            const agent = JSON.parse(agentJson)
+            const targetTopicId = event.currentTarget.dataset.id
+            if (targetTopicId) {
+                await this.setTopicPrimaryAgent(targetTopicId, agent)
+            }
+            return
+        }
+
+        // Handle comment drop
         const commentIdsJson = event.dataTransfer.getData('application/x-comment-ids')
         if (!commentIdsJson) return
 
@@ -710,7 +728,14 @@ export default class extends Controller {
 
         this.topics = [...topics, data.topic]
         this.renderTopics(this.topics, this.canManageTopics, this.canCreateTopic)
-        this.restoreSelection()
+
+        // Auto-select the new topic if created by the current user
+        const currentUserId = document.body.dataset.currentUserId
+        if (data.user_id && currentUserId && String(data.user_id) === String(currentUserId)) {
+            this.selectTopic(String(data.topic.id))
+        } else {
+            this.restoreSelection()
+        }
     }
 
     reorderTopicsFromServer(topicIds) {
@@ -760,4 +785,78 @@ export default class extends Controller {
         this.renderTopics(this.topics, this.canManageTopics, this.canCreateTopic)
         this.restoreSelection()
     }
+
+    handleAddButtonDragOver(event) {
+        if (!event.dataTransfer.types.includes('application/x-agent-drop')) return
+        event.preventDefault()
+        event.dataTransfer.dropEffect = 'copy'
+        event.currentTarget.classList.add('drag-over')
+    }
+
+    async handleAddButtonDrop(event) {
+        event.preventDefault()
+        event.currentTarget.classList.remove('drag-over')
+
+        const agentJson = event.dataTransfer.getData('application/x-agent-drop')
+        if (!agentJson) return
+
+        const agent = JSON.parse(agentJson)
+        await this.createTopicWithAgent(agent)
+    }
+
+    async setTopicPrimaryAgent(topicId, agent) {
+        if (!this.creativeId) return
+
+        try {
+            const response = await fetch(`/creatives/${this.creativeId}/topics/${topicId}/set_primary_agent`, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+                },
+                body: JSON.stringify({ agent_id: agent.id })
+            })
+
+            if (!response.ok) {
+                const data = await response.json()
+                console.error('Failed to set primary agent:', data.error)
+            }
+            // Topic update comes via WebSocket broadcast
+        } catch (e) {
+            console.error('Error setting primary agent', e)
+        }
+    }
+
+    async createTopicWithAgent(agent) {
+        if (!this.creativeId) return
+
+        const topicName = `Talk to ${agent.name}`
+
+        try {
+            const response = await fetch(`/creatives/${this.creativeId}/topics`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+                },
+                body: JSON.stringify({ topic: { name: topicName }, agent_id: agent.id })
+            })
+
+            if (response.ok) {
+                const topic = await response.json()
+                this.currentTopicId = topic.id
+                await this.loadTopics()
+                this.dispatch("change", { detail: { topicId: topic.id } })
+            } else {
+                console.error('Failed to create topic with agent')
+            }
+        } catch (e) {
+            console.error('Error creating topic with agent', e)
+        }
+    }
+
+    escapeAttr(str) {
+        if (!str) return ''
+        return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    }
 }

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

@@ -100,6 +100,7 @@ export default class extends Controller {
     const childrenDiv = this.childrenContainerFor(row)
     this.ensureLoaded(row, childrenDiv).then((hasChildren) => {
       if (!hasChildren || !childrenDiv) {
+        row.hasChildren = false
         this.collapseRow(row, { persist: false })
         return
       }
@@ -177,6 +178,13 @@ export default class extends Controller {
 
   syncInitialState(row) {
     const childrenDiv = this.childrenContainerFor(row)
+
+    // If the row claims it has children but no children container exists,
+    // correct the hasChildren flag so the chevron is hidden.
+    if (row.hasChildren && !childrenDiv) {
+      row.hasChildren = false
+    }
+
     const shouldExpand =
       this.allExpanded ||
       row.expanded ||

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

@@ -97,6 +97,10 @@ export default class extends Controller {
       )
     )
 
+    document.dispatchEvent(new CustomEvent('creative-destroyed', {
+      detail: { creativeIds: ids.map(String) }
+    }))
+
     ids.forEach((id) => {
       const tree = document.getElementById(`creative-${id}`)
       if (tree) tree.remove()

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

@@ -30,13 +30,13 @@ import { initIndicator, showLinkHover, hideLinkHover } from './indicator';
 const childZoneRatio = 0.3;
 const coordPrecision = 5;
 
-const TRANSFER_MIME_TYPE = 'application/x-plan42-creative';
-const DRAG_TOKEN_STORAGE_KEY = 'plan42.dragToken';
-const DROP_SIGNAL_STORAGE_KEY = 'plan42.dragDropSignal';
-const WINDOW_ID_SESSION_KEY = 'plan42.dragWindowId';
+const TRANSFER_MIME_TYPE = 'application/x-collavre-creative';
+const DRAG_TOKEN_STORAGE_KEY = 'collavre.dragToken';
+const DROP_SIGNAL_STORAGE_KEY = 'collavre.dragDropSignal';
+const WINDOW_ID_SESSION_KEY = 'collavre.dragWindowId';
 const INVALID_DROP_MESSAGE =
   'We could not verify that drop. Please refresh the page and try again.';
-const DROP_COMPLETED_EVENT = 'plan42:creative-drop-complete';
+const DROP_COMPLETED_EVENT = 'collavre:creative-drop-complete';
 
 let cachedDragToken;
 let cachedWindowId;

data/app/javascript/modules/creative_row_editor.js

@@ -1510,6 +1510,19 @@ export function initializeCreativeRowEditor() {
       }
 
       creativesApi.destroy(id, withChildren).then(() => {
+        const destroyedIds = [String(id)];
+        if (withChildren) {
+          const childrenContainer = document.getElementById("creative-children-" + id);
+          if (childrenContainer) {
+            childrenContainer.querySelectorAll('creative-tree-row').forEach(row => {
+              const cid = row.getAttribute('creative-id');
+              if (cid) destroyedIds.push(cid);
+            });
+          }
+        }
+        document.dispatchEvent(new CustomEvent('creative-destroyed', {
+          detail: { creativeIds: destroyedIds }
+        }));
         const parentTree = parentId ? document.getElementById(`creative-${parentId}`) : null;
         const childrenTree = document.getElementById("creative-children-" + id)
         if (!withChildren && childrenTree && parentTree) {