collavre 0.22.0 → 0.23.0

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/form_controller.js

@@ -3,6 +3,16 @@ 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'
+import { alertDialog } from '../../lib/utils/dialog'
+
+// In-flight comment sends, keyed by creative id. This lives at module scope —
+// not on the controller instance — so the duplicate-submit guard survives a
+// Stimulus reconnect (Turbo morph / re-render) mid-send. The instance-only
+// `this.sending` flag is reset by connect() and cannot be relied on alone:
+// a reconnect while a slow request is in flight would re-enable sending and let
+// an impatient second Enter submit the same comment twice.
+const inFlightSends = new Set()
+const sendKeyFor = (creativeId) => `creative:${creativeId}`
 
 export default class extends Controller {
   static targets = [
@@ -255,7 +265,9 @@ export default class extends Controller {
     const hasText = this.textareaTarget.value.trim().length > 0
     const hasQuotes = !store.isEmpty
     const hasImages = this.currentImageFiles().length > 0
-    if (this.sending || (!hasText && !hasQuotes && !hasImages) || !this.creativeId) return
+    const sendKey = sendKeyFor(this.creativeId)
+    if (this.sending || inFlightSends.has(sendKey) || (!hasText && !hasQuotes && !hasImages) || !this.creativeId) return
+    inFlightSends.add(sendKey)
     this.sending = true
     this.setSendingState(true)
     this.presenceController?.stoppedTyping()
@@ -358,9 +370,10 @@ export default class extends Controller {
           this._renderReviewQuoteChips()
           this._updateSubmitButton()
         }
-        alert(error?.message || 'Failed to submit comment')
+        alertDialog(error?.message || 'Failed to submit comment')
       })
       .finally(() => {
+        inFlightSends.delete(sendKey)
         this._hasRetried = false
         this.setSendingState(false)
       })
@@ -403,7 +416,7 @@ export default class extends Controller {
 
     const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
     if (!SpeechRecognition) {
-      alert(this.element.dataset.speechUnavailableText || 'Speech recognition not supported')
+      alertDialog(this.element.dataset.speechUnavailableText || 'Speech recognition not supported')
       return false
     }
 
@@ -743,7 +756,9 @@ export default class extends Controller {
 
   // Send a single question quote immediately as a standalone comment.
   _sendQuestionQuote(quote) {
-    if (this.sending || !this.creativeId) return
+    const sendKey = sendKeyFor(this.creativeId)
+    if (this.sending || inFlightSends.has(sendKey) || !this.creativeId) return
+    inFlightSends.add(sendKey)
 
     const store = this._reviewStore
     const content = store.buildQuestionContent(quote)
@@ -809,9 +824,10 @@ export default class extends Controller {
         }
       })
       .catch((error) => {
-        alert(error?.message || 'Failed to send question')
+        alertDialog(error?.message || 'Failed to send question')
       })
       .finally(() => {
+        inFlightSends.delete(sendKey)
         this._hasRetried = false
         this.sending = false
       })

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

@@ -5,6 +5,7 @@ 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'
+import { alertDialog, confirmDialog } from '../../lib/utils/dialog'
 // CommonPopup is now used via TopicSearchController (Stimulus)
 
 export default class extends Controller {
@@ -595,7 +596,7 @@ export default class extends Controller {
   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
+    if (!(await confirmDialog(confirmText, { danger: true }))) return
 
     const commentIds = Array.from(this.selection)
     try {
@@ -615,18 +616,18 @@ export default class extends Controller {
         this.clearSelection()
       } else {
         const data = await response.json().catch(() => ({}))
-        alert(data.error || 'Failed to delete comments')
+        alertDialog(data.error || 'Failed to delete comments')
       }
     } catch (error) {
       console.error('Error deleting comments:', error)
-      alert('Failed to delete comments')
+      alertDialog('Failed to delete comments')
     }
   }
 
   async mergeSelectedComments() {
     if (this.selection.size < 2) return
     const confirmText = this.element.dataset.mergeConfirmText || 'Merge the selected messages into one?'
-    if (!confirm(confirmText)) return
+    if (!(await confirmDialog(confirmText, { danger: true }))) return
 
     const commentIds = Array.from(this.selection)
     try {
@@ -643,11 +644,11 @@ export default class extends Controller {
         // Job is async — the merged comment will update via broadcast
       } else {
         const data = await response.json().catch(() => ({}))
-        alert(data.error || 'Failed to merge comments')
+        alertDialog(data.error || 'Failed to merge comments')
       }
     } catch (error) {
       console.error('Error merging comments:', error)
-      alert('Failed to merge comments')
+      alertDialog('Failed to merge comments')
     }
   }
 
@@ -676,11 +677,11 @@ export default class extends Controller {
         }
       } else {
         const data = await response.json().catch(() => ({}))
-        alert(data.error || 'Failed to branch comments')
+        alertDialog(data.error || 'Failed to branch comments')
       }
     } catch (error) {
       console.error('Error branching comments:', error)
-      alert('Failed to branch comments')
+      alertDialog('Failed to branch comments')
     }
   }
 
@@ -808,11 +809,11 @@ export default class extends Controller {
         this.loadInitialComments()
       } else {
         const data = await response.json()
-        alert(data.error || 'Failed to move comments')
+        alertDialog(data.error || 'Failed to move comments')
       }
     } catch (error) {
       console.error('Error moving comments to topic:', error)
-      alert('Failed to move comments')
+      alertDialog('Failed to move comments')
     }
   }
 
@@ -902,8 +903,8 @@ export default class extends Controller {
 
   // API Methods
 
-  deleteComment(button) {
-    if (!confirm(this.element.dataset.deleteConfirmText)) return
+  async deleteComment(button) {
+    if (!(await confirmDialog(this.element.dataset.deleteConfirmText, { danger: true }))) return
     const commentId = button.getAttribute('data-comment-id')
     fetch(`/creatives/${this.creativeId}/comments/${commentId}`, {
       method: 'DELETE',
@@ -919,9 +920,9 @@ export default class extends Controller {
     })
   }
 
-  convertComment(button) {
+  async convertComment(button) {
     // ... (Existing logic) ...
-    if (!confirm(this.element.dataset.convertConfirmText)) return
+    if (!(await confirmDialog(this.element.dataset.convertConfirmText))) return
     const commentId = button.getAttribute('data-comment-id')
     fetch(`/creatives/${this.creativeId}/comments/${commentId}/convert`, {
       method: 'POST',
@@ -983,7 +984,7 @@ export default class extends Controller {
         const existing = document.getElementById(`comment_${commentId}`)
         if (existing) existing.outerHTML = html
       })
-      .catch(e => { alert(e.message); button.disabled = false; })
+      .catch(e => { alertDialog(e.message); button.disabled = false; })
   }
 
   editComment(button) {
@@ -1013,7 +1014,7 @@ export default class extends Controller {
       })
       .catch((error) => {
         console.error(error)
-        alert(this.element.dataset.updateErrorText || 'Failed to update action')
+        alertDialog(this.element.dataset.updateErrorText || 'Failed to update action')
       })
       .finally(() => { if (submitButton) submitButton.disabled = false })
   }
@@ -1022,7 +1023,7 @@ export default class extends Controller {
   openMoveModal(event) {
     if (this.movingComments) return
     if (this.selection.size === 0) {
-      alert(this.element.dataset.moveNoSelectionText || "No Selection")
+      alertDialog(this.element.dataset.moveNoSelectionText || "No Selection")
       return
     }
     this.movingComments = true

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

@@ -2,6 +2,7 @@ import { Controller } from '@hotwired/stimulus'
 import { createSubscription } from '../../services/cable'
 import TouchDragHandler from '../../lib/touch_drag'
 import csrfFetch from '../../lib/api/csrf_fetch'
+import { alertDialog } from '../../lib/utils/dialog'
 
 const TYPING_TIMEOUT = 3000
 const AGENT_STATUS_TIMEOUT = 10000 // Safety timeout for agent_status (heartbeat expected every 3s)
@@ -156,7 +157,7 @@ export default class extends Controller {
         this.renderTypingIndicator()
 
         if (closeOnForbidden) {
-          alert(error.message)
+          alertDialog(error.message)
           this.popupController?.close()
         }
       })

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

@@ -1,6 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 import { createSubscription } from "../../services/cable"
 import { fetchNextTopicName, createTopicWithComments, saveLastTopic } from "../../lib/api/topics"
+import { alertDialog, confirmDialog } from "../../lib/utils/dialog"
 
 const ICON_ARCHIVE = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="5" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>`
 const ICON_RESTORE = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6.69 3L3 13"/></svg>`
@@ -377,10 +378,15 @@ export default class extends Controller {
 
     async deleteTopic(event) {
         event.stopPropagation()
+        // Capture the topic id BEFORE awaiting the dialog: once the click
+        // dispatch completes, event.currentTarget is reset to null, so reading
+        // it after `await` throws. confirmDialog made this handler async, which
+        // exposed the latent stale-currentTarget hazard (the old sync confirm()
+        // never yielded the event loop).
+        const topicId = event.currentTarget.dataset.id
         const confirmText = this.listTarget.dataset.confirmDeleteText || "This will delete all messages in this topic. Are you sure?"
-        if (!confirm(confirmText)) return
+        if (!(await confirmDialog(confirmText, { danger: true }))) return
 
-        const topicId = event.currentTarget.dataset.id
         if (!topicId) return
 
         try {
@@ -398,7 +404,7 @@ export default class extends Controller {
                 }
                 this.loadTopics()
             } else {
-                alert("Failed to delete topic")
+                alertDialog("Failed to delete topic")
             }
         } catch (e) {
             console.error("Error deleting topic", e)
@@ -425,7 +431,7 @@ export default class extends Controller {
                 }
                 this.loadTopics()
             } else {
-                alert("Failed to archive topic")
+                alertDialog("Failed to archive topic")
             }
         } catch (e) {
             console.error("Error archiving topic", e)
@@ -448,7 +454,7 @@ export default class extends Controller {
             if (response.ok) {
                 this.loadTopics()
             } else {
-                alert("Failed to restore topic")
+                alertDialog("Failed to restore topic")
             }
         } catch (e) {
             console.error("Error restoring topic", e)
@@ -608,7 +614,7 @@ export default class extends Controller {
                 this.renderTopics(this.topics, this.canManageTopics, this.canCreateTopic)
                 this.restoreSelection()
             } else {
-                alert("Failed to update topic")
+                alertDialog("Failed to update topic")
                 this.loadTopics() // Reload to restore state
             }
         } catch (e) {
@@ -699,7 +705,7 @@ export default class extends Controller {
                 // Dispatch change event manually since we skipped the click handler
                 this.dispatch("change", { detail: { topicId: topic.id, mainTopicId: this.mainTopicId } })
             } else {
-                alert("Failed to create topic")
+                alertDialog("Failed to create topic")
             }
         } catch (e) {
             console.error("Error creating topic", e)
@@ -943,7 +949,7 @@ export default class extends Controller {
             )
             if (listController) listController.clearSelection()
         } else {
-            alert(result.error)
+            alertDialog(result.error)
         }
     }
 

data/app/javascript/controllers/creatives/__tests__/tree_controller.test.js

@@ -6,6 +6,7 @@ import { jest } from '@jest/globals'
 
 jest.unstable_mockModule('../../../creatives/tree_renderer', () => ({
   renderCreativeTree: jest.fn(),
+  appendCreativeNodes: jest.fn(),
   dispatchCreativeTreeUpdated: jest.fn(),
   applyRowProperties: jest.fn(),
 }))
@@ -16,6 +17,7 @@ jest.unstable_mockModule('../../../utils/emoji_parser', () => ({
 
 const { Application } = await import('@hotwired/stimulus')
 const TreeController = (await import('../tree_controller')).default
+const { appendCreativeNodes } = await import('../../../creatives/tree_renderer')
 
 const TRANSIENT_RETRY_DELAYS = [200, 600]
 
@@ -118,3 +120,151 @@ describe('CreativesTreeController retry on transient network errors', () => {
     application.stop()
   })
 })
+
+describe('CreativesTreeController Chats pagination (load more)', () => {
+  let originalFetch
+  let originalIO
+
+  class MockIntersectionObserver {
+    constructor(callback) {
+      this.callback = callback
+      MockIntersectionObserver.instances.push(this)
+    }
+    observe(el) { this.observed = el }
+    disconnect() { this.disconnected = true }
+    triggerIntersect() { this.callback([{ isIntersecting: true }]) }
+  }
+
+  beforeEach(() => {
+    originalFetch = global.fetch
+    originalIO = global.IntersectionObserver
+    MockIntersectionObserver.instances = []
+    global.IntersectionObserver = MockIntersectionObserver
+    appendCreativeNodes.mockClear()
+  })
+
+  afterEach(() => {
+    global.fetch = originalFetch
+    global.IntersectionObserver = originalIO
+    document.body.innerHTML = ''
+    jest.restoreAllMocks()
+  })
+
+  test('observes a sentinel only when the response carries has_more pagination', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ creatives: [{ id: 1 }], pagination: { has_more: true, next_page: 2 } }),
+    })
+
+    const { container, application } = installController()
+    await flush()
+    await flush()
+
+    expect(MockIntersectionObserver.instances).toHaveLength(1)
+    expect(container.querySelector('.creative-chats-load-sentinel')).not.toBeNull()
+
+    application.stop()
+  })
+
+  test('does NOT set up pagination for a plain tree response (no pagination key)', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ creatives: [{ id: 1 }] }),
+    })
+
+    const { container, application } = installController()
+    await flush()
+    await flush()
+
+    expect(MockIntersectionObserver.instances).toHaveLength(0)
+    expect(container.querySelector('.creative-chats-load-sentinel')).toBeNull()
+
+    application.stop()
+  })
+
+  test('fetches the next page and appends rows when the sentinel intersects', async () => {
+    const page2Nodes = [{ id: 2 }, { id: 3 }]
+    global.fetch = jest
+      .fn()
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ creatives: [{ id: 1 }], pagination: { has_more: true, next_page: 2 } }),
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ creatives: page2Nodes, pagination: { has_more: false, next_page: null } }),
+      })
+
+    const { application } = installController()
+    await flush()
+    await flush()
+
+    const observer = MockIntersectionObserver.instances[0]
+    observer.triggerIntersect()
+    await flush()
+    await flush()
+
+    const secondCallUrl = global.fetch.mock.calls[1][0]
+    expect(secondCallUrl).toContain('page=2')
+    expect(appendCreativeNodes).toHaveBeenCalledTimes(1)
+    expect(appendCreativeNodes.mock.calls[0][1]).toEqual(page2Nodes)
+    // has_more:false on page 2 tears the observer down.
+    expect(observer.disconnected).toBe(true)
+
+    application.stop()
+  })
+
+  test('drops a stale load-more response that resolves after a fresh load', async () => {
+    let resolvePage2
+    const page2Nodes = [{ id: 2 }, { id: 3 }]
+    global.fetch = jest
+      .fn()
+      // initial page-1 (Chats filter, has more)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ creatives: [{ id: 1 }], pagination: { has_more: true, next_page: 2 } }),
+      })
+      // page-2 stays pending until we resolve it manually
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolvePage2 = () =>
+              resolve({
+                ok: true,
+                json: async () => ({ creatives: page2Nodes, pagination: { has_more: true, next_page: 3 } }),
+              })
+          })
+      )
+      // the fresh load() re-renders a different (non-paginated) view
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ creatives: [{ id: 99 }] }),
+      })
+
+    const { container, application } = installController()
+    await flush()
+    await flush()
+
+    // Sentinel intersects -> page-2 fetch kicks off but stays pending.
+    MockIntersectionObserver.instances[0].triggerIntersect()
+    await flush()
+
+    // A fresh load happens before page 2 resolves (filter change, sync refetch,
+    // archive toggle). load() tears down pagination and aborts the in-flight
+    // load-more.
+    const controller = application.getControllerForElementAndIdentifier(container, 'creatives--tree')
+    controller.load()
+    await flush()
+    await flush()
+
+    // The stale page-2 response finally arrives. It must NOT be appended into
+    // the freshly rendered view.
+    resolvePage2()
+    await flush()
+    await flush()
+
+    expect(appendCreativeNodes).not.toHaveBeenCalled()
+
+    application.stop()
+  })
+})

data/app/javascript/controllers/creatives/import_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import csrfFetch from '../../lib/api/csrf_fetch'
+import { alertDialog } from '../../lib/utils/dialog'
 
 export default class extends Controller {
   static targets = ['area', 'dropzone', 'input', 'progress', 'toggle']
@@ -66,7 +67,7 @@ export default class extends Controller {
     const isPpt = lower.endsWith('.ppt') || lower.endsWith('.pptx')
 
     if (!isMarkdown && !isPpt) {
-      window.alert(this.onlyMarkdownValue)
+      alertDialog(this.onlyMarkdownValue)
       return
     }
 

data/app/javascript/controllers/creatives/select_mode_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import csrfFetch from '../../lib/api/csrf_fetch'
+import { confirmDialog } from '../../lib/utils/confirm_dialog'
 
 export default class extends Controller {
   static targets = [
@@ -84,7 +85,7 @@ export default class extends Controller {
     if (ids.length === 0) return
 
     const confirmMessage = this.hasDeleteButtonTarget ? this.deleteButtonTarget.dataset.confirm : undefined
-    if (confirmMessage && !window.confirm(confirmMessage)) {
+    if (confirmMessage && !(await confirmDialog(confirmMessage, { danger: true }))) {
       return
     }