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

vscode/webview-ui/src/codeReader/useScrollPosition.ts

@@ -1,6 +1,6 @@
 import type { BlockBox } from './scrollPosition'
 import type { DocumentMessage } from './types'
-import { useEffect, useLayoutEffect, useRef } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { anchorAt, scrollTopFor } from './scrollPosition'
 import { postMessage, viewState } from './vscode'
 
@@ -12,6 +12,21 @@ export function pinnedHeight(): number {
   return document.querySelector<HTMLElement>('.cr-filter-bar')?.offsetHeight ?? 0
 }
 
+/** 筛选栏有多高，跟着它变（换行、多出第二行时）：钉在它下面的东西（总览条、钉住的外层卡片）从这儿开始。 */
+export 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
+}
+
 /** 页面上每块（BlockCard 带 data-line）的位置，按页面上的先后；被筛掉的块不在页面上，不算。 */
 export function measureBlocks(): BlockBox[] {
   const y = window.scrollY