collavre 0.5.0 → 0.7.0

data/app/javascript/controllers/comment_version_controller.js

@@ -0,0 +1,164 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["prevBtn", "nextBtn", "indicator", "deleteBtn", "selectBtn"]
+  static values = {
+    commentId: Number,
+    creativeId: Number,
+    total: Number,
+    contentTarget: String,
+    versionsUrl: String,
+    selectedVersionId: Number,
+    initialIndex: Number
+  }
+
+  connect() {
+    this.versions = null
+    this.currentIndex = this.initialIndexValue || this.totalValue
+    this.updateButtons()
+  }
+
+  async fetchVersions() {
+    if (this.versions) return this.versions
+
+    const response = await fetch(
+      this.versionsUrlValue,
+      { headers: { "Accept": "application/json" } }
+    )
+    const data = await response.json()
+    this.versions = data.versions
+    this.selectedVersionId = data.selected_version_id
+    this.totalValue = data.total
+
+    // Set currentIndex based on selected version
+    if (this.selectedVersionId) {
+      const idx = this.versions.findIndex(v => v.id === this.selectedVersionId)
+      if (idx !== -1) this.currentIndex = idx + 1
+    } else {
+      this.currentIndex = this.totalValue
+    }
+
+    return this.versions
+  }
+
+  async prev() {
+    if (this.currentIndex <= 1) return
+    await this.fetchVersions()
+    this.currentIndex--
+    this.render()
+  }
+
+  async next() {
+    if (this.currentIndex >= this.totalValue) return
+    await this.fetchVersions()
+    this.currentIndex++
+    this.render()
+  }
+
+  async selectVersion() {
+    const versions = await this.fetchVersions()
+    const version = versions[this.currentIndex - 1]
+    if (!version || version.id === this.selectedVersionId) return
+
+    const response = await fetch(
+      `${this.versionsUrlValue}/${version.id}/select`,
+      { method: "POST", headers: { "X-CSRF-Token": this.csrfToken } }
+    )
+
+    if (response.ok) {
+      this.selectedVersionId = version.id
+      this.render()
+    }
+  }
+
+  async deleteVersion() {
+    const versions = await this.fetchVersions()
+    const version = versions[this.currentIndex - 1]
+    if (!version) return
+
+    // Can't delete if it's the only version
+    if (versions.length <= 1) return
+
+    if (!confirm(this.deleteBtnTarget.dataset.confirmMessage || "Are you sure?")) return
+
+    const response = await fetch(
+      `${this.versionsUrlValue}/${version.id}`,
+      { method: "DELETE", headers: { "X-CSRF-Token": this.csrfToken } }
+    )
+
+    if (response.ok) {
+      const data = await response.json()
+      versions.splice(this.currentIndex - 1, 1)
+      this.totalValue = data.total
+      this.selectedVersionId = data.selected_version_id
+
+      if (this.currentIndex > this.totalValue) {
+        this.currentIndex = this.totalValue
+      }
+
+      // Jump to newly selected version if changed
+      if (data.selected_version_id) {
+        const idx = versions.findIndex(v => v.id === data.selected_version_id)
+        if (idx !== -1) this.currentIndex = idx + 1
+      }
+
+      this.render()
+
+      if (versions.length <= 1) {
+        // Only one version left — no need for navigator
+        this.setContentText(versions[0]?.content || data.content)
+        this.element.remove()
+      }
+    }
+  }
+
+  render() {
+    const version = this.versions[this.currentIndex - 1]
+    if (version) this.setContentText(version.content)
+
+    this.indicatorTarget.textContent = `v${this.currentIndex}/${this.totalValue}`
+    this.updateButtons()
+  }
+
+  setContentText(text) {
+    const el = document.getElementById(this.contentTargetValue)
+    const target = el?.querySelector(".comment-content") || el?.querySelector("[data-comment-target='content']")
+    if (target) target.textContent = text
+  }
+
+  updateButtons() {
+    this.prevBtnTarget.disabled = this.currentIndex <= 1
+    this.nextBtnTarget.disabled = this.currentIndex >= this.totalValue
+
+    const isCurrentlySelected = this.isSelectedIndex()
+    const isOnlyVersion = this.totalValue <= 1
+
+    // Delete: disabled if it's the selected version or the only version
+    if (this.hasDeleteBtnTarget) {
+      this.deleteBtnTarget.disabled = isCurrentlySelected || isOnlyVersion
+    }
+
+    // Select: disabled if already selected
+    if (this.hasSelectBtnTarget) {
+      this.selectBtnTarget.disabled = isCurrentlySelected
+    }
+
+    // Highlight indicator when viewing the selected version
+    this.indicatorTarget.classList.toggle("comment-version-selected", isCurrentlySelected)
+  }
+
+  isSelectedIndex() {
+    if (!this.versions) {
+      // Before versions are fetched, use initialIndex to determine
+      // If no selectedVersionId, the latest (total) is selected
+      if (!this.selectedVersionIdValue) return this.currentIndex === this.totalValue
+      return this.currentIndex === this.initialIndexValue
+    }
+    const version = this.versions[this.currentIndex - 1]
+    return version && version.id === this.selectedVersionId
+  }
+
+  get csrfToken() {
+    return document.querySelector('meta[name="csrf-token"]')?.content || ""
+  }
+}

data/app/javascript/controllers/comments/__tests__/form_controller_review.test.js

@@ -0,0 +1,305 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from '@hotwired/stimulus'
+import FormController from '../form_controller'
+
+describe('FormController - Review Quote Chips', () => {
+  let application
+  let container
+  let controller
+
+  beforeEach(async () => {
+    container = document.createElement('div')
+    container.innerHTML = `
+      <div id="comments-popup"
+           data-controller="comments--form"
+           data-review-feedback-placeholder="Write feedback for this quote..."
+           data-review-summary-placeholder="Overall comment (optional)..."
+           data-review-add-quote="+ Add"
+           data-review-send="Send review"
+           data-review-send-question="Send question"
+           data-review-type-review="💬"
+           data-review-type-question="❓"
+           data-review-type-review-label="Review"
+           data-review-type-question-label="Question">
+        <form data-comments--form-target="form">
+          <input type="hidden" name="comment[quoted_comment_id]" data-comments--form-target="quotedCommentId" value="" />
+          <input type="hidden" name="comment[quoted_text]" data-comments--form-target="quotedText" value="" />
+          <div data-comments--form-target="quoteIndicator" style="display:none;">
+            <span data-comments--form-target="quoteIndicatorText"></span>
+          </div>
+          <div class="review-quotes-container" data-comments--form-target="reviewQuotesContainer" style="display:none;"></div>
+          <textarea data-comments--form-target="textarea" rows="2"></textarea>
+          <input type="checkbox" data-comments--form-target="privateCheckbox" />
+          <button type="submit" data-comments--form-target="submit">Send</button>
+          <button data-comments--form-target="cancel" style="display:none;">Cancel</button>
+          <button data-comments--form-target="moveButton" style="display:none;">Move</button>
+          <button data-comments--form-target="searchButton" style="display:none;">Search</button>
+          <button data-comments--form-target="voiceButton" style="display:none;">Voice</button>
+          <input type="file" data-comments--form-target="imageInput" style="display:none;" />
+          <button data-comments--form-target="imageButton" style="display:none;">Image</button>
+          <div data-comments--form-target="attachmentList"></div>
+        </form>
+      </div>
+    `
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('comments--form', FormController)
+
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    const el = container.querySelector('#comments-popup')
+    controller = application.getControllerForElementAndIdentifier(el, 'comments--form')
+  })
+
+  afterEach(() => {
+    application.stop()
+    document.body.removeChild(container)
+  })
+
+  // Helper accessors for the refactored store-based API
+  const getQuotes = (ctrl) => ctrl._reviewStore.quotes
+  const getActiveId = (ctrl) => ctrl._reviewStore.activeId
+
+  describe('appendReviewQuote', () => {
+    test('adds a review quote chip', () => {
+      controller.appendReviewQuote(42, 'Hello world')
+
+      expect(getQuotes(controller)).toHaveLength(1)
+      expect(getQuotes(controller)[0]).toMatchObject({
+        commentId: 42,
+        text: 'Hello world',
+        type: 'review',
+        feedback: '',
+      })
+      expect(container.querySelectorAll('.review-quote-chip')).toHaveLength(1)
+    })
+
+    test('sets active quote id', () => {
+      controller.appendReviewQuote(1, 'text')
+      expect(getActiveId(controller)).toBe(getQuotes(controller)[0].id)
+    })
+
+    test('saves previous active quote feedback', () => {
+      controller.appendReviewQuote(1, 'first')
+      controller.textareaTarget.value = 'feedback for first'
+      controller.appendReviewQuote(2, 'second')
+
+      expect(getQuotes(controller)[0].feedback).toBe('feedback for first')
+      expect(getQuotes(controller)[1].feedback).toBe('')
+      expect(controller.textareaTarget.value).toBe('')
+    })
+
+    test('sets placeholder to feedback prompt', () => {
+      controller.appendReviewQuote(1, 'text')
+      expect(controller.textareaTarget.placeholder).toBe('Write feedback for this quote...')
+    })
+
+    test('ignores empty text', () => {
+      controller.appendReviewQuote(1, '')
+      expect(getQuotes(controller)).toHaveLength(0)
+    })
+
+    test('ignores null text', () => {
+      controller.appendReviewQuote(1, null)
+      expect(getQuotes(controller)).toHaveLength(0)
+    })
+
+    test('accumulates multiple quotes', () => {
+      controller.appendReviewQuote(1, 'first')
+      controller.appendReviewQuote(2, 'second')
+      controller.appendReviewQuote(3, 'third')
+
+      expect(getQuotes(controller)).toHaveLength(3)
+      expect(container.querySelectorAll('.review-quote-chip')).toHaveLength(3)
+    })
+  })
+
+  describe('_commitActiveQuote', () => {
+    test('saves feedback and deactivates', () => {
+      controller.appendReviewQuote(1, 'text')
+      controller.textareaTarget.value = 'my feedback'
+      controller._commitActiveQuote()
+
+      expect(getQuotes(controller)[0].feedback).toBe('my feedback')
+      expect(getActiveId(controller)).toBeNull()
+      expect(controller.textareaTarget.value).toBe('')
+      expect(controller.textareaTarget.placeholder).toBe('Overall comment (optional)...')
+    })
+  })
+
+  describe('_updateSubmitButton', () => {
+    test('default state when no quotes', () => {
+      controller._updateSubmitButton()
+      expect(controller.submitTarget.classList.contains('review-submit-btn')).toBe(false)
+    })
+
+    test('"+ Add" when active review quote', () => {
+      controller.appendReviewQuote(1, 'text')
+      expect(controller.submitTarget.textContent).toBe('+ Add')
+      expect(controller.submitTarget.classList.contains('review-submit-btn')).toBe(true)
+    })
+
+    test('"Send question" when active question quote', () => {
+      controller.appendReviewQuote(1, 'text')
+      controller._reviewStore.toggleType(getQuotes(controller)[0].id)
+      controller._updateSubmitButton()
+      expect(controller.submitTarget.textContent).toBe('Send question')
+    })
+
+    test('"Send review" when all quotes committed', () => {
+      controller.appendReviewQuote(1, 'text')
+      controller._commitActiveQuote()
+      expect(controller.submitTarget.textContent).toBe('Send review')
+    })
+  })
+
+  describe('_buildReviewContent (via store.buildContent)', () => {
+    test('builds markdown from review quotes with feedback', () => {
+      controller.appendReviewQuote(1, 'line one')
+      controller.textareaTarget.value = 'good'
+      controller._commitActiveQuote()
+      controller.textareaTarget.value = ''
+
+      const content = controller._reviewStore.buildContent(controller.textareaTarget.value)
+      expect(content).toContain('> line one')
+      expect(content).toContain('good')
+    })
+
+    test('blank line between quotes prevents blockquote merging', () => {
+      controller.appendReviewQuote(1, 'first')
+      controller._commitActiveQuote()
+      controller.appendReviewQuote(2, 'second')
+      controller._commitActiveQuote()
+      controller.textareaTarget.value = ''
+
+      const content = controller._reviewStore.buildContent(controller.textareaTarget.value)
+      const lines = content.split('\n')
+      const firstIdx = lines.indexOf('> first')
+      const secondIdx = lines.indexOf('> second')
+      expect(secondIdx).toBeGreaterThan(firstIdx + 1)
+      expect(lines[firstIdx + 1]).toBe('')
+    })
+
+    test('summary after --- separator', () => {
+      controller.appendReviewQuote(1, 'quoted')
+      controller.textareaTarget.value = 'fix'
+      controller._commitActiveQuote()
+
+      const content = controller._reviewStore.buildContent('overall good')
+      expect(content).toContain('---')
+      expect(content).toContain('overall good')
+    })
+
+    test('no summary: no --- separator', () => {
+      controller.appendReviewQuote(1, 'quoted')
+      controller.textareaTarget.value = 'fix'
+      controller._commitActiveQuote()
+
+      const content = controller._reviewStore.buildContent('')
+      expect(content).not.toContain('---')
+    })
+
+    test('question type uses ❓ prefix', () => {
+      controller.appendReviewQuote(1, 'why?')
+      controller._reviewStore.toggleType(getQuotes(controller)[0].id)
+      controller._commitActiveQuote()
+      controller.textareaTarget.value = ''
+
+      const content = controller._reviewStore.buildContent(controller.textareaTarget.value)
+      expect(content).toContain('> ❓ why?')
+    })
+  })
+
+  describe('type toggle', () => {
+    test('toggles between review and question', () => {
+      controller.appendReviewQuote(1, 'text')
+      expect(getQuotes(controller)[0].type).toBe('review')
+
+      container.querySelector('.review-quote-type-toggle').click()
+      expect(getQuotes(controller)[0].type).toBe('question')
+
+      container.querySelector('.review-quote-type-toggle').click()
+      expect(getQuotes(controller)[0].type).toBe('review')
+    })
+
+    test('updates button text on toggle', () => {
+      controller.appendReviewQuote(1, 'text')
+      expect(controller.submitTarget.textContent).toBe('+ Add')
+
+      container.querySelector('.review-quote-type-toggle').click()
+      expect(controller.submitTarget.textContent).toBe('Send question')
+    })
+  })
+
+  describe('chip removal', () => {
+    test('resets UI when last chip removed', () => {
+      controller.appendReviewQuote(1, 'text')
+      container.querySelector('.review-quote-chip-remove').click()
+
+      expect(getQuotes(controller)).toHaveLength(0)
+      expect(getActiveId(controller)).toBeNull()
+      expect(controller.textareaTarget.placeholder).toBe('')
+      expect(container.querySelector('.review-quotes-container').style.display).toBe('none')
+    })
+
+    test('preserves other quotes', () => {
+      controller.appendReviewQuote(1, 'first')
+      controller._commitActiveQuote()
+      controller.appendReviewQuote(2, 'second')
+      controller._commitActiveQuote()
+
+      container.querySelectorAll('.review-quote-chip-remove')[0].click()
+
+      expect(getQuotes(controller)).toHaveLength(1)
+      expect(getQuotes(controller)[0].text).toBe('second')
+    })
+  })
+
+  describe('cancelQuote', () => {
+    test('clears all review state', () => {
+      controller.appendReviewQuote(1, 'text')
+      controller.cancelQuote()
+
+      expect(getQuotes(controller)).toHaveLength(0)
+      expect(getActiveId(controller)).toBeNull()
+      expect(controller.textareaTarget.placeholder).toBe('')
+    })
+  })
+
+  describe('chip click - feedback editing', () => {
+    test('clicking committed chip loads its feedback', () => {
+      controller.appendReviewQuote(1, 'first')
+      controller.textareaTarget.value = 'feedback1'
+      controller._commitActiveQuote()
+      controller.appendReviewQuote(2, 'second')
+      controller._commitActiveQuote()
+
+      container.querySelectorAll('.review-quote-chip-text')[0].click()
+
+      expect(getActiveId(controller)).toBe(getQuotes(controller)[0].id)
+      expect(controller.textareaTarget.value).toBe('feedback1')
+    })
+
+    test('switching chips saves current feedback', () => {
+      controller.appendReviewQuote(1, 'first')
+      controller.textareaTarget.value = 'fb1'
+      controller._commitActiveQuote()
+      controller.appendReviewQuote(2, 'second')
+      controller.textareaTarget.value = 'fb2'
+      controller._commitActiveQuote()
+
+      // Click first chip
+      container.querySelectorAll('.review-quote-chip-text')[0].click()
+      // Type new feedback
+      controller.textareaTarget.value = 'fb1-updated'
+      // Click second chip
+      container.querySelectorAll('.review-quote-chip-text')[1].click()
+
+      expect(getQuotes(controller)[0].feedback).toBe('fb1-updated')
+      expect(controller.textareaTarget.value).toBe('fb2')
+    })
+  })
+})

data/app/javascript/controllers/comments/__tests__/list_controller_selection.test.js

@@ -0,0 +1,103 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/**
+ * Tests for the selection action bar behavior.
+ * We test the DOM rendering logic directly without importing the full controller
+ * (which has deep dependencies that are hard to mock in ESM mode).
+ */
+
+describe('Selection Action Bar - DOM behavior', () => {
+  let container
+
+  function createActionBar(count, dataset = {}) {
+    const existing = document.querySelector('.selection-action-bar')
+    if (existing) existing.remove()
+
+    if (count === 0) return null
+
+    const i18n = (key, fallback) => 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} selected').replace('{count}', count)}</span>
+        <button type="button" class="selection-action-bar-btn selection-action-delete">🗑 ${i18n('selectionDeleteText', 'Delete')}</button>
+        <button type="button" class="selection-action-bar-btn selection-action-move">📤 ${i18n('selectionMoveText', 'Move')}</button>
+        <button type="button" class="selection-action-bar-btn selection-action-topic">🏷 ${i18n('selectionTopicMoveText', 'Move to topic')}</button>
+        <button type="button" class="selection-action-bar-close">✕</button>
+      </div>
+      <div class="selection-action-bar-hint no-touch">
+        💡 ${i18n('selectionDragHintText', 'Drag & drop to move to topic')}
+      </div>
+    `
+    document.body.appendChild(bar)
+    return bar
+  }
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    document.body.removeChild(container)
+    document.querySelectorAll('.selection-action-bar').forEach(el => el.remove())
+  })
+
+  test('creates action bar with correct count', () => {
+    const bar = createActionBar(3)
+    expect(bar).toBeTruthy()
+    expect(bar.querySelector('.selection-action-bar-count').textContent).toBe('3 selected')
+  })
+
+  test('returns null and removes bar when count is 0', () => {
+    createActionBar(2)
+    expect(document.querySelector('.selection-action-bar')).toBeTruthy()
+
+    const result = createActionBar(0)
+    expect(result).toBeNull()
+    expect(document.querySelector('.selection-action-bar')).toBeNull()
+  })
+
+  test('has all required action buttons', () => {
+    const bar = createActionBar(1)
+    expect(bar.querySelector('.selection-action-delete')).toBeTruthy()
+    expect(bar.querySelector('.selection-action-move')).toBeTruthy()
+    expect(bar.querySelector('.selection-action-topic')).toBeTruthy()
+    expect(bar.querySelector('.selection-action-bar-close')).toBeTruthy()
+  })
+
+  test('shows drag hint with no-touch class', () => {
+    const bar = createActionBar(1)
+    const hint = bar.querySelector('.selection-action-bar-hint')
+    expect(hint).toBeTruthy()
+    expect(hint.classList.contains('no-touch')).toBe(true)
+    expect(hint.textContent).toContain('Drag & drop')
+  })
+
+  test('uses i18n dataset values when provided', () => {
+    const bar = createActionBar(5, {
+      selectionCountText: '{count}개 선택',
+      selectionDeleteText: '삭제',
+      selectionMoveText: '이동',
+      selectionTopicMoveText: '토픽 이동',
+      selectionDragHintText: '드래그&드롭으로도 토픽 이동 가능',
+    })
+    expect(bar.querySelector('.selection-action-bar-count').textContent).toBe('5개 선택')
+    expect(bar.querySelector('.selection-action-delete').textContent).toContain('삭제')
+    expect(bar.querySelector('.selection-action-move').textContent).toContain('이동')
+    expect(bar.querySelector('.selection-action-topic').textContent).toContain('토픽 이동')
+    expect(bar.querySelector('.selection-action-bar-hint').textContent).toContain('드래그&드롭')
+  })
+
+  test('replaces existing bar when called again', () => {
+    createActionBar(1)
+    createActionBar(3)
+    const bars = document.querySelectorAll('.selection-action-bar')
+    expect(bars.length).toBe(1)
+    expect(bars[0].querySelector('.selection-action-bar-count').textContent).toBe('3 selected')
+  })
+})

data/app/javascript/controllers/comments/__tests__/review_quotes_store.test.js

@@ -0,0 +1,113 @@
+import ReviewQuotesStore from '../review_quotes_store'
+
+describe('ReviewQuotesStore', () => {
+  let store
+
+  beforeEach(() => {
+    store = new ReviewQuotesStore()
+  })
+
+  describe('add / remove', () => {
+    test('adds a quote and sets it active', () => {
+      const q = store.add(1, 'hello world')
+      expect(store.count).toBe(1)
+      expect(store.activeId).toBe(q.id)
+      expect(q.type).toBe('review')
+      expect(q.feedback).toBe('')
+    })
+
+    test('removes a quote', () => {
+      const q = store.add(1, 'text')
+      store.remove(q.id)
+      expect(store.isEmpty).toBe(true)
+      expect(store.activeId).toBeNull()
+    })
+  })
+
+  describe('feedback', () => {
+    test('saves feedback for active quote', () => {
+      const q = store.add(1, 'text')
+      store.saveActiveFeedback('my feedback')
+      expect(q.feedback).toBe('my feedback')
+    })
+
+    test('commit deactivates', () => {
+      store.add(1, 'text')
+      store.commitActive('feedback')
+      expect(store.hasActive).toBe(false)
+    })
+  })
+
+  describe('toggleType', () => {
+    test('toggles between review and question', () => {
+      const q = store.add(1, 'text')
+      store.toggleType(q.id)
+      expect(q.type).toBe('question')
+      store.toggleType(q.id)
+      expect(q.type).toBe('review')
+    })
+  })
+
+  describe('buttonState', () => {
+    test('normal when empty', () => {
+      expect(store.buttonState).toBe('normal')
+    })
+
+    test('add when active review', () => {
+      store.add(1, 'text')
+      expect(store.buttonState).toBe('add')
+    })
+
+    test('send-question when active question', () => {
+      const q = store.add(1, 'text')
+      store.toggleType(q.id)
+      expect(store.buttonState).toBe('send-question')
+    })
+
+    test('send-review when no active', () => {
+      store.add(1, 'text')
+      store.commitActive('')
+      expect(store.buttonState).toBe('send-review')
+    })
+  })
+
+  describe('buildContent', () => {
+    test('builds markdown with quotes and summary', () => {
+      const q1 = store.add(1, 'quote one')
+      store.commitActive('feedback one')
+      store.add(2, 'quote two')
+      store.commitActive('feedback two')
+
+      const md = store.buildContent('summary text')
+      expect(md).toContain('> quote one')
+      expect(md).toContain('feedback one')
+      expect(md).toContain('> quote two')
+      expect(md).toContain('feedback two')
+      expect(md).toContain('---')
+      expect(md).toContain('summary text')
+    })
+
+    test('question prefix', () => {
+      const q = store.add(1, 'why?')
+      store.toggleType(q.id)
+      const md = store.buildContent('')
+      expect(md).toContain('> ❓ why?')
+    })
+  })
+
+  describe('backup / restore', () => {
+    test('restores quotes after backup', () => {
+      store.add(1, 'text')
+      store.backup('saved textarea')
+      // Simulate what happens after send: quotes are manually emptied
+      // but backup remains (clear() also wipes backup, so avoid it here)
+      store._quotes = []
+      store._activeId = null
+      expect(store.isEmpty).toBe(true)
+
+      const restored = store.restore()
+      expect(restored).toBe('saved textarea')
+      expect(store.count).toBe(1)
+    })
+  })
+})