feat: add indent guide styling

HerringtonDarkholme · HerringtonDarkholme · commit 31ecb84c7227 · 2024-03-17T16:53:49.000-07:00
diff --git a/src/extension/webview.ts b/src/extension/webview.ts
@@ -85,7 +85,6 @@ class SearchSidebarProvider implements vscode.WebviewViewProvider {
     <html lang="en">
       <head>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="${stylesResetUri}" rel="stylesheet"">
         <link href="${stylesMainUri}" rel="stylesheet"">
         <link href="${stylexUri}" rel="stylesheet"">
diff --git a/src/webview/SearchSidebar/SearchResultList/TreeItem.tsx b/src/webview/SearchSidebar/SearchResultList/TreeItem.tsx
@@ -2,7 +2,7 @@ import TreeHeader from './TreeHeader'
 import type { DisplayResult } from '../../../types'
 import { MatchList } from './MatchList'
 import { memo } from 'react'
-import { useToggleResult, useStickyShadow } from './useListState'
+import { useToggleResult, useStickyShadow, useActiveFile } from './useListState'
 import * as stylex from '@stylexjs/stylex'
 
 const styles = stylex.create({
@@ -16,11 +16,17 @@ const styles = stylex.create({
       top: '22px',
       bottom: 0,
       left: '13px', // left 16px - translateX 3px
-      width: '1px',
+      width: 0.6, // for retina screen, non-retina screen will round it to 1px
       backgroundColor: 'var(--vscode-tree-inactiveIndentGuidesStroke)',
       transition: '0.1s opacity linear',
     },
   },
+  activeIndent: {
+    '::before': {
+      backgroundColor: 'var(--vscode-tree-indentGuidesStroke)',
+      opacity: 1,
+    },
+  },
 })
 
 interface TreeItemProps {
@@ -32,7 +38,11 @@ const TreeItem = ({ className, matches }: TreeItemProps) => {
   const filePath = matches[0].file
   const [isExpanded, toggleIsExpanded] = useToggleResult(filePath)
   const { isScrolled, ref } = useStickyShadow(filePath)
-  const props = stylex.props(styles.treeItem)
+  const isTreeActive = useActiveFile(matches)
+  const props = stylex.props(
+    styles.treeItem,
+    isTreeActive && styles.activeIndent,
+  )
 
   return (
     <div className={`${className} ${props.className}`} style={props.style}>
diff --git a/src/webview/SearchSidebar/SearchResultList/useListState.tsx b/src/webview/SearchSidebar/SearchResultList/useListState.tsx
@@ -79,15 +79,20 @@ type ActiveItem = DisplayResult | DisplayResult[]
 
 let activeItem: ActiveItem | null = null
 const refreshers: WeakMap<ActiveItem, (b: boolean) => void> = new WeakMap()
+const activeFiles: Map<DisplayResult[], (b: boolean) => void> = new Map()
 
 function setActive(item: ActiveItem) {
   if (activeItem) {
     refreshers.get(activeItem)?.(false)
   }
   refreshers.get(item)?.(true)
   activeItem = item
+  for (const [matches, update] of activeFiles) {
+    update(isActiveFile(matches))
+  }
 }
 
+// is a match/file actively selected
 export function useActiveItem(item: ActiveItem) {
   const [active, forceUpdate] = useBoolean(activeItem === item)
   useEffect(() => {
@@ -101,3 +106,19 @@ export function useActiveItem(item: ActiveItem) {
   }, [item])
   return [active, set] as const
 }
+
+function isActiveFile(matches: DisplayResult[]) {
+  return matches === activeItem || matches.some(f => f === activeItem)
+}
+
+// tell if a file is active (has a selected match or file itself selected)
+export function useActiveFile(matches: DisplayResult[]) {
+  const [active, forceUpdate] = useBoolean(isActiveFile(matches))
+  useEffect(() => {
+    activeFiles.set(matches, forceUpdate)
+    return () => {
+      activeFiles.delete(matches)
+    }
+  }, [matches, forceUpdate])
+  return active
+}
