Fix story group replies rendering

ts/components/StoryViewer.tsx

@@ -675,7 +675,7 @@ export const StoryViewer = ({
                               components={[<strong>{viewCount}</strong>]}
                             />
                           ))}
-                        {viewCount > 0 && replyCount > 0 && ' '}
+                        {(sendState || viewCount > 0) && replyCount > 0 && ' '}
                         {replyCount > 0 &&
                           (replyCount === 1 ? (
                             <Intl
@@ -751,7 +751,6 @@ export const StoryViewer = ({
             getPreferredBadge={getPreferredBadge}
             i18n={i18n}
             isGroupStory={isGroupStory}
-            isMyStory={isMe}
             onClose={() => setHasStoryViewsNRepliesModal(false)}
             onReact={emoji => {
               onReactToStory(emoji, story);

ts/components/StoryViewsNRepliesModal.stories.tsx

@@ -31,9 +31,6 @@ export default {
     i18n: {
       defaultValue: i18n,
     },
-    isMyStory: {
-      defaultValue: false,
-    },
     onClose: { action: true },
     onSetSkinTone: { action: true },
     onReact: { action: true },
@@ -168,7 +165,6 @@ CanReply.storyName = 'Can reply';
 
 export const ViewsOnly = Template.bind({});
 ViewsOnly.args = {
-  isMyStory: true,
   views: getViewsAndReplies().views,
 };
 ViewsOnly.storyName = 'Views only';

ts/components/StoryViewsNRepliesModal.tsx

@@ -89,7 +89,6 @@ export type PropsType = {
   getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   isGroupStory?: boolean;
-  isMyStory?: boolean;
   onClose: () => unknown;
   onReact: (emoji: string) => unknown;
   onReply: (
@@ -116,7 +115,6 @@ export const StoryViewsNRepliesModal = ({
   getPreferredBadge,
   i18n,
   isGroupStory,
-  isMyStory,
   onClose,
   onReact,
   onReply,
@@ -173,7 +171,7 @@ export const StoryViewsNRepliesModal = ({
 
   let composerElement: JSX.Element | undefined;
 
-  if (!isMyStory && canReply) {
+  if (canReply) {
     composerElement = (
       <>
         {!isGroupStory && (
@@ -293,7 +291,9 @@ export const StoryViewsNRepliesModal = ({
                   <div className="StoryViewsNRepliesModal__reply--title">
                     <ContactName
                       contactNameColor={reply.contactNameColor}
-                      title={reply.author.title}
+                      title={
+                        reply.author.isMe ? i18n('you') : reply.author.title
+                      }
                     />
                   </div>
                   {i18n('StoryViewsNRepliesModal__reacted')}
@@ -312,6 +312,7 @@ export const StoryViewsNRepliesModal = ({
               <Message
                 {...MESSAGE_DEFAULT_PROPS}
                 author={reply.author}
+                contactNameColor={reply.contactNameColor}
                 containerElementRef={containerElementRef}
                 conversationColor="ultramarine"
                 conversationId={reply.conversationId}
@@ -326,10 +327,12 @@ export const StoryViewsNRepliesModal = ({
                 readStatus={reply.readStatus}
                 renderingContext="StoryViewsNRepliesModal"
                 shouldCollapseAbove={
-                  reply.conversationId === replies[index - 1]?.conversationId
+                  reply.conversationId === replies[index - 1]?.conversationId &&
+                  !replies[index - 1]?.reactionEmoji
                 }
                 shouldCollapseBelow={
-                  reply.conversationId === replies[index + 1]?.conversationId
+                  reply.conversationId === replies[index + 1]?.conversationId &&
+                  !replies[index + 1]?.reactionEmoji
                 }
                 shouldHideMetadata={false}
                 text={reply.body}

ts/components/conversation/Message.tsx

@@ -858,6 +858,7 @@ export class Message extends React.PureComponent<Props, State> {
     const {
       author,
       contactNameColor,
+      i18n,
       isSticker,
       isTapToView,
       isTapToViewExpired,
@@ -879,7 +880,7 @@ export class Message extends React.PureComponent<Props, State> {
       <div className={moduleName}>
         <ContactName
           contactNameColor={contactNameColor}
-          title={author.title}
+          title={author.isMe ? i18n('you') : author.title}
           module={moduleName}
         />
       </div>

ts/state/selectors/stories.ts

@@ -341,8 +341,12 @@ export const getStories = createSelector(
           stories: [storyView, ...existingMyStory.stories],
         });
 
+        // If it's a group story we still want it to render as part of regular
+        // stories or hidden stories.
+        if (story.storyDistributionListId) {
           return;
         }
+      }
 
       let storiesMap: Map<string, ConversationStoryType>;
 

ts/util/sendStoryMessage.ts

@@ -217,6 +217,7 @@ export async function sendStoryMessage(
       const messageAttributes =
         await window.Signal.Migrations.upgradeMessageSchema({
           attachments,
+          canReplyToStory: true,
           conversationId,
           expireTimer: DAY / SECOND,
           id: UUID.generate().toString(),