feat: add strictness and selector UI

Author: HerringtonDarkholme

src/types.ts

@@ -31,6 +31,8 @@ export interface SearchQuery {
   inputValue: string
   includeFile: string
   rewrite: string
+  strictness: string
+  selector: string
 }
 
 export type SgSearch = {

src/webview/SearchSidebar/SearchWidgetContainer/PatternConfig.tsx

@@ -0,0 +1,52 @@
+import { SearchInput } from './SearchInput'
+import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react'
+import { usePatternConfig } from '../../hooks/useQuery'
+import { useCallback } from 'react'
+
+const titleStyle = {
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  padding: '4px 0 0',
+  fontSize: '11px',
+  fontWeight: '400',
+  lineHeight: '19px',
+}
+const NOOP = () => {}
+
+export default function PatternConfig() {
+  const [strictness, setStrictness] = usePatternConfig('strictness', 'smart')
+  const [selector, setSelector] = usePatternConfig('selector', '')
+  // biome-ignore lint/suspicious/noExplicitAny: onChange event has wrong type signature.
+  const onStrictnessChange = useCallback(
+    (e: any) => {
+      const select = e.target as HTMLSelectElement
+      setStrictness(select.value)
+    },
+    [setStrictness],
+  )
+  return (
+    <div>
+      <h4 style={titleStyle}>Selector</h4>
+      <SearchInput
+        isSingleLine={true}
+        placeholder="sub-node kind to match"
+        value={selector}
+        onChange={setSelector}
+        onKeyEnterUp={NOOP}
+      />
+      <h4 style={titleStyle}>Strictness</h4>
+      <VSCodeDropdown
+        value={strictness}
+        onChange={onStrictnessChange}
+        style={{ width: '100%', zIndex: '2' }}
+      >
+        <VSCodeOption value="cst">Cst (ignore nothing)</VSCodeOption>
+        <VSCodeOption value="smart">Smart (default option)</VSCodeOption>
+        <VSCodeOption value="ast">Ast (ignore unnamed nodes)</VSCodeOption>
+        <VSCodeOption value="relaxed">Relaxed (ignore comments)</VSCodeOption>
+        <VSCodeOption value="signature">Signature (ignore text)</VSCodeOption>
+      </VSCodeDropdown>
+    </div>
+  )
+}

src/webview/SearchSidebar/SearchWidgetContainer/SearchOptions.tsx

@@ -1,5 +1,6 @@
 import { VscEllipsis } from 'react-icons/vsc'
 import IncludeFile from './IncludeFile'
+import PatternConfig from './PatternConfig'
 import * as stylex from '@stylexjs/stylex'
 import { useSearchOption, refreshResult } from '../../hooks/useQuery'
 
@@ -45,6 +46,7 @@ export default function SearchOptions() {
             refreshResult={refreshResult}
           />
           {/* TODO: add file exclude*/}
+          <PatternConfig />
         </div>
       )}
     </div>

src/webview/hooks/useQuery.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useLocalStorage, useDebounce, useBoolean } from 'react-use'
 import { SearchQuery } from '../../types'
 import { childPort } from '../postMessage'
@@ -9,11 +9,15 @@ import { postSearch } from './useSearch'
 
 const searchQuery: Record<keyof SearchQuery, string> = {
   inputValue: '',
+  strictness: 'smart',
+  selector: '',
   includeFile: '',
   rewrite: '',
 }
 
-const LS_KEYS: Record<keyof SearchQuery, string> = {
+type PatternKeys = 'strictness' | 'selector'
+
+const LS_KEYS: Record<Exclude<keyof SearchQuery, PatternKeys>, string> = {
   inputValue: 'ast-grep-search-panel-input-value',
   includeFile: 'ast-grep-search-panel-include-value',
   rewrite: 'ast-grep-search-panel-rewrite-value',
@@ -28,7 +32,7 @@ childPort.onMessage('clearSearchResults', () => {
   refreshResult()
 })
 
-export function useSearchField(key: keyof SearchQuery) {
+export function useSearchField(key: keyof typeof LS_KEYS) {
   const [field = '', setField] = useLocalStorage(LS_KEYS[key], '')
   // this useEffect and useDebounce is silly
   useEffect(() => {
@@ -38,6 +42,16 @@ export function useSearchField(key: keyof SearchQuery) {
   return [field, setField] as const
 }
 
+export function usePatternConfig(key: PatternKeys, defaultValue: string) {
+  const [field, setField] = useState(defaultValue)
+  // this useEffect and useDebounce is silly
+  useEffect(() => {
+    searchQuery[key] = field
+  }, [field, key])
+  useDebounce(refreshResult, 150, [field])
+  return [field, setField] as const
+}
+
 export function useSearchOption() {
   const [includeFile = '', setIncludeFile] = useSearchField('includeFile')
   const [showOptions, toggleOptions] = useBoolean(Boolean(includeFile))