feat: keep toggle scroll location

Author: HerringtonDarkholme

src/webview/SearchSidebar/SearchResultList/TreeItem.tsx

@@ -1,9 +1,8 @@
-import { useBoolean } from 'react-use'
 import TreeHeader from './TreeHeader'
 import type { DisplayResult } from '../../../types'
 import { MatchList } from './MatchList'
-import { memo, useEffect, useRef } from 'react'
-import { useToggleResult } from './useListState'
+import { memo } from 'react'
+import { useToggleResult, useStickyShadow } from './useListState'
 import * as stylex from '@stylexjs/stylex'
 
 const styles = stylex.create({
@@ -24,37 +23,15 @@ const styles = stylex.create({
   },
 })
 
-function useStickyShadow() {
-  const [isScrolled, setScrolled] = useBoolean(false)
-  const ref = useRef<HTMLDivElement>(null)
-  useEffect(() => {
-    const observer = new IntersectionObserver(entries => {
-      const entry = entries[0]
-      if (entry.isIntersecting) {
-        setScrolled(false)
-      } else {
-        setScrolled(true)
-      }
-    })
-    observer.observe(ref.current!)
-    return () => {
-      observer.disconnect()
-    }
-  })
-  return {
-    isScrolled,
-    ref,
-  }
-}
-
 interface TreeItemProps {
   className: string
   matches: DisplayResult[]
 }
 
 const TreeItem = ({ className, matches }: TreeItemProps) => {
-  const [isExpanded, toggleIsExpanded] = useToggleResult(matches[0].file)
-  const { isScrolled, ref } = useStickyShadow()
+  const filePath = matches[0].file
+  const [isExpanded, toggleIsExpanded] = useToggleResult(filePath)
+  const { isScrolled, ref } = useStickyShadow(filePath)
   const props = stylex.props(styles.treeItem)
 
   return (

src/webview/SearchSidebar/SearchResultList/useListState.tsx

@@ -1,9 +1,9 @@
 // maintains data list's UI state
 // e.g. toggle expand selected item
 
-import { useCallback } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { useBoolean } from 'react-use'
-import { onResultChange } from '../../hooks/useSearch'
+import { onResultChange, findIndex } from '../../hooks/useSearch'
 import type { VirtuosoHandle } from 'react-virtuoso'
 
 let ref: VirtuosoHandle
@@ -24,14 +24,18 @@ export function useToggleResult(filePath: string) {
   const toggleIsExpanded = useCallback(() => {
     toggleResult(filePath)
     toggle()
-    if (isExpanded) {
-      // TODO
-      // ref.scrollToIndex(10)
+    if (isExpanded && lastActiveFile === filePath) {
+      const index = findIndex(filePath)
+      if (index) {
+        ref.scrollToIndex(index)
+      }
     }
   }, [filePath, toggle, isExpanded])
   return [isExpanded, toggleIsExpanded] as const
 }
 
+let lastActiveFile = ''
+
 function toggleResult(filePath: string) {
   if (collapseMap.has(filePath)) {
     collapseMap.delete(filePath)
@@ -40,6 +44,32 @@ function toggleResult(filePath: string) {
   }
 }
 
+export function useStickyShadow(filePath: string) {
+  const [isScrolled, setScrolled] = useBoolean(false)
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      const entry = entries[0]
+      if (entry.isIntersecting) {
+        setScrolled(false)
+      } else {
+        setScrolled(true)
+        if (!isScrolled) {
+          lastActiveFile = filePath
+        }
+      }
+    })
+    observer.observe(ref.current!)
+    return () => {
+      observer.disconnect()
+    }
+  }, [isScrolled])
+  return {
+    isScrolled,
+    ref,
+  }
+}
+
 // let activeItem: DisplayResult | null = null
 
 // function setActiveItem(match: DisplayResult) {

src/webview/hooks/useSearch.tsx

@@ -50,7 +50,7 @@ export function onResultChange(f: () => void) {
   }
 }
 
-function byFileName(a: [string, unknown], b: [string, unknown]) {
+function byFilePath(a: [string, unknown], b: [string, unknown]) {
   return a[0].localeCompare(b[0])
 }
 
@@ -72,7 +72,7 @@ childPort.onMessage('searchResultStreaming', event => {
   refreshResultIfStale()
   queryInFlight = query
   grouped = merge(groupBy(event.searchResult))
-  grouped.sort(byFileName)
+  grouped.sort(byFilePath)
   notify()
 })
 
@@ -109,7 +109,7 @@ childPort.onMessage('refreshSearchResult', event => {
     temp.set(fileName, updatedResults)
   }
   grouped = [...temp.entries()]
-  grouped.sort(byFileName)
+  grouped.sort(byFilePath)
   notify()
 })
 
@@ -234,3 +234,7 @@ export function dismissOneFile(filePath: string) {
   grouped = grouped.filter(g => g[0] !== filePath)
   notify()
 }
+
+export function findIndex(filePath: string) {
+  return grouped.findIndex(g => g[0] === filePath)
+}