info panel not modal

shared/actions/chat2/index.tsx

@@ -3073,20 +3073,6 @@ const unfurlResolvePrompt = (action: Chat2Gen.UnfurlResolvePromptPayload) => {
   })
 }
 
-const toggleInfoPanel = (state: Container.TypedState) => {
-  const visibleScreen = Router2Constants.getVisibleScreen()
-  if (visibleScreen && visibleScreen.routeName === 'chatInfoPanel') {
-    return [
-      Chat2Gen.createClearAttachmentView({conversationIDKey: state.chat2.selectedConversation}),
-      RouteTreeGen.createNavigateUp(),
-    ]
-  } else {
-    return RouteTreeGen.createNavigateAppend({
-      path: [{props: {conversationIDKey: state.chat2.selectedConversation}, selected: 'chatInfoPanel'}],
-    })
-  }
-}
-
 const unsentTextChanged = (state: Container.TypedState, action: Chat2Gen.UnsentTextChangedPayload) => {
   const {conversationIDKey, text} = action.payload
   const meta = Constants.getMeta(state, conversationIDKey)
@@ -3534,6 +3520,26 @@ const refreshBotSettings = async (_: Container.TypedState, action: Chat2Gen.Refr
   return Chat2Gen.createSetBotSettings({conversationIDKey, settings, username})
 }
 
+const onShowInfoPanel = (action: Chat2Gen.ShowInfoPanelPayload) => {
+  const {conversationIDKey, show, tab} = action.payload
+  if (Container.isMobile) {
+    const visibleScreen = Router2Constants.getVisibleScreen()
+    if ((visibleScreen?.routeName === 'chatInfoPanel') !== show) {
+      return show
+        ? RouteTreeGen.createNavigateAppend({
+            path: [{props: {conversationIDKey, tab}, selected: 'chatInfoPanel'}],
+          })
+        : [
+            ...(conversationIDKey ? [Chat2Gen.createClearAttachmentView({conversationIDKey})] : []),
+            RouteTreeGen.createNavigateUp(),
+          ]
+    }
+    return false
+  } else {
+    return false
+  }
+}
+
 function* chat2Saga() {
   // Platform specific actions
   if (Container.isMobile) {
@@ -3696,7 +3702,6 @@ function* chat2Saga() {
   )
   yield* Saga.chainAction2(Chat2Gen.messageReplyPrivately, messageReplyPrivately)
   yield* Saga.chainAction(Chat2Gen.openChatFromWidget, openChatFromWidget)
-  yield* Saga.chainAction2(Chat2Gen.toggleInfoPanel, toggleInfoPanel)
 
   // Exploding things
   yield* Saga.chainGenerator<Chat2Gen.SetConvExplodingModePayload>(
@@ -3779,6 +3784,8 @@ function* chat2Saga() {
   yield* Saga.chainAction2(Chat2Gen.selectConversation, refreshPreviousSelected)
   yield* Saga.chainAction2(Chat2Gen.selectConversation, ensureSelectedMeta)
 
+  yield* Saga.chainAction(Chat2Gen.showInfoPanel, onShowInfoPanel)
+
   yield* Saga.chainAction2(Chat2Gen.selectConversation, fetchConversationBio)
 
   yield* Saga.chainAction2(Chat2Gen.sendAudioRecording, sendAudioRecording)

shared/actions/json/chat2.json

@@ -593,7 +593,6 @@
       "messageID": "Types.MessageID",
       "collapse": "boolean"
     },
-    "toggleInfoPanel": {},
     "updateCoinFlipStatus": {
       "_description": "Update status of a coin flip game",
       "statuses": "Array<RPCChatTypes.UICoinFlipStatus>"
@@ -894,6 +893,11 @@
       "conversationIDKey": "Types.ConversationIDKey",
       "username": "string",
       "role": "TeamsTypes.TeamRoleType | null"
+    },
+    "showInfoPanel": {
+        "tab?": "'settings' | 'members' | 'attachments' | 'bots'",
+        "show": "boolean",
+        "conversationIDKey?": "Types.ConversationIDKey"
     }
   }
 }

shared/chat/conversation/attachment-fullscreen/container.tsx

@@ -21,17 +21,9 @@ const Connected = Container.connect(
     }
   },
   dispatch => ({
-    _onAllMedia: (conversationIDKey: Types.ConversationIDKey) =>
-      dispatch(
-        RouteTreeGen.createNavigateAppend({
-          path: [
-            {
-              props: {conversationIDKey, tab: 'attachments'},
-              selected: 'chatInfoPanel',
-            },
-          ],
-        })
-      ),
+    _onAllMedia: (conversationIDKey: Types.ConversationIDKey) => {
+      dispatch(Chat2Gen.createShowInfoPanel({conversationIDKey, show: true, tab: 'attachments'}))
+    },
     _onDownloadAttachment: (message: Types.MessageAttachment) =>
       dispatch(Chat2Gen.createAttachmentDownload({message})),
     _onShowInFinder: (message: Types.MessageAttachment) => {

shared/chat/conversation/header-area/container.native.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+import * as Types from '../../../constants/types/chat2'
+import * as Constants from '../../../constants/chat2'
+import * as Chat2Gen from '../../../actions/chat2-gen'
+import {ChannelHeader, UsernameHeader, PhoneOrEmailHeader, Props} from './index.native'
+import * as Container from '../../../util/container'
+import {createShowUserProfile} from '../../../actions/profile-gen'
+import {getVisiblePath} from '../../../constants/router2'
+import * as Tabs from '../../../constants/tabs'
+
+type OwnProps = {
+  conversationIDKey: Types.ConversationIDKey
+}
+
+const isPhoneOrEmail = (props: Props): boolean =>
+  props.participants.some(participant => participant.endsWith('@phone') || participant.endsWith('@email'))
+
+const HeaderBranch = (props: Props) => {
+  if (props.teamName) {
+    return <ChannelHeader {...props} />
+  }
+  if (isPhoneOrEmail(props)) {
+    return <PhoneOrEmailHeader {...props} />
+  }
+  return <UsernameHeader {...props} />
+}
+
+export default Container.connect(
+  (state, {conversationIDKey}: OwnProps) => {
+    const meta = Constants.getMeta(state, conversationIDKey)
+    const participantInfo = Constants.getParticipantInfo(state, conversationIDKey)
+    const participants = meta.teamname ? null : participantInfo.name
+    const contactNames = participantInfo.contactName
+
+    return {
+      _badgeMap: state.chat2.badgeMap,
+      channelName: meta.channelname,
+      participants,
+      contactNames,
+      muted: meta.isMuted,
+      pendingWaiting:
+        conversationIDKey === Constants.pendingWaitingConversationIDKey ||
+        conversationIDKey === Constants.pendingErrorConversationIDKey,
+      smallTeam: meta.teamType !== 'big',
+      teamName: meta.teamname,
+    }
+  },
+  (dispatch: Container.TypedDispatch, {conversationIDKey}: OwnProps) => ({
+    onOpenFolder: () => dispatch(Chat2Gen.createOpenFolder({conversationIDKey})),
+    onShowInfoPanel: () => dispatch(Chat2Gen.createShowInfoPanel({conversationIDKey, show: true})),
+    onShowProfile: (username: string) => dispatch(createShowUserProfile({username})),
+    onToggleThreadSearch: () => dispatch(Chat2Gen.createToggleThreadSearch({conversationIDKey})),
+    unMuteConversation: () => dispatch(Chat2Gen.createMuteConversation({conversationIDKey, muted: false})),
+  }),
+  (stateProps, dispatchProps, ownProps: OwnProps) => {
+    const {conversationIDKey} = ownProps
+    const {_badgeMap} = stateProps
+    const {channelName, contactNames, muted, participants, pendingWaiting, smallTeam, teamName} = stateProps
+    const {onOpenFolder, onShowProfile, onShowInfoPanel} = dispatchProps
+    const {onToggleThreadSearch, unMuteConversation} = dispatchProps
+    const visiblePath = getVisiblePath()
+    const onTopOfInbox = visiblePath?.length === 4 && visiblePath[2]?.routeName === Tabs.chatTab
+    return {
+      badgeNumber: onTopOfInbox
+        ? [..._badgeMap.entries()].reduce(
+            (res, [currentConvID, currentValue]) =>
+              // only show sum of badges that aren't for the current conversation
+              currentConvID !== conversationIDKey ? res + currentValue : res,
+            0
+          )
+        : 0,
+      channelName,
+      contactNames,
+      muted,
+      onOpenFolder,
+      onShowInfoPanel,
+      onShowProfile,
+      onToggleThreadSearch,
+      participants: participants || [],
+      pendingWaiting,
+      smallTeam,
+      teamName,
+      unMuteConversation,
+    }
+  }
+)(HeaderBranch)

shared/chat/conversation/header-area/normal/index.native.tsx → shared/chat/conversation/header-area/index.native.tsx

@@ -1,9 +1,24 @@
 import * as React from 'react'
-import {Avatar, Box2, HeaderHocHeader, Icon, Text, ConnectedUsernames} from '../../../../common-adapters'
-import {assertionToDisplay} from '../../../../common-adapters/usernames'
-import * as Styles from '../../../../styles'
-import {Props} from '.'
-import * as Container from '../../../../util/container'
+import {Avatar, Box2, HeaderHocHeader, Icon, Text, ConnectedUsernames} from '../../../common-adapters'
+import {assertionToDisplay} from '../../../common-adapters/usernames'
+import * as Styles from '../../../styles'
+import * as Container from '../../../util/container'
+
+export type Props = {
+  badgeNumber?: number
+  channelName?: string
+  contactNames: Map<string, string>
+  muted: boolean
+  onOpenFolder?: () => void
+  onShowProfile: (user: string) => void
+  onShowInfoPanel: () => void
+  onToggleThreadSearch: () => void
+  teamName?: string
+  participants: Array<string>
+  pendingWaiting: boolean
+  smallTeam: boolean
+  unMuteConversation: () => void
+}
 
 const shhIconColor = Styles.globalColors.black_20
 const shhIconFontSize = 24
@@ -25,7 +40,7 @@ const Wrapper = (
           ? undefined
           : [
               {icon: 'iconfont-search', label: 'search', onPress: props.onToggleThreadSearch},
-              {icon: 'iconfont-info', label: 'Info', onPress: props.onToggleInfoPanel},
+              {icon: 'iconfont-info', label: 'Info', onPress: props.onShowInfoPanel},
             ]
       }
       titleComponent={props.children}