collavre 0.5.0 → 0.7.0

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

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 import { renderMarkdownInContainer } from '../../lib/utils/markdown'
 import { wrapHtmlInCodeBlocks } from '../../lib/html_code_block_wrapper'
+import { refreshCsrfToken } from '../../lib/api/csrf_fetch'
+import ReviewQuotesStore from './review_quotes_store'
 
 export default class extends Controller {
   static targets = [
@@ -9,7 +11,6 @@ export default class extends Controller {
     'submit',
     'privateCheckbox',
     'cancel',
-    'moveButton',
     'searchButton',
     'voiceButton',
     'imageInput',
@@ -19,12 +20,14 @@ export default class extends Controller {
     'quotedText',
     'quoteIndicator',
     'quoteIndicatorText',
+    'reviewQuotesContainer',
   ]
 
   connect() {
     this.creativeId = null
     this.editingId = null
     this.sending = false
+    this._reviewStore = new ReviewQuotesStore()
     this.cachedImageFiles = null
 
     this.handleSubmit = this.handleSubmit.bind(this)
@@ -33,7 +36,6 @@ export default class extends Controller {
     this.handlePointerSend = this.handlePointerSend.bind(this)
     this.handleTouchSend = this.handleTouchSend.bind(this)
     this.handleCancel = this.handleCancel.bind(this)
-    this.handleMoveClick = this.handleMoveClick.bind(this)
     this.handleSearch = this.handleSearch.bind(this)
     this.handleVoiceToggle = this.handleVoiceToggle.bind(this)
     this.handleRecognitionStart = this.handleRecognitionStart.bind(this)
@@ -50,7 +52,6 @@ export default class extends Controller {
     this.submitTarget.addEventListener('pointerup', this.handlePointerSend)
     this.submitTarget.addEventListener('touchend', this.handleTouchSend, { passive: false })
     this.cancelTarget?.addEventListener('click', this.handleCancel)
-    this.moveButtonTarget?.addEventListener('click', this.handleMoveClick)
     this.searchButtonTarget?.addEventListener('click', this.handleSearch)
     this.voiceButtonTarget?.addEventListener('click', this.handleVoiceToggle)
 
@@ -66,6 +67,15 @@ export default class extends Controller {
     this.listening = false
     this.recognitionActive = false
 
+    // Auto-resize textarea
+    this._autoResize = () => {
+      const textarea = this.textareaTarget
+      textarea.style.height = 'auto'
+      const maxHeight = parseInt(getComputedStyle(textarea).lineHeight, 10) * 10 || 200
+      textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`
+    }
+    this.textareaTarget.addEventListener('input', this._autoResize)
+
     this.textareaTarget.addEventListener('keydown', (event) => {
       if (event.key === 'Enter' && !event.shiftKey) {
         if (this.isMentionMenuVisible()) return
@@ -96,12 +106,12 @@ export default class extends Controller {
     this.submitTarget.removeEventListener('pointerup', this.handlePointerSend)
     this.submitTarget.removeEventListener('touchend', this.handleTouchSend)
     this.cancelTarget?.removeEventListener('click', this.handleCancel)
-    this.moveButtonTarget?.removeEventListener('click', this.handleMoveClick)
     this.searchButtonTarget?.removeEventListener('click', this.handleSearch)
     this.voiceButtonTarget?.removeEventListener('click', this.handleVoiceToggle)
     this.teardownSpeechRecognition()
     this.imageButtonTarget?.removeEventListener('click', this.handleImageButtonClick)
     this.imageInputTarget?.removeEventListener('change', this.handleImageChange)
+    this.textareaTarget.removeEventListener('input', this._autoResize)
     this.textareaTarget.removeEventListener('dragover', this.handleDragOver)
     this.textareaTarget.removeEventListener('drop', this.handleDrop)
     this.textareaTarget.removeEventListener('paste', this.handlePaste)
@@ -132,8 +142,7 @@ export default class extends Controller {
   }
 
   onSelectionChanged({ size, moving }) {
-    if (!this.moveButtonTarget) return
-    this.moveButtonTarget.disabled = moving || size === 0
+    // Selection state now managed by list_controller action bar
   }
 
   focusTextarea() {
@@ -159,10 +168,14 @@ export default class extends Controller {
     this.editingId = null
     this.submitTarget.innerHTML = this.defaultSubmitHTML
     this.submitTarget.disabled = false
+    this.submitTarget.classList.remove('review-submit-btn')
     if (this.cancelTarget) this.cancelTarget.style.display = 'none'
     this.presenceController?.clearManualTypingMessage()
     this.clearImageAttachments()
     this.cancelQuote()
+    this.textareaTarget.placeholder = ''
+    // Reset textarea height after clearing content
+    this.textareaTarget.style.height = 'auto'
   }
 
   setSendingState(isSending) {
@@ -184,19 +197,45 @@ export default class extends Controller {
 
   handleSend(event) {
     event.preventDefault()
+
+    // If active quote exists, handle based on type
+    const store = this._reviewStore
+    if (store.hasActive && !store.isEmpty) {
+      const activeQuote = store.activeQuote
+      if (activeQuote && activeQuote.type === 'question') {
+        store.saveActiveFeedback(this.textareaTarget.value)
+        this._sendQuestionQuote(activeQuote)
+        return
+      }
+      this._commitActiveQuote()
+      return
+    }
+
     const hasText = this.textareaTarget.value.trim().length > 0
+    const hasQuotes = !store.isEmpty
     const hasImages = this.currentImageFiles().length > 0
-    if (this.sending || (!hasText && !hasImages) || !this.creativeId) return
+    if (this.sending || (!hasText && !hasQuotes && !hasImages) || !this.creativeId) return
     this.sending = true
     this.setSendingState(true)
     this.presenceController?.stoppedTyping()
 
+    // Build final content from review quotes + user text
+    if (hasQuotes) {
+      store.backup(this.textareaTarget.value)
+      this.textareaTarget.value = store.buildContent(this.textareaTarget.value)
+      this._pendingReviewType = 'review'
+    }
+
     const wasPrivate = this.privateCheckboxTarget?.checked ?? false
 
     const formData = new FormData(this.formTarget)
     if (this.currentTopicId) {
       formData.append('comment[topic_id]', this.currentTopicId)
     }
+    if (this._pendingReviewType) {
+      formData.append('comment[review_type]', this._pendingReviewType)
+      this._pendingReviewType = null
+    }
 
     let url = `/creatives/${this.creativeId}/comments`
     let method = 'POST'
@@ -205,13 +244,26 @@ export default class extends Controller {
       method = 'PATCH'
     }
 
-    fetch(url, {
+    const doFetch = () => fetch(url, {
       method,
       headers: { 'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content },
       body: formData,
     })
+
+    doFetch()
       .then((response) => {
         if (response.ok) return response.text()
+        // On 422, the CSRF token may have gone stale (e.g. after an OS
+        // window switch).  Refresh the token and retry once before giving up.
+        if (response.status === 422 && !this._hasRetried) {
+          this._hasRetried = true
+          return refreshCsrfToken().then(() => doFetch()).then((retryResp) => {
+            if (retryResp.ok) return retryResp.text()
+            return retryResp.json().then((json) => {
+              throw new Error(json.errors?.join(', ') || 'Unable to save comment')
+            })
+          })
+        }
         return response.json().then((json) => {
           throw new Error(json.errors?.join(', ') || 'Unable to save comment')
         })
@@ -257,9 +309,17 @@ export default class extends Controller {
         }
       })
       .catch((error) => {
+        // Restore review quotes state on failure so user doesn't lose work
+        if (this._reviewStore.hasBackup()) {
+          const restoredText = this._reviewStore.restore()
+          this.textareaTarget.value = restoredText || ''
+          this._renderReviewQuoteChips()
+          this._updateSubmitButton()
+        }
         alert(error?.message || 'Failed to submit comment')
       })
       .finally(() => {
+        this._hasRetried = false
         this.setSendingState(false)
       })
   }
@@ -280,11 +340,6 @@ export default class extends Controller {
     this.resetForm()
   }
 
-  handleMoveClick(event) {
-    event.preventDefault()
-    this.listController?.openMoveModal()
-  }
-
   handleSearch(event) {
     event.preventDefault()
     const query = this.textareaTarget.value.trim()
@@ -544,11 +599,247 @@ export default class extends Controller {
     this.focusTextarea()
   }
 
+  // Append a review quote as a visual chip above the textarea.
+  appendReviewQuote(commentId, selectedText) {
+    if (!selectedText) return
+
+    const store = this._reviewStore
+    store.saveActiveFeedback(this.textareaTarget.value)
+
+    if (commentId) {
+      this.quotedCommentIdTarget.value = commentId
+    }
+
+    store.add(commentId, selectedText)
+    this._renderReviewQuoteChips()
+    this._updateSubmitButton()
+
+    this.textareaTarget.value = ''
+    this.textareaTarget.placeholder = this._getI18nText('reviewFeedbackPlaceholder', 'Write feedback for this quote...')
+    this.focusTextarea()
+  }
+
+  _commitActiveQuote() {
+    const store = this._reviewStore
+    store.commitActive(this.textareaTarget.value)
+    this.textareaTarget.value = ''
+    this.textareaTarget.placeholder = this._getI18nText('reviewSummaryPlaceholder', 'Overall comment (optional)...')
+    this._renderReviewQuoteChips()
+    this._updateSubmitButton()
+    this.focusTextarea()
+  }
+
+  // Send a single question quote immediately as a standalone comment.
+  _sendQuestionQuote(quote) {
+    if (this.sending || !this.creativeId) return
+
+    const store = this._reviewStore
+    const content = store.buildQuestionContent(quote)
+
+    store.remove(quote.id)
+    this.textareaTarget.value = ''
+
+    if (store.isEmpty) {
+      this.textareaTarget.placeholder = ''
+    } else if (!store.hasActive) {
+      this.textareaTarget.placeholder = this._getI18nText('reviewSummaryPlaceholder', 'Overall comment (optional)...')
+    }
+    this._renderReviewQuoteChips()
+    this._updateSubmitButton()
+
+    // Send as a question comment with quoted_comment_id preserved + review_type=question
+    this.sending = true
+    const formData = new FormData()
+    formData.append('comment[content]', content)
+    formData.append('comment[review_type]', 'question')
+    if (quote.commentId) {
+      formData.append('comment[quoted_comment_id]', quote.commentId)
+    }
+    const isPrivate = this.privateCheckboxTarget?.checked ?? false
+    if (isPrivate) formData.append('comment[private]', '1')
+    if (this.currentTopicId) {
+      formData.append('comment[topic_id]', this.currentTopicId)
+    }
+
+    const url = `/creatives/${this.creativeId}/comments`
+    const doFetch = () => fetch(url, {
+      method: 'POST',
+      headers: { 'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content },
+      body: formData,
+    })
+
+    doFetch()
+      .then((response) => {
+        if (response.ok) return response.text()
+        if (response.status === 422 && !this._hasRetried) {
+          this._hasRetried = true
+          return refreshCsrfToken().then(() => doFetch()).then((retryResp) => {
+            if (retryResp.ok) return retryResp.text()
+            return retryResp.json().then((json) => {
+              throw new Error(json.errors?.join(', ') || 'Unable to save comment')
+            })
+          })
+        }
+        return response.json().then((json) => {
+          throw new Error(json.errors?.join(', ') || 'Unable to save comment')
+        })
+      })
+      .then((html) => {
+        this.renderCommentHtml(html)
+        const listCtrl = this.application.getControllerForElementAndIdentifier(
+          document.querySelector('[data-controller~="comments--list"]'), 'comments--list'
+        )
+        if (listCtrl) {
+          listCtrl.scrollToBottom()
+          listCtrl.updateStickiness()
+          listCtrl.markCommentsRead()
+        }
+      })
+      .catch((error) => {
+        alert(error?.message || 'Failed to send question')
+      })
+      .finally(() => {
+        this._hasRetried = false
+        this.sending = false
+      })
+
+    this.focusTextarea()
+  }
+
+  _renderReviewQuoteChips() {
+    const container = this.reviewQuotesContainerTarget
+    const store = this._reviewStore
+    container.innerHTML = ''
+
+    if (store.isEmpty) {
+      container.style.display = 'none'
+      return
+    }
+
+    container.style.display = ''
+    store.quotes.forEach((quote) => {
+      const chip = document.createElement('div')
+      chip.className = 'review-quote-chip'
+      if (quote.id === store.activeId) {
+        chip.classList.add('review-quote-chip--active')
+      }
+
+      // Type toggle (review / question)
+      const typeToggle = document.createElement('button')
+      typeToggle.type = 'button'
+      typeToggle.className = `review-quote-type-toggle review-quote-type-toggle--${quote.type}`
+      typeToggle.textContent = quote.type === 'question'
+        ? this._getI18nText('reviewTypeQuestion', '❓')
+        : this._getI18nText('reviewTypeReview', '💬')
+      typeToggle.title = quote.type === 'question'
+        ? this._getI18nText('reviewTypeQuestionLabel', 'Question')
+        : this._getI18nText('reviewTypeReviewLabel', 'Review')
+      typeToggle.addEventListener('click', (e) => {
+        e.stopPropagation()
+        store.toggleType(quote.id)
+        this._renderReviewQuoteChips()
+        this._updateSubmitButton()
+      })
+
+      // Quote text
+      const textSpan = document.createElement('span')
+      textSpan.className = 'review-quote-chip-text'
+      const preview = quote.text.length > 60
+        ? quote.text.substring(0, 60) + '…'
+        : quote.text
+      textSpan.textContent = preview
+      textSpan.title = quote.text
+
+      // Click chip to edit its feedback
+      textSpan.addEventListener('click', () => {
+        if (quote.id === store.activeId) {
+          const commentEl = document.querySelector(`[data-comment-id="${quote.commentId}"]`)
+          if (commentEl) {
+            commentEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
+            commentEl.classList.add('comment-highlight')
+            setTimeout(() => commentEl.classList.remove('comment-highlight'), 2000)
+          }
+          return
+        }
+        store.saveActiveFeedback(this.textareaTarget.value)
+        store.activate(quote.id)
+        this.textareaTarget.value = quote.feedback || ''
+        this.textareaTarget.placeholder = this._getI18nText('reviewFeedbackPlaceholder', 'Write feedback for this quote...')
+        this._renderReviewQuoteChips()
+        this._updateSubmitButton()
+        this.focusTextarea()
+      })
+
+      // Feedback preview (shown when not active and has feedback)
+      const feedbackSpan = document.createElement('span')
+      feedbackSpan.className = 'review-quote-chip-feedback'
+      if (quote.feedback && quote.id !== store.activeId) {
+        const fbPreview = quote.feedback.length > 40
+          ? quote.feedback.substring(0, 40) + '…'
+          : quote.feedback
+        feedbackSpan.textContent = `→ ${fbPreview}`
+      }
+
+      // Remove button
+      const removeBtn = document.createElement('button')
+      removeBtn.type = 'button'
+      removeBtn.className = 'review-quote-chip-remove'
+      removeBtn.innerHTML = '×'
+      removeBtn.title = 'Remove'
+      removeBtn.addEventListener('click', (e) => {
+        e.stopPropagation()
+        const wasActive = quote.id === store.activeId
+        store.remove(quote.id)
+        if (wasActive) this.textareaTarget.value = ''
+        if (store.isEmpty) {
+          this.textareaTarget.placeholder = ''
+        } else if (!store.hasActive) {
+          this.textareaTarget.placeholder = this._getI18nText('reviewSummaryPlaceholder', 'Overall comment (optional)...')
+        }
+        this._renderReviewQuoteChips()
+        this._updateSubmitButton()
+      })
+
+      chip.appendChild(typeToggle)
+      chip.appendChild(textSpan)
+      if (quote.feedback && quote.id !== store.activeId) {
+        chip.appendChild(feedbackSpan)
+      }
+      chip.appendChild(removeBtn)
+      container.appendChild(chip)
+    })
+  }
+
+  _updateSubmitButton() {
+    const state = this._reviewStore.buttonState
+    if (state === 'normal') {
+      this.submitTarget.innerHTML = this.defaultSubmitHTML
+      this.submitTarget.classList.remove('review-submit-btn')
+      return
+    }
+
+    this.submitTarget.classList.add('review-submit-btn')
+    const labels = {
+      'add': this._getI18nText('reviewAddQuote', '+ Add'),
+      'send-review': this._getI18nText('reviewSend', 'Send review'),
+      'send-question': this._getI18nText('reviewSendQuestion', 'Send question'),
+    }
+    this.submitTarget.textContent = labels[state]
+  }
+
+  _getI18nText(key, fallback) {
+    return this.element.dataset[key] || fallback
+  }
+
   cancelQuote() {
     this.quotedCommentIdTarget.value = ''
     this.quotedTextTarget.value = ''
     this.quoteIndicatorTarget.style.display = 'none'
     this.quoteIndicatorTextTarget.textContent = ''
+    this._reviewStore.clear()
+    this._renderReviewQuoteChips()
+    this._updateSubmitButton()
+    this.textareaTarget.placeholder = ''
   }
 
   renderCommentHtml(html, { replaceExisting = false } = {}) {