collavre 0.1.1 → 0.2.0

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

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 import { copyTextToClipboard } from '../../utils/clipboard'
 import { renderMarkdownInContainer } from '../../lib/utils/markdown'
+import creativesApi from '../../lib/api/creatives'
+import { renderCreativeTree, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
 
 export default class extends Controller {
   static targets = ['list']
@@ -44,6 +46,14 @@ export default class extends Controller {
 
     this.handleTopicChange = this.handleTopicChange.bind(this)
     this.element.addEventListener('comments--topics:change', this.handleTopicChange)
+
+    // Drag and drop handlers for moving comments to topics
+    this.handleDragStart = this.handleDragStart.bind(this)
+    this.handleDragEnd = this.handleDragEnd.bind(this)
+    this.handleMoveToTopic = this.handleMoveToTopic.bind(this)
+    this.listTarget.addEventListener('dragstart', this.handleDragStart)
+    this.listTarget.addEventListener('dragend', this.handleDragEnd)
+    this.element.addEventListener('comments--topics:move-to-topic', this.handleMoveToTopic)
   }
 
   handleTopicChange(event) {
@@ -56,12 +66,15 @@ export default class extends Controller {
     this.listTarget.removeEventListener('change', this.handleChange)
     this.listTarget.removeEventListener('click', this.handleClick)
     this.listTarget.removeEventListener('submit', this.handleSubmit)
+    this.listTarget.removeEventListener('dragstart', this.handleDragStart)
+    this.listTarget.removeEventListener('dragend', this.handleDragEnd)
     document.removeEventListener('turbo:before-stream-render', this.handleStreamRender)
     if (this.listObserver) {
       this.listObserver.disconnect()
       this.listObserver = null
     }
     this.element.removeEventListener('comments--topics:change', this.handleTopicChange)
+    this.element.removeEventListener('comments--topics:move-to-topic', this.handleMoveToTopic)
   }
 
   isColumnReverse() {
@@ -459,12 +472,154 @@ export default class extends Controller {
     const item = checkbox.closest('.comment-item')
     if (checkbox.checked) {
       this.selection.add(commentId)
-      if (item) item.classList.add('selected-for-move')
+      if (item) {
+        item.classList.add('selected-for-move')
+        item.setAttribute('draggable', 'true')
+      }
     } else {
       this.selection.delete(commentId)
-      if (item) item.classList.remove('selected-for-move')
+      if (item) {
+        item.classList.remove('selected-for-move')
+        // Only remove draggable if no other items selected
+        if (this.selection.size === 0) {
+          item.removeAttribute('draggable')
+        }
+      }
     }
+    this.updateDraggableState()
     this.notifySelectionChange()
+    this.updateSelectionHint()
+  }
+
+  updateSelectionHint() {
+    // Remove existing hint
+    const existingHint = document.querySelector('.selection-hint-popup')
+    if (existingHint) {
+      existingHint.remove()
+    }
+
+    if (this.selection.size === 0) return
+
+    // Find the first selected checkbox
+    const firstSelected = this.listTarget.querySelector('.comment-item.selected-for-move')
+    if (!firstSelected) return
+
+    const checkbox = firstSelected.querySelector('.comment-select-checkbox')
+    if (!checkbox) return
+
+    // Create hint popup
+    const hint = document.createElement('div')
+    hint.className = 'selection-hint-popup'
+    const dragTopicText = this.element.dataset.hintDragTopicText || '🎯 Drag → Move to topic'
+    const moveButtonText = this.element.dataset.hintMoveButtonText || '📤 Move button → Another chat'
+    hint.innerHTML = `
+      <div class="hint-content">
+        <span>${dragTopicText}</span>
+        <span>${moveButtonText}</span>
+      </div>
+    `
+
+    // Append to body for proper positioning
+    document.body.appendChild(hint)
+
+    // Position like CommonPopup - to the right of checkbox, within viewport
+    requestAnimationFrame(() => {
+      const checkboxRect = checkbox.getBoundingClientRect()
+      const hintRect = hint.getBoundingClientRect()
+      const boundsPadding = 8
+
+      // Start to the right of the checkbox, vertically centered
+      let left = checkboxRect.right + 8
+      let top = checkboxRect.top + (checkboxRect.height / 2) - (hintRect.height / 2)
+
+      // Keep within viewport bounds
+      const maxLeft = window.innerWidth - hintRect.width - boundsPadding
+      const maxTop = window.innerHeight - hintRect.height - boundsPadding
+
+      // If overflows right, position to the left of checkbox instead
+      if (left > maxLeft) {
+        left = checkboxRect.left - hintRect.width - 8
+      }
+      
+      left = Math.max(boundsPadding, Math.min(left, maxLeft))
+      top = Math.max(boundsPadding, Math.min(top, maxTop))
+
+      hint.style.left = `${left}px`
+      hint.style.top = `${top}px`
+    })
+  }
+
+  updateDraggableState() {
+    const hasSelection = this.selection.size > 0
+    this.listTarget.querySelectorAll('.comment-item').forEach((item) => {
+      const checkbox = item.querySelector('.comment-select-checkbox')
+      if (checkbox?.checked) {
+        item.setAttribute('draggable', 'true')
+      } else {
+        item.removeAttribute('draggable')
+      }
+    })
+  }
+
+  handleDragStart(event) {
+    const item = event.target.closest('.comment-item')
+    if (!item || this.selection.size === 0) {
+      event.preventDefault()
+      return
+    }
+
+    // Include all selected comment IDs
+    const commentIds = Array.from(this.selection)
+    event.dataTransfer.setData('application/x-comment-ids', JSON.stringify(commentIds))
+    event.dataTransfer.effectAllowed = 'move'
+
+    // Add visual feedback
+    this.listTarget.classList.add('dragging-comments')
+    
+    // Create custom drag image showing count
+    if (commentIds.length > 1) {
+      const dragImage = document.createElement('div')
+      dragImage.className = 'comment-drag-image'
+      dragImage.textContent = `${commentIds.length} messages`
+      document.body.appendChild(dragImage)
+      event.dataTransfer.setDragImage(dragImage, 0, 0)
+      setTimeout(() => dragImage.remove(), 0)
+    }
+  }
+
+  handleDragEnd(event) {
+    this.listTarget.classList.remove('dragging-comments')
+  }
+
+  async handleMoveToTopic(event) {
+    const { commentIds, targetTopicId } = event.detail
+    if (!commentIds || commentIds.length === 0 || !this.creativeId) return
+
+    try {
+      const response = await fetch(`/creatives/${this.creativeId}/comments/move`, {
+        method: 'POST',
+        headers: {
+          'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content,
+          'Content-Type': 'application/json',
+          Accept: 'application/json'
+        },
+        body: JSON.stringify({ 
+          comment_ids: commentIds, 
+          target_topic_id: targetTopicId 
+        })
+      })
+
+      if (response.ok) {
+        this.clearSelection()
+        this.loadInitialComments()
+      } else {
+        const data = await response.json()
+        alert(data.error || 'Failed to move comments')
+      }
+    } catch (error) {
+      console.error('Error moving comments to topic:', error)
+      alert('Failed to move comments')
+    }
   }
 
   notifySelectionChange() {
@@ -480,6 +635,9 @@ export default class extends Controller {
       if (item) item.classList.remove('selected-for-move')
     })
     this.notifySelectionChange()
+    // Remove hint popup from body
+    const hint = document.querySelector('.selection-hint-popup')
+    if (hint) hint.remove()
   }
 
   copyCommentLink(button) {
@@ -562,10 +720,35 @@ export default class extends Controller {
         // Conversion usually converts to creative, so maybe reload or redirect?
         // Original code reloaded initial comments. Safe to do:
         this.loadInitialComments()
+        this.reloadCreativeChildren()
       }
     })
   }
 
+  reloadCreativeChildren() {
+    if (!this.creativeId) return Promise.resolve()
+    const container = document.getElementById(`creative-children-${this.creativeId}`)
+    const loadUrl = container?.dataset?.loadUrl
+    if (!container || !loadUrl) {
+      this.reloadCreativeTree()
+      return Promise.resolve()
+    }
+
+    return creativesApi.loadChildren(loadUrl).then((data) => {
+      const nodes = Array.isArray(data?.creatives) ? data.creatives : []
+      renderCreativeTree(container, nodes, { replace: false })
+      container.dataset.loaded = 'true'
+      dispatchCreativeTreeUpdated(container)
+    })
+  }
+
+  reloadCreativeTree() {
+    const treeElement = document.getElementById('creatives')
+    if (!treeElement) return
+    const controller = this.application.getControllerForElementAndIdentifier(treeElement, 'creatives--tree')
+    controller?.load?.()
+  }
+
   approveComment(button) {
     // ... (Existing logic) ...
     if (button.disabled) return

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

@@ -11,6 +11,7 @@ export default class extends Controller {
     'closeButton',
     'leftHandle',
     'rightHandle',
+    'fullscreenLink',
   ]
 
   connect() {
@@ -36,23 +37,36 @@ export default class extends Controller {
     window.addEventListener('focus', this.handleWindowFocus)
     document.addEventListener('visibilitychange', this.handleVisibilityChange)
 
-    this.closeButtonTarget?.addEventListener('click', () => this.close())
-    this.leftHandleTarget?.addEventListener('mousedown', (event) => this.startResize(event, 'left'))
-    this.rightHandleTarget?.addEventListener('mousedown', (event) => this.startResize(event, 'right'))
+    if (this.hasCloseButtonTarget) {
+      this.closeButtonTarget.addEventListener('click', () => this.close())
+    }
+    if (this.hasLeftHandleTarget) {
+      this.leftHandleTarget.addEventListener('mousedown', (event) => this.startResize(event, 'left'))
+    }
+    if (this.hasRightHandleTarget) {
+      this.rightHandleTarget.addEventListener('mousedown', (event) => this.startResize(event, 'right'))
+    }
 
     if (this.isMobile()) {
       // Handle touch events directly on the close button to resolve issues on mobile where layout shifts (e.g., keyboard dismissal) cause click events to be lost or delayed.
       this.element.addEventListener('touchstart', this.handleTouchStart)
       this.element.addEventListener('touchend', this.handleTouchEnd)
-      this.closeButtonTarget?.addEventListener('touchstart', this.handleCloseButtonTouchStart, { passive: false })
-      this.closeButtonTarget?.addEventListener('touchend', this.handleCloseButtonTouchEnd)
+      if (this.hasCloseButtonTarget) {
+        this.closeButtonTarget.addEventListener('touchstart', this.handleCloseButtonTouchStart, { passive: false })
+        this.closeButtonTarget.addEventListener('touchend', this.handleCloseButtonTouchEnd)
+      }
     }
 
     document.querySelectorAll('form[action="/session"]').forEach((form) => {
       form.addEventListener('submit', () => window.localStorage.removeItem(SIZE_STORAGE_KEY))
     })
 
-    this.openFromUrl()
+    if (this.isFullscreen()) {
+      // Defer to ensure all sibling controllers are connected
+      requestAnimationFrame(() => this.openForCreative())
+    } else {
+      this.openFromUrl()
+    }
   }
 
   disconnect() {
@@ -66,8 +80,10 @@ export default class extends Controller {
     if (this.isMobile()) {
       this.element.removeEventListener('touchstart', this.handleTouchStart)
       this.element.removeEventListener('touchend', this.handleTouchEnd)
-      this.closeButtonTarget?.removeEventListener('touchstart', this.handleCloseButtonTouchStart)
-      this.closeButtonTarget?.removeEventListener('touchend', this.handleCloseButtonTouchEnd)
+      if (this.hasCloseButtonTarget) {
+        this.closeButtonTarget.removeEventListener('touchstart', this.handleCloseButtonTouchStart)
+        this.closeButtonTarget.removeEventListener('touchend', this.handleCloseButtonTouchEnd)
+      }
     }
   }
 
@@ -115,29 +131,70 @@ export default class extends Controller {
     this.element.dataset.canComment = canComment ? 'true' : 'false'
     this.titleTarget.textContent = snippet
 
+    this.updateFullscreenLink(resolvedCreativeId)
+
     this.prepareSize()
 
     this.showPopup()
     this.updatePosition()
     document.body.classList.add('no-scroll')
 
+    await this.notifyChildControllers({ creativeId: resolvedCreativeId, canComment, highlightId })
+
+    // Dispatch event for integrations (e.g., Slack badge)
+    this.element.dispatchEvent(new CustomEvent('comments-popup:opened', {
+      bubbles: true,
+      detail: {
+        creativeId: resolvedCreativeId,
+        badgeContainer: this.element.querySelector('[data-integration-badges]')
+      }
+    }))
+  }
+
+  async openForCreative() {
+    const resolvedCreativeId = this.element.dataset.creativeId
+    const canComment = this.element.dataset.canComment === 'true'
+    const snippet = this.element.dataset.creativeSnippet || ''
+
+    this.currentButton = null
+    this.element.dataset.creativeId = resolvedCreativeId || ''
+    this.element.dataset.canComment = canComment ? 'true' : 'false'
+    this.titleTarget.textContent = snippet
+
+    this.updateFullscreenLink(resolvedCreativeId)
+
+    this.showPopup()
+
+    await this.notifyChildControllers({ creativeId: resolvedCreativeId, canComment })
+
+    // Dispatch event for integrations (e.g., Slack badge)
+    this.element.dispatchEvent(new CustomEvent('comments-popup:opened', {
+      bubbles: true,
+      detail: {
+        creativeId: resolvedCreativeId,
+        badgeContainer: this.element.querySelector('[data-integration-badges]')
+      }
+    }))
+  }
+
+  async notifyChildControllers({ creativeId, canComment, highlightId }) {
     // Load topics first to establish context
     if (this.topicsController) {
-      await this.topicsController.onPopupOpened({ creativeId: resolvedCreativeId })
+      await this.topicsController.onPopupOpened({ creativeId })
     }
 
     if (this.formController) {
-      this.formController.onPopupOpened({ creativeId: resolvedCreativeId, canComment })
+      this.formController.onPopupOpened({ creativeId, canComment })
     }
     if (this.listController) {
       const topicId = this.topicsController ? this.topicsController.currentTopicId : undefined
-      this.listController.onPopupOpened({ creativeId: resolvedCreativeId, highlightId, topicId })
+      this.listController.onPopupOpened({ creativeId, highlightId, topicId })
     }
     if (this.presenceController) {
-      this.presenceController.onPopupOpened({ creativeId: resolvedCreativeId })
+      this.presenceController.onPopupOpened({ creativeId })
     }
     if (this.mentionMenuController) {
-      this.mentionMenuController.onPopupOpened({ creativeId: resolvedCreativeId })
+      this.mentionMenuController.onPopupOpened({ creativeId })
     }
   }
 
@@ -158,6 +215,14 @@ export default class extends Controller {
       this.topicsController.onPopupClosed()
     }
 
+    // Dispatch event for integrations
+    this.element.dispatchEvent(new CustomEvent('comments-popup:closed', {
+      bubbles: true,
+      detail: {
+        badgeContainer: this.element.querySelector('[data-integration-badges]')
+      }
+    }))
+
     this.element.style.display = 'none'
     this.element.classList.remove('open')
     this.element.style.width = ''
@@ -187,20 +252,22 @@ export default class extends Controller {
 
 
   showPopup() {
+    this.element.style.display = 'flex'
     if (this.isMobile()) {
-      this.element.style.display = 'flex'
       this.element.classList.add('open')
-    } else {
-      this.element.style.display = 'flex'
     }
   }
 
+  isFullscreen() {
+    return this.element.dataset.fullscreen === 'true'
+  }
+
   isMobile() {
     return window.innerWidth <= 600
   }
 
   updatePosition() {
-    if (!this.currentButton || this.isMobile() || this.element.dataset.resized === 'true') return
+    if (this.isFullscreen() || !this.currentButton || this.isMobile() || this.element.dataset.resized === 'true') return
     const rect = this.currentButton.getBoundingClientRect()
     const scrollY = window.scrollY || window.pageYOffset
     let top = rect.bottom + scrollY + 4
@@ -321,8 +388,16 @@ export default class extends Controller {
     }
   }
 
+  updateFullscreenLink(creativeId) {
+    if (!this.hasFullscreenLinkTarget || !creativeId) return
+    const template = this.element.dataset.fullscreenUrlTemplate
+    if (!template) return
+    this.fullscreenLinkTarget.href = template.replace('__CREATIVE_ID__', creativeId)
+  }
+
   openFromUrl() {
     const params = new URLSearchParams(window.location.search)
+    const openComments = params.get('open_comments') === 'true'
     let commentId = params.get('comment_id')
     if (!commentId) {
       const pathCommentMatch = window.location.pathname.match(/\/creatives\/\d+\/comments\/(\d+)/)
@@ -345,13 +420,14 @@ export default class extends Controller {
       }
     }
 
-    if (!commentId || !creativeId) return
+    // Need either open_comments flag or comment_id, plus creativeId
+    if ((!commentId && !openComments) || !creativeId) return
     const selector = `[name="show-comments-btn"][data-creative-id="${creativeId}"]`
     const tryOpenWithButton = () => {
       const button = document.querySelector(selector)
       if (!button) return false
       this.clearPendingOpenFromUrl()
-      this.open(button, { highlightId: commentId })
+      this.open(button, { highlightId: commentId || undefined })
       return true
     }
 
@@ -381,5 +457,4 @@ export default class extends Controller {
       this.openFromUrlTimeout = null
     }
   }
-
 }

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

@@ -91,7 +91,8 @@ export default class extends Controller {
     fetch(`/creatives/${this.creativeId}/comments/participants`)
       .then((response) => response.json())
       .then((data) => {
-        this.participantsData = data
+        this.participantsData = data.users
+        this.canShare = data.can_share
         this.renderParticipants(this.currentPresentIds)
         this.renderTypingIndicator()
       })
@@ -149,6 +150,15 @@ export default class extends Controller {
       }
       this.renderTypingIndicator()
     }
+    if (data.agent_status) {
+      const { id, name, status } = data.agent_status
+      if (status === 'thinking' || status === 'streaming') {
+        this.typingUsers[id] = name
+      } else {
+        delete this.typingUsers[id]
+      }
+      this.renderTypingIndicator()
+    }
   }
 
   renderParticipants(presentIds) {
@@ -190,9 +200,28 @@ export default class extends Controller {
       this.participantsTarget.appendChild(wrapper)
     })
 
+    if (this.canShare) {
+      const addBtn = document.createElement('button')
+      addBtn.className = 'add-participant-btn'
+      addBtn.textContent = '+'
+      addBtn.title = this.element.dataset.addParticipantText || 'Add user'
+      addBtn.addEventListener('click', () => this.openShareModal())
+      this.participantsTarget.appendChild(addBtn)
+    }
+
     this.updateReadReceiptPresence(presentIds)
   }
 
+  openShareModal() {
+    const modal = document.getElementById('share-creative-modal')
+    if (modal) {
+      modal.style.display = 'flex'
+      document.body.classList.add('no-scroll')
+    } else if (this.creativeId) {
+      window.location.href = `/creatives/${this.creativeId}?open_comments=true&open_share=true`
+    }
+  }
+
   renderTypingIndicator() {
     if (!this.hasTypingIndicatorTarget) return
     this.typingIndicatorTarget.innerHTML = ''