feat: support virtual scroll

fix #153

Author: HerringtonDarkholme

package.json

@@ -136,6 +136,7 @@
     "react-dom": "18.2.0",
     "react-icons": "5.0.1",
     "react-use": "17.5.0",
+    "react-virtuoso": "4.7.2",
     "tslib": "2.6.2",
     "tsx": "4.7.1",
     "typescript": "5.4.2",

pnpm-lock.yaml

@@ -17,6 +17,7 @@ const styles = stylex.create({
     flexDirection: 'row',
     // see https://github.com/facebook/stylex/issues/373
     width: '0',
+    overflow: 'hidden',
   },
   action: {
     display: 'flex',

src/webview/SearchSidebar/SearchResultList/Actions.tsx

@@ -47,16 +47,17 @@ function useStickyShadow() {
 }
 
 interface TreeItemProps {
-  filePath: string
+  className: string
   matches: DisplayResult[]
 }
 
-const TreeItem = ({ filePath, matches }: TreeItemProps) => {
+const TreeItem = ({ className, matches }: TreeItemProps) => {
   const [isExpanded, toggleIsExpanded] = useBoolean(true)
   const { isScrolled, ref } = useStickyShadow()
+  const props = stylex.props(styles.treeItem)
 
   return (
-    <div {...stylex.props(styles.treeItem)}>
+    <div className={`${className} ${props.className}`} style={props.style}>
       <div className="scroll-observer" ref={ref} />
       <TreeHeader
         isExpanded={isExpanded}

src/webview/SearchSidebar/SearchResultList/TreeItem.tsx

@@ -1,16 +1,17 @@
-import { memo } from 'react'
+import { memo, useCallback } from 'react'
 import { DisplayResult } from '../../../types'
 import TreeItem from './TreeItem'
 import * as stylex from '@stylexjs/stylex'
+import { Virtuoso } from 'react-virtuoso'
 
 const styles = stylex.create({
   resultList: {
     flexGrow: 1,
     overflowY: 'scroll',
-    ':not(:hover) > div::before': {
+    ':not(:hover) .sg-match-tree-item::before': {
       opacity: 0,
     },
-    ':hover > div::before': {
+    ':hover .sg-match-tree-item::before': {
       opacity: 1,
     },
   },
@@ -21,12 +22,25 @@ interface SearchResultListProps {
 }
 
 const SearchResultList = ({ matches }: SearchResultListProps) => {
+  const render = useCallback(
+    (index: number) => {
+      const [filePath, match] = matches[index]
+      return (
+        <TreeItem
+          className={'sg-match-tree-item'}
+          matches={match}
+          key={filePath}
+        />
+      )
+    },
+    [matches],
+  )
   return (
-    <div {...stylex.props(styles.resultList)}>
-      {matches.map(([filePath, match]) => {
-        return <TreeItem filePath={filePath} matches={match} key={filePath} />
-      })}
-    </div>
+    <Virtuoso
+      {...stylex.props(styles.resultList)}
+      totalCount={matches.length}
+      itemContent={render}
+    />
   )
 }