From 317c75b3ba7d76f40f08e5e00db7a7d342396d77 Mon Sep 17 00:00:00 2001
From: kilock <731052835@qq.com>
Date: Thu, 13 Aug 2026 19:29:56 +0800
Subject: [PATCH 1/3] fix(sidebar): keep navigation hover under pointer

---
 src/__tests__/scroll-hover.test.ts        | 106 ++++++++++++++++++++++
 src/components/settings/NavItem.vue       |   1 +
 src/components/sidebar/SidebarContent.vue |  10 ++
 src/lib/scroll-hover.ts                   |  82 +++++++++++++++++
 src/style.css                             |  12 ++-
 5 files changed, 210 insertions(+), 1 deletion(-)
 create mode 100644 src/__tests__/scroll-hover.test.ts
 create mode 100644 src/lib/scroll-hover.ts

diff --git a/src/__tests__/scroll-hover.test.ts b/src/__tests__/scroll-hover.test.ts
new file mode 100644
index 0000000..28a2798
--- /dev/null
+++ b/src/__tests__/scroll-hover.test.ts
@@ -0,0 +1,106 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import type { FrameScheduler } from '../lib/scroll-hover'
+import { createScrollHover } from '../lib/scroll-hover'
+
+function createScheduler() {
+  let nextHandle = 1
+  const callbacks = new Map<number, FrameRequestCallback>()
+  const scheduler: FrameScheduler = {
+    request(callback) {
+      const handle = nextHandle++
+      callbacks.set(handle, callback)
+      return handle
+    },
+    cancel(handle) {
+      callbacks.delete(handle)
+    },
+  }
+  return {
+    scheduler,
+    flush() {
+      const pending = [...callbacks.values()]
+      callbacks.clear()
+      pending.forEach(callback => callback(0))
+    },
+    pending: () => callbacks.size,
+  }
+}
+
+function createFixture() {
+  function createItem() {
+    const attributes = new Set<string>()
+    const item = {
+      closest: () => item,
+      setAttribute: (name: string) => attributes.add(name),
+      removeAttribute: (name: string) => attributes.delete(name),
+    } as unknown as HTMLElement
+    return { attributes, item }
+  }
+
+  const first = createItem()
+  const second = createItem()
+  let hit: Element | null = first.item
+  const scope = {
+    contains: (target: Element) => target === first.item || target === second.item,
+    ownerDocument: {
+      elementFromPoint: () => hit,
+    },
+  } as unknown as HTMLElement
+  return {
+    first,
+    second,
+    scope,
+    setHit: (target: Element | null) => hit = target,
+  }
+}
+
+test('moves hover to the element under the stationary pointer while scrolling', () => {
+  const frame = createScheduler()
+  const fixture = createFixture()
+  const hover = createScrollHover(frame.scheduler)
+
+  hover.pointerMove({ clientX: 20, clientY: 30, currentTarget: fixture.scope } as unknown as PointerEvent)
+  assert.equal(fixture.first.attributes.has('data-pointer-hover'), true)
+
+  fixture.setHit(fixture.second.item)
+  hover.start({ currentTarget: fixture.scope } as unknown as Event)
+  frame.flush()
+
+  assert.equal(fixture.first.attributes.has('data-pointer-hover'), false)
+  assert.equal(fixture.second.attributes.has('data-pointer-hover'), true)
+  assert.equal(frame.pending(), 1)
+})
+
+test('keeps syncing frames until scrollend', () => {
+  const frame = createScheduler()
+  const fixture = createFixture()
+  const hover = createScrollHover(frame.scheduler)
+
+  hover.start({ currentTarget: fixture.scope } as unknown as Event)
+  assert.equal(frame.pending(), 1)
+
+  frame.flush()
+  assert.equal(frame.pending(), 1)
+
+  hover.end({ currentTarget: fixture.scope } as unknown as Event)
+  frame.flush()
+  assert.equal(frame.pending(), 0)
+})
+
+test('pointerleave and dispose clear managed hover state', () => {
+  const frame = createScheduler()
+  const fixture = createFixture()
+  const hover = createScrollHover(frame.scheduler)
+
+  hover.pointerMove({ clientX: 20, clientY: 30, currentTarget: fixture.scope } as unknown as PointerEvent)
+  hover.pointerLeave()
+  assert.equal(fixture.first.attributes.has('data-pointer-hover'), false)
+
+  hover.pointerMove({ clientX: 20, clientY: 30, currentTarget: fixture.scope } as unknown as PointerEvent)
+  hover.end({ currentTarget: fixture.scope } as unknown as Event)
+  hover.dispose()
+
+  assert.equal(fixture.first.attributes.has('data-pointer-hover'), false)
+  assert.equal(frame.pending(), 0)
+})
diff --git a/src/components/settings/NavItem.vue b/src/components/settings/NavItem.vue
index a80c14b..075475c 100644
--- a/src/components/settings/NavItem.vue
+++ b/src/components/settings/NavItem.vue
@@ -26,6 +26,7 @@ const rowClass = 'w-full justify-start gap-2.5 pl-3.5! pr-3! font-[430] tracking
 
 <template>
   <Button
+    data-settings-nav-item
     variant="ghost"
     :class="[rowClass, active && 'bg-sidebar-accent text-foreground!']"
   >
diff --git a/src/components/sidebar/SidebarContent.vue b/src/components/sidebar/SidebarContent.vue
index 7d2a95e..0a80d2d 100644
--- a/src/components/sidebar/SidebarContent.vue
+++ b/src/components/sidebar/SidebarContent.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { onBeforeUnmount } from 'vue'
 import { cn } from '#/lib/utils'
+import { createScrollHover } from '#/lib/scroll-hover'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
 }>()
+
+const scrollHover = createScrollHover()
+
+onBeforeUnmount(scrollHover.dispose)
 </script>
 
 <template>
@@ -12,6 +18,10 @@ const props = defineProps<{
     data-slot="sidebar-content"
     data-sidebar="content"
     :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+    @pointermove="scrollHover.pointerMove"
+    @pointerleave="scrollHover.pointerLeave"
+    @scroll.passive="scrollHover.start"
+    @scrollend="scrollHover.end"
   >
     <slot />
   </div>
diff --git a/src/lib/scroll-hover.ts b/src/lib/scroll-hover.ts
new file mode 100644
index 0000000..b602f85
--- /dev/null
+++ b/src/lib/scroll-hover.ts
@@ -0,0 +1,82 @@
+export interface FrameScheduler {
+  request(callback: FrameRequestCallback): number
+  cancel(handle: number): void
+}
+
+const browserFrameScheduler: FrameScheduler = {
+  request: callback => requestAnimationFrame(callback),
+  cancel: handle => cancelAnimationFrame(handle),
+}
+
+export function createScrollHover(
+  scheduler: FrameScheduler = browserFrameScheduler,
+) {
+  let pointer: { x: number, y: number } | undefined
+  let hovered: HTMLElement | undefined
+  let frame: number | undefined
+  let scrolling = false
+  let scope: HTMLElement | undefined
+
+  function setHovered(next: HTMLElement | undefined): void {
+    if (hovered === next)
+      return
+    hovered?.removeAttribute('data-pointer-hover')
+    next?.setAttribute('data-pointer-hover', '')
+    hovered = next
+  }
+
+  function sync(scope: HTMLElement): void {
+    if (!pointer)
+      return setHovered(undefined)
+    const hit = scope.ownerDocument.elementFromPoint(pointer.x, pointer.y)
+    const target = hit?.closest<HTMLElement>('[data-settings-nav-item]')
+    setHovered(target && scope.contains(target) ? target : undefined)
+  }
+
+  function scheduleSync(): void {
+    if (frame !== undefined)
+      return
+    frame = scheduler.request(() => {
+      frame = undefined
+      if (scope)
+        sync(scope)
+      if (scrolling)
+        scheduleSync()
+    })
+  }
+
+  function pointerMove(event: PointerEvent): void {
+    pointer = { x: event.clientX, y: event.clientY }
+    sync(event.currentTarget as HTMLElement)
+  }
+
+  function pointerLeave(): void {
+    pointer = undefined
+    setHovered(undefined)
+  }
+
+  function start(event: Event): void {
+    scope = event.currentTarget as HTMLElement
+    if (!scrolling) {
+      scrolling = true
+    }
+    scheduleSync()
+  }
+
+  function end(event: Event): void {
+    scope = event.currentTarget as HTMLElement
+    scrolling = false
+    scheduleSync()
+  }
+
+  function dispose(): void {
+    scrolling = false
+    if (frame !== undefined)
+      scheduler.cancel(frame)
+    frame = undefined
+    scope = undefined
+    setHovered(undefined)
+  }
+
+  return { pointerMove, pointerLeave, start, end, dispose }
+}
diff --git a/src/style.css b/src/style.css
index 97ff2b8..59d3d39 100644
--- a/src/style.css
+++ b/src/style.css
@@ -396,7 +396,17 @@
     background-color: var(--ui-pressed);
     transition-duration: 40ms;
   }
-
+  /* Chromium can retain the old :hover target during compositor scrolling.
+     SidebarContent explicitly hit-tests NavItem hover each frame. */
+  [data-sidebar="content"] [data-button][data-variant="ghost"][data-settings-nav-item]::before {
+    transition-property: scale;
+  }
+  [data-sidebar="content"] [data-button][data-variant="ghost"][data-settings-nav-item]:hover::before {
+    background-color: transparent;
+  }
+  [data-sidebar="content"] [data-button][data-variant="ghost"][data-settings-nav-item][data-pointer-hover]::before {
+    background-color: var(--btn-ghost-hover);
+  }
   /* ── Button: BRAND — solid scheme-color CTA (e.g. chat Send) ─────────────────
      Fill + hover/press live on a ::before shell (same model as primary/ghost),
      so the press shrinks only the fill and the glyph never moves. Press scale

From 5c17687dd03b3b81a25452222ebb9d8c0a3e5eca Mon Sep 17 00:00:00 2001
From: kilock <731052835@qq.com>
Date: Thu, 13 Aug 2026 19:30:44 +0800
Subject: [PATCH 2/3] refactor(sidebar): remove hover test seam

---
 src/__tests__/scroll-hover.test.ts | 106 -----------------------------
 src/lib/scroll-hover.ts            |  18 +----
 2 files changed, 3 insertions(+), 121 deletions(-)
 delete mode 100644 src/__tests__/scroll-hover.test.ts

diff --git a/src/__tests__/scroll-hover.test.ts b/src/__tests__/scroll-hover.test.ts
deleted file mode 100644
index 28a2798..0000000
--- a/src/__tests__/scroll-hover.test.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import assert from 'node:assert/strict'
-import test from 'node:test'
-import type { FrameScheduler } from '../lib/scroll-hover'
-import { createScrollHover } from '../lib/scroll-hover'
-
-function createScheduler() {
-  let nextHandle = 1
-  const callbacks = new Map<number, FrameRequestCallback>()
-  const scheduler: FrameScheduler = {
-    request(callback) {
-      const handle = nextHandle++
-      callbacks.set(handle, callback)
-      return handle
-    },
-    cancel(handle) {
-      callbacks.delete(handle)
-    },
-  }
-  return {
-    scheduler,
-    flush() {
-      const pending = [...callbacks.values()]
-      callbacks.clear()
-      pending.forEach(callback => callback(0))
-    },
-    pending: () => callbacks.size,
-  }
-}
-
-function createFixture() {
-  function createItem() {
-    const attributes = new Set<string>()
-    const item = {
-      closest: () => item,
-      setAttribute: (name: string) => attributes.add(name),
-      removeAttribute: (name: string) => attributes.delete(name),
-    } as unknown as HTMLElement
-    return { attributes, item }
-  }
-
-  const first = createItem()
-  const second = createItem()
-  let hit: Element | null = first.item
-  const scope = {
-    contains: (target: Element) => target === first.item || target === second.item,
-    ownerDocument: {
-      elementFromPoint: () => hit,
-    },
-  } as unknown as HTMLElement
-  return {
-    first,
-    second,
-    scope,
-    setHit: (target: Element | null) => hit = target,
-  }
-}
-
-test('moves hover to the element under the stationary pointer while scrolling', () => {
-  const frame = createScheduler()
-  const fixture = createFixture()
-  const hover = createScrollHover(frame.scheduler)
-
-  hover.pointerMove({ clientX: 20, clientY: 30, currentTarget: fixture.scope } as unknown as PointerEvent)
-  assert.equal(fixture.first.attributes.has('data-pointer-hover'), true)
-
-  fixture.setHit(fixture.second.item)
-  hover.start({ currentTarget: fixture.scope } as unknown as Event)
-  frame.flush()
-
-  assert.equal(fixture.first.attributes.has('data-pointer-hover'), false)
-  assert.equal(fixture.second.attributes.has('data-pointer-hover'), true)
-  assert.equal(frame.pending(), 1)
-})
-
-test('keeps syncing frames until scrollend', () => {
-  const frame = createScheduler()
-  const fixture = createFixture()
-  const hover = createScrollHover(frame.scheduler)
-
-  hover.start({ currentTarget: fixture.scope } as unknown as Event)
-  assert.equal(frame.pending(), 1)
-
-  frame.flush()
-  assert.equal(frame.pending(), 1)
-
-  hover.end({ currentTarget: fixture.scope } as unknown as Event)
-  frame.flush()
-  assert.equal(frame.pending(), 0)
-})
-
-test('pointerleave and dispose clear managed hover state', () => {
-  const frame = createScheduler()
-  const fixture = createFixture()
-  const hover = createScrollHover(frame.scheduler)
-
-  hover.pointerMove({ clientX: 20, clientY: 30, currentTarget: fixture.scope } as unknown as PointerEvent)
-  hover.pointerLeave()
-  assert.equal(fixture.first.attributes.has('data-pointer-hover'), false)
-
-  hover.pointerMove({ clientX: 20, clientY: 30, currentTarget: fixture.scope } as unknown as PointerEvent)
-  hover.end({ currentTarget: fixture.scope } as unknown as Event)
-  hover.dispose()
-
-  assert.equal(fixture.first.attributes.has('data-pointer-hover'), false)
-  assert.equal(frame.pending(), 0)
-})
diff --git a/src/lib/scroll-hover.ts b/src/lib/scroll-hover.ts
index b602f85..c607444 100644
--- a/src/lib/scroll-hover.ts
+++ b/src/lib/scroll-hover.ts
@@ -1,16 +1,4 @@
-export interface FrameScheduler {
-  request(callback: FrameRequestCallback): number
-  cancel(handle: number): void
-}
-
-const browserFrameScheduler: FrameScheduler = {
-  request: callback => requestAnimationFrame(callback),
-  cancel: handle => cancelAnimationFrame(handle),
-}
-
-export function createScrollHover(
-  scheduler: FrameScheduler = browserFrameScheduler,
-) {
+export function createScrollHover() {
   let pointer: { x: number, y: number } | undefined
   let hovered: HTMLElement | undefined
   let frame: number | undefined
@@ -36,7 +24,7 @@ export function createScrollHover(
   function scheduleSync(): void {
     if (frame !== undefined)
       return
-    frame = scheduler.request(() => {
+    frame = requestAnimationFrame(() => {
       frame = undefined
       if (scope)
         sync(scope)
@@ -72,7 +60,7 @@ export function createScrollHover(
   function dispose(): void {
     scrolling = false
     if (frame !== undefined)
-      scheduler.cancel(frame)
+      cancelAnimationFrame(frame)
     frame = undefined
     scope = undefined
     setHovered(undefined)

From eba6f661ed585601f7a005c8bba042b4fe2f6b8d Mon Sep 17 00:00:00 2001
From: kilock <731052835@qq.com>
Date: Fri, 14 Aug 2026 18:10:15 +0800
Subject: [PATCH 3/3] fix(sidebar): scope scroll hover updates

---
 src/components/sidebar/SidebarContent.vue |  3 +--
 src/lib/scroll-hover.ts                   | 27 +++++------------------
 src/style.css                             |  8 ++++---
 3 files changed, 11 insertions(+), 27 deletions(-)

diff --git a/src/components/sidebar/SidebarContent.vue b/src/components/sidebar/SidebarContent.vue
index 0a80d2d..02fa640 100644
--- a/src/components/sidebar/SidebarContent.vue
+++ b/src/components/sidebar/SidebarContent.vue
@@ -20,8 +20,7 @@ onBeforeUnmount(scrollHover.dispose)
     :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
     @pointermove="scrollHover.pointerMove"
     @pointerleave="scrollHover.pointerLeave"
-    @scroll.passive="scrollHover.start"
-    @scrollend="scrollHover.end"
+    @scroll.passive="scrollHover.scroll"
   >
     <slot />
   </div>
diff --git a/src/lib/scroll-hover.ts b/src/lib/scroll-hover.ts
index c607444..6ad1bdd 100644
--- a/src/lib/scroll-hover.ts
+++ b/src/lib/scroll-hover.ts
@@ -2,8 +2,6 @@ export function createScrollHover() {
   let pointer: { x: number, y: number } | undefined
   let hovered: HTMLElement | undefined
   let frame: number | undefined
-  let scrolling = false
-  let scope: HTMLElement | undefined
 
   function setHovered(next: HTMLElement | undefined): void {
     if (hovered === next)
@@ -21,15 +19,12 @@ export function createScrollHover() {
     setHovered(target && scope.contains(target) ? target : undefined)
   }
 
-  function scheduleSync(): void {
+  function scheduleSync(scope: HTMLElement): void {
     if (frame !== undefined)
       return
     frame = requestAnimationFrame(() => {
       frame = undefined
-      if (scope)
-        sync(scope)
-      if (scrolling)
-        scheduleSync()
+      sync(scope)
     })
   }
 
@@ -43,28 +38,16 @@ export function createScrollHover() {
     setHovered(undefined)
   }
 
-  function start(event: Event): void {
-    scope = event.currentTarget as HTMLElement
-    if (!scrolling) {
-      scrolling = true
-    }
-    scheduleSync()
-  }
-
-  function end(event: Event): void {
-    scope = event.currentTarget as HTMLElement
-    scrolling = false
-    scheduleSync()
+  function scroll(event: Event): void {
+    scheduleSync(event.currentTarget as HTMLElement)
   }
 
   function dispose(): void {
-    scrolling = false
     if (frame !== undefined)
       cancelAnimationFrame(frame)
     frame = undefined
-    scope = undefined
     setHovered(undefined)
   }
 
-  return { pointerMove, pointerLeave, start, end, dispose }
+  return { pointerMove, pointerLeave, scroll, dispose }
 }
diff --git a/src/style.css b/src/style.css
index 59d3d39..c115aa8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -397,12 +397,14 @@
     transition-duration: 40ms;
   }
   /* Chromium can retain the old :hover target during compositor scrolling.
-     SidebarContent explicitly hit-tests NavItem hover each frame. */
+     SidebarContent explicitly hit-tests NavItem hover after scroll events. */
   [data-sidebar="content"] [data-button][data-variant="ghost"][data-settings-nav-item]::before {
     transition-property: scale;
   }
-  [data-sidebar="content"] [data-button][data-variant="ghost"][data-settings-nav-item]:hover::before {
-    background-color: transparent;
+  @media (hover: hover) {
+    [data-sidebar="content"] [data-button][data-variant="ghost"][data-settings-nav-item]:hover::before {
+      background-color: transparent;
+    }
   }
   [data-sidebar="content"] [data-button][data-variant="ghost"][data-settings-nav-item][data-pointer-hover]::before {
     background-color: var(--btn-ghost-hover);