feat: add language switch

Author: HerringtonDarkholme

src/webview/SearchSidebar/SearchResultList/Icon.tsx

@@ -9,7 +9,7 @@ const styles = stylex.create({
   },
 })
 
-const icons = `
+export const icons = `
   bash,
   c,
   cpp,
@@ -37,9 +37,14 @@ const icons = `
   .map(icon => icon.trim())
   .filter(Boolean)
 
-export function Icon({ name }: { name: string }) {
+interface IconProps {
+  name: string
+  style?: stylex.StyleXStyles
+}
+
+export function Icon({ name, style }: IconProps) {
   const iconName = icons.includes(name) ? name : 'file'
   // @ts-expect-error
   const src = window.ICON_SRC + `/${iconName}.svg`
-  return <img src={src} {...stylex.props(styles.icon)} alt={iconName} />
+  return <img src={src} {...stylex.props(styles.icon, style)} alt={iconName} />
 }

src/webview/SearchSidebar/SearchWidgetContainer/LangSelect.tsx

@@ -0,0 +1,79 @@
+import * as stylex from '@stylexjs/stylex'
+import { Icon, icons } from '../SearchResultList/Icon'
+import { ChangeEvent, useCallback, useState } from 'react'
+import { VscListFlat } from 'react-icons/vsc'
+
+const styles = stylex.create({
+  langButton: {
+    position: 'absolute',
+    height: '20px',
+    width: '20px',
+    border: '1px solid transparent',
+    right: 2,
+    top: 3,
+    borderRadius: '3px',
+    ':hover': {
+      backgroundColor: 'var(--vscode-inputOption-hoverBackground)',
+    },
+  },
+  langActive: {
+    borderColor: 'var(--vscode-inputOption-activeBorder)',
+    ':hover': {
+      background: 'none',
+      filter: 'drop-shadow(1px 1px 3px rgba(0,0,0,0.2))',
+    },
+  },
+  langDropdown: {
+    height: '100%',
+    width: '100%',
+    border: 'none',
+    background: 'transparent',
+    position: 'absolute',
+    appearance: 'none',
+    outline: 'none',
+    color: 'transparent',
+    cursor: 'pointer',
+    ':focus': {
+      outline: 'none',
+    },
+  },
+  langIcon: {
+    marginTop: 1,
+    marginLeft: 1,
+  },
+})
+
+function capitalize(word) {
+  return word.charAt(0).toUpperCase() + word.slice(1)
+}
+
+export function LangSelect() {
+  const [lang, setLang] = useState('')
+  const title = lang
+    ? `Search pattern in ${lang}`
+    : 'Search pattern in specific language'
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLSelectElement>) => {
+      setLang(e.target.value)
+    },
+    [setLang],
+  )
+  return (
+    <label
+      {...stylex.props(styles.langButton, lang ? styles.langActive : null)}
+      title={title}
+    >
+      <select
+        {...stylex.props(styles.langDropdown)}
+        style={{ outline: 'none' }}
+        onChange={onChange}
+      >
+        <option value="">Auto Detect</option>
+        {icons.map(icon => (
+          <option value={icon}>{capitalize(icon)}</option>
+        ))}
+      </select>
+      {lang ? <Icon name={lang} style={styles.langIcon} /> : <VscListFlat />}
+    </label>
+  )
+}

src/webview/SearchSidebar/SearchWidgetContainer/SearchWidget.tsx

@@ -7,6 +7,7 @@ import {
 import { childPort } from '../../postMessage'
 import { useSearchResult, acceptAllChanges } from '../../hooks/useSearch'
 import { SearchInput } from './SearchInput'
+import { LangSelect } from './LangSelect'
 import { useBoolean, useEffectOnce } from 'react-use'
 import { VscChevronRight, VscChevronDown, VscReplaceAll } from 'react-icons/vsc'
 import * as stylex from '@stylexjs/stylex'
@@ -99,6 +100,7 @@ function SearchWidgetContainer() {
           onChange={setPattern}
           onKeyEnterUp={refreshResult}
         />
+        <LangSelect />
         {isExpanded ? <ReplaceBar /> : null}
       </div>
     </div>