collavre 0.5.0 → 0.7.0

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

@@ -3,6 +3,8 @@ import { copyTextToClipboard } from '../../utils/clipboard'
 import { renderMarkdownInContainer } from '../../lib/utils/markdown'
 import creativesApi from '../../lib/api/creatives'
 import { renderCreativeTree, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
+import { updateCsrfTokenFromResponse } from '../../lib/api/csrf_fetch'
+// CommonPopup is now used via TopicSearchController (Stimulus)
 
 export default class extends Controller {
   static targets = ['list']
@@ -138,6 +140,7 @@ export default class extends Controller {
 
   loadInitialComments() {
     if (!this.creativeId) return
+    if (this.selection.size > 0) return
 
     const params = {}
     if (this.highlightAfterLoad) {
@@ -170,6 +173,7 @@ export default class extends Controller {
       this.initialLoadComplete = true
       this.formController?.focusTextarea()
       this.markCommentsRead()
+
     })
   }
 
@@ -239,6 +243,10 @@ export default class extends Controller {
       urlParams.set('topic_id', this.currentTopicId)
     }
     return fetch(`/creatives/${this.creativeId}/comments?${urlParams.toString()}`).then((response) => {
+      // Keep the CSRF meta tag in sync with the session cookie.
+      // This is critical after the browser returns from a background/frozen state.
+      updateCsrfTokenFromResponse(response)
+
       const serverTopicId = response.headers.get("X-Topic-Id")
       if (serverTopicId !== null && serverTopicId !== undefined) {
         // Server says we are in this topic. 
@@ -382,11 +390,6 @@ export default class extends Controller {
       this.closeActionEditor(this.getActionContainer(target.closest('.cancel-comment-action-edit-btn')))
       return
     }
-    if (target.classList.contains('delete-comment-btn')) {
-      event.preventDefault()
-      this.deleteComment(target)
-      return
-    }
     if (target.classList.contains('convert-comment-btn')) {
       event.preventDefault()
       this.convertComment(target)
@@ -488,64 +491,129 @@ export default class extends Controller {
     }
     this.updateDraggableState()
     this.notifySelectionChange()
-    this.updateSelectionHint()
+    this.updateSelectionActionBar()
   }
 
-  updateSelectionHint() {
-    // Remove existing hint
-    const existingHint = document.querySelector('.selection-hint-popup')
-    if (existingHint) {
-      existingHint.remove()
-    }
+  updateSelectionActionBar() {
+    // Remove existing bar
+    const existing = document.querySelector('.selection-action-bar')
+    if (existing) existing.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>
+    const count = this.selection.size
+    const i18n = (key, fallback) => this.element.dataset[key] || fallback
+
+    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>
+        <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-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>
+      </div>
+      <div class="selection-action-bar-hint no-touch">
+        💡 ${i18n('selectionDragHintText', 'Drag & drop to move to topic')}
       </div>
     `
 
-    // Append to body for proper positioning
-    document.body.appendChild(hint)
+    bar.querySelector('.selection-action-delete').addEventListener('click', (e) => { e.stopPropagation(); this.deleteSelectedComments() })
+    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())
 
-    // Position like CommonPopup - to the right of checkbox, within viewport
-    requestAnimationFrame(() => {
-      const checkboxRect = checkbox.getBoundingClientRect()
-      const hintRect = hint.getBoundingClientRect()
-      const boundsPadding = 8
+    // Insert before typing indicator so it stays inside the popup window
+    const typingIndicator = this.element.querySelector('#typing-indicator')
+    if (typingIndicator) {
+      typingIndicator.parentNode.insertBefore(bar, typingIndicator)
+    } else {
+      this.element.appendChild(bar)
+    }
+  }
+
+  async deleteSelectedComments() {
+    if (this.selection.size === 0) return
+    const confirmText = this.element.dataset.batchDeleteConfirmText || 'Are you sure you want to delete the selected messages?'
+    if (!confirm(confirmText)) return
+
+    const commentIds = Array.from(this.selection)
+    try {
+      const response = await fetch(`/creatives/${this.creativeId}/comments/batch_destroy`, {
+        method: 'DELETE',
+        headers: {
+          'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ comment_ids: commentIds }),
+      })
+      if (response.ok) {
+        commentIds.forEach((id) => {
+          const el = document.getElementById(`comment_${id}`)
+          if (el) el.remove()
+        })
+        this.clearSelection()
+      } else {
+        const data = await response.json().catch(() => ({}))
+        alert(data.error || 'Failed to delete comments')
+      }
+    } catch (error) {
+      console.error('Error deleting comments:', error)
+      alert('Failed to delete comments')
+    }
+  }
+
+  openTopicSearchPopup(event) {
+    if (this.selection.size === 0) return
 
-      // Start to the right of the checkbox, vertically centered
-      let left = checkboxRect.right + 8
-      let top = checkboxRect.top + (checkboxRect.height / 2) - (hintRect.height / 2)
+    const openWithController = (controller, btnRect) => {
+      controller.openForCreative(
+        this.creativeId,
+        btnRect,
+        (topic) => {
+          const commentIds = Array.from(this.selection)
+          this.handleMoveToTopic({ detail: { commentIds, targetTopicId: topic.id } })
+        },
+        this.element.dataset.topicMainText || 'Main'
+      )
+    }
 
-      // Keep within viewport bounds
-      const maxLeft = window.innerWidth - hintRect.width - boundsPadding
-      const maxTop = window.innerHeight - hintRect.height - boundsPadding
+    const btnRect = event.currentTarget.getBoundingClientRect()
+    let modal = document.getElementById('topic-search-modal')
 
-      // If overflows right, position to the left of checkbox instead
-      if (left > maxLeft) {
-        left = checkboxRect.left - hintRect.width - 8
+    if (modal) {
+      // Modal already exists — controller should be connected
+      const controller = this.application.getControllerForElementAndIdentifier(modal, 'topic-search')
+      if (controller) {
+        openWithController(controller, btnRect)
       }
-      
-      left = Math.max(boundsPadding, Math.min(left, maxLeft))
-      top = Math.max(boundsPadding, Math.min(top, maxTop))
+      return
+    }
+
+    // First time: create modal and wait for Stimulus to connect
+    modal = document.createElement('div')
+    modal.id = 'topic-search-modal'
+    modal.className = 'common-popup'
+    modal.style.display = 'none'
+    modal.dataset.controller = 'topic-search'
+    modal.innerHTML = `
+      <button type="button" class="popup-close-btn" data-topic-search-target="close">&times;</button>
+      <input type="text" class="shared-input-surface" style="width:100%;margin-bottom:0.5em;"
+        placeholder="${this.element.dataset.topicSearchPlaceholderText || 'Search topics...'}"
+        data-topic-search-target="input">
+      <ul class="common-popup-list" data-popup-list data-topic-search-target="list"></ul>
+    `
+    document.body.appendChild(modal)
 
-      hint.style.left = `${left}px`
-      hint.style.top = `${top}px`
+    // Wait for Stimulus to connect the controller, then open
+    requestAnimationFrame(() => {
+      const controller = this.application.getControllerForElementAndIdentifier(modal, 'topic-search')
+      if (controller) {
+        openWithController(controller, btnRect)
+      } else {
+        console.error('topic-search controller not found after creation')
+      }
     })
   }
 
@@ -635,9 +703,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()
+    // Remove action bar
+    const bar = document.querySelector('.selection-action-bar')
+    if (bar) bar.remove()
   }
 
   copyCommentLink(button) {
@@ -798,7 +866,7 @@ export default class extends Controller {
   }
 
   // Move Modal Logic
-  openMoveModal() {
+  openMoveModal(event) {
     if (this.movingComments) return
     if (this.selection.size === 0) {
       alert(this.element.dataset.moveNoSelectionText || "No Selection")
@@ -806,16 +874,37 @@ export default class extends Controller {
     }
     this.movingComments = true
     this.notifySelectionChange()
-    // ... assumed modal controller logic ...
+
+    // Reuse the existing link-creative-modal and its controller
     const modal = document.getElementById('link-creative-modal')
+    if (!modal) {
+      console.error('link-creative-modal not found')
+      this.movingComments = false
+      this.notifySelectionChange()
+      return
+    }
+
     const controller = this.application.getControllerForElementAndIdentifier(modal, 'link-creative')
-    if (controller) {
-      controller.open(this.element.getBoundingClientRect(),
-        (item) => { this.moveSelectedComments(item.id) },
-        () => { this.movingComments = false; this.notifySelectionChange() })
-    } else {
-      this.movingComments = false; this.notifySelectionChange()
+    if (!controller) {
+      console.error('link-creative controller not found')
+      this.movingComments = false
+      this.notifySelectionChange()
+      return
     }
+
+    const btnRect = event.currentTarget.getBoundingClientRect()
+    controller.open(
+      btnRect,
+      (item) => {
+        // onSelect — move comments to selected creative
+        this.moveSelectedComments(item.id)
+      },
+      () => {
+        // onClose
+        this.movingComments = false
+        this.notifySelectionChange()
+      }
+    )
   }
 
   moveSelectedComments(targetId) {
@@ -827,10 +916,10 @@ export default class extends Controller {
       body: JSON.stringify({ comment_ids: commentIds, target_creative_id: targetId })
     }).then(r => r.ok ? r.json() : Promise.reject())
       .then(() => {
-        this.selection.clear()
+        this.clearSelection()
         this.loadInitialComments()
       })
-      .finally(() => { this.movingComments = false; this.notifySelectionChange() })
+      .finally(() => { this.movingComments = false })
   }
 
   // UI Helpers

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

@@ -34,8 +34,10 @@ export default class extends Controller {
     this.handleWindowFocus = this.handleWindowFocus.bind(this)
     this.handleVisibilityChange = this.handleVisibilityChange.bind(this)
     this.handlePopState = this.handlePopState.bind(this)
+    this.handlePopupWheel = this.handlePopupWheel.bind(this)
 
     document.addEventListener(CREATIVE_CLICK_EVENT, this.handleCreativeClick)
+    this.element.addEventListener('wheel', this.handlePopupWheel, { passive: false })
     window.addEventListener('online', this.handleOnline)
     window.addEventListener('focus', this.handleWindowFocus)
     document.addEventListener('visibilitychange', this.handleVisibilityChange)
@@ -90,6 +92,7 @@ export default class extends Controller {
   disconnect() {
     this.clearPendingOpenFromUrl()
     document.removeEventListener(CREATIVE_CLICK_EVENT, this.handleCreativeClick)
+    this.element.removeEventListener('wheel', this.handlePopupWheel)
     window.removeEventListener('online', this.handleOnline)
     window.removeEventListener('focus', this.handleWindowFocus)
     document.removeEventListener('visibilitychange', this.handleVisibilityChange)
@@ -126,6 +129,10 @@ export default class extends Controller {
     return this.application.getControllerForElementAndIdentifier(this.element, 'comments--topics')
   }
 
+  get contextsController() {
+    return this.application.getControllerForElementAndIdentifier(this.element, 'comments--contexts')
+  }
+
   handleCreativeClick(event) {
     const button = event.detail?.button
     const creativeId = event.detail?.creativeId
@@ -154,7 +161,6 @@ export default class extends Controller {
 
     this.showPopup()
     this.updatePosition()
-    document.body.classList.add('no-scroll')
 
     await this.notifyChildControllers({ creativeId: resolvedCreativeId, canComment, highlightId })
 
@@ -211,6 +217,9 @@ export default class extends Controller {
     if (this.mentionMenuController) {
       this.mentionMenuController.onPopupOpened({ creativeId })
     }
+    if (this.contextsController) {
+      this.contextsController.onPopupOpened({ creativeId })
+    }
   }
 
   close() {
@@ -229,6 +238,9 @@ export default class extends Controller {
     if (this.topicsController) {
       this.topicsController.onPopupClosed()
     }
+    if (this.contextsController) {
+      this.contextsController.onPopupClosed()
+    }
 
     // Dispatch event for integrations
     this.element.dispatchEvent(new CustomEvent('comments-popup:closed', {
@@ -247,7 +259,6 @@ export default class extends Controller {
     this.element.style.top = ''
     this.element.style.bottom = ''
     delete this.element.dataset.resized
-    document.body.classList.remove('no-scroll')
   }
 
   prepareSize() {
@@ -284,12 +295,10 @@ 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 scrollY = window.scrollY || window.pageYOffset
-    let top = rect.bottom + scrollY + 4
+    let top = rect.bottom + 4
     const bottom = top + this.element.offsetHeight
-    const viewportBottom = scrollY + window.innerHeight
-    if (bottom > viewportBottom) {
-      top = Math.max(scrollY + 4, viewportBottom - this.element.offsetHeight - 4)
+    if (bottom > window.innerHeight) {
+      top = Math.max(4, window.innerHeight - this.element.offsetHeight - 4)
     }
     this.element.style.top = `${top}px`
     this.element.style.right = `${window.innerWidth - rect.right + 24}px`
@@ -303,8 +312,8 @@ export default class extends Controller {
     this.resizeStartY = event.clientY
     this.startWidth = rect.width
     this.startHeight = rect.height
-    this.startLeft = rect.left + window.scrollX
-    this.startTop = rect.top + window.scrollY
+    this.startLeft = rect.left
+    this.startTop = rect.top
     this.startBottom = this.startTop + this.startHeight
     // this.reservedHeight = this.computeReservedHeight()
     this.element.style.left = `${this.startLeft}px`
@@ -403,6 +412,32 @@ export default class extends Controller {
     }
   }
 
+  // Prevent wheel events on the popup from scrolling the background creative list
+  handlePopupWheel(event) {
+    if (this.isFullscreen()) return // fullscreen already blocks body scroll via CSS
+
+    if (!this.hasListTarget) {
+      event.preventDefault()
+      return
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = this.listTarget
+    const isScrollingDown = event.deltaY > 0
+    const atTop = scrollTop <= 0
+    const atBottom = scrollTop + clientHeight >= scrollHeight - 1
+
+    // If the scrollable area has no overflow, or we're at the boundary, block propagation
+    if (scrollHeight <= clientHeight) {
+      event.preventDefault()
+      return
+    }
+
+    // At boundaries, prevent the event from reaching the background
+    if ((isScrollingDown && atBottom) || (!isScrollingDown && atTop)) {
+      event.preventDefault()
+    }
+  }
+
   // Enter fullscreen immediately without animation (for auto-fullscreen on page load)
   _enterFullscreenImmediate() {
     const el = this.element
@@ -535,17 +570,13 @@ export default class extends Controller {
       }
 
       // Desktop: animated exit to target position
-      // Calculate target position using the same logic as updatePosition()
-      // so cleanup can apply it directly without calling updatePosition() (which would cause a snap)
-      const scrollY = window.scrollY || window.pageYOffset
-
-      // Final absolute-position values (what updatePosition would set)
-      let finalTop = ''      // px string with scrollY included
+      // Calculate target position using viewport-relative coords (popup is position: fixed)
+      let finalTop = ''      // px string (viewport-relative)
       let finalRight = ''    // px string
       let finalWidth = savedStyles?.width || ''
       let finalHeight = savedStyles?.height || ''
 
-      // Fixed-position animation targets (viewport-relative)
+      // Animation targets (viewport-relative, same as final since popup is fixed)
       let animTop, animLeft, animWidth, animHeight
 
       // Try to find the comment button for precise positioning
@@ -555,6 +586,15 @@ export default class extends Controller {
         targetButton = row?.querySelector('.comments-btn')
       }
 
+      // Scroll the creative row into view instantly BEFORE calculating positions,
+      // so getBoundingClientRect returns viewport-visible coordinates
+      if (targetButton) {
+        const row = targetButton.closest('creative-tree-row')
+        if (row) {
+          row.scrollIntoView({ behavior: 'instant', block: 'center' })
+        }
+      }
+
       if (targetButton) {
         this.currentButton = targetButton
         const btnRect = targetButton.getBoundingClientRect()
@@ -563,28 +603,25 @@ export default class extends Controller {
         animWidth = parseFloat(finalWidth) || 420
         animHeight = parseFloat(finalHeight) || 640
 
-        // Calculate top in absolute coords (with scrollY) — same as updatePosition
-        let absTop = btnRect.bottom + scrollY + 4
-        const absBottom = absTop + animHeight
-        const viewportBottom = scrollY + window.innerHeight
-        if (absBottom > viewportBottom) {
-          absTop = Math.max(scrollY + 4, viewportBottom - animHeight - 4)
+        // Calculate top in viewport coords — same as updatePosition
+        let top = btnRect.bottom + 4
+        const bottom = top + animHeight
+        if (bottom > window.innerHeight) {
+          top = Math.max(4, window.innerHeight - animHeight - 4)
         }
 
-        // Store final absolute-position values for cleanup
-        finalTop = `${absTop}px`
+        finalTop = `${top}px`
         finalRight = `${rightPx}px`
 
-        // Convert to fixed coordinates for animation
-        animTop = absTop - scrollY
+        animTop = top
         animLeft = window.innerWidth - rightPx - animWidth
       } else if (savedStyles && Object.values(savedStyles).some(v => v)) {
-        // Fallback to saved styles
+        // Fallback to saved styles (already viewport-relative since popup is fixed)
         const rightVal = parseFloat(savedStyles.right) || 32
         animWidth = parseFloat(savedStyles.width) || 420
         animHeight = parseFloat(savedStyles.height) || 640
         animLeft = savedStyles.left ? parseFloat(savedStyles.left) : (window.innerWidth - rightVal - animWidth)
-        animTop = parseFloat(savedStyles.top) ? (parseFloat(savedStyles.top) - scrollY) : 100
+        animTop = parseFloat(savedStyles.top) || 100
 
         finalTop = savedStyles.top || ''
         finalRight = savedStyles.right || ''
@@ -624,14 +661,12 @@ export default class extends Controller {
 
       const cleanup = () => {
         el.removeEventListener('transitionend', cleanup)
-        // Switch from fixed back to default (absolute) positioning
-        // Apply the pre-calculated absolute coords directly — no updatePosition() needed
+        // Popup is always position: fixed — just apply final coords
         el.style.transition = 'none'
         el.style.position = ''
         el.style.bottom = ''
 
         if (targetButton) {
-          // Set absolute coords matching updatePosition output
           el.style.top = finalTop
           el.style.right = finalRight
           el.style.left = ''
@@ -671,13 +706,6 @@ export default class extends Controller {
       }
       this._previousUrl = null
 
-      // Scroll the selected creative row into view after exiting fullscreen
-      if (creativeId) {
-        requestAnimationFrame(() => {
-          const row = document.querySelector(`creative-tree-row[creative-id="${creativeId}"]`)
-          row?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-        })
-      }
     }
 
     // Scroll to bottom after layout change

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

@@ -222,22 +222,14 @@ export default class extends Controller {
       addBtn.className = 'add-participant-btn'
       addBtn.textContent = '+'
       addBtn.title = this.element.dataset.addParticipantText || 'Add user'
-      addBtn.addEventListener('click', () => this.openShareModal())
+      addBtn.dataset.action = 'click->share-modal#open'
+      addBtn.dataset.shareModalUrlParam = `/creatives/${this.creativeId}/creative_shares`
       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