fix: remove duplicated search button on "search in chat"

fixes #3014

CHANGELOG.md

@@ -18,6 +18,7 @@
 - add description for enableChatAuditLog setting
 - fix: import key from file instead of folder, fixes #1863
 - fix webxdc title not updated in document title changes #3412
+- fix: remove duplicated search button on "search in chat" #3014
 
 <a id="1_40_4"></a>
 

src/renderer/components/SearchInput.tsx

@@ -5,16 +5,20 @@ import { useTranslationFunction } from '../contexts'
 export function ClearButton(props: {
   onChange: (event: { target: { value: '' } }) => void
   value: string
+  extraCleanAction?: () => void
 }) {
-  const { onChange, value } = props
-  const onClear = () => onChange({ target: { value: '' } })
+  const { onChange, extraCleanAction, value } = props
+  const onClear = () => {
+    onChange({ target: { value: '' } })
+    extraCleanAction?.()
+  }
 
   return (
     <button
       aria-label='Clear'
       className={classNames(
         'bp4-dialog-close-button bp4-button bp4-minimal bp4-icon-large bp4-icon-cross clear-button',
-        { 'clear-button--hidden': value === '' }
+        { 'clear-button--hidden': value === '' && !extraCleanAction }
       )}
       onClick={onClear}
     />
@@ -29,8 +33,10 @@ export default function SearchInput(props: {
   className: string
   id: string
   inputRef?: React.ClassAttributes<HTMLInputElement>['ref']
+  /** if this is defined clear button is always shown, like with search in chat */
+  extraCleanAction?: () => void
 }) {
-  const { onChange, value, className, id } = props
+  const { onChange, value, className, id, extraCleanAction } = props
   const tx = useTranslationFunction()
   return (
     <>
@@ -44,7 +50,11 @@ export default function SearchInput(props: {
         ref={props.inputRef}
         spellCheck={false}
       />
-      <ClearButton value={value} onChange={onChange} />
+      <ClearButton
+        value={value}
+        onChange={onChange}
+        extraCleanAction={extraCleanAction}
+      />
     </>
   )
 }

src/renderer/components/chat/ChatList.tsx

@@ -320,12 +320,12 @@ export default function ChatList(props: {
                     displayName={searchChatInfo.name}
                   />
                   <div className='chat-name'>{searchChatInfo.name}</div>
-                  <button
+                  {/* <button
                     onClick={() => props.onExitSearch?.()}
                     aria-label={tx('exit_search')}
                   >
                     X
-                  </button>
+                  </button> */}
                 </div>
                 <div className='search-result-divider' style={{ width: width }}>
                   {translate_n('n_messages', messageResultIds.length)}

src/renderer/components/screens/MainScreen.tsx

@@ -227,6 +227,9 @@ export default function MainScreen() {
                 value={queryStr}
                 className='icon-rotated'
                 inputRef={searchRef}
+                extraCleanAction={
+                  queryChatId ? () => setQueryChatId(null) : undefined
+                }
               />
             )}
           </NavbarGroup>