refactor(app): wire timeline scroll intent helper

Author: Astro-Han

packages/app/src/pages/session/message-timeline.tsx

@@ -10,20 +10,24 @@ import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
-import { ScrollView, type ScrollViewScrollIntent } from "@opencode-ai/ui/scroll-view"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import type { AssistantMessage, Message as MessageType, Part, TextPart, UserMessage } from "@opencode-ai/sdk/v2"
 import { showToast } from "@opencode-ai/ui/toast"
 import { Binary } from "@opencode-ai/util/binary"
 import { getFilename } from "@opencode-ai/util/path"
-import { shouldMarkBoundaryGesture, normalizeWheelDelta } from "@/pages/session/message-gesture"
 import { collectTimelineScrollMetrics } from "@/pages/session/session-timeline-scroll-anchors"
 import {
-  classifyTimelineScrollGesture,
   type TimelineScrollControllerResult,
   type TimelineScrollIntent,
-  type TimelineScrollMetrics,
   type TimelineScrollObservation,
 } from "@/pages/session/session-timeline-scroll-controller"
+import {
+  createTouchTimelineScrollIntent,
+  createWheelTimelineScrollIntent,
+  scrollViewIntentToTimelineIntent,
+  shouldMarkLegacyScrollIntent,
+  shouldMarkTimelineBoundaryGesture,
+} from "@/pages/session/session-timeline-scroll-intents"
 import { createTimelineStaging } from "@/pages/session/session-timeline-staging"
 import { taskDescription } from "@/pages/session/task-description"
 import { buildTurnMessagesByUserID, emptyAssistantMessages } from "@/pages/session/session-messages"
@@ -120,78 +124,6 @@ const messageComments = (parts: Part[]): MessageComment[] =>
 
 export { taskDescription }
 
-const boundaryTarget = (root: HTMLElement, target: EventTarget | null) => {
-  const current = target instanceof Element ? target : undefined
-  const nested = current?.closest("[data-scrollable]")
-  if (!nested || nested === root) return root
-  if (!(nested instanceof HTMLElement)) return root
-  return nested
-}
-
-const boundaryGesture = (input: {
-  root: HTMLDivElement
-  target: EventTarget | null
-  delta: number
-}) => {
-  const target = boundaryTarget(input.root, input.target)
-  if (target === input.root) return { nestedScrollable: false, atNestedBoundary: true }
-  return {
-    nestedScrollable: true,
-    atNestedBoundary: shouldMarkBoundaryGesture({
-      delta: input.delta,
-      scrollTop: target.scrollTop,
-      scrollHeight: target.scrollHeight,
-      clientHeight: target.clientHeight,
-    }),
-  }
-}
-
-const markBoundaryGesture = (input: {
-  root: HTMLDivElement
-  target: EventTarget | null
-  delta: number
-  onMarkScrollGesture: (target?: EventTarget | null) => void
-}) => {
-  const boundary = boundaryGesture(input)
-  if (!boundary.nestedScrollable || boundary.atNestedBoundary) {
-    input.onMarkScrollGesture(input.root)
-  }
-}
-
-const scrollViewMetricsToTimelineMetrics = (metrics: {
-  scrollTop: number
-  scrollHeight: number
-  clientHeight: number
-}): TimelineScrollMetrics => {
-  const max = Math.max(0, metrics.scrollHeight - metrics.clientHeight)
-  const distanceFromBottom = Math.max(0, max - metrics.scrollTop)
-  return {
-    scrollTop: metrics.scrollTop,
-    scrollHeight: metrics.scrollHeight,
-    clientHeight: metrics.clientHeight,
-    distanceFromTop: metrics.scrollTop,
-    distanceFromBottom,
-    nearTop: metrics.scrollTop <= 12,
-    nearBottom: distanceFromBottom <= 2,
-  }
-}
-
-const scrollViewIntentToTimelineIntent = (intent: ScrollViewScrollIntent): TimelineScrollIntent => {
-  if (intent.type === "keyboard_scroll") {
-    return { type: "keyboard_scroll", key: intent.key, source: "scroll_view" }
-  }
-  return {
-    type: intent.type,
-    source: "scroll_view",
-    metrics: scrollViewMetricsToTimelineMetrics(intent.metrics),
-  }
-}
-
-const shouldMarkLegacyScrollIntent = (intent: ScrollViewScrollIntent) => {
-  if (intent.type === "keyboard_scroll") return true
-  return intent.type === "scrollbar_drag_start"
-}
-
 export function MessageTimeline(props: {
   sessionID: string
   sessionKey: string
@@ -870,26 +802,15 @@ export function MessageTimeline(props: {
             props.onTimelineScrollIntent(scrollViewIntentToTimelineIntent(intent))
           }}
           onWheel={(e) => {
-            const root = e.currentTarget
-            const delta = normalizeWheelDelta({
+            const result = createWheelTimelineScrollIntent({
+              root: e.currentTarget,
+              target: e.target,
               deltaY: e.deltaY,
               deltaMode: e.deltaMode,
-              rootHeight: root.clientHeight,
-            })
-            if (!delta) return
-            const boundary = boundaryGesture({ root, target: e.target, delta })
-            const gesture = classifyTimelineScrollGesture({
-              deltaY: delta,
-              viewportHeight: root.clientHeight,
-              nestedScrollable: boundary.nestedScrollable,
-              atNestedBoundary: boundary.atNestedBoundary,
             })
-            props.onTimelineScrollIntent({
-              type: "wheel_scroll",
-              source: "timeline",
-              ...gesture,
-            })
-            markBoundaryGesture({ root, target: e.target, delta, onMarkScrollGesture: props.onMarkScrollGesture })
+            if (!result) return
+            props.onTimelineScrollIntent(result.intent)
+            if (shouldMarkTimelineBoundaryGesture(result.boundary)) props.onMarkScrollGesture(e.currentTarget)
           }}
           onTouchStart={(e) => {
             touchGesture = e.touches[0]?.clientY
@@ -903,20 +824,14 @@ export function MessageTimeline(props: {
             const delta = prev - next
             if (!delta) return
 
-            const root = e.currentTarget
-            const boundary = boundaryGesture({ root, target: e.target, delta })
-            const gesture = classifyTimelineScrollGesture({
-              deltaY: delta,
-              viewportHeight: root.clientHeight,
-              nestedScrollable: boundary.nestedScrollable,
-              atNestedBoundary: boundary.atNestedBoundary,
-            })
-            props.onTimelineScrollIntent({
-              type: "touch_scroll",
-              source: "timeline",
-              ...gesture,
+            const result = createTouchTimelineScrollIntent({
+              root: e.currentTarget,
+              target: e.target,
+              delta,
             })
-            markBoundaryGesture({ root, target: e.target, delta, onMarkScrollGesture: props.onMarkScrollGesture })
+            if (!result) return
+            props.onTimelineScrollIntent(result.intent)
+            if (shouldMarkTimelineBoundaryGesture(result.boundary)) props.onMarkScrollGesture(e.currentTarget)
           }}
           onTouchEnd={() => {
             touchGesture = undefined