feat: enhance search input action

src/components/SearchBar.tsx

@@ -15,16 +15,15 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
   const configs = useConfigs()
   const { searchMode } = configs.value
 
-  const toggleButtonDescription = `${
+  const toggleButtonDescription =
     searchMode === 'regex'
       ? 'Match file name with regular expression.'
-      : 'Match file path sequence with input.'
-  } Click to toggle.`
+      : `Match file path sequence with plain input.`
 
   return (
     <div className={'search-input-wrapper'}>
       <TextInput
-        icon={SearchIcon}
+        leadingVisual={SearchIcon}
         onFocus={e => {
           onFocus(e)
           e.target.select()
@@ -37,24 +36,23 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
         placeholder={`Search files`}
         onChange={({ target: { value } }) => onSearch(value, searchMode)}
         value={value}
+        trailingAction={
+          <TextInput.Action
+            onClick={() => {
+              const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
+              configs.onChange({
+                searchMode: newMode,
+              })
+              // Skip search if no input to prevent resetting folder expansions
+              if (value) onSearch(value, newMode)
+            }}
+            aria-label={toggleButtonDescription}
+            sx={{ color: 'fg.subtle' }}
+          >
+            {searchMode === 'regex' ? '.*$' : 'a/b'}
+          </TextInput.Action>
+        }
       />
-      <div className={`actions`}>
-        <button
-          className={`toggle-search-mode`}
-          title={toggleButtonDescription}
-          onClick={() => {
-            const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
-            configs.onChange({
-              searchMode: newMode,
-            })
-            // Skip search if no input to prevent resetting folder expansions
-            if (value) onSearch(value, newMode)
-          }}
-          aria-label={toggleButtonDescription}
-        >
-          {searchMode === 'regex' ? '.*' : 'path'}
-        </button>
-      </div>
     </div>
   )
 }

src/styles/index.scss

@@ -433,7 +433,6 @@ $minimal-z-index: max(
     flex-direction: column;
     background: var(--gitako-bg-subtle);
     border-left: 1px solid var(--gitako-border-default);
-    overflow: hidden;
 
     .octicon {
       transition: transform 0.3s ease;
@@ -597,38 +596,20 @@ $minimal-z-index: max(
             border-top: 1px solid var(--gitako-border-default);
             color: var(--gitako-fg-default);
             background: var(--gitako-bg-default);
-            padding-right: 40px; // save space for actions
+            padding-left: 10px;
+
+            .TextInput-action {
+              font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+
+              button {
+                font-weight: normal;
+              }
+            }
 
             &.error {
               border-color: var(--gitako-danger-emphasis);
             }
           }
-
-          .actions {
-            position: absolute;
-            top: 0px;
-            right: 0px;
-            height: 100%;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            padding: 0 4px;
-
-            .toggle-search-mode {
-              margin: 0;
-              padding: 2px 4px;
-              min-width: 32px;
-              border: 1px solid var(--gitako-border-muted);
-              border-radius: 8px;
-              color: var(--gitako-fg-muted);
-              font-size: 12px;
-              font-weight: 500;
-              line-height: 1;
-              outline: none;
-
-              @include interactive-frame;
-            }
-          }
         }
 
         .status {