show conv snippets in search view (#20143)

shared/chat/selectable-big-team-channel-container.tsx

@@ -15,15 +15,15 @@ type OwnProps = {
 const mapStateToProps = (state, {conversationIDKey}) => {
   const showBold = Constants.getHasUnread(state, conversationIDKey)
   const showBadge = Constants.getHasBadge(state, conversationIDKey)
-  const {channelname, teamname} = Constants.getMeta(state, conversationIDKey)
-  return {channelname, showBadge, showBold, teamname}
+  const _meta = Constants.getMeta(state, conversationIDKey)
+  return {_meta, showBadge, showBold}
 }
 
 const mapDispatchToProps = () => ({})
 
 const mergeProps = (stateProps, _, ownProps: OwnProps) => {
-  let teamname = stateProps.teamname
-  let channelname = stateProps.channelname
+  let teamname = stateProps._meta.teamname
+  let channelname = stateProps._meta.channelname
   if (!teamname) {
     const parts = ownProps.name.split('#')
     if (parts.length >= 2) {
@@ -39,6 +39,8 @@ const mergeProps = (stateProps, _, ownProps: OwnProps) => {
     onSelectConversation: ownProps.onSelectConversation,
     showBadge: stateProps.showBadge,
     showBold: stateProps.showBold && !ownProps.isSelected,
+    snippet: stateProps._meta.snippet,
+    snippetDecoration: stateProps._meta.snippetDecoration,
     teamname,
   }
 }

shared/chat/selectable-big-team-channel.tsx

@@ -1,8 +1,10 @@
 import React, {PureComponent} from 'react'
 import * as Kb from '../common-adapters'
 import * as Styles from '../styles'
+import * as Constants from '../constants/chat2'
 import {TeamAvatar} from './avatars'
 import {pluralize} from '../util/string'
+import {BottomLine} from './inbox/row/small-team/bottom-line'
 
 type Props = {
   isSelected: boolean
@@ -13,6 +15,8 @@ type Props = {
   onSelectConversation: () => void
   showBadge: boolean
   showBold: boolean
+  snippet: string | null
+  snippetDecoration: string | null
 }
 
 type State = {
@@ -40,6 +44,7 @@ class SelectableBigTeamChannel extends PureComponent<Props, State> {
 
   render() {
     const boldOverride = this.props.showBold ? Styles.globalStyles.fontBold : null
+    const subColor = Constants.getRowStyles(this.props.isSelected, false).subColor
     const rowLoadedContent = (
       <>
         <TeamAvatar
@@ -77,6 +82,21 @@ class SelectableBigTeamChannel extends PureComponent<Props, State> {
               {this.props.channelname}
             </Kb.Text>
           </Kb.Box2>
+          {!this.props.numSearchHits && (
+            <BottomLine
+              participantNeedToRekey={false}
+              showBold={false}
+              subColor={subColor}
+              snippet={this.props.snippet}
+              snippetDecoration={this.props.snippetDecoration}
+              youNeedToRekey={false}
+              youAreReset={false}
+              hasResetUsers={false}
+              isSelected={this.props.isSelected}
+              isDecryptingSnippet={false}
+              isTypingSnippet={false}
+            />
+          )}
           {!!this.props.numSearchHits && (
             <Kb.Text
               type="BodySmall"

shared/chat/selectable-small-team-container.tsx

@@ -64,6 +64,8 @@ const mergeProps = (stateProps, _, ownProps) => {
     participants,
     showBadge: stateProps._hasBadge,
     showBold: styles.showBold,
+    snippet: stateProps._meta.snippet,
+    snippetDecoration: stateProps._meta.snippetDecoration,
     teamname: stateProps._meta.teamname,
     usernameColor: styles.usernameColor,
   }

shared/chat/selectable-small-team.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react'
 import * as Kb from '../common-adapters'
 import * as Styles from '../styles'
+import * as Constants from '../constants/chat2'
 import {FilteredTopLine} from './top-line'
+import {BottomLine} from './inbox/row/small-team/bottom-line'
 import {Avatars, TeamAvatar} from './avatars'
 
 type Props = {
@@ -15,6 +17,8 @@ type Props = {
   participants: Array<string>
   showBadge: boolean
   showBold: boolean
+  snippet: string | null
+  snippetDecoration: string | null
   teamname: string
   usernameColor: string
 }
@@ -42,6 +46,7 @@ class SelectableSmallTeam extends React.PureComponent<Props, State> {
         </Kb.ClickableBox>
       )
     }
+    const subColor = Constants.getRowStyles(props.isSelected, false).subColor
     return (
       <Kb.ClickableBox onClick={props.onSelectConversation} style={styles.container}>
         <Kb.Box2
@@ -76,7 +81,7 @@ class SelectableSmallTeam extends React.PureComponent<Props, State> {
               participants={props.participants}
             />
           )}
-          <Kb.Box style={styles.conversationRow}>
+          <Kb.Box2 direction="vertical" style={Styles.globalStyles.flexOne}>
             <FilteredTopLine
               isSelected={props.isSelected}
               numSearchHits={props.numSearchHits}
@@ -85,7 +90,22 @@ class SelectableSmallTeam extends React.PureComponent<Props, State> {
               showBold={props.showBold}
               usernameColor={props.usernameColor}
             />
-          </Kb.Box>
+            {!props.numSearchHits && (
+              <BottomLine
+                participantNeedToRekey={false}
+                showBold={false}
+                subColor={subColor}
+                snippet={props.snippet}
+                snippetDecoration={props.snippetDecoration}
+                youNeedToRekey={false}
+                youAreReset={false}
+                hasResetUsers={false}
+                isSelected={props.isSelected}
+                isDecryptingSnippet={false}
+                isTypingSnippet={false}
+              />
+            )}
+          </Kb.Box2>
           {this.props.showBadge && <Kb.Box2 direction="horizontal" style={styles.badge} />}
         </Kb.Box2>
       </Kb.ClickableBox>
@@ -107,12 +127,6 @@ const styles = Styles.styleSheetCreate(() => ({
     flexShrink: 0,
     height: rowHeight,
   },
-  conversationRow: {
-    ...Styles.globalStyles.flexBoxColumn,
-    flexGrow: 1,
-    height: '100%',
-    justifyContent: 'center',
-  },
   rowContainer: Styles.platformStyles({
     common: {
       paddingLeft: Styles.globalMargins.xtiny,

shared/chat/top-line.tsx

@@ -26,27 +26,26 @@ class FilteredTopLine extends PureComponent<Props> {
   }
   render() {
     return (
-      <Kb.Box2 alignSelf="flex-start" direction="horizontal">
-        <Kb.Box2 direction="vertical">
-          <Kb.PlaintextUsernames
-            type="BodySemibold"
-            containerStyle={Styles.collapseStyles([
-              this.props.showBold && styles.boldOverride,
-              styles.usernames,
-              {color: this.props.usernameColor},
-            ])}
-            users={this.props.participants.map(p => ({username: p}))}
-            title={this.props.participants.join(', ')}
-          />
-          {!!this.props.numSearchHits && (
-            <Kb.Text
-              type="BodySmall"
-              style={Styles.collapseStyles([this.props.isSelected && styles.selectedText])}
-            >
-              {this._getSearchHits()} {pluralize('result', this.props.numSearchHits)}
-            </Kb.Text>
-          )}
-        </Kb.Box2>
+      <Kb.Box2 direction="vertical" fullWidth={true}>
+        <Kb.Text
+          type="BodySemibold"
+          lineClamp={1}
+          style={Styles.collapseStyles([
+            this.props.showBold && styles.boldOverride,
+            styles.usernames,
+            {color: this.props.usernameColor},
+          ])}
+        >
+          {this.props.participants.join(', ')}
+        </Kb.Text>
+        {!!this.props.numSearchHits && (
+          <Kb.Text
+            type="BodySmall"
+            style={Styles.collapseStyles([this.props.isSelected && styles.selectedText])}
+          >
+            {this._getSearchHits()} {pluralize('result', this.props.numSearchHits)}
+          </Kb.Text>
+        )}
       </Kb.Box2>
     )
   }