feat: add visual indentation guide

fix #213
ast-grep · Mar 2, 2024 · 4b0a4dd · 4b0a4dd
1 parent f5308c6
commit 4b0a4dd
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/src/webview/SearchSidebar/SearchResultList/TreeItem.tsx b/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',

diff --git a/src/webview/SearchSidebar/SearchResultList/index.tsx b/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} />
       })}