From a0bc45f0a98d00c8fef390833c06f889fd41ee2d Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 28 May 2022 16:41:59 +0800
Subject: [PATCH] feat: enhance search input action

---
 src/components/SearchBar.tsx | 40 +++++++++++++++++-------------------
 src/styles/index.scss        | 37 ++++++++-------------------------
 2 files changed, 28 insertions(+), 49 deletions(-)

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 5c353e9..05daa1c 100644
--- a/src/components/SearchBar.tsx
+++ b/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>
   )
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d6f70b0..3b582a9 100644
--- a/src/styles/index.scss
+++ b/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 {