✨ feat(vscode): 代码阅读滚进卡片的子块时把外层卡片钉在顶上，同 VS Code 的 Sticky Scroll

vscode/webview-ui/src/codeReader/OverviewRuler.tsx

@@ -1,26 +1,11 @@
 import type { ReactElement } from 'react'
 import type { ChangeStop } from './diffView'
-import { useLayoutEffect, useState } from 'react'
+import { usePinnedHeight } from './useScrollPosition'
 
 const CHANGE_NAMES = { add: '新增', mod: '修改', del: '删除' } as const
 
-/** 钉在预览顶部的筛选栏有多高（它换行、多出第二行时跟着变）：总览条从它下面开始。 */
-function usePinnedHeight(): number {
-  const [height, setHeight] = useState(0)
-  useLayoutEffect(() => {
-    const bar = document.querySelector<HTMLElement>('.cr-filter-bar')
-    if (!bar)
-      return
-    setHeight(bar.offsetHeight)
-    const observer = new ResizeObserver(() => setHeight(bar.offsetHeight))
-    observer.observe(bar)
-    return () => observer.disconnect()
-  }, [])
-  return height
-}
-
 /**
- * 预览右边缘的总览条：每处改动（见 ChangeStop）按它在文件里的行画一段刻度，新增绿、修改蓝、删除红（删掉的块一条细线），
+ * 预览右边缘的总览条：从筛选栏下面贴到底，每处改动（见 ChangeStop）按它在文件里的行画一段刻度，新增绿、修改蓝、删除红（删掉的块一条细线），
  * 点刻度跳过去。lineCount 是新文件一共几行。
  */
 export function OverviewRuler({ stops, lineCount, onPick }: { stops: readonly ChangeStop[], lineCount: number, onPick: (stop: ChangeStop) => void }): ReactElement {