[Bug Fix] Message Scroller: direction-aware scroll button visibility

updateButton now derives each button's active state from its own
data-direction — an end button activates when away from the bottom, a
start button when away from the top — and iterates all button targets.
Previously a start-direction button used end logic, so it was inert at
the live edge and showed at the wrong end. (cubic P2)

Author: djalmaaraujo

docs/app/javascript/controllers/ruby_ui/message_scroller_controller.js

@@ -309,16 +309,27 @@ export default class extends Controller {
     return scrollHeight - (scrollTop + clientHeight) <= this.endThresholdValue;
   }
 
+  isAtStart() {
+    if (!this.hasViewportTarget) return true;
+    return this.viewportTarget.scrollTop <= this.endThresholdValue;
+  }
+
   hasOverflow() {
     if (!this.hasViewportTarget) return false;
     return this.viewportTarget.scrollHeight - this.viewportTarget.clientHeight > this.endThresholdValue;
   }
 
+  // Each button activates based on its own direction: an end button when the
+  // reader is away from the bottom, a start button when away from the top.
   updateButton() {
     if (!this.hasButtonTarget) return;
-    const active = this.hasOverflow() && !this.isAtEnd();
-    this.buttonTarget.setAttribute("data-active", active ? "true" : "false");
-    // Remove the inert button from the tab order so there are no ghost stops.
-    this.buttonTarget.setAttribute("tabindex", active ? "0" : "-1");
+    const overflow = this.hasOverflow();
+    this.buttonTargets.forEach((button) => {
+      const toStart = button.dataset.direction === "start";
+      const active = overflow && (toStart ? !this.isAtStart() : !this.isAtEnd());
+      button.setAttribute("data-active", active ? "true" : "false");
+      // Remove the inert button from the tab order so there are no ghost stops.
+      button.setAttribute("tabindex", active ? "0" : "-1");
+    });
   }
 }

gem/lib/ruby_ui/message_scroller/message_scroller_controller.js

@@ -309,16 +309,27 @@ export default class extends Controller {
     return scrollHeight - (scrollTop + clientHeight) <= this.endThresholdValue;
   }
 
+  isAtStart() {
+    if (!this.hasViewportTarget) return true;
+    return this.viewportTarget.scrollTop <= this.endThresholdValue;
+  }
+
   hasOverflow() {
     if (!this.hasViewportTarget) return false;
     return this.viewportTarget.scrollHeight - this.viewportTarget.clientHeight > this.endThresholdValue;
   }
 
+  // Each button activates based on its own direction: an end button when the
+  // reader is away from the bottom, a start button when away from the top.
   updateButton() {
     if (!this.hasButtonTarget) return;
-    const active = this.hasOverflow() && !this.isAtEnd();
-    this.buttonTarget.setAttribute("data-active", active ? "true" : "false");
-    // Remove the inert button from the tab order so there are no ghost stops.
-    this.buttonTarget.setAttribute("tabindex", active ? "0" : "-1");
+    const overflow = this.hasOverflow();
+    this.buttonTargets.forEach((button) => {
+      const toStart = button.dataset.direction === "start";
+      const active = overflow && (toStart ? !this.isAtStart() : !this.isAtEnd());
+      button.setAttribute("data-active", active ? "true" : "false");
+      // Remove the inert button from the tab order so there are no ghost stops.
+      button.setAttribute("tabindex", active ? "0" : "-1");
+    });
   }
 }