Add search icon in room header

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/room/RoomSettings.jsx

@@ -131,10 +131,13 @@ function RoomSettings({ roomId }) {
 
   useEffect(() => {
     let mounted = true;
-    const settingsToggle = (isVisible) => {
+    const settingsToggle = (isVisible, tab) => {
       if (!mounted) return;
-      if (isVisible) forceUpdate();
-      else setTimeout(() => forceUpdate(), 200);
+      if (isVisible) {
+        const tabItem = tabItems.find((item) => item.text === tab);
+        if (tabItem) setSelectedTab(tabItem);
+        forceUpdate();
+      } else setTimeout(() => forceUpdate(), 200);
     };
     navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     return () => {
@@ -176,4 +179,7 @@ RoomSettings.propTypes = {
   roomId: PropTypes.string.isRequired,
 };
 
-export default RoomSettings;
+export {
+  RoomSettings as default,
+  tabText,
+};

src/app/organisms/room/RoomViewHeader.jsx

@@ -13,6 +13,7 @@ import { togglePeopleDrawer } from '../../../client/action/settings';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
 
+import { tabText } from './RoomSettings';
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
 import IconButton from '../../atoms/button/IconButton';
@@ -20,8 +21,9 @@ import Header, { TitleWrapper } from '../../atoms/header/Header';
 import Avatar from '../../atoms/avatar/Avatar';
 import RoomOptions from '../../molecules/room-options/RoomOptions';
 
-import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import SearchIC from '../../../../public/res/ic/outlined/search.svg';
+import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
@@ -74,7 +76,7 @@ function RoomViewHeader({ roomId }) {
       <button
         ref={roomHeaderBtnRef}
         className="room-header__btn"
-        onClick={toggleRoomSettings}
+        onClick={() => toggleRoomSettings()}
         type="button"
         onMouseUp={(e) => blurOnBubbling(e, '.room-header__btn')}
       >
@@ -84,6 +86,7 @@ function RoomViewHeader({ roomId }) {
         </TitleWrapper>
         <RawIcon src={ChevronBottomIC} />
       </button>
+      <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="People" src={SearchIC} />
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton
         onClick={openRoomOptions}

src/client/action/navigation.js

@@ -23,10 +23,10 @@ export function selectRoom(roomId, eventId) {
   });
 }
 
-export function toggleRoomSettings(roomId) {
+export function toggleRoomSettings(tabText) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS,
-    roomId,
+    tabText,
   });
 }
 

src/client/state/navigation.js

@@ -91,7 +91,11 @@ class Navigation extends EventEmitter {
       },
       [cons.actions.navigation.TOGGLE_ROOM_SETTINGS]: () => {
         this.isRoomSettings = !this.isRoomSettings;
-        this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
+        this.emit(
+          cons.events.navigation.ROOM_SETTINGS_TOGGLED,
+          this.isRoomSettings,
+          action.tabText,
+        );
       },
       [cons.actions.navigation.OPEN_INVITE_LIST]: () => {
         this.emit(cons.events.navigation.INVITE_LIST_OPENED);