fix(app): preserve context tooltip on scroll

Author: AidenGeunGeun

packages/app/e2e/regression/session-timeline-accessibility.spec.ts

@@ -17,6 +17,45 @@ test("space activates a focused timeline button instead of scrolling", async ({
   expect(await scroller.evaluate((element) => element.scrollTop)).toBe(before)
 })
 
+test("keeps the context usage tooltip open while its sticky trigger remains hovered", async ({ page }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem("opencode.global.dat:tabsInfoPopup", JSON.stringify({ dismissed: true }))
+  })
+  await setupTimeline(page, {
+    settings: { newLayoutDesigns: true },
+    seedHistory: true,
+    viewport: { width: 1200, height: 600 },
+    reducedMotion: true,
+  })
+
+  const button = page.getByRole("button", { name: "View context usage" })
+  const tooltip = page.locator('[data-component="tooltip-v2"]')
+  const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
+
+  await button.hover()
+  await expect(tooltip).toBeVisible()
+  const before = await scroller.evaluate((element) => element.scrollTop)
+  await scroller.evaluate(
+    (element) =>
+      new Promise<void>((resolve) => {
+        element.addEventListener("scroll", () => resolve(), { once: true })
+        element.scrollBy(0, -100)
+      }),
+  )
+
+  await expect.poll(() => scroller.evaluate((element) => element.scrollTop)).not.toBe(before)
+  await expect.poll(() => button.evaluate((element) => element.matches(":hover"))).toBe(true)
+  await expect(tooltip).toBeVisible()
+  await page.keyboard.press("Escape")
+  await expect(tooltip).toBeHidden()
+
+  await page.mouse.move(0, 0)
+  await button.hover()
+  await expect(tooltip).toBeVisible()
+  await page.mouse.move(0, 0)
+  await expect(tooltip).toBeHidden()
+})
+
 function lines(count: number) {
   return Array.from({ length: count }, (_, index) => `line ${index + 1}`).join("\n")
 }

packages/app/src/components/session-context-usage.tsx

@@ -138,7 +138,12 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
 
   return (
     <Show when={params.id}>
-      <TooltipV2 value={tooltipValue()} placement={props.placement ?? "top"} shift={-8}>
+      <TooltipV2
+        value={tooltipValue()}
+        placement={props.placement ?? "top"}
+        shift={-8}
+        keepOpenOnScroll={buttonAppearance() === "v2"}
+      >
         <Switch>
           <Match when={variant() === "indicator"}>{circle()}</Match>
           <Match when={buttonAppearance() === "v2"}>

packages/ui/src/v2/components/tooltip-v2.tsx

@@ -1,5 +1,6 @@
 import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
-import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { createEffect, createRenderEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
 import "./tooltip-v2.css"
@@ -11,6 +12,7 @@ export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
   contentStyle?: JSX.CSSProperties
   inactive?: boolean
   forceOpen?: boolean
+  keepOpenOnScroll?: boolean
 }
 
 export function TooltipV2(props: TooltipV2Props) {
@@ -27,6 +29,7 @@ export function TooltipV2(props: TooltipV2Props) {
     "contentStyle",
     "inactive",
     "forceOpen",
+    "keepOpenOnScroll",
     "ignoreSafeArea",
     "value",
   ])
@@ -62,7 +65,35 @@ export function TooltipV2(props: TooltipV2Props) {
     close()
   }
 
+  let scrollingTrigger = false
+  let scrollFrame: number | undefined
+
+  const clearScroll = () => {
+    if (scrollFrame !== undefined) cancelAnimationFrame(scrollFrame)
+    scrollFrame = undefined
+    scrollingTrigger = false
+  }
+
+  createRenderEffect(() => {
+    if (!local.keepOpenOnScroll) return
+    makeEventListener(
+      window,
+      "scroll",
+      (event) => {
+        if (!state.open || !ref || !(event.target instanceof Node) || !event.target.contains(ref)) return
+        clearScroll()
+        scrollingTrigger = true
+        scrollFrame = requestAnimationFrame(() => {
+          scrollingTrigger = false
+          scrollFrame = undefined
+        })
+      },
+      { capture: true },
+    )
+  })
+
   const leave = () => {
+    clearScroll()
     if (!inside()) close()
     drop()
   }
@@ -97,6 +128,7 @@ export function TooltipV2(props: TooltipV2Props) {
           onOpenChange={(open) => {
             if (local.forceOpen) return
             if (state.block && open) return
+            if (!open && scrollingTrigger && ref?.matches(":hover")) return
             if (justClickedTrigger) {
               justClickedTrigger = false
               return
@@ -110,6 +142,7 @@ export function TooltipV2(props: TooltipV2Props) {
             data-component="tooltip-v2-trigger"
             class={local.class}
             onPointerDownCapture={arm}
+            onBlur={clearScroll}
             onKeyDownCapture={(event: KeyboardEvent) => {
               if (event.key !== "Enter" && event.key !== " ") return
               arm()
@@ -130,6 +163,7 @@ export function TooltipV2(props: TooltipV2Props) {
               data-force-open={local.forceOpen}
               class={local.contentClass}
               style={local.contentStyle}
+              onEscapeKeyDown={clearScroll}
               onPointerDownOutside={(e) => {
                 if (ref === e.target || (e.target instanceof Node && ref?.contains(e.target))) {
                   justClickedTrigger = true