diff --git a/native/chat/message-list-container.react.js b/native/chat/message-list-container.react.js --- a/native/chat/message-list-container.react.js +++ b/native/chat/message-list-container.react.js @@ -1,9 +1,10 @@ // @flow +import Icon from '@expo/vector-icons/FontAwesome5.js'; import { useNavigationState } from '@react-navigation/native'; import invariant from 'invariant'; import * as React from 'react'; -import { View } from 'react-native'; +import { View, Text } from 'react-native'; import genesis from 'lib/facts/genesis.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; @@ -209,6 +210,18 @@ } const unboundStyles = { + pinnedCountBanner: { + backgroundColor: 'panelForeground', + height: 30, + flexDirection: 'row', + textAlign: 'center', + justifyContent: 'center', + alignItems: 'center', + }, + pinnedCountText: { + color: 'panelBackgroundLabel', + marginRight: 5, + }, container: { backgroundColor: 'listBackground', flex: 1, @@ -349,8 +362,40 @@ state => threadInfoSelector(state)[genesis.id], ); + const bannerText = React.useMemo(() => { + if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) { + return ''; + } + + const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages'; + return `${threadInfo.pinnedCount} pinned ${messageNoun}`; + }, [threadInfo.pinnedCount]); + + const pinnedCountBanner = React.useMemo(() => { + if (!bannerText) { + return null; + } + + return ( + + {bannerText} + + + ); + }, [ + bannerText, + styles.pinnedCountBanner, + styles.pinnedCountText, + colors.panelBackgroundLabel, + ]); + return ( + {pinnedCountBanner}