Fix story reply box interactions

_locales/en/messages.json

@@ -7026,6 +7026,10 @@
     "message": "Type a reply...",
     "description": "Placeholder text for the story reply modal"
   },
+  "StoryViewsNRepliesModal__no-replies": {
+    "message": "No replies yet",
+    "description": "Placeholder text for when there are no replies"
+  },
   "StoryViewsNRepliesModal__tab--views": {
     "message": "Views",
     "description": "Title for views tab"

stylesheets/components/StoryViewsNRepliesModal.scss

@@ -3,9 +3,27 @@
 
 .StoryViewsNRepliesModal {
   min-width: 320px;
+  overflow: hidden;
 
   &--group {
-    min-height: 360px;
+    display: flex;
+    flex-direction: column;
+    min-height: 400px;
+  }
+
+  &__replies {
+    flex: 1;
+    max-height: 75vh;
+    overflow-y: overlay;
+
+    &--none {
+      align-items: center;
+      color: $color-gray-45;
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      user-select: none;
+    }
   }
 
   &__overlay-container {

stylesheets/components/TextAttachment.scss

@@ -6,7 +6,6 @@
 
   &__story {
     align-items: center;
-    border-radius: 12px;
     display: flex;
     flex-direction: column;
     height: 1280px;

ts/components/StoryViewer.tsx

@@ -60,6 +60,7 @@ export type PropsType = {
   replyState?: ReplyStateType;
   skinTone?: number;
   stories: Array<StoryViewType>;
+  views?: Array<string>;
 };
 
 const CAPTION_BUFFER = 20;
@@ -88,6 +89,7 @@ export const StoryViewer = ({
   replyState,
   skinTone,
   stories,
+  views,
 }: PropsType): JSX.Element => {
   const [currentStoryIndex, setCurrentStoryIndex] = useState(0);
   const [storyDuration, setStoryDuration] = useState<number | undefined>();
@@ -268,7 +270,7 @@ export const StoryViewer = ({
   const replies =
     replyState && replyState.messageId === messageId ? replyState.replies : [];
 
-  const viewCount = 0;
+  const viewCount = (views || []).length;
   const replyCount = replies.length;
 
   return (
@@ -388,9 +390,15 @@ export const StoryViewer = ({
                 ))}
               </div>
               <div className="StoryViewer__actions">
-                {isMe ? (
+                {canReply && (
+                  <button
+                    className="StoryViewer__reply"
+                    onClick={() => setHasReplyModal(true)}
+                    tabIndex={0}
+                    type="button"
+                  >
                     <>
-                    {viewCount &&
+                      {viewCount > 0 &&
                         (viewCount === 1 ? (
                           <Intl
                             i18n={i18n}
@@ -404,8 +412,8 @@ export const StoryViewer = ({
                             components={[<strong>{viewCount}</strong>]}
                           />
                         ))}
-                    {viewCount && replyCount && ' '}
+                      {viewCount > 0 && replyCount > 0 && ' '}
-                    {replyCount &&
+                      {replyCount > 0 &&
                         (replyCount === 1 ? (
                           <Intl
                             i18n={i18n}
@@ -419,18 +427,9 @@ export const StoryViewer = ({
                             components={[<strong>{replyCount}</strong>]}
                           />
                         ))}
+                      {!viewCount && !replyCount && i18n('StoryViewer__reply')}
                     </>
-                ) : (
-                  canReply && (
-                    <button
-                      className="StoryViewer__reply"
-                      onClick={() => setHasReplyModal(true)}
-                      tabIndex={0}
-                      type="button"
-                    >
-                      {i18n('StoryViewer__reply')}
                   </button>
-                  )
                 )}
               </div>
             </div>
@@ -454,13 +453,16 @@ export const StoryViewer = ({
             authorTitle={title}
             getPreferredBadge={getPreferredBadge}
             i18n={i18n}
+            isGroupStory={isGroupStory}
             isMyStory={isMe}
             onClose={() => setHasReplyModal(false)}
             onReact={emoji => {
               onReactToStory(emoji, visibleStory);
             }}
             onReply={(message, mentions, replyTimestamp) => {
+              if (!isGroupStory) {
                 setHasReplyModal(false);
+              }
               onReplyToStory(message, mentions, replyTimestamp, visibleStory);
             }}
             onSetSkinTone={onSetSkinTone}

ts/components/StoryViewsNRepliesModal.stories.tsx

@@ -112,12 +112,17 @@ story.add('Views only', () => (
   />
 ));
 
+story.add('In a group (no replies)', () => (
+  <StoryViewsNRepliesModal {...getDefaultProps()} isGroupStory />
+));
+
 story.add('In a group', () => {
   const { views, replies } = getViewsAndReplies();
 
   return (
     <StoryViewsNRepliesModal
       {...getDefaultProps()}
+      isGroupStory
       replies={replies}
       views={views}
     />

ts/components/StoryViewsNRepliesModal.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { usePopper } from 'react-popper';
 import type { AttachmentType } from '../types/Attachment';
@@ -52,6 +52,7 @@ export type PropsType = {
   authorTitle: string;
   getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
+  isGroupStory?: boolean;
   isMyStory?: boolean;
   onClose: () => unknown;
   onReact: (emoji: string) => unknown;
@@ -76,6 +77,7 @@ export const StoryViewsNRepliesModal = ({
   authorTitle,
   getPreferredBadge,
   i18n,
+  isGroupStory,
   isMyStory,
   onClose,
   onReact,
@@ -91,7 +93,8 @@ export const StoryViewsNRepliesModal = ({
   storyPreviewAttachment,
   views,
 }: PropsType): JSX.Element => {
-  const inputApiRef = React.useRef<InputApi | undefined>();
+  const inputApiRef = useRef<InputApi | undefined>();
+  const [bottom, setBottom] = useState<HTMLDivElement | null>(null);
   const [messageBodyText, setMessageBodyText] = useState('');
   const [showReactionPicker, setShowReactionPicker] = useState(false);
 
@@ -122,13 +125,19 @@ export const StoryViewsNRepliesModal = ({
     strategy: 'fixed',
   });
 
+  useEffect(() => {
+    if (replies.length) {
+      bottom?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [bottom, replies.length]);
+
   let composerElement: JSX.Element | undefined;
 
   if (!isMyStory) {
     composerElement = (
       <div className="StoryViewsNRepliesModal__compose-container">
         <div className="StoryViewsNRepliesModal__composer">
-          {!replies.length && (
+          {!isGroupStory && (
             <Quote
               authorTitle={authorTitle}
               conversationColor="ultramarine"
@@ -154,7 +163,10 @@ export const StoryViewsNRepliesModal = ({
               setMessageBodyText(messageText);
             }}
             onPickEmoji={insertEmoji}
-            onSubmit={onReply}
+            onSubmit={(...args) => {
+              inputApiRef.current?.reset();
+              onReply(...args);
+            }}
             onTextTooLong={onTextTooLong}
             placeholder={i18n('StoryViewsNRepliesModal__placeholder')}
             theme={ThemeType.dark}
@@ -204,7 +216,10 @@ export const StoryViewsNRepliesModal = ({
     );
   }
 
-  const repliesElement = replies.length ? (
+  let repliesElement: JSX.Element | undefined;
+
+  if (replies.length) {
+    repliesElement = (
       <div className="StoryViewsNRepliesModal__replies">
         {replies.map(reply =>
           reply.reactionEmoji ? (
@@ -258,11 +273,14 @@ export const StoryViewsNRepliesModal = ({
                 title={reply.title}
               />
               <div
-              className={classNames('StoryViewsNRepliesModal__message-bubble', {
+                className={classNames(
+                  'StoryViewsNRepliesModal__message-bubble',
+                  {
                     'StoryViewsNRepliesModal__message-bubble--doe': Boolean(
                       reply.deletedForEveryone
                     ),
-              })}
+                  }
+                )}
               >
                 <div className="StoryViewsNRepliesModal__reply--title">
                   <ContactName
@@ -289,8 +307,16 @@ export const StoryViewsNRepliesModal = ({
             </div>
           )
         )}
+        <div ref={setBottom} />
       </div>
-  ) : undefined;
+    );
+  } else if (isGroupStory) {
+    repliesElement = (
+      <div className="StoryViewsNRepliesModal__replies--none">
+        {i18n('StoryViewsNRepliesModal__no-replies')}
+      </div>
+    );
+  }
 
   const viewsElement = views.length ? (
     <div className="StoryViewsNRepliesModal__views">
@@ -358,28 +384,26 @@ export const StoryViewsNRepliesModal = ({
       </Tabs>
     ) : undefined;
 
-  const hasOnlyViewsElement =
-    viewsElement && !repliesElement && !composerElement;
-
   return (
     <Modal
       i18n={i18n}
-      moduleClassName={classNames('StoryViewsNRepliesModal', {
+      moduleClassName="StoryViewsNRepliesModal"
-        'StoryViewsNRepliesModal--group': Boolean(
-          views.length && replies.length
-        ),
-      })}
       onClose={onClose}
-      useFocusTrap={!hasOnlyViewsElement}
+      useFocusTrap={Boolean(composerElement)}
       theme={Theme.Dark}
+    >
+      <div
+        className={classNames({
+          'StoryViewsNRepliesModal--group': Boolean(isGroupStory),
+        })}
       >
         {tabsElement || (
           <>
-          {viewsElement}
+            {viewsElement || repliesElement}
-          {repliesElement}
             {composerElement}
           </>
         )}
+      </div>
     </Modal>
   );
 };

ts/util/lint/exceptions.json

@@ -7702,7 +7702,7 @@
   {
     "rule": "React-useRef",
     "path": "ts/components/StoryViewsNRepliesModal.tsx",
-    "line": "  const inputApiRef = React.useRef<InputApi | undefined>();",
+    "line": "  const inputApiRef = useRef<InputApi | undefined>();",
     "reasonCategory": "usageTrusted",
     "updated": "2022-02-15T17:57:06.507Z"
   },