diff --git a/native/chat/inline-engagement.react.js b/native/chat/inline-engagement.react.js --- a/native/chat/inline-engagement.react.js +++ b/native/chat/inline-engagement.react.js @@ -33,6 +33,7 @@ +reactions?: ReactionInfo, +disabled?: boolean, +positioning?: 'left' | 'right', + +label?: ?string, +shouldRenderAvatars?: boolean, }; function InlineEngagement(props: Props): React.Node { @@ -42,6 +43,7 @@ threadInfo, positioning, shouldRenderAvatars, + label, } = props; const repliesText = useInlineEngagementText(threadInfo); @@ -122,7 +124,24 @@ styles.reactionsContainer, ]); + const isLeft = positioning === 'left'; + + const editedLabel = React.useMemo(() => { + if (!label) { + return null; + } + + const labelLeftRight = isLeft + ? styles.messageLabelLeft + : styles.messageLabelRight; + + return {label}; + }, [isLeft, label, styles]); + const container = React.useMemo(() => { + if (!sidebarItem && !reactionList) { + return null; + } return ( {sidebarItem} @@ -131,8 +150,8 @@ ); }, [reactionList, sidebarItem, styles.container]); - const inlineEngagementPositionStyle = []; - if (positioning === 'left') { + const inlineEngagementPositionStyle = [styles.inlineEngagement]; + if (isLeft) { inlineEngagementPositionStyle.push(styles.leftInlineEngagement); } else { inlineEngagementPositionStyle.push(styles.rightInlineEngagement); @@ -141,11 +160,24 @@ inlineEngagementPositionStyle.push({ marginLeft: avatarOffset }); } - return ( - - {container} - - ); + let body; + if (isLeft) { + body = ( + <> + {editedLabel} + {container} + + ); + } else { + body = ( + <> + {container} + {editedLabel} + + ); + } + + return {body}; } const unboundStyles = { @@ -205,6 +237,19 @@ flexDirection: 'row', alignItems: 'center', }, + messageLabel: { + color: 'messageLabel', + paddingHorizontal: 3, + top: 10, + }, + messageLabelLeft: { + marginLeft: 9, + marginRight: 4, + }, + messageLabelRight: { + marginRight: 10, + marginLeft: 4, + }, avatarOffset: { width: avatarOffset, }, diff --git a/native/themes/colors.js b/native/themes/colors.js --- a/native/themes/colors.js +++ b/native/themes/colors.js @@ -91,6 +91,7 @@ subthreadsModalClose: '#808080', subthreadsModalBackground: '#EBEBEB', subthreadsModalSearch: '#00000008', + messageLabel: '#0A0A0A', }); export type Colors = $Exact; @@ -178,6 +179,7 @@ typeaheadTooltipBackground: '#1F1F1f', typeaheadTooltipBorder: '#404040', typeaheadTooltipText: 'white', + messageLabel: '#CCCCCC', }); const colors = { light, dark };