collavre 0.23.0 → 0.24.1

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

@@ -6,8 +6,14 @@ 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'
+import PrevMessageNavigator from './prev_message_navigator'
 // CommonPopup is now used via TopicSearchController (Stimulus)
 
+// Gestures that mean the user moved the list themselves, invalidating the
+// previous-message anchor. Only user input fires these — our own smooth scroll
+// does not.
+const PREV_MSG_USER_INPUT_EVENTS = ['wheel', 'touchstart', 'keydown', 'pointerdown']
+
 export default class extends Controller {
   static targets = ['list']
 
@@ -20,8 +26,10 @@ export default class extends Controller {
     this.movingComments = false
     this.manualSearchQuery = null
     this.initialLoadComplete = false
+    this.prevMsgNavigator = new PrevMessageNavigator()
 
     this.handleScroll = this.handleScroll.bind(this)
+    this.handlePrevMsgUserInput = this.handlePrevMsgUserInput.bind(this)
     this.handleChange = this.handleChange.bind(this)
     this.handleClick = this.handleClick.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
@@ -33,6 +41,9 @@ export default class extends Controller {
     this.handleStreamRender = this.handleStreamRender.bind(this)
 
     this.listTarget.addEventListener('scroll', this.handleScroll)
+    PREV_MSG_USER_INPUT_EVENTS.forEach((name) => {
+      this.listTarget.addEventListener(name, this.handlePrevMsgUserInput)
+    })
     this.listTarget.addEventListener('change', this.handleChange)
     this.listTarget.addEventListener('click', this.handleClick)
     this.listTarget.addEventListener('submit', this.handleSubmit)
@@ -75,6 +86,9 @@ export default class extends Controller {
 
   disconnect() {
     this.listTarget.removeEventListener('scroll', this.handleScroll)
+    PREV_MSG_USER_INPUT_EVENTS.forEach((name) => {
+      this.listTarget.removeEventListener(name, this.handlePrevMsgUserInput)
+    })
     this.listTarget.removeEventListener('change', this.handleChange)
     this.listTarget.removeEventListener('click', this.handleClick)
     this.listTarget.removeEventListener('submit', this.handleSubmit)
@@ -152,6 +166,9 @@ export default class extends Controller {
     if (!this.creativeId) return
     if (this.selection.size > 0) return
 
+    // The list is about to be replaced wholesale; any anchor we hold is stale.
+    this.prevMsgNavigator.reset()
+
     const params = {}
     if (this.highlightAfterLoad) {
       params.around_comment_id = this.highlightAfterLoad
@@ -334,9 +351,17 @@ export default class extends Controller {
     return parseInt(last.dataset.commentId)
   }
 
+  // Public seam for sibling controllers that scroll the list on their own
+  // (e.g. the review-quote chip). Lets them drop the prev-message anchor at the
+  // choke point without reaching into the navigator's internals.
+  notifyProgrammaticScroll() {
+    this.prevMsgNavigator?.notifyProgrammaticScroll()
+  }
+
   highlightComment(commentId) {
     const comment = document.getElementById(`comment_${commentId}`)
     if (!comment) return
+    this.prevMsgNavigator?.notifyProgrammaticScroll()
     comment.scrollIntoView({ behavior: 'auto', block: 'center' })
     comment.classList.add('highlight-flash')
     comment.dataset.highlighted = 'true'
@@ -357,6 +382,10 @@ export default class extends Controller {
     }, 2000);
   }
 
+  handlePrevMsgUserInput() {
+    this.prevMsgNavigator.notifyUserInput()
+  }
+
   handleScroll() {
     if (!this.initialLoadComplete) return
 
@@ -1078,28 +1107,16 @@ export default class extends Controller {
 
   scrollToPreviousMessage() {
     const list = this.listTarget
-    const items = Array.from(list.querySelectorAll('.comment-item'))
-    if (items.length === 0) return
-
-    const listRect = list.getBoundingClientRect()
-    const viewportTop = listRect.top
-
-    let currentIdx = -1
-    for (let i = 0; i < items.length; i++) {
-      const rect = items[i].getBoundingClientRect()
-      if (rect.top >= viewportTop - 2) {
-        currentIdx = i
-        break
-      }
-    }
-
-    if (currentIdx === -1) currentIdx = items.length - 1
+    const elements = Array.from(list.querySelectorAll('.comment-item'))
+    if (elements.length === 0) return
 
-    const currentItem = items[currentIdx]
-    const currentRect = currentItem.getBoundingClientRect()
-    const isAtTop = Math.abs(currentRect.top - viewportTop) < 4
+    const viewportTop = list.getBoundingClientRect().top
+    const measured = elements.map((el) => ({
+      id: el.dataset.commentId,
+      top: el.getBoundingClientRect().top,
+    }))
 
-    const targetIdx = isAtTop ? currentIdx - 1 : currentIdx
+    const targetIdx = this.prevMsgNavigator.resolveTargetIndex(measured, viewportTop)
     if (targetIdx < 0) {
       if (!this.allOlderLoaded) {
         this.loadOlderComments()
@@ -1107,8 +1124,9 @@ export default class extends Controller {
       return
     }
 
-    const target = items[targetIdx]
+    const target = elements[targetIdx]
     const targetTop = target.offsetTop - list.offsetTop
+    this.prevMsgNavigator.commit(measured[targetIdx].id, measured[targetIdx].top)
     list.scrollTo({ top: targetTop, behavior: 'smooth' })
     this.stickToBottom = false
 
@@ -1126,6 +1144,9 @@ export default class extends Controller {
   }
 
   scrollToBottom() {
+    // A jump to latest we did not initiate via the button - drop the anchor so
+    // the next previous-message click resolves from here, not a stale target.
+    this.prevMsgNavigator?.notifyProgrammaticScroll()
     // In column reverse, bottom of scroll might be tricky.
     // Easiest is to set scrollTop to a large value.
     requestAnimationFrame(() => {

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

@@ -0,0 +1,94 @@
+// Tracks where the "previous message" button left off.
+//
+// The button scrolls with `behavior: 'smooth'`, so a rapid second click arrives
+// while the list is still mid-animation. Deriving the current position purely
+// from geometry at that moment picks the item we just left (it has not reached
+// the top yet), which makes the list bounce up and down instead of walking
+// backwards. Remembering the last target as an anchor keeps each click stepping
+// one message further back.
+//
+// The anchor is dropped once the user moves the list themselves, so geometry
+// takes over from wherever they landed. Invalidation is driven by input events
+// rather than scroll events: a scroll event cannot be attributed to the user
+// without guessing how long our own animation runs, and guessing short brings
+// the bounce back. Dropping the anchor is always the safe direction — a settled
+// list resolves correctly from geometry alone.
+//
+// Kept free of DOM access so it can be unit tested: jsdom has no layout engine,
+// so the controller measures the items and passes `{ id, top }` pairs in.
+
+// Sub-pixel scroll offsets (HiDPI, browser rounding) mean an item parked at the
+// top is rarely at exactly `viewportTop`.
+const TOP_TOLERANCE = 4
+
+export default class PrevMessageNavigator {
+  constructor() {
+    this.anchorId = null
+  }
+
+  // items: `{ id, top }` in DOM order (oldest first), top relative to viewport.
+  // Returns the index to scroll to, or -1 when there is nothing older in the
+  // list (the caller then loads older comments).
+  resolveTargetIndex(items, viewportTop) {
+    if (items.length === 0) return -1
+
+    if (this.anchorId !== null) {
+      const anchorIdx = items.findIndex((item) => item.id === this.anchorId)
+      if (anchorIdx !== -1 && this.anchorIsOnItsWay(items[anchorIdx].top, viewportTop)) {
+        return anchorIdx - 1
+      }
+      this.anchorId = null
+    }
+
+    let currentIdx = items.findIndex((item) => item.top >= viewportTop - TOP_TOLERANCE)
+    if (currentIdx === -1) currentIdx = items.length - 1
+
+    const isAtTop = Math.abs(items[currentIdx].top - viewportTop) < TOP_TOLERANCE
+    return isAtTop ? currentIdx - 1 : currentIdx
+  }
+
+  // The anchor travels from wherever it sat when we committed to `viewportTop`,
+  // and nothing else moves it. Outside that corridor the list was scrolled by
+  // something other than us - a new message arriving, a permalink jump - none of
+  // which fire a user input event, so the anchor would otherwise survive and wedge
+  // the button (anchored on the oldest item, every click resolves to -1 forever).
+  //
+  // The corridor spans both endpoints because the anchor can approach the top from
+  // either side: usually from above (the next message back), but from below when
+  // the click started between messages and we pulled the partially visible one up.
+  //
+  // Comparing the anchor against its own start position rather than the list's
+  // scroll offset keeps this correct when older comments are prepended: that
+  // shifts `scrollTop` but leaves the anchor where it is on screen.
+  anchorIsOnItsWay(anchorTop, viewportTop) {
+    const low = Math.min(this.anchorStartTop, viewportTop) - TOP_TOLERANCE
+    const high = Math.max(this.anchorStartTop, viewportTop) + TOP_TOLERANCE
+    return anchorTop >= low && anchorTop <= high
+  }
+
+  // Called once we start scrolling towards `id`, which currently sits at `top`.
+  commit(id, top) {
+    this.anchorId = id
+    this.anchorStartTop = top
+  }
+
+  // Called when the user interacts with the list (wheel, touch, key, pointer).
+  notifyUserInput() {
+    this.anchorId = null
+  }
+
+  // Called when our own code repositions the list without going through the
+  // button - jumping to the newest message, a permalink highlight. These fire no
+  // user input event, and a small jump can leave the anchor inside the corridor
+  // above, where geometry cannot tell it apart from our own in-flight scroll. The
+  // corridor still catches larger jumps, but the caller drops the anchor at these
+  // known sites so a still-visible message is never skipped.
+  notifyProgrammaticScroll() {
+    this.anchorId = null
+  }
+
+  // Called when the list contents are replaced wholesale.
+  reset() {
+    this.anchorId = null
+  }
+}

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

@@ -7,7 +7,7 @@ const ICON_ARCHIVE = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none
 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>`
 
 export default class extends Controller {
-    static targets = ["list"]
+    static targets = ["list", "creationContainer"]
 
     connect() {
         this.topics = []
@@ -189,15 +189,37 @@ export default class extends Controller {
             }
         }
 
-        // Add create button container (write permission is sufficient for topic creation)
-        if (canCreateTopic) {
-            html += `<span class="topic-creation-container" data-comments--topics-target="creationContainer"
-                          data-action="dragover->comments--topics#handleAddButtonDragOver dragleave->comments--topics#handleDragLeave drop->comments--topics#handleAddButtonDrop">
-                  <button class="add-topic-btn" data-action="click->comments--topics#showInput">+</button>
-                 </span>`
+        this.listTarget.innerHTML = html
+
+        // The create button lives outside the scrolling strip so it stays reachable
+        // without horizontal scrolling, no matter how many topics there are.
+        this.renderCreationContainer(canCreateTopic)
+    }
+
+    // Write permission is sufficient for topic creation.
+    renderCreationContainer(canCreateTopic) {
+        if (!this.hasCreationContainerTarget) return
+        const container = this.creationContainerTarget
+
+        container.hidden = !canCreateTopic
+        if (!canCreateTopic) {
+            container.innerHTML = ''
+            return
         }
 
-        this.listTarget.innerHTML = html
+        // renderTopics re-runs on every topic broadcast; don't wipe a name being typed.
+        // `creating` marks an already-submitted name, whose input must give way to the button.
+        // A draft only survives re-renders of the creative it was typed for: chat-nav
+        // switches creatives without blurring, and posting it there is the wrong creative.
+        const draftIsCurrent = String(this._draftCreativeId) === String(this.creativeId)
+        if (!this.creating && draftIsCurrent && container.querySelector('.topic-input')) return
+
+        this.renderAddButton()
+    }
+
+    renderAddButton() {
+        this.creationContainerTarget.innerHTML =
+            `<button class="add-topic-btn" data-action="click->comments--topics#showInput">+</button>`
     }
 
     handleDragOver(event) {
@@ -404,7 +426,7 @@ export default class extends Controller {
                 }
                 this.loadTopics()
             } else {
-                alertDialog("Failed to delete topic")
+                alertDialog(this._i18n("delete_error"))
             }
         } catch (e) {
             console.error("Error deleting topic", e)
@@ -431,7 +453,7 @@ export default class extends Controller {
                 }
                 this.loadTopics()
             } else {
-                alertDialog("Failed to archive topic")
+                alertDialog(this._i18n("archive_error"))
             }
         } catch (e) {
             console.error("Error archiving topic", e)
@@ -454,7 +476,7 @@ export default class extends Controller {
             if (response.ok) {
                 this.loadTopics()
             } else {
-                alertDialog("Failed to restore topic")
+                alertDialog(this._i18n("restore_error"))
             }
         } catch (e) {
             console.error("Error restoring topic", e)
@@ -468,11 +490,59 @@ 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"]')
-        if (!container) return
+        if (!this.hasCreationContainerTarget) return
+        const container = this.creationContainerTarget
 
+        this._draftCreativeId = this.creativeId
         const placeholder = this.listTarget.dataset.newTopicPlaceholder || "New Topic"
         container.innerHTML = `<input type="text" class="topic-input" placeholder="${placeholder}" 
                                   data-action="keydown->comments--topics#handleInputKey blur->comments--topics#resetInput"
@@ -485,9 +555,8 @@ export default class extends Controller {
     resetInput() {
         // Small delay to allow enter key to process first if that was the cause
         setTimeout(() => {
-            const container = this.element.querySelector('[data-comments--topics-target="creationContainer"]')
-            if (container && !this.creating) {
-                container.innerHTML = `<button class="add-topic-btn" data-action="click->comments--topics#showInput">+</button>`
+            if (this.hasCreationContainerTarget && !this.creating) {
+                this.renderAddButton()
             }
         }, 200)
     }
@@ -614,7 +683,7 @@ export default class extends Controller {
                 this.renderTopics(this.topics, this.canManageTopics, this.canCreateTopic)
                 this.restoreSelection()
             } else {
-                alertDialog("Failed to update topic")
+                alertDialog(this._i18n("update_error"))
                 this.loadTopics() // Reload to restore state
             }
         } catch (e) {
@@ -705,7 +774,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 {
-                alertDialog("Failed to create topic")
+                alertDialog(this._i18n("create_error"))
             }
         } catch (e) {
             console.error("Error creating topic", e)
@@ -953,6 +1022,21 @@ export default class extends Controller {
         }
     }
 
+    // Localized strings are handed down from the ERB partial as data
+    // attributes; the English literals are last-resort fallbacks for when the
+    // controller is mounted without them.
+    _i18n(key) {
+        const translations = {
+            set_agent_error: this.element.dataset.topicSetAgentError || 'Unable to assign the agent to this topic.',
+            create_error: this.element.dataset.topicCreateError || 'Unable to create the topic.',
+            update_error: this.element.dataset.topicUpdateError || 'Unable to update the topic.',
+            delete_error: this.element.dataset.topicDeleteError || 'Unable to delete the topic.',
+            archive_error: this.element.dataset.topicArchiveError || 'Unable to archive the topic.',
+            restore_error: this.element.dataset.topicRestoreError || 'Unable to restore the topic.'
+        }
+        return translations[key] || key
+    }
+
     async setTopicPrimaryAgent(topicId, agent) {
         if (!this.creativeId) return
 
@@ -966,13 +1050,23 @@ export default class extends Controller {
                 body: JSON.stringify({ agent_id: agent.id })
             })
 
+            const data = await response.json().catch(() => ({}))
+
             if (!response.ok) {
-                const data = await response.json()
-                console.error('Failed to set primary agent:', data.error)
+                alertDialog(data.error || this._i18n("set_agent_error"))
+                return
             }
-            // Topic update comes via WebSocket broadcast
+
+            // Render the avatar from the response rather than waiting for the
+            // WebSocket broadcast. A dropped broadcast (e.g. the topics channel
+            // subscription was refused) would otherwise leave the avatar
+            // invisible until the next page load. The broadcast still runs and
+            // propagates the change to other connected users; re-applying it
+            // here is a no-op merge.
+            if (data.topic) this.updateTopicInList(data.topic)
         } catch (e) {
             console.error('Error setting primary agent', e)
+            alertDialog(this._i18n("set_agent_error"))
         }
     }
 

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