[web] Add message search button

Summary: issue: https://linear.app/comm/issue/ENG-3461/add-magnifying-glass-button-to-chat-header

Test Plan:
{F603357}

(showing for the record that the pinned messages banner is not bound to message search)

Reviewers: kamil, kuba, michal

Reviewed By: michal

Subscribers: ashoat, tomek, ted

Differential Revision: https://phab.comm.dev/D8302

web/chat/thread-top-bar.css

@@ -24,13 +24,6 @@ div.topBarThreadInfo {
   text-overflow: ellipsis;
 }
 
-button.topBarMenu {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--thread-top-bar-menu-color);
-}
-
 .pinnedCountBanner {
   background-color: var(--pinned-count-banner-color);
   height: 40px;
@@ -55,3 +48,13 @@ a.pinnedCountText:hover {
 .chevronRight {
   vertical-align: middle;
 }
+
+.searchButton {
+  color: var(--thread-top-bar-search-button-color);
+  margin-right: 30px;
+}
+
+.buttons {
+  flex-direction: row;
+  display: flex;
+}

web/chat/thread-top-bar.react.js

@@ -4,15 +4,18 @@ import * as React from 'react';
 import { ChevronRight } from 'react-feather';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import ThreadMenu from './thread-menu.react.js';
 import css from './thread-top-bar.css';
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
+import Button from '../components/button.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import MessageResultsModal from '../modals/chat/message-results-modal.react.js';
+import MessageSearchModal from '../modals/search/message-search-modal.react.js';
 
 type ThreadTopBarProps = {
   +threadInfo: ThreadInfo,
@@ -63,6 +66,16 @@ function ThreadTopBar(props: ThreadTopBarProps): React.Node {
     );
   }, [bannerText, pushThreadPinsModal]);
 
+  const onClickSearch = React.useCallback(
+    () =>
+      pushModal(
+        <InputStateContext.Provider value={inputState}>
+          <MessageSearchModal threadInfo={threadInfo} />
+        </InputStateContext.Provider>,
+      ),
+    [inputState, pushModal, threadInfo],
+  );
+
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
   return (
@@ -72,7 +85,16 @@ function ThreadTopBar(props: ThreadTopBarProps): React.Node {
           <ThreadAvatar size="small" threadInfo={threadInfo} />
           <div className={css.threadTitle}>{uiName}</div>
         </div>
-        {threadMenu}
+        <div className={css.buttons}>
+          <Button className={css.button} onClick={onClickSearch}>
+            <SWMansionIcon
+              size={24}
+              icon="search"
+              className={css.searchButton}
+            />
+          </Button>
+          {threadMenu}
+        </div>
       </div>
       {pinnedCountBanner}
     </>

web/theme.css

@@ -111,7 +111,7 @@
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
-  --thread-top-bar-menu-color: var(--shades-white-70);
+  --thread-top-bar-search-button-color: var(--shades-black-60);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color: var(--shades-white-100);
   --thread-ancestor-separator-color: var(--shades-white-60);