feat: add visual indentation guide

fix #213

Author: HerringtonDarkholme

src/webview/SearchSidebar/SearchResultList/TreeItem.tsx

@@ -11,6 +11,17 @@ const styles = stylex.create({
   treeItem: {
     position: 'relative',
     background: 'var(--vscode-sideBar-background)',
+    '::before': {
+      content: '',
+      display: 'block',
+      position: 'absolute',
+      top: '22px',
+      bottom: 0,
+      left: '13px', // left 16px - translateX 3px
+      width: '1px',
+      backgroundColor: 'var(--vscode-tree-inactiveIndentGuidesStroke)',
+      transition: '0.1s opacity linear',
+    },
   },
   fileName: {
     position: 'sticky',

src/webview/SearchSidebar/SearchResultList/index.tsx

@@ -1,14 +1,28 @@
 import { memo } from 'react'
 import { DisplayResult } from '../../../types'
 import TreeItem from './TreeItem'
+import * as stylex from '@stylexjs/stylex'
+
+const styles = stylex.create({
+  resultList: {
+    flexGrow: 1,
+    overflowY: 'scroll',
+    ':not(:hover) > div::before': {
+      opacity: 0,
+    },
+    ':hover > div::before': {
+      opacity: 1,
+    },
+  },
+})
 
 interface SearchResultListProps {
   matches: Array<[string, DisplayResult[]]>
 }
 
 const SearchResultList = ({ matches }: SearchResultListProps) => {
   return (
-    <div style={{ flexGrow: '1', overflowY: 'scroll' }}>
+    <div {...stylex.props(styles.resultList)}>
       {matches.map(([filePath, match]) => {
         return <TreeItem filePath={filePath} matches={match} key={filePath} />
       })}