collavre 0.24.0 → 0.25.0

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

@@ -4,10 +4,16 @@ import { attachBundleDragImage } from '../../utils/drag_bundle_image'
 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 csrfFetch, { 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,13 @@ export default class extends Controller {
     this.movingComments = false
     this.manualSearchQuery = null
     this.initialLoadComplete = false
+    this.highlightCreativeId = null
+    this._loadCommentsVersion = 0
+    this.markReadTimeout = null
+    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 +44,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)
@@ -43,7 +57,7 @@ export default class extends Controller {
     // If we have a creativeId from data attribute or parent (unlikely directly on list, 
     // usually set via onPopupOpened), try loading.
     // If not, onPopupOpened will trigger it.
-    if (this.element.dataset.creativeId) {
+    if (this.element.dataset.creativeId && this.element.dataset.docked !== 'true') {
       this.creativeId = this.element.dataset.creativeId
       this.loadInitialComments()
     }
@@ -62,19 +76,36 @@ export default class extends Controller {
   }
 
   handleTopicChange(event) {
+    const nextTopicId = event.detail.topicId
+    if (
+      this.currentTopicId !== undefined &&
+      String(this.currentTopicId || '') === String(nextTopicId || '')
+    ) return
+
     // During notifyChildControllers, topic loading fires change events before
     // onPopupOpened sets up highlightAfterLoad. Suppress these to avoid a
     // race where a non-highlight load overwrites the deep-link highlight load.
     if (this.suppressTopicChangeLoad) {
-      this.currentTopicId = event.detail.topicId
+      this.flushPendingRead()
+      this.currentTopicId = nextTopicId
       return
     }
-    this.currentTopicId = event.detail.topicId
+    this.flushPendingRead()
+    this.currentTopicId = nextTopicId
+    // A user-selected topic supersedes any outstanding deep-link window.
+    // The old request is discarded by the topic/version guards below, while
+    // this replacement load starts from the selected topic's latest messages.
+    this.highlightAfterLoad = null
+    this.highlightCreativeId = null
     this.resetToLatest()
   }
 
   disconnect() {
+    this.flushPendingRead({ keepalive: true })
     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)
@@ -106,9 +137,19 @@ export default class extends Controller {
   }
 
   onPopupOpened({ creativeId, highlightId, topicId } = {}) {
+    this.flushPendingRead()
+    const normalizedCreativeId = String(creativeId || '')
+    const pendingHighlight = String(this.highlightCreativeId || '') === normalizedCreativeId
+      ? this.highlightAfterLoad
+      : null
     this.creativeId = creativeId
+    this.renderedAllTopicIds = null
+    this.renderedAllTopicWatermarks = null
+    this.renderedAllIncludesLegacy = false
+    this.initialLoadComplete = false
     // highlightId from popup args takes precedence, else fallback to URL param if first load
-    this.highlightAfterLoad = highlightId || this.deepLinkCommentId
+    this.highlightAfterLoad = highlightId || pendingHighlight || this.deepLinkCommentId
+    this.highlightCreativeId = this.highlightAfterLoad ? normalizedCreativeId : null
 
     if (topicId !== undefined) {
       this.currentTopicId = topicId
@@ -124,6 +165,15 @@ export default class extends Controller {
   }
 
   onPopupClosed() {
+    this.flushPendingRead()
+    this._loadCommentsVersion += 1
+    this.creativeId = null
+    this.renderedAllTopicIds = null
+    this.renderedAllTopicWatermarks = null
+    this.renderedAllIncludesLegacy = false
+    this.highlightAfterLoad = null
+    this.highlightCreativeId = null
+    this.suppressTopicChangeLoad = false
     this.resetState()
     this.listTarget.innerHTML = ''
     this.initialLoadComplete = false
@@ -152,6 +202,10 @@ 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 requestVersion = ++this._loadCommentsVersion
     const params = {}
     if (this.highlightAfterLoad) {
       params.around_comment_id = this.highlightAfterLoad
@@ -160,12 +214,19 @@ export default class extends Controller {
     const requestTopicId = this.currentTopicId || ""
     const requestCreativeId = this.creativeId
 
-    this.fetchComments(params).then((html) => {
+    this.fetchComments(params, { loadVersion: requestVersion }).then((html) => {
       // Discard stale responses if creative or topic changed while fetching.
       // This prevents a race condition where switching creatives causes
       // the old creative's comments to overwrite the new creative's list.
+      if (requestVersion !== this._loadCommentsVersion) return
       if (this.creativeId !== requestCreativeId) return
-      if (String(this.currentTopicId || "") !== String(requestTopicId)) return
+      // A server-resolved deep link moves currentTopicId off the topic this
+      // request asked for. That is this request's own answer, not a stale one,
+      // so the topic guard has to let it through — otherwise the list sits on
+      // "Loading..." forever for every comment link pointing outside the
+      // restored topic.
+      if (!this.isServerResolvedTopic(requestVersion) &&
+          String(this.currentTopicId || "") !== String(requestTopicId)) return
 
       this.listTarget.innerHTML = html
       this.listTarget.dataset.currentTopicId = this.currentTopicId || ""
@@ -177,6 +238,7 @@ export default class extends Controller {
         this.allNewerLoaded = false // We are likely in middle
         this.highlightComment(this.highlightAfterLoad)
         this.highlightAfterLoad = null
+        this.highlightCreativeId = null
       } else {
         // Standard load -> Scroll to bottom (latest)
         this.scrollToBottom()
@@ -188,26 +250,41 @@ export default class extends Controller {
         this.formController.focusTextarea()
       }
       this.element.dispatchEvent(new CustomEvent('comments--list:loaded', { bubbles: true }))
+      this.reportRenderedAllTopics()
       this.markCommentsRead()
 
     }).catch((error) => {
+      if (requestVersion !== this._loadCommentsVersion) return
+      if (this.creativeId !== requestCreativeId) return
+      if (!this.isServerResolvedTopic(requestVersion) &&
+          String(this.currentTopicId || "") !== String(requestTopicId)) return
       this.listTarget.innerHTML = `<div class="comments-list-error">${error.message}</div>`
     })
   }
 
+  // fetchComments stamps the version of the request whose own response carried
+  // an X-Topic-Id that moved the selection. Only that request may ignore the
+  // stale-topic guard; every other load compares unequal and stays guarded.
+  isServerResolvedTopic(requestVersion) {
+    return this._serverTopicRequestVersion !== undefined &&
+      this._serverTopicRequestVersion === requestVersion
+  }
+
   loadOlderComments() {
     if (this.loadingOlder || this.allOlderLoaded || !this.creativeId) return
     const minId = this.getMinId()
     if (!minId) return
 
+    const requestContext = this.paginationRequestContext()
     this.loadingOlder = true
 
     // Standard Column: Older messages are at Top.
     // We Prepend them.
     const currentScrollHeight = this.listTarget.scrollHeight
 
-    this.fetchComments({ before_id: minId })
+    this.fetchComments({ before_id: minId }, { pagination: true })
       .then((html) => {
+        if (!this.isCurrentPaginationContext(requestContext)) return
         if (html.trim() === '') {
           this.allOlderLoaded = true
           return
@@ -215,6 +292,12 @@ export default class extends Controller {
         // Prepend to start (Visual Top)
         this.listTarget.insertAdjacentHTML('afterbegin', html)
         renderMarkdownInContainer(this.listTarget)
+        const addedTopic = this.recordRenderedAllTopicWatermarks(
+          this.listTarget.querySelectorAll('.comment-item'),
+          { includeNewTopics: true },
+        )
+        if (addedTopic) this.reportRenderedAllTopics()
+        this.markCommentsRead()
 
         // Restore scroll position
         const newScrollHeight = this.listTarget.scrollHeight
@@ -222,7 +305,7 @@ export default class extends Controller {
 
       })
       .finally(() => {
-        this.loadingOlder = false
+        if (this.isCurrentPaginationContext(requestContext)) this.loadingOlder = false
       })
   }
 
@@ -234,10 +317,12 @@ export default class extends Controller {
       return
     }
 
+    const requestContext = this.paginationRequestContext()
     this.loadingNewer = true
 
-    this.fetchComments({ after_id: maxId })
+    this.fetchComments({ after_id: maxId }, { pagination: true })
       .then((html) => {
+        if (!this.isCurrentPaginationContext(requestContext)) return
         if (html.trim() === '') {
 
           this.allNewerLoaded = true
@@ -246,13 +331,34 @@ export default class extends Controller {
         // Append to end (Visual Bottom)
         this.listTarget.insertAdjacentHTML('beforeend', html)
         renderMarkdownInContainer(this.listTarget)
+        const addedTopic = this.recordRenderedAllTopicWatermarks(
+          this.listTarget.querySelectorAll('.comment-item'),
+          { includeNewTopics: true },
+        )
+        if (addedTopic) this.reportRenderedAllTopics()
+        this.markCommentsRead()
       })
       .finally(() => {
-        this.loadingNewer = false
+        if (this.isCurrentPaginationContext(requestContext)) this.loadingNewer = false
       })
   }
 
-  fetchComments(params = {}) {
+  paginationRequestContext() {
+    return {
+      creativeId: this.creativeId,
+      topicId: this.currentTopicId || null,
+      loadVersion: this._loadCommentsVersion,
+    }
+  }
+
+  isCurrentPaginationContext({ creativeId, topicId, loadVersion }) {
+    return this.element.isConnected &&
+      this.creativeId === creativeId &&
+      (this.currentTopicId || null) === topicId &&
+      this._loadCommentsVersion === loadVersion
+  }
+
+  fetchComments(params = {}, { loadVersion, pagination = false } = {}) {
     const urlParams = new URLSearchParams(params)
     if (this.manualSearchQuery) {
       urlParams.set('search', this.manualSearchQuery)
@@ -277,7 +383,27 @@ export default class extends Controller {
       }
 
       const serverTopicId = response.headers.get("X-Topic-Id")
-      if (serverTopicId !== null && serverTopicId !== undefined) {
+      const renderedTopicIds = response.headers.get("X-Rendered-Topic-Ids")
+      const renderedTopicWatermarks = response.headers.get("X-Rendered-Topic-Watermarks")
+      const superseded = loadVersion !== undefined && loadVersion !== this._loadCommentsVersion
+      // Only replace this snapshot for a full list load. Pagination requests
+      // happen later and may observe a topic-strip archive change without
+      // rendering that topic's existing history.
+      if (loadVersion !== undefined && !pagination && !superseded && !this.currentTopicId && renderedTopicIds !== null) {
+        this.renderedAllTopicIds = renderedTopicIds.split(',').filter(Boolean)
+        try {
+          this.renderedAllTopicWatermarks = renderedTopicWatermarks ? JSON.parse(renderedTopicWatermarks) : null
+          this.renderedAllIncludesLegacy = Boolean(this.renderedAllTopicWatermarks && Object.hasOwn(this.renderedAllTopicWatermarks, '_legacy'))
+        } catch (_error) {
+          this.renderedAllTopicWatermarks = null
+          this.renderedAllIncludesLegacy = false
+        }
+      }
+      // A load superseded while in flight must not retopic anything: its own HTML
+      // is dropped, so moving currentTopicId (and the strip, and the form) to its
+      // answer would leave the surviving load rendering into a selection it never
+      // asked for.
+      if (serverTopicId !== null && serverTopicId !== undefined && !pagination && !superseded) {
         // Server says we are in this topic. 
         // If it differs from current, update state.
 
@@ -287,6 +413,12 @@ export default class extends Controller {
 
         if (currentStr !== serverStr) {
           this.currentTopicId = serverTopicId
+          // Tell loadInitialComments' stale-topic guard that this switch is the
+          // answer to the load it is still awaiting. Stamp the version of the
+          // request that actually carried the header, not the controller's
+          // latest: reading the latest would hand the exemption to a newer load
+          // that never asked for a topic switch.
+          this._serverTopicRequestVersion = loadVersion
           // Notify topics controller to update UI
           const event = new CustomEvent("comments--topics:update-selection", { detail: { topicId: serverTopicId } })
           window.dispatchEvent(event)
@@ -296,8 +428,15 @@ export default class extends Controller {
             // Deep link / around_comment_id resolution from server must win over
             // saved topic state for the current popup session.
             this.popupController.topicsController.setOverrideTopicId(serverTopicId)
-            // Update UI and local state without dispatching change event (to avoid loop)
-            this.popupController.topicsController.updateSelectionUI(serverTopicId)
+            // Go through selectTopic, not updateSelectionUI: a deep link can resolve
+            // to an archived topic, whose chip exists only while the archived section
+            // is expanded, and form_controller learns the active topic solely from the
+            // change event — without it a reply posts into the previously selected
+            // conversation. The reload this event would normally trigger is already
+            // ruled out: this.currentTopicId was set to serverTopicId just above, so
+            // handleTopicChange's equality guard returns before resetToLatest() can
+            // discard the highlight window.
+            this.popupController.topicsController.selectTopic(serverTopicId)
 
             // Also update data attribute for CSS scoping
             this.listTarget.dataset.currentTopicId = serverTopicId || ""
@@ -312,6 +451,7 @@ export default class extends Controller {
   }
 
   applySearchQuery(query) {
+    this.flushPendingRead()
     this.resetState()
     this.manualSearchQuery = query
     this.listTarget.innerHTML = this.element.dataset.loadingText || '<div class="loading-spinner">Loading...</div>'
@@ -334,9 +474,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'
@@ -345,18 +493,67 @@ export default class extends Controller {
 
   markCommentsRead() {
     if (!this.creativeId) return
-    window.setTimeout(() => {
-      fetch('/comment_read_pointers/update', {
-        method: 'POST',
-        headers: {
-          'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ creative_id: this.creativeId }),
-      }).catch(() => { /* ignore — creative may have been deleted */ })
+    if (this.markReadTimeout) window.clearTimeout(this.markReadTimeout)
+    const creativeId = this.creativeId
+    const topicId = this.currentTopicId || null
+    const topicIds = topicId ? null : this.renderedAllTopicIds
+    const topicWatermarks = topicId ? null : this.renderedAllTopicWatermarks
+    const pendingRead = { creativeId, topicId, topicIds, topicWatermarks }
+    this.pendingRead = pendingRead
+    this.markReadTimeout = window.setTimeout(() => {
+      this.markReadTimeout = null
+      if (this.pendingRead !== pendingRead) return
+      this.pendingRead = null
+      if (!this.element.isConnected || this.creativeId !== creativeId || (this.currentTopicId || null) !== topicId) return
+
+      this.updateReadPointer(creativeId, topicId, topicIds, topicWatermarks)
     }, 2000);
   }
 
+  flushPendingRead({ keepalive = false } = {}) {
+    const pendingRead = this.pendingRead
+    if (!pendingRead) return
+
+    if (this.markReadTimeout) window.clearTimeout(this.markReadTimeout)
+    this.markReadTimeout = null
+    this.pendingRead = null
+    this.updateReadPointer(
+      pendingRead.creativeId,
+      pendingRead.topicId,
+      pendingRead.topicIds,
+      pendingRead.topicWatermarks,
+      { keepalive }
+    )
+  }
+
+  updateReadPointer(creativeId, topicId, topicIds = null, topicWatermarks = null, { keepalive = false } = {}) {
+    if (!creativeId) return
+
+    csrfFetch('/comment_read_pointers/update', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      keepalive,
+      body: JSON.stringify({
+        creative_id: creativeId,
+        topic_id: topicId,
+        ...(topicIds ? { topic_ids: topicIds } : {}),
+        ...(topicWatermarks ? { topic_watermarks: topicWatermarks } : {}),
+      }),
+    }).then((response) => {
+      if (!response.ok || !this.element.isConnected || this.creativeId !== creativeId || (this.currentTopicId || null) !== topicId) return
+
+      // A successful topic read changes its chip and the aggregate creative
+      // badge. Reload immediately instead of leaving stale counts on screen.
+      this.popupController?.topicsController?.loadTopics?.()
+    }).catch(() => { /* ignore — creative may have been deleted */ })
+  }
+
+  handlePrevMsgUserInput() {
+    this.prevMsgNavigator.notifyUserInput()
+  }
+
   handleScroll() {
     if (!this.initialLoadComplete) return
 
@@ -459,23 +656,104 @@ export default class extends Controller {
     // Actually form_controller handleSubmit calls this list controller? No, distinct.
   }
 
+  // A comment with no topic is never archived, so the empty check also keeps
+  // this off the topics controller for the common case.
+  isArchivedTopicMessage(topicId) {
+    if (!topicId) return false
+    return Boolean(this.popupController?.topicsController?.isArchivedTopic?.(topicId))
+  }
+
+  // All Messages sends a bounded per-topic snapshot so a later archive change
+  // cannot mark comments the list did not render as read. A visible live append
+  // extends that bound for its already-rendered topic before the read debounce
+  // captures it. Only pagination may add a new topic: its comment is already
+  // visible in the DOM. Live streams still fence topics outside the initial
+  // snapshot because older history for those topics may be unseen.
+  recordRenderedAllTopicWatermarks(comments, { includeNewTopics = false } = {}) {
+    if (this.currentTopicId || !Array.isArray(this.renderedAllTopicIds)) return false
+
+    let addedTopic = false
+    const renderedComments = comments instanceof Element ? [comments] : Array.from(comments || [])
+    renderedComments.forEach((comment) => {
+      const topicId = comment.dataset.topicId
+      const commentId = Number.parseInt(comment.dataset.commentId, 10)
+      if (!Number.isSafeInteger(commentId) || commentId <= 0) return
+
+      const watermarkKey = topicId || '_legacy'
+      if (!topicId && !this.renderedAllIncludesLegacy) {
+        if (!includeNewTopics) return
+
+        this.renderedAllIncludesLegacy = true
+        addedTopic = true
+      }
+
+      if (topicId && !this.renderedAllTopicIds.some((id) => String(id) === String(topicId))) {
+        if (!includeNewTopics) return
+
+        this.renderedAllTopicIds.push(String(topicId))
+        addedTopic = true
+      }
+
+      this.renderedAllTopicWatermarks ||= {}
+      const previousId = Number.parseInt(this.renderedAllTopicWatermarks[watermarkKey], 10)
+      if (!Number.isSafeInteger(previousId) || commentId > previousId) {
+        this.renderedAllTopicWatermarks[watermarkKey] = commentId
+      }
+    })
+
+    return addedTopic
+  }
+
+  reportRenderedAllTopics() {
+    if (this.currentTopicId || !Array.isArray(this.renderedAllTopicIds)) return
+
+    this.element.dispatchEvent(new CustomEvent('comments--list:rendered-all-topics', {
+      bubbles: true,
+      detail: {
+        creativeId: this.creativeId,
+        topicIds: this.renderedAllTopicIds,
+        includesLegacy: this.renderedAllIncludesLegacy,
+      },
+    }))
+  }
+
+  isOutsideRenderedAllTopics(topicId) {
+    return Array.isArray(this.renderedAllTopicIds) &&
+      !this.renderedAllTopicIds.some((id) => String(id) === String(topicId))
+  }
+
   handleStreamRender(event) {
     // Only care about streams targeting our list
     if (event.target.target !== 'comments-list') return
 
     // Deduplication: If manually appended by form_controller, block the stream echo.
+    let appendedComment = null
     if (event.target.action === 'append') {
       const templateContent = event.target.templateContent || event.target.querySelector('template')?.content
       const firstChild = templateContent?.firstElementChild
+      appendedComment = firstChild
 
-      // Check for topic context mismatch
+      // Check for topic context mismatch. Runs ahead of the search block below:
+      // both block the append, but only this one badges, and the badge is the
+      // sole notice that an out-of-view conversation moved. Search suppressing
+      // it would hide an archived topic's traffic completely, since the archived
+      // section carries no other signal.
       if (firstChild && firstChild.dataset.topicId !== undefined) {
         const messageTopicId = firstChild.dataset.topicId
         const currentTopicId = this.currentTopicId || ""
 
         // If we are in a specific topic (currentTopicId is set)
-        // AND the message is for a different topic
-        if (currentTopicId && String(currentTopicId) !== String(messageTopicId)) {
+        // AND the message is for a different topic.
+        //
+        // All Messages (currentTopicId === "") takes everything except archived
+        // topics: CommentsController#index filters those out of this view, so
+        // letting a live one in would show a message that vanishes on reload.
+        // Both cases badge the topic instead of appending.
+        const isForeignTopic = currentTopicId
+          ? String(currentTopicId) !== String(messageTopicId)
+          : this.isArchivedTopicMessage(messageTopicId) || this.isOutsideRenderedAllTopics(messageTopicId)
+
+        if (isForeignTopic) {
           event.preventDefault()
           // Dispatch event for topics controller to show badge
           const customEvent = new CustomEvent("comments--topics:new-message", {
@@ -486,6 +764,17 @@ export default class extends Controller {
         }
       }
 
+      // A search-filtered list is the result set of a query, and the match runs
+      // server-side over the raw content. A live append carries no verdict on
+      // whether it matches, so letting it in drops an unrelated message into the
+      // results — and, when there were none, takes the "no results" notice with
+      // it (comments--placeholder clears on any .comment-item arriving). Blocked
+      // like history mode below; the next search or reset re-queries the server.
+      if (this.manualSearchQuery) {
+        event.preventDefault()
+        return
+      }
+
       if (firstChild && firstChild.id && document.getElementById(firstChild.id)) {
         event.preventDefault()
         return
@@ -501,7 +790,13 @@ export default class extends Controller {
       // Optional: Show a "New messages" indicator?
       // For now, strict requirement: "do not add to DOM".
     } else {
-
+      // The append is about to become visible. Mark it read after the existing
+      // debounce, so a reconnect or popup close cannot turn a viewed live
+      // message back into an unread one.
+      if (event.target.action === 'append') {
+        this.recordRenderedAllTopicWatermarks(appendedComment)
+        this.markCommentsRead()
+      }
     }
   }
 
@@ -696,9 +991,8 @@ export default class extends Controller {
         btnRect,
         (topic) => {
           if (topic.created) {
-            // Topic was just created with comments moved — refresh
             this.clearSelection()
-            this.loadInitialComments()
+            this.switchToTopic(topic.id)
           } else {
             this.handleMoveToTopic({ detail: { commentIds, targetTopicId: topic.id } })
           }
@@ -890,7 +1184,7 @@ export default class extends Controller {
     if (!topicId) return
     const topicsController = this.popupController?.topicsController
     if (topicsController?.selectTopic) {
-      topicsController.selectTopic(topicId)
+      topicsController.selectTopic(topicId, { userInitiated: true })
     } else {
       this.currentTopicId = topicId
       this.resetToLatest()
@@ -1078,28 +1372,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 +1389,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 +1409,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(() => {