fix(content): cancel follow authorization on delegated scrollbar drag

Author: molvqingtai

src/app/content/components/message-list.browser.test.tsx

@@ -510,19 +510,20 @@ describe('MessageList authorized follow and sole scroll ownership (acceptance re
       {
         name: 'scrollbar-drag',
         dispatch: async () => {
-          // The repository ScrollBar follows the Radix hover model: it mounts only after a
-          // real scroll/hover of the scroll area. Drive a real nonzero scroll plus the native
-          // scroll/pointerenter inputs, then explicitly await and assert its presence before
-          // the drag. A programmatic offset change carries no user intent, so the authorized
-          // follow under test is not cancelled by this setup.
+          // The repository Radix ScrollBar follows the hover model: it is absent at rest and
+          // mounts only on real scroll/hover. Prove the full path — no mounted scrollbar, an
+          // outstanding authorized follow, real overflow, hover-mount, then a drag on its
+          // actual thumb descendant. The delegated root listener (production) is the only
+          // thing that can cancel here; without it this control fails.
+          expect(document.querySelector('[data-slot="scroll-area-scrollbar"]')).toBeNull()
+          scrollParent.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
           scrollParent.scrollTop = 100
           scrollParent.dispatchEvent(new Event('scroll', { bubbles: true }))
-          scrollParent.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
-          await vi.waitFor(() => expect(document.querySelector('[data-slot="scroll-area-scrollbar"]')).not.toBeNull(), {
+          await vi.waitFor(() => expect(document.querySelector('[data-slot="scroll-area-thumb"]')).not.toBeNull(), {
             timeout: 5000
           })
           document
-            .querySelector('[data-slot="scroll-area-scrollbar"]')!
+            .querySelector('[data-slot="scroll-area-thumb"]')!
             .dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true }))
         }
       }

src/app/content/components/message-list.tsx

@@ -69,16 +69,26 @@ const MessageListFollow: FC<{ itemKeys: readonly string[] }> = ({ itemKeys }) =>
   // geometry (scroll events), and real manual-intent cancellation. No timers, frame loops,
   // debounce, polling, or Resize/Mutation observers are involved.
   useEffect(() => {
-    const root = actionRef.current?.closest('[data-slot="message-scroller"]')
+    const root = actionRef.current?.closest<HTMLElement>('[data-slot="message-scroller"]')
     const viewport = root?.querySelector<HTMLElement>('[data-slot="message-scroller-viewport"]')
-    if (!viewport) return
+    if (!viewport || !root) return
 
     const cancelAuthorization = () => {
       authorizationRef.current = null
     }
     const onKeyDown = (event: KeyboardEvent) => {
       if (NAV_SCROLL_KEYS.has(event.key)) cancelAuthorization()
     }
+    // Scrollbar drags cancel through one delegated listener on the constantly mounted
+    // scroller root: the repository Radix ScrollBar only mounts on hover/scroll, so binding
+    // the scrollbar element itself at mount would miss every later drag. Only pointerdowns
+    // originating inside the repository scrollbar subtree cancel; every other pointer target
+    // (messages, content, viewport, selection, clicks) leaves the authorization untouched.
+    const onPointerDown = (event: PointerEvent) => {
+      if ((event.target as HTMLElement | null)?.closest('[data-slot="scroll-area-scrollbar"]')) {
+        cancelAuthorization()
+      }
+    }
     const retargetIfAdvanced = () => {
       const authorization = authorizationRef.current
       if (!authorization) return
@@ -105,15 +115,14 @@ const MessageListFollow: FC<{ itemKeys: readonly string[] }> = ({ itemKeys }) =>
     viewport.addEventListener('keydown', onKeyDown)
     viewport.addEventListener('scroll', retargetIfAdvanced, { passive: true })
     viewport.addEventListener('scrollend', onScrollEnd)
-    const scrollbar = root?.querySelector('[data-slot="scroll-area-scrollbar"]')
-    scrollbar?.addEventListener('pointerdown', cancelAuthorization)
+    root.addEventListener('pointerdown', onPointerDown)
     return () => {
       viewport.removeEventListener('wheel', cancelAuthorization)
       viewport.removeEventListener('touchmove', cancelAuthorization)
       viewport.removeEventListener('keydown', onKeyDown)
       viewport.removeEventListener('scroll', retargetIfAdvanced)
       viewport.removeEventListener('scrollend', onScrollEnd)
-      scrollbar?.removeEventListener('pointerdown', cancelAuthorization)
+      root.removeEventListener('pointerdown', onPointerDown)
     }
   }, [scrollToEnd])