Connect messages with outline items

This commit visually connects the actual messages with the thread
outline using two markers:

* Message headers display the same colored markers as outline items
* The outline item/branch for the currently visible message is
  highlighted

Author: dutow

app/assets/stylesheets/components/messages.css

@@ -346,3 +346,21 @@ summary.attachment-info {
   white-space: pre-wrap;
   overflow-x: auto;
 }
+
+.message-branch-0 .message-header,
+.message-branch-1 .message-header,
+.message-branch-2 .message-header,
+.message-branch-3 .message-header,
+.message-branch-4 .message-header,
+.message-branch-5 .message-header {
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding-left: calc(var(--spacing-5) - 4px);
+}
+
+.message-branch-0 .message-header { border-left-color: #2563eb; }
+.message-branch-1 .message-header { border-left-color: #7c3aed; }
+.message-branch-2 .message-header { border-left-color: #f59e0b; }
+.message-branch-3 .message-header { border-left-color: #10b981; }
+.message-branch-4 .message-header { border-left-color: #ef4444; }
+.message-branch-5 .message-header { border-left-color: #0ea5e9; }

app/assets/stylesheets/layouts/topic-view.css

@@ -209,6 +209,17 @@
 .branch-details.branch-4 { border-left-color: #ef4444; }
 .branch-details.branch-5 { border-left-color: #0ea5e9; }
 
+.outline-item.outline-active {
+  background: var(--color-bg-hover);
+  border-left-width: 4px;
+  font-weight: var(--font-weight-medium);
+}
+
+summary.outline-active {
+  background: var(--color-bg-hover);
+  border-radius: var(--border-radius-sm);
+}
+
 .outline-content {
   display: flex;
   justify-content: space-between;

app/controllers/topics_controller.rb

@@ -309,6 +309,11 @@ def build_thread_outline(messages_scope)
 
     assign_branch_segments!
     @has_multiple_branches = @thread_outline.map { |entry| entry[:branch_segment_index] }.uniq.size > 1
+
+    # Build message_id -> branch_index mapping for message rendering
+    @message_branch_index = @thread_outline.each_with_object({}) do |entry, hash|
+      hash[entry[:message].id] = entry[:branch_index]
+    end
   end
 
   def preload_read_state!

app/javascript/controllers/thread_outline_controller.js

@@ -0,0 +1,76 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.activeItem = null
+    this.setupObserver()
+  }
+
+  disconnect() {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+  }
+
+  setupObserver() {
+    const options = {
+      root: null,
+      rootMargin: "-20% 0px -60% 0px",
+      threshold: 0
+    }
+
+    this.observer = new IntersectionObserver((entries) => {
+      this.handleIntersection(entries)
+    }, options)
+
+    document.querySelectorAll(".message-card[id^='message-']").forEach((card) => {
+      this.observer.observe(card)
+    })
+  }
+
+  handleIntersection(entries) {
+    let visibleMessages = []
+
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        visibleMessages.push({
+          element: entry.target,
+          top: entry.boundingClientRect.top
+        })
+      }
+    })
+
+    if (visibleMessages.length === 0) return
+
+    visibleMessages.sort((a, b) => a.top - b.top)
+    const topMessage = visibleMessages[0].element
+    const messageId = topMessage.id.replace("message-", "")
+
+    this.highlightOutlineItem(messageId)
+  }
+
+  highlightOutlineItem(messageId) {
+    if (this.activeItem) {
+      this.activeItem.classList.remove("outline-active")
+    }
+    if (this.activeSummary) {
+      this.activeSummary.classList.remove("outline-active")
+    }
+
+    const outlineItem = this.element.querySelector(`a[href="#message-${messageId}"]`)
+    if (outlineItem) {
+      const itemContainer = outlineItem.closest(".outline-item") || outlineItem
+      itemContainer.classList.add("outline-active")
+      this.activeItem = itemContainer
+
+      const parentDetails = outlineItem.closest("details.branch-details")
+      if (parentDetails) {
+        const summary = parentDetails.querySelector(":scope > summary")
+        if (summary) {
+          summary.classList.add("outline-active")
+          this.activeSummary = summary
+        }
+      }
+    }
+  }
+}

app/views/topics/_message.html.slim

@@ -1,4 +1,5 @@
-.message-card id=message_dom_id(message) class=("reply-message" if message.reply_to_id)
+- message_classes = [("reply-message" if message.reply_to_id), ("message-branch-#{local_assigns[:branch_index]}" unless local_assigns[:branch_index].nil?)].compact.join(" ")
+.message-card id=message_dom_id(message) class=message_classes
   - if (mid_anchor = message_id_anchor(message))
     a.message-id-anchor id=mid_anchor aria-hidden="true"
   - if local_assigns[:is_first_unread]

app/views/topics/show.html.slim

@@ -100,7 +100,7 @@
     details.sidebar-section open=true
       summary.sidebar-heading Thread Outline
       - if @thread_outline.present?
-        .thread-outline
+        .thread-outline data-controller="thread-outline"
           - @thread_outline.chunk_while { |a, b| a[:branch_segment_index] == b[:branch_segment_index] }.each do |segment|
             - first = segment.first
             - first_msg = first[:message]
@@ -199,7 +199,8 @@
     - if user_signed_in? && !first_unread_found && !@read_message_ids&.dig(message.id)
       - is_first_unread = true
       - first_unread_found = true
-    = render 'message', message: message, number: @message_numbers[message.id], is_first_unread: is_first_unread
+    - branch_index = @message_branch_index&.dig(message.id)
+    = render 'message', message: message, number: @message_numbers[message.id], is_first_unread: is_first_unread, branch_index: branch_index
 
 .topic-navigation
   = link_to "← Back to Topics", topics_path, class: "back-link"