feat: implement setActive

Author: HerringtonDarkholme

src/webview/SearchSidebar/SearchResultList/MatchList.tsx

@@ -2,6 +2,7 @@ import { CodeBlock } from './CodeBlock'
 import { MatchActions } from './Actions'
 import type { DisplayResult } from '../../../types'
 import { useHover } from 'react-use'
+import { useActiveItem } from './useListState'
 
 import { memo } from 'react'
 import * as stylex from '@stylexjs/stylex'
@@ -18,9 +19,10 @@ const styles = stylex.create({
 })
 
 function OneMatch({ match }: { match: DisplayResult }) {
+  const [_active, setActive] = useActiveItem(match)
   const [hoverable] = useHover(hovered => {
     return (
-      <li {...stylex.props(styles.codeItem)}>
+      <li {...stylex.props(styles.codeItem)} onClick={setActive}>
         <CodeBlock match={match} />
         {hovered && <MatchActions match={match} />}
       </li>

src/webview/SearchSidebar/SearchResultList/useListState.tsx

@@ -4,6 +4,7 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { useBoolean } from 'react-use'
 import { onResultChange, findIndex } from '../../hooks/useSearch'
+import type { DisplayResult } from '../../../types'
 import type { VirtuosoHandle } from 'react-virtuoso'
 
 let ref: VirtuosoHandle
@@ -17,6 +18,7 @@ const collapseMap = new Map<string, boolean>()
 onResultChange(() => {
   collapseMap.clear()
   lastActiveFile = ''
+  activeItem = null
 })
 
 export function useToggleResult(filePath: string) {
@@ -72,8 +74,30 @@ export function useStickyShadow(filePath: string) {
   }
 }
 
-// let activeItem: DisplayResult | null = null
+// Display for one match, Array for active header
+type ActiveItem = DisplayResult | DisplayResult[]
 
-// function setActiveItem(match: DisplayResult) {
+let activeItem: ActiveItem | null = null
+let refreshers: WeakMap<ActiveItem, (b: boolean) => void> = new WeakMap()
 
-// }
+function setActive(item: ActiveItem) {
+  if (activeItem) {
+    refreshers.get(activeItem)?.(false)
+  }
+  refreshers.get(item)?.(true)
+  activeItem = item
+}
+
+export function useActiveItem(item: ActiveItem) {
+  const [active, forceUpdate] = useBoolean(activeItem === item)
+  useEffect(() => {
+    refreshers.set(item, forceUpdate)
+    return () => {
+      refreshers.delete(item)
+    }
+  }, [item])
+  const set = useCallback(() => {
+    setActive(item)
+  }, [item])
+  return [active, set] as const
+}