feat: more tweaks on search modes

src/components/FileExplorer.tsx

@@ -15,7 +15,7 @@ import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
 import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { VisibleNodes } from 'utils/VisibleNodesGenerator'
 import { Icon } from './Icon'
-import { searchModes } from './searchModes'
+import { SearchMode, searchModes } from './searchModes'
 import { SizeObserver } from './SizeObserver'
 
 type renderNodeContext = {
@@ -50,13 +50,13 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
   } = useConfigs()
 
   const onSearch = React.useCallback(
-    (searchKey: string) => {
+    (searchKey: string, searchMode: SearchMode) => {
       updateSearchKey(searchKey)
       if (visibleNodesGenerator) {
         visibleNodesGenerator.search(searchModes[searchMode].getSearchParams(searchKey))
       }
     },
-    [updateSearchKey, visibleNodesGenerator, searchMode],
+    [updateSearchKey, visibleNodesGenerator],
   )
 
   React.useEffect(() => {
@@ -98,7 +98,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
           onClick={e => {
             e.stopPropagation()
             e.preventDefault()
-            onSearch(node.path + '/')
+            onSearch(node.path + '/', searchMode)
           }}
         >
           <Icon type="search" />

src/components/SearchBar.tsx

@@ -1,13 +1,14 @@
-import { Label, TextInput, TextInputProps } from '@primer/components'
+import { TextInput, TextInputProps } from '@primer/components'
 import { SearchIcon } from '@primer/octicons-react'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { cx } from 'utils/cx'
 import { isValidRegexpSource } from 'utils/general'
+import { SearchMode } from './searchModes'
 
 type Props = {
   value: string
-  onSearch: (searchKey: string) => void
+  onSearch: (searchKey: string, searchMode: SearchMode) => void
 } & Required<Pick<TextInputProps, 'onFocus'>>
 
 export function SearchBar({ onSearch, onFocus, value }: Props) {
@@ -29,25 +30,24 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
         })}
         aria-label="search files"
         placeholder={`Search files (${searchMode === 'regex' ? 'use RegExp' : 'match path'})`}
-        onChange={({ target: { value } }) => onSearch(value)}
+        onChange={({ target: { value } }) => onSearch(value, searchMode)}
         value={value}
       />
       <div className={`actions`}>
-        <Label
+        <button
           className={`toggle-mode`}
-          variant="small"
-          outline
           title="Toggle search mode"
           onClick={() => {
+            const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
             configs.onChange({
-              searchMode: searchMode === 'regex' ? 'fuzzy' : 'regex',
+              searchMode: newMode,
             })
-            onSearch(value)
+            onSearch(value, newMode)
           }}
           aria-label="Toggle search mode"
         >
-          {searchMode === 'regex' ? '.*?' : 'path'}
-        </Label>
+          {searchMode === 'regex' ? '.*' : 'path'}
+        </button>
       </div>
     </div>
   )

src/styles/index.scss

@@ -471,15 +471,26 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             display: flex;
             justify-content: flex-end;
             align-items: center;
-            padding: 0 2px;
+            padding: 0 4px;
 
             .toggle-mode {
-              cursor: pointer;
+              margin: 0;
+              padding: 2px 4px;
+              min-width: 32px;
+              border: 1px solid var(--gitako-border-secondary);
+              border-radius: 8px;
+              background: var(--gitako-bg-primary);
+              color: var(--gitako-text-secondary);
+              font-size: 12px;
+              font-weight: 500;
+              line-height: 1;
+              outline: none;
+              &:focus,
               &:hover {
-                background-color: var(--gitako-bg-tertiary);
+                background: var(--gitako-bg-secondary);
               }
               &:active {
-                background-color: var(--gitako-bg-secondary);
+                background: var(--gitako-bg-tertiary);
               }
             }
           }

src/utils/configHelper.ts

@@ -46,7 +46,7 @@ const defaultConfigs: Config = {
   toggleButtonContent: 'logo',
   recursiveToggleFolder: 'shift',
   shrinkGitHubHeader: false,
-  searchMode: 'regex',
+  searchMode: 'fuzzy',
 }
 
 const configKeyArray = Object.values(configKeys)