collavre 0.23.0 → 0.24.0

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/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'))
+    })
+})

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

@@ -468,6 +468,53 @@ export default class extends Controller {
         this.restoreSelection()
     }
 
+    openTopicListPopup(event) {
+        const btnRect = event.currentTarget.getBoundingClientRect()
+
+        const openWith = (popup) => {
+            popup.openForTopics(
+                {
+                    topics: this.topics || [],
+                    archivedTopics: this.archivedTopics || [],
+                    mainTopicId: this.mainTopicId,
+                    allMessagesLabel: this.element.dataset.topicMainText || 'All Messages'
+                },
+                btnRect,
+                (item) => this.selectTopic(item.id),
+                this.element
+            )
+        }
+
+        let modal = document.getElementById('topic-list-modal')
+        if (modal) {
+            const popup = this.application.getControllerForElementAndIdentifier(modal, 'topic-list')
+            if (popup) openWith(popup)
+            return
+        }
+
+        modal = document.createElement('div')
+        modal.id = 'topic-list-modal'
+        modal.className = 'common-popup'
+        modal.style.display = 'none'
+        modal.dataset.controller = 'topic-list'
+        modal.innerHTML = `
+          <button type="button" class="popup-close-btn" data-topic-list-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-list-target="input">
+          <ul class="common-popup-list" data-popup-list data-topic-list-target="list"></ul>
+        `
+        // Append into the chat box (this.element === #comments-popup) so the popup
+        // is caged within it and shares its stacking context.
+        this.element.appendChild(modal)
+
+        requestAnimationFrame(() => {
+            const popup = this.application.getControllerForElementAndIdentifier(modal, 'topic-list')
+            if (popup) openWith(popup)
+            else console.error('topic-list controller not found after creation')
+        })
+    }
+
     showInput(event) {
         event.preventDefault()
         const container = this.element.querySelector('[data-comments--topics-target="creationContainer"]')

data/app/javascript/controllers/common_popup_controller.js

@@ -22,8 +22,8 @@ export default class extends Controller {
         this.popup = null
     }
 
-    open(anchorRect) {
-        this.popup.showAt(anchorRect)
+    open(anchorRect, boundsElement = null) {
+        this.popup.showAt(anchorRect, boundsElement)
     }
 
     close() {

data/app/javascript/controllers/index.js

@@ -22,6 +22,7 @@ import ClickTargetController from "./click_target_controller"
 import TabsController from "./tabs_controller"
 import LinkCreativeController from "./link_creative_controller"
 import TopicSearchController from "./topic_search_controller"
+import TopicListController from "./topic_list_controller"
 import CommonPopupController from "./common_popup_controller"
 import CommentController from "./comment_controller"
 import ReactionPickerController from "./reaction_picker_controller"
@@ -59,6 +60,7 @@ export {
   TabsController,
   LinkCreativeController,
   TopicSearchController,
+  TopicListController,
   CommonPopupController,
   CommentController,
   ReactionPickerController,
@@ -98,6 +100,7 @@ export function registerControllers(application) {
   application.register("tabs", TabsController)
   application.register("link-creative", LinkCreativeController)
   application.register("topic-search", TopicSearchController)
+  application.register("topic-list", TopicListController)
   application.register("common-popup", CommonPopupController)
   application.register("comment", CommentController)
   application.register("reaction-picker", ReactionPickerController)

data/app/javascript/controllers/search_popup_controller.js

@@ -9,9 +9,14 @@ export default class extends Controller {
     }
     document.addEventListener('keydown', this._escHandler)
 
-    // Global keyboard shortcut: Cmd/Ctrl + K to open search
+    // Global keyboard shortcut: Cmd/Ctrl + K to open search.
+    // Skip when focus is inside an editable element (input, textarea,
+    // contenteditable, or the inline Lexical editor) so that element's own
+    // Ctrl+K behavior (e.g. delete-to-end-of-line) takes precedence over the
+    // global search popup.
     this._shortcutHandler = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        if (this._isEditableTarget(e.target)) return
         e.preventDefault()
         this.toggle()
       }
@@ -19,6 +24,17 @@ export default class extends Controller {
     document.addEventListener('keydown', this._shortcutHandler)
   }
 
+  _isEditableTarget(target) {
+    const el = target instanceof Element ? target : document.activeElement
+    if (!el || typeof el.closest !== 'function') return false
+    const tag = el.tagName
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true
+    if (el.isContentEditable) return true
+    return Boolean(
+      el.closest('[contenteditable]:not([contenteditable="false"]), [data-lexical-editor-root]')
+    )
+  }
+
   disconnect() {
     document.removeEventListener('keydown', this._escHandler)
     document.removeEventListener('keydown', this._shortcutHandler)

data/app/javascript/controllers/topic_list_controller.js

@@ -0,0 +1,78 @@
+import CommonPopupController from './common_popup_controller'
+
+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>`
+
+export default class extends CommonPopupController {
+    static targets = ['input', 'list', 'close']
+
+    connect() {
+        super.connect()
+        this._allItems = []
+        this._onInputBound = this._onInput.bind(this)
+        this._onKeydownBound = this.handleInputKeydown.bind(this)
+        this._onCloseBound = () => this.close()
+        this.inputTarget.addEventListener('input', this._onInputBound)
+        this.inputTarget.addEventListener('keydown', this._onKeydownBound)
+        this.closeTarget.addEventListener('click', this._onCloseBound)
+    }
+
+    disconnect() {
+        this.inputTarget?.removeEventListener('input', this._onInputBound)
+        this.inputTarget?.removeEventListener('keydown', this._onKeydownBound)
+        this.closeTarget?.removeEventListener('click', this._onCloseBound)
+        super.disconnect()
+    }
+
+    openForTopics({ topics = [], archivedTopics = [], mainTopicId = null, allMessagesLabel = 'All Messages' }, anchorRect, onSelectCallback, boundsElement = null) {
+        this.onSelectCallback = onSelectCallback
+        this._allItems = this._buildItems({ topics, archivedTopics, mainTopicId, allMessagesLabel })
+        this.inputTarget.value = ''
+        this.setItems(this._allItems)
+        super.open(anchorRect, boundsElement)
+        requestAnimationFrame(() => this.inputTarget.focus())
+    }
+
+    _buildItems({ topics, archivedTopics, mainTopicId, allMessagesLabel }) {
+        const main = mainTopicId ? topics.find(t => String(t.id) === String(mainTopicId)) : null
+        const others = topics.filter(t => !main || String(t.id) !== String(mainTopicId))
+        const items = []
+        if (main) items.push({ id: main.id, label: `#${main.name}`, archived: false })
+        others.forEach(t => items.push({ id: t.id, label: `#${t.name}`, archived: false }))
+        items.push({ id: '', label: `📋 ${allMessagesLabel}`, archived: false })
+        archivedTopics.forEach(t => items.push({ id: t.id, label: `#${t.name}`, archived: true }))
+        return items
+    }
+
+    _onInput() {
+        const q = this.inputTarget.value.toLowerCase().trim()
+        if (!q) { this.setItems(this._allItems); return }
+        const filtered = this._allItems.filter(i => (i.label || '').toLowerCase().includes(q))
+        this.setItems(filtered)
+    }
+
+    handleInputKeydown(event) {
+        if (this.handleKey(event)) return
+        if (event.key === 'Escape') this.close()
+    }
+
+    select(item) {
+        if (this.onSelectCallback) this.onSelectCallback(item)
+        this.close()
+    }
+
+    renderItem(item) {
+        const escaped = String(item.label || '')
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+        if (item.archived) {
+            return `<span class="topic-list-item topic-list-item--archived">${ICON_ARCHIVE} ${escaped}</span>`
+        }
+        return `<span class="topic-list-item">${escaped}</span>`
+    }
+
+    dispatchClose(reason) {
+        this.onSelectCallback = null
+        super.dispatchClose(reason)
+    }
+}

data/app/javascript/lib/__tests__/common_popup_bounds.test.js

@@ -0,0 +1,58 @@
+/**
+ * @jest-environment jsdom
+ */
+import CommonPopup from '../common_popup'
+
+// Cage-inside-bounds positioning: when a boundsElement is passed to showAt,
+// updatePosition must clamp the popup within that element's rect (not the
+// viewport) and cap its size so a long list scrolls inside instead of spilling.
+describe('CommonPopup bounds clamping', () => {
+    const BOUNDS = { left: 100, top: 100, right: 500, bottom: 700, width: 400, height: 600 }
+
+    let element, boundsElement
+
+    const build = ({ popupWidth, popupHeight }) => {
+        boundsElement = document.createElement('div')
+        boundsElement.getBoundingClientRect = () => BOUNDS
+
+        element = document.createElement('div')
+        // offsetParent is the bounds (chat box); parentRect === BOUNDS.
+        Object.defineProperty(element, 'offsetParent', { value: boundsElement, configurable: true })
+        Object.defineProperty(element, 'offsetWidth', { value: popupWidth, configurable: true })
+        Object.defineProperty(element, 'offsetHeight', { value: popupHeight, configurable: true })
+        document.body.appendChild(element)
+        return new CommonPopup(element, { listElement: document.createElement('ul') })
+    }
+
+    afterEach(() => { document.body.innerHTML = '' })
+
+    test('clamps an anchor near the right/bottom edge back inside the bounds', () => {
+        const popup = build({ popupWidth: 320, popupHeight: 400 })
+        popup._boundsElement = boundsElement
+        // Anchor button hard against the right edge — would overflow the box.
+        // maxLeft = right - width - pad = 500 - 320 - 8 = 172; parent coords: 172 - 100 = 72
+        popup.updatePosition({ left: 450, bottom: 130 })
+        expect(element.style.left).toBe('72px')
+        // viewportTop = 130 + 4 = 134; within [108, 292] → 134; parent coords: 134 - 100 = 34
+        expect(element.style.top).toBe('34px')
+    })
+
+    test('caps max size to fit inside the bounds', () => {
+        const popup = build({ popupWidth: 320, popupHeight: 400 })
+        popup._boundsElement = boundsElement
+        popup.updatePosition({ left: 200, bottom: 200 })
+        // inner box = dimension - 2*pad
+        expect(element.style.maxWidth).toBe('384px')
+        expect(element.style.maxHeight).toBe('584px')
+    })
+
+    test('falls back to viewport clamping when no bounds element is set', () => {
+        const popup = build({ popupWidth: 320, popupHeight: 400 })
+        popup._boundsElement = null
+        // jsdom viewport defaults 1024x768; anchor at 0 → left clamps to padding 8, parent 0
+        Object.defineProperty(element, 'offsetParent', { value: null, configurable: true })
+        popup.updatePosition({ left: 0, bottom: 0 })
+        expect(element.style.maxHeight).toBe('')
+        expect(element.style.left).toBe('8px')
+    })
+})

data/app/javascript/lib/common_popup.js

@@ -12,9 +12,13 @@ export default class CommonPopup {
     this.handleOutsideClick = this.handleOutsideClick.bind(this)
   }
 
-  showAt(anchorRect) {
+  showAt(anchorRect, boundsElement = null) {
     if (!this.element) return
 
+    // When set, the popup is caged inside this element's rect (e.g. the chat
+    // box) instead of the viewport — see updatePosition.
+    this._boundsElement = boundsElement
+
     // Re-opening while already open (e.g. clicking the same typo mark twice):
     // a listener from the previous open is still live, so the opening mousedown
     // would bubble to it and hide() the popup right after we set display:block,
@@ -58,11 +62,26 @@ export default class CommonPopup {
     let viewportTop = (rect?.bottom || 0) + 4
 
     const { offsetWidth: width, offsetHeight: height } = this.element
-    const maxLeft = window.innerWidth - width - boundsPadding
-    const maxTop = window.innerHeight - height - boundsPadding
 
-    viewportLeft = Math.max(boundsPadding, Math.min(viewportLeft, maxLeft))
-    viewportTop = Math.max(boundsPadding, Math.min(viewportTop, maxTop))
+    // Clamp within a container's rect when bounded (keeps the popup caged inside
+    // the chat box), otherwise within the viewport.
+    const bounds = this._boundsElement?.getBoundingClientRect?.()
+    let minLeft = boundsPadding
+    let minTop = boundsPadding
+    let maxLeft = window.innerWidth - width - boundsPadding
+    let maxTop = window.innerHeight - height - boundsPadding
+    if (bounds) {
+      minLeft = bounds.left + boundsPadding
+      minTop = bounds.top + boundsPadding
+      maxLeft = bounds.right - width - boundsPadding
+      maxTop = bounds.bottom - height - boundsPadding
+      // Cap size so a long list scrolls inside the box instead of spilling past it.
+      this.element.style.maxWidth = `${bounds.width - boundsPadding * 2}px`
+      this.element.style.maxHeight = `${bounds.height - boundsPadding * 2}px`
+    }
+
+    viewportLeft = Math.max(minLeft, Math.min(viewportLeft, maxLeft))
+    viewportTop = Math.max(minTop, Math.min(viewportTop, maxTop))
 
     const left = viewportLeft - parentRect.left + parentScrollX
     const top = viewportTop - parentRect.top + parentScrollY