Ensure sidebar does not scroll while changing convos (#263)

app/javascript/application.js

@@ -18,3 +18,9 @@ document.addEventListener('turbo:before-stream-render', (event) => {
   console.log(`${stream.getAttribute('action')} event - ${newTimestamp} ${newTimestamp <= oldTimestamp ? 'REORDER!' : ''}`, stream)
   oldTimestamp = newTimestamp
 })
+
+console.log('refresh document')
+document.addEventListener('turbo:visit', (event) => console.log(`visit ${event.detail.action}`))
+document.addEventListener('turbo:morph', () => console.log('morph render'))
+document.addEventListener('turbo:frame-render', () => console.log('frame render'))
+document.addEventListener('turbo:before-stream-render', () => console.log('stream render'))

app/views/conversations/_conversation.html.erb

@@ -15,9 +15,11 @@
 
     <%= link_to conversation.title.presence || "New chat",
       conversation_messages_path(conversation),
-      target: "_top",
       class: "flex-1 pl-2 py-2 truncate text-sm text-opacity-1 w-5 radio-behavior",
-      data: { action: "radio-behavior#select" }
+      data: {
+        turbo_frame: "conversation",
+        action: "radio-behavior#select"
+      }
     %>
 
     <div class="items-center hidden gap-2 pl-2 relationship:flex group-hover:flex">

app/views/messages/_main_column.html.erb

@@ -103,7 +103,7 @@
   <section class="flex flex-col flex-grow overflow-y-auto bg-white dark:bg-gray-800 overflow-x-clip scrollbar-hide" data-controller="scrollable" data-scrollable-not-bottom-class="!block">
 
     <div id="messages" class="relative flex-grow overflow-y-auto overflow-x-clip scrollbar-hide overscroll-contain" data-scrollable-target="scrollable" data-action="scroll->scrollable#scrolled">
-      <div class="w-full md:max-w-none lg:max-w-[700px] xl:max-w-[810px] mx-auto mt-2">
+      <div id="messages-container" class="w-full md:max-w-none lg:max-w-[700px] xl:max-w-[810px] mx-auto mt-2">
         <%= yield :messages %>
       </div>
     </div>

test/application_system_test_case.rb

@@ -121,12 +121,12 @@ def scroll_to_bottom(selector)
     page.execute_script("document.querySelector('#{selector}').scrollTop = document.querySelector('#{selector}').scrollHeight")
   end
 
-  def assert_did_not_scroll(selector = "section #messages")
+  def assert_did_not_scroll(selector = "section #messages-container")
     raise "No block given" unless block_given?
 
-    scroll_position_first_element_relative_viewport = page.evaluate_script("document.querySelector('#{selector}').firstElementChild.getBoundingClientRect().top")
+    scroll_position_first_element_relative_viewport = page.evaluate_script("document.querySelector('#{selector}').children[1].getBoundingClientRect().top")
     yield
-    new_scroll_position_first_element_relative_viewport = page.evaluate_script("document.querySelector('#{selector}').firstElementChild.getBoundingClientRect().top")
+    new_scroll_position_first_element_relative_viewport = page.evaluate_script("document.querySelector('#{selector}').children[1].getBoundingClientRect().top")
 
     assert_equal scroll_position_first_element_relative_viewport,
       new_scroll_position_first_element_relative_viewport,

test/system/conversations/messages_test.rb

@@ -118,7 +118,7 @@ class ConversationMessagesTest < ApplicationSystemTestCase
   test "clicking new compose icon in the top-right starts a new conversation and preserves sidebar scroll" do
     click_text @long_conversation.title
 
-    assert_did_not_scroll("nav") do
+    assert_did_not_scroll("#nav-scrollable") do
       new_chat = node("new", within: this_conversation)
       assert_shows_tooltip new_chat, "New chat"
 

test/system/messages/nav_column_test.rb

@@ -6,6 +6,15 @@ class NavColumnTest < ApplicationSystemTestCase
     login_as @user
   end
 
+  test "clicking conversation in the left column updates the right and preserves scroll position of the left" do
+    resize_browser_to(1400, 500)
+    page.execute_script("document.querySelector('#nav-scrollable').scrollTop = 100") # scroll the nav column down slightly
+
+    assert_did_not_scroll "#nav-scrollable" do
+      click_text conversations(:hello_claude).title
+    end
+  end
+
   test "clicking conversations in the left side updates the right column, the path, and back button works as expected" do
     assistant = @user.assistants.ordered.first