diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js --- a/web/chat/composed-message.react.js +++ b/web/chat/composed-message.react.js @@ -121,12 +121,16 @@ } let inlineSidebar = null; - if (this.props.containsInlineSidebar && item.threadCreatedFromMessage) { + if ( + (this.props.containsInlineSidebar && item.threadCreatedFromMessage) || + item.reactions + ) { const positioning = isViewer ? 'right' : 'left'; inlineSidebar = (
diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-sidebar.react.js --- a/web/chat/inline-sidebar.react.js +++ b/web/chat/inline-sidebar.react.js @@ -4,6 +4,7 @@ import * as React from 'react'; import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react'; +import type { ReactionMessageInfo } from 'lib/types/message-types'; import type { ThreadInfo } from 'lib/types/thread-types'; import CommIcon from '../CommIcon.react'; @@ -12,7 +13,7 @@ type Props = { +threadInfo: ?ThreadInfo, - +reactions?: $ReadOnlyArray, + +reactions?: $ReadOnlyArray, +positioning: 'left' | 'center' | 'right', }; function InlineSidebar(props: Props): React.Node { @@ -32,14 +33,13 @@ if (!reactions || reactions.length === 0) { return null; } - const reactionsItems = reactions.map(reaction => { - return ( -
- {reaction} -
- ); - }); - return
{reactionsItems}
; + let reactionText = reactions[0].reaction; + if (reactions.length > 1) { + reactionText += ` ${reactions.length}`; + } + const reactionItems =
{reactionText}
; + + return
{reactionItems}
; }, [reactions]); const onClick = useOnClickThread(threadInfo);