feat: add lang filter

Author: HerringtonDarkholme

src/extension/search.ts

@@ -124,6 +124,9 @@ export function buildCommand(query: SearchQuery) {
   if (strictness && strictness !== 'smart') {
     args.push('--strictness', strictness)
   }
+  if (query.lang) {
+    args.push('--lang', query.lang)
+  }
   args.push(...includeFile.split(',').filter(Boolean))
   console.debug('running', query, command, args)
   // TODO: multi-workspaces support

src/types.ts

@@ -32,6 +32,7 @@ interface SearchQueryBasic {
   rewrite: string
   strictness: string
   selector: string
+  lang: string
 }
 
 export interface SearchQuery extends SearchQueryBasic {

src/webview/SearchSidebar/SearchProviderMessage/index.tsx

@@ -43,12 +43,12 @@ function Empty({ query }: { query: SearchQuery }) {
             supported
           </VSCodeLink>
         </li>
-        <li>
-          Adjust your gitignore files.{' '}
-          <VSCodeLink href="https://ast-grep.github.io/reference/cli/run.html#no-ignore-file-type">
-            See doc
-          </VSCodeLink>
-        </li>
+        {query.lang ? (
+          <li>
+            Remove language filter <code style={codeStyle}>{query.lang}</code>{' '}
+            and search in all files.
+          </li>
+        ) : null}
         {query.strictness !== 'smart' ? (
           <li>
             Adjust pattern{' '}
@@ -71,6 +71,12 @@ function Empty({ query }: { query: SearchQuery }) {
             .
           </li>
         ) : null}
+        <li>
+          Adjust your gitignore files.{' '}
+          <VSCodeLink href="https://ast-grep.github.io/reference/cli/run.html#no-ignore-file-type">
+            See doc
+          </VSCodeLink>
+        </li>
       </ul>
     </div>
   )

src/webview/SearchSidebar/SearchWidgetContainer/LangSelect.tsx

@@ -1,7 +1,8 @@
 import * as stylex from '@stylexjs/stylex'
 import { Icon, icons } from '../SearchResultList/Icon'
-import { ChangeEvent, useCallback, useState } from 'react'
+import { ChangeEvent, useCallback } from 'react'
 import { VscListFlat } from 'react-icons/vsc'
+import { useSearchField } from '../../hooks/useQuery'
 
 const styles = stylex.create({
   langButton: {
@@ -43,12 +44,12 @@ const styles = stylex.create({
   },
 })
 
-function capitalize(word) {
+function capitalize(word: string) {
   return word.charAt(0).toUpperCase() + word.slice(1)
 }
 
 export function LangSelect() {
-  const [lang, setLang] = useState('')
+  const [lang, setLang] = useSearchField('lang')
   const title = lang
     ? `Search pattern in ${lang}`
     : 'Search pattern in specific language'
@@ -66,6 +67,7 @@ export function LangSelect() {
       <select
         {...stylex.props(styles.langDropdown)}
         style={{ outline: 'none' }}
+        value={lang}
         onChange={onChange}
       >
         <option value="">Auto Detect</option>

src/webview/hooks/useQuery.tsx

@@ -13,6 +13,7 @@ const searchQuery: Record<keyof SearchQuery, string> = {
   selector: '',
   includeFile: '',
   rewrite: '',
+  lang: '',
 }
 
 type PatternKeys = 'selector'
@@ -22,6 +23,7 @@ const LS_KEYS: Record<Exclude<keyof SearchQuery, PatternKeys>, string> = {
   includeFile: 'ast-grep-search-panel-include-value',
   rewrite: 'ast-grep-search-panel-rewrite-value',
   strictness: 'ast-grep-search-panel-strictness-value',
+  lang: 'ast-grep-search-panel-lang-value',
 }
 
 export function refreshResult() {