collavre 0.22.0 → 0.24.0

data/app/javascript/controllers/__tests__/inbox_badge_controller.test.js

@@ -0,0 +1,73 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+const createSubscription = jest.fn()
+const renderStreamMessage = jest.fn()
+
+jest.unstable_mockModule('../../services/cable', () => ({
+  createSubscription,
+}))
+
+jest.unstable_mockModule('@hotwired/turbo-rails', () => ({
+  Turbo: { renderStreamMessage },
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const InboxBadgeController = (await import('../inbox_badge_controller')).default
+
+describe('InboxBadgeController', () => {
+  let application
+  let container
+  let subscription
+
+  beforeEach(() => {
+    subscription = { unsubscribe: jest.fn() }
+    createSubscription.mockReset()
+    renderStreamMessage.mockReset()
+    createSubscription.mockReturnValue(subscription)
+
+    container = document.createElement('div')
+    container.setAttribute('data-controller', 'inbox-badge')
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('inbox-badge', InboxBadgeController)
+  })
+
+  afterEach(() => {
+    application.stop()
+    document.body.innerHTML = ''
+  })
+
+  test('subscribes to the namespaced InboxBadgeChannel on connect', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(createSubscription).toHaveBeenCalledTimes(1)
+    expect(createSubscription).toHaveBeenCalledWith(
+      { channel: 'Collavre::InboxBadgeChannel' },
+      expect.objectContaining({ received: expect.any(Function) }),
+    )
+  })
+
+  test('renders the transmitted badge snapshot through Turbo on its own subscription', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    const [, callbacks] = createSubscription.mock.calls[0]
+    const snapshot = '<turbo-stream action="replace" target="desktop-inbox-badge"></turbo-stream>'
+    callbacks.received(snapshot)
+
+    expect(renderStreamMessage).toHaveBeenCalledWith(snapshot)
+  })
+
+  test('unsubscribes when the controller disconnects', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    container.remove()
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(subscription.unsubscribe).toHaveBeenCalledTimes(1)
+  })
+})

data/app/javascript/controllers/__tests__/search_popup_controller.test.js

@@ -0,0 +1,104 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import { Application } from '@hotwired/stimulus'
+
+const { default: SearchPopupController } = await import('../search_popup_controller')
+
+describe('SearchPopupController Ctrl+K shortcut', () => {
+  let application
+  let container
+  let popup
+
+  function pressCtrlK(target) {
+    const event = new KeyboardEvent('keydown', {
+      key: 'k',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true
+    })
+    target.dispatchEvent(event)
+    return event
+  }
+
+  beforeEach(async () => {
+    document.body.innerHTML = ''
+
+    container = document.createElement('div')
+    container.innerHTML = `
+      <div data-controller="search-popup">
+        <input type="text" data-search-popup-target="input" />
+        <div data-search-popup-target="popup"></div>
+      </div>
+    `
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('search-popup', SearchPopupController)
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    popup = container.querySelector('[data-search-popup-target="popup"]')
+  })
+
+  afterEach(() => {
+    application?.stop()
+    document.body.innerHTML = ''
+    jest.restoreAllMocks()
+  })
+
+  test('opens the popup on Ctrl+K when focus is not in an editable element', () => {
+    const event = pressCtrlK(document.body)
+
+    expect(popup.classList.contains('open')).toBe(true)
+    expect(event.defaultPrevented).toBe(true)
+  })
+
+  test('does not open the popup when Ctrl+K is pressed inside a text input', () => {
+    const input = document.createElement('input')
+    input.type = 'text'
+    document.body.appendChild(input)
+    input.focus()
+
+    const event = pressCtrlK(input)
+
+    expect(popup.classList.contains('open')).toBe(false)
+    expect(event.defaultPrevented).toBe(false)
+  })
+
+  test('does not open the popup when Ctrl+K is pressed inside a textarea', () => {
+    const textarea = document.createElement('textarea')
+    document.body.appendChild(textarea)
+    textarea.focus()
+
+    const event = pressCtrlK(textarea)
+
+    expect(popup.classList.contains('open')).toBe(false)
+    expect(event.defaultPrevented).toBe(false)
+  })
+
+  test('does not open the popup when Ctrl+K is pressed inside a contenteditable element', () => {
+    const editable = document.createElement('div')
+    editable.setAttribute('contenteditable', 'true')
+    document.body.appendChild(editable)
+    editable.focus()
+
+    const event = pressCtrlK(editable)
+
+    expect(popup.classList.contains('open')).toBe(false)
+    expect(event.defaultPrevented).toBe(false)
+  })
+
+  test('does not open the popup when Ctrl+K is pressed inside the inline Lexical editor', () => {
+    const lexicalRoot = document.createElement('div')
+    lexicalRoot.setAttribute('data-lexical-editor-root', '')
+    const inner = document.createElement('p')
+    lexicalRoot.appendChild(inner)
+    document.body.appendChild(lexicalRoot)
+
+    const event = pressCtrlK(inner)
+
+    expect(popup.classList.contains('open')).toBe(false)
+    expect(event.defaultPrevented).toBe(false)
+  })
+})

data/app/javascript/controllers/__tests__/topic_list_controller.test.js

@@ -0,0 +1,82 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import { Application } from '@hotwired/stimulus'
+import TopicListController from '../topic_list_controller'
+
+describe('TopicListController', () => {
+    let application, controller
+
+    const mount = () => {
+        document.body.innerHTML = `
+          <div id="topic-list-modal" class="common-popup" data-controller="topic-list">
+            <button data-topic-list-target="close">×</button>
+            <input data-topic-list-target="input">
+            <ul class="common-popup-list" data-popup-list data-topic-list-target="list"></ul>
+          </div>
+        `
+        application = Application.start()
+        application.register('topic-list', TopicListController)
+        return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+            controller = application.getControllerForElementAndIdentifier(
+                document.getElementById('topic-list-modal'), 'topic-list'
+            )
+        })
+    }
+
+    const RECT = { top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0 }
+    const DATA = {
+        topics: [{ id: 1, name: 'Main' }, { id: 2, name: 'Alpha' }],
+        archivedTopics: [{ id: 3, name: 'Zeta' }],
+        mainTopicId: '1',
+        allMessagesLabel: 'All Messages'
+    }
+
+    const items = () => Array.from(document.querySelectorAll('#topic-list-modal li.common-popup-item'))
+
+    beforeEach(() => {
+        global.requestAnimationFrame = (fn) => { fn(); return 0 }
+        return mount()
+    })
+
+    afterEach(() => {
+        document.body.innerHTML = ''
+        application.stop()
+        jest.clearAllMocks()
+    })
+
+    test('builds items in bar order: main, others, All Messages, archived', () => {
+        controller.openForTopics(DATA, RECT, () => {})
+        const labels = items().map((li) => li.textContent.trim())
+        expect(labels).toEqual(['#Main', '#Alpha', '📋 All Messages', '#Zeta'])
+    })
+
+    test('marks archived items with the distinguishing class', () => {
+        controller.openForTopics(DATA, RECT, () => {})
+        const archived = items().filter((li) => li.querySelector('.topic-list-item--archived'))
+        expect(archived).toHaveLength(1)
+        expect(archived[0].textContent).toContain('#Zeta')
+    })
+
+    test('filters by label substring and adds NO create option', () => {
+        controller.openForTopics(DATA, RECT, () => {})
+        controller.inputTarget.value = 'alpha'
+        controller._onInput()
+        const labels = items().map((li) => li.textContent.trim())
+        expect(labels).toEqual(['#Alpha'])
+
+        controller.inputTarget.value = 'brandnew'
+        controller._onInput()
+        expect(items()).toHaveLength(0) // no "create and move" pseudo-item
+    })
+
+    test('select invokes the callback with the item and closes', () => {
+        const cb = jest.fn()
+        controller.openForTopics(DATA, RECT, cb)
+        const item = { id: 2, label: '#Alpha', archived: false }
+        controller.select(item)
+        expect(cb).toHaveBeenCalledWith(item)
+        expect(controller.popup.isOpen()).toBe(false)
+    })
+})

data/app/javascript/controllers/comment_controller.js

@@ -3,6 +3,7 @@ import { renderCommentMarkdown, renderMermaidDiagrams } from '../lib/utils/markd
 import { addTableDownloadButtons } from '../lib/utils/table_download'
 import CommonPopup from '../lib/common_popup'
 import csrfFetch from '../lib/api/csrf_fetch'
+import { alertDialog, confirmDialog } from '../lib/utils/dialog'
 
 // Global tracker: persists streaming state across Turbo replacements
 // (each replacement creates a new controller instance, losing instance state)
@@ -248,7 +249,7 @@ export default class extends Controller {
       const data = await response.json()
       this.updateReactionsUI(data)
     } catch (error) {
-      alert(error?.message || 'Failed to update reaction')
+      alertDialog(error?.message || 'Failed to update reaction')
     }
   }
 
@@ -495,7 +496,7 @@ export default class extends Controller {
     const creativeId = button.dataset.creativeId
     const confirmText = button.dataset.confirmText || 'Restore original messages?'
 
-    if (!confirm(confirmText)) return
+    if (!(await confirmDialog(confirmText, { danger: true }))) return
 
     button.disabled = true
     try {
@@ -511,12 +512,12 @@ export default class extends Controller {
         // the summary comment (this one) will be destroyed via broadcast too
       } else {
         const data = await response.json().catch(() => ({}))
-        alert(data.error || 'Failed to restore')
+        alertDialog(data.error || 'Failed to restore')
         button.disabled = false
       }
     } catch (error) {
       console.error('Error restoring snapshot:', error)
-      alert('Failed to restore')
+      alertDialog('Failed to restore')
       button.disabled = false
     }
   }

data/app/javascript/controllers/comment_version_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 import { renderCommentMarkdown, renderMermaidDiagrams } from "../lib/utils/markdown"
+import { confirmDialog } from "../lib/utils/dialog"
 
 export default class extends Controller {
   static targets = ["prevBtn", "nextBtn", "indicator", "deleteBtn", "selectBtn"]
@@ -80,7 +81,7 @@ export default class extends Controller {
     // Can't delete if it's the only version
     if (versions.length <= 1) return
 
-    if (!confirm(this.deleteBtnTarget.dataset.confirmMessage || "Are you sure?")) return
+    if (!(await confirmDialog(this.deleteBtnTarget.dataset.confirmMessage || "Are you sure?", { danger: true }))) return
 
     const response = await fetch(
       `${this.versionsUrlValue}/${version.id}`,

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

@@ -0,0 +1,159 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+import { Application } from '@hotwired/stimulus'
+import FormController from '../form_controller'
+
+// Regression harness for: "slow send API + double Enter => message sent twice".
+//
+// Scenario A proves the in-flight guard blocks a second Enter on the same
+// controller instance. Scenario B reproduces the real-world bug: a Turbo/
+// websocket morph reconnects the Stimulus controller mid-send, and (before the
+// fix) connect() reset this.sending, blowing away the guard so an impatient
+// second Enter re-sent the same message.
+describe('FormController - double submit on slow API', () => {
+  let application
+  let container
+  let controller
+
+  const FIXTURE = `
+    <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>`
+
+  beforeEach(async () => {
+    const meta = document.createElement('meta')
+    meta.name = 'csrf-token'
+    meta.content = 'test-token'
+    document.head.appendChild(meta)
+
+    if (!global.DataTransfer) {
+      global.DataTransfer = class {
+        constructor() {
+          this.files = []
+          this.items = { add: (file) => this.files.push(file) }
+        }
+      }
+    }
+
+    container = document.createElement('div')
+    container.innerHTML = FIXTURE
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('comments--form', FormController)
+    await new Promise((r) => setTimeout(r, 50))
+    controller = application.getControllerForElementAndIdentifier(
+      container.querySelector('#comments-popup'),
+      'comments--form',
+    )
+    controller.creativeId = '123'
+    controller.currentTopicId = '10073'
+  })
+
+  afterEach(() => {
+    application.stop()
+    document.body.removeChild(container)
+  })
+
+  const pressEnter = (textarea) => {
+    textarea.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+    )
+  }
+
+  test('SCENARIO A: two Enter presses while a fetch is in-flight => fetch fires only once', () => {
+    const fetchSpy = jest.fn(() => new Promise(() => {})) // never resolves: slow API
+    global.fetch = fetchSpy
+    controller.creativeId = '111'
+
+    const textarea = controller.textareaTarget
+    textarea.value = 'hello world'
+
+    pressEnter(textarea)
+    pressEnter(textarea) // impatient second Enter
+
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('SCENARIO B: a controller reconnect (morph) mid-send must NOT re-enable sending', () => {
+    const fetchSpy = jest.fn(() => new Promise(() => {})) // never resolves: slow API
+    global.fetch = fetchSpy
+    controller.creativeId = '222'
+
+    const textarea = controller.textareaTarget
+    textarea.value = 'hello world'
+
+    pressEnter(textarea)
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+
+    // A Turbo Stream / websocket broadcast morphs the comments area while the
+    // request is still in flight. Stimulus reconnects the controller, which
+    // resets the instance-only `this.sending` flag back to false.
+    controller.disconnect()
+    controller.connect()
+    controller.creativeId = '222'
+    controller.currentTopicId = '10073'
+
+    // The morph preserves the user's typed text; the impatient user hits Enter
+    // again because the slow API still has not responded.
+    controller.textareaTarget.value = 'hello world'
+    pressEnter(controller.textareaTarget)
+
+    // Durable (module-scope) guard must still block the duplicate.
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('SCENARIO C: after the request completes, the next message sends normally', async () => {
+    let resolveFetch
+    const fetchSpy = jest.fn(
+      () => new Promise((resolve) => { resolveFetch = resolve }),
+    )
+    global.fetch = fetchSpy
+    controller.creativeId = '333'
+    // Avoid touching the comment list / DOM rendering on success.
+    jest.spyOn(controller, 'resetForm').mockImplementation(() => {})
+
+    const textarea = controller.textareaTarget
+    textarea.value = 'first'
+    pressEnter(textarea)
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+
+    // Resolve the first request, then let the promise microtasks (then/finally) run.
+    resolveFetch({ ok: true, status: 200, text: () => Promise.resolve('<div></div>') })
+    await new Promise((r) => setTimeout(r, 0))
+
+    controller.textareaTarget.value = 'second'
+    pressEnter(controller.textareaTarget)
+    expect(fetchSpy).toHaveBeenCalledTimes(2)
+  })
+})

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

@@ -14,7 +14,6 @@ describe('CommentsPresenceController', () => {
   beforeEach(async () => {
     document.body.dataset.currentUserId = '7'
     global.fetch = jest.fn()
-    global.alert = jest.fn()
 
     container = document.createElement('div')
     container.innerHTML = `
@@ -91,7 +90,9 @@ describe('CommentsPresenceController', () => {
 
     await new Promise((resolve) => setTimeout(resolve, 0))
 
-    expect(global.alert).toHaveBeenCalledWith('No permission')
+    // alertDialog renders an in-app modal (replacing native alert for the
+    // Tauri webview); assert the message surfaced there instead.
+    expect(document.querySelector('.confirm-dialog-message')?.textContent).toBe('No permission')
     expect(close).toHaveBeenCalled()
   })
 

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

@@ -0,0 +1,94 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+// deleteTopic awaits confirmDialog. The native click dispatch completes during
+// that await, which resets event.currentTarget to null (DOM spec). Mock the
+// dialog so the test controls when it resolves and can null currentTarget in
+// between — reproducing the regression where the topic id was read after await.
+jest.unstable_mockModule('../../../lib/utils/dialog', () => ({
+  confirmDialog: jest.fn(),
+  alertDialog: jest.fn(),
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const TopicsController = (await import('../topics_controller')).default
+const { confirmDialog } = await import('../../../lib/utils/dialog')
+
+describe('TopicsController#deleteTopic', () => {
+  let application
+  let container
+  let controller
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    container.innerHTML = `
+      <div id="topics" data-controller="comments--topics">
+        <div data-comments--topics-target="list"></div>
+      </div>
+    `
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('comments--topics', TopicsController)
+
+    const meta = document.createElement('meta')
+    meta.name = 'csrf-token'
+    meta.content = 'test-csrf'
+    document.head.appendChild(meta)
+
+    return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+      const element = document.getElementById('topics')
+      controller = application.getControllerForElementAndIdentifier(element, 'comments--topics')
+      controller.creativeIdValue = '42'
+      controller.loadTopics = jest.fn()
+    })
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+    application.stop()
+    jest.clearAllMocks()
+  })
+
+  test('issues DELETE with the topic id even when currentTarget is nulled after the await', async () => {
+    const fetchMock = jest.fn().mockResolvedValue({ ok: true })
+    global.fetch = fetchMock
+
+    // Simulate the event whose currentTarget is reset to null once the click
+    // dispatch finishes (which happens while confirmDialog is awaited).
+    const button = document.createElement('button')
+    button.dataset.id = '99'
+    const event = { stopPropagation: jest.fn(), currentTarget: button }
+
+    confirmDialog.mockImplementation(() => {
+      event.currentTarget = null // dispatch completed -> currentTarget reset
+      return Promise.resolve(true)
+    })
+
+    await controller.deleteTopic(event)
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/creatives/42/topics/99',
+      expect.objectContaining({ method: 'DELETE' })
+    )
+  })
+
+  test('does not issue DELETE when the user cancels the confirm dialog', async () => {
+    const fetchMock = jest.fn()
+    global.fetch = fetchMock
+
+    const button = document.createElement('button')
+    button.dataset.id = '99'
+    const event = { stopPropagation: jest.fn(), currentTarget: button }
+
+    confirmDialog.mockResolvedValue(false)
+
+    await controller.deleteTopic(event)
+
+    expect(fetchMock).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,61 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import { Application } from '@hotwired/stimulus'
+import TopicsController from '../topics_controller'
+
+describe('TopicsController#openTopicListPopup', () => {
+    let application, controller
+
+    beforeEach(() => {
+        global.requestAnimationFrame = (fn) => { fn(); return 0 }
+        document.body.innerHTML = `
+          <div id="comments-popup" data-controller="comments--topics"
+               data-topic-main-text="All Messages"
+               data-topic-search-placeholder-text="Search topics...">
+            <div data-comments--topics-target="list"></div>
+          </div>
+        `
+        application = Application.start()
+        application.register('comments--topics', TopicsController)
+        return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+            controller = application.getControllerForElementAndIdentifier(
+                document.getElementById('comments-popup'), 'comments--topics'
+            )
+            controller.topics = [{ id: 2, name: 'Alpha' }]
+            controller.archivedTopics = [{ id: 3, name: 'Zeta' }]
+            controller.mainTopicId = null
+        })
+    })
+
+    afterEach(() => {
+        document.body.innerHTML = ''
+        application.stop()
+        jest.clearAllMocks()
+    })
+
+    test('creates the topic-list modal with the required targets', () => {
+        const btn = document.createElement('button')
+        document.body.appendChild(btn)
+        controller.openTopicListPopup({ currentTarget: btn })
+
+        const modal = document.getElementById('topic-list-modal')
+        expect(modal).not.toBeNull()
+        expect(modal.dataset.controller).toBe('topic-list')
+        expect(modal.querySelector('[data-topic-list-target="input"]')).not.toBeNull()
+        expect(modal.querySelector('[data-topic-list-target="list"]')).not.toBeNull()
+        expect(modal.querySelector('[data-topic-list-target="close"]')).not.toBeNull()
+        expect(modal.querySelector('input').placeholder).toBe('Search topics...')
+    })
+
+    test('appends the modal inside the chat box so it is caged within it', () => {
+        const btn = document.createElement('button')
+        document.body.appendChild(btn)
+        controller.openTopicListPopup({ currentTarget: btn })
+
+        const modal = document.getElementById('topic-list-modal')
+        // Bounded to the chat popup, not body-level.
+        expect(modal.parentElement).toBe(document.getElementById('comments-popup'))
+    })
+})