Full-text search within conversation

ts/components/conversation/ConversationHeader.md

@@ -1,6 +1,6 @@
 ### Name variations, 1:1 conversation
 
-Note the five items in gear menu, and the second-level menu with disappearing messages options. Disappearing message set to 'off'.
+Note the five items in menu, and the second-level menu with disappearing messages options. Disappearing message set to 'off'.
 
 #### With name and profile, verified
 
@@ -24,6 +24,7 @@ Note the five items in gear menu, and the second-level menu with disappearing me
     onShowAllMedia={() => console.log('onShowAllMedia')}
     onShowGroupMembers={() => console.log('onShowGroupMembers')}
     onGoBack={() => console.log('onGoBack')}
+    onSearchInConversation={() => console.log('onSearchInConversation')}
   />
 </util.ConversationContext>
 ```

ts/components/conversation/ConversationHeader.tsx

@@ -37,6 +37,7 @@ interface Props {
   onSetDisappearingMessages: (seconds: number) => void;
   onDeleteMessages: () => void;
   onResetSession: () => void;
+  onSearchInConversation: () => void;
 
   onShowSafetyNumber: () => void;
   onShowAllMedia: () => void;
@@ -152,14 +153,21 @@ export class ConversationHeader extends React.Component<Props> {
   }
 
   public renderExpirationLength() {
-    const { expirationSettingName } = this.props;
+    const { expirationSettingName, showBackButton } = this.props;
 
     if (!expirationSettingName) {
       return null;
     }
 
     return (
-      <div className="module-conversation-header__expiration">
+      <div
+        className={classNames(
+          'module-conversation-header__expiration',
+          showBackButton
+            ? 'module-conversation-header__expiration--hidden'
+            : null
+        )}
+      >
         <div className="module-conversation-header__expiration__clock-icon" />
         <div className="module-conversation-header__expiration__setting">
           {expirationSettingName}
@@ -168,7 +176,7 @@ export class ConversationHeader extends React.Component<Props> {
     );
   }
 
-  public renderGear(triggerId: string) {
+  public renderMoreButton(triggerId: string) {
     const { showBackButton } = this.props;
 
     return (
@@ -176,10 +184,10 @@ export class ConversationHeader extends React.Component<Props> {
         <button
           onClick={this.showMenuBound}
           className={classNames(
-            'module-conversation-header__gear-icon',
+            'module-conversation-header__more-button',
             showBackButton
               ? null
-              : 'module-conversation-header__gear-icon--show'
+              : 'module-conversation-header__more-button--show'
           )}
           disabled={showBackButton}
         />
@@ -187,6 +195,23 @@ export class ConversationHeader extends React.Component<Props> {
     );
   }
 
+  public renderSearchButton() {
+    const { onSearchInConversation, showBackButton } = this.props;
+
+    return (
+      <button
+        onClick={onSearchInConversation}
+        className={classNames(
+          'module-conversation-header__search-button',
+          showBackButton
+            ? null
+            : 'module-conversation-header__search-button--show'
+        )}
+        disabled={showBackButton}
+      />
+    );
+  }
+
   public renderMenu(triggerId: string) {
     const {
       i18n,
@@ -260,7 +285,8 @@ export class ConversationHeader extends React.Component<Props> {
           </div>
         </div>
         {this.renderExpirationLength()}
-        {this.renderGear(triggerId)}
+        {this.renderSearchButton()}
+        {this.renderMoreButton(triggerId)}
         {this.renderMenu(triggerId)}
       </div>
     );