fix: remove duplicated search button on "search in chat" (#3434)

* fix: remove duplicated search button on "search in chat" fixes #3014 * remove avatar as well and combine headers
deltachat · Oct 13, 2023 · 6f65a3c · 6f65a3c
1 parent b4c50a9
commit 6f65a3c
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,13 +12,15 @@
 - improve the look of the webxdc loading screen
 - update `@deltachat/message_parser_wasm` to `0.8.0`, which adds linkification to links on more generic URI schemes.
 - Update translations (13.10.2023)
+- better search in chat design which shows more results (remove redundant chat info and combine both headers)
 
 ### Fixed
 - fix clipboard not working in webxdc apps
 - fix `target=_blank` links in html emails don't work #3408
 - 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
 - fix "Verified by" is shown weirdly for contacts that were verified directly #3421
 
 <a id="1_40_4"></a>

diff --git a/src/renderer/components/SearchInput.tsx b/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}
+      />
     </>
   )
 }
diff --git a/src/renderer/components/chat/ChatList.tsx b/src/renderer/components/chat/ChatList.tsx
@@ -36,7 +36,6 @@ import { useThemeCssVar } from '../../ThemeManager'
 import { BackendRemote, onDCEvent, Type } from '../../backend-com'
 import { selectedAccountId } from '../../ScreenController'
 import { DcEvent, DcEventType, T } from '@deltachat/jsonrpc-client'
-import { Avatar } from '../Avatar'
 
 const enum LoadStatus {
   FETCHING = 1,
@@ -309,37 +308,17 @@ export default function ChatList(props: {
               <div>
                 <div className='search-result-divider' style={{ width: width }}>
                   {tx('search_in_chat')}
-                </div>
-                <div
-                  className='search-in-chat-label'
-                  style={{ width, height: '64px' }}
-                >
-                  <Avatar
-                    avatarPath={searchChatInfo.profileImage}
-                    color={searchChatInfo.color}
-                    displayName={searchChatInfo.name}
-                  />
-                  <div className='chat-name'>{searchChatInfo.name}</div>
-                  <button
-                    onClick={() => props.onExitSearch?.()}
-                    aria-label={tx('exit_search')}
-                  >
-                    X
-                  </button>
-                </div>
-                <div className='search-result-divider' style={{ width: width }}>
-                  {translate_n('n_messages', messageResultIds.length)}
+                  {messageResultIds.length !== 0 &&
+                    ': ' + translate_n('n_messages', messageResultIds.length)}
                 </div>
                 <ChatListPart
                   isRowLoaded={isMessageLoaded}
                   loadMoreRows={loadMessages}
                   rowCount={messageResultIds.length}
                   width={width}
                   height={
-                    // take remaining space
-                    height -
-                    DIVIDER_HEIGHT * 2 -
-                    64 /* height of chat label above */
+                    /* take remaining space */
+                    height - DIVIDER_HEIGHT
                   }
                   itemKey={index => 'key' + messageResultIds[index]}
                   itemData={messagelistData}

diff --git a/src/renderer/components/screens/MainScreen.tsx b/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>