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,49 +390,46 @@ export const StoryViewer = ({
                 ))}
               </div>
               <div className="StoryViewer__actions">
-                {isMe ? (
+                {canReply && (
-                  <>
+                  <button
-                    {viewCount &&
+                    className="StoryViewer__reply"
-                      (viewCount === 1 ? (
+                    onClick={() => setHasReplyModal(true)}
-                        <Intl
+                    tabIndex={0}
-                          i18n={i18n}
+                    type="button"
-                          id="MyStories__views--singular"
+                  >
-                          components={[<strong>{viewCount}</strong>]}
+                    <>
-                        />
+                      {viewCount > 0 &&
-                      ) : (
+                        (viewCount === 1 ? (
-                        <Intl
+                          <Intl
-                          i18n={i18n}
+                            i18n={i18n}
-                          id="MyStories__views--plural"
+                            id="MyStories__views--singular"
-                          components={[<strong>{viewCount}</strong>]}
+                            components={[<strong>{viewCount}</strong>]}
-                        />
+                          />
-                      ))}
+                        ) : (
-                    {viewCount && replyCount && ' '}
+                          <Intl
-                    {replyCount &&
+                            i18n={i18n}
-                      (replyCount === 1 ? (
+                            id="MyStories__views--plural"
-                        <Intl
+                            components={[<strong>{viewCount}</strong>]}
-                          i18n={i18n}
+                          />
-                          id="MyStories__replies--singular"
+                        ))}
-                          components={[<strong>{replyCount}</strong>]}
+                      {viewCount > 0 && replyCount > 0 && ' '}
-                        />
+                      {replyCount > 0 &&
-                      ) : (
+                        (replyCount === 1 ? (
-                        <Intl
+                          <Intl
-                          i18n={i18n}
+                            i18n={i18n}
-                          id="MyStories__replies--plural"
+                            id="MyStories__replies--singular"
-                          components={[<strong>{replyCount}</strong>]}
+                            components={[<strong>{replyCount}</strong>]}
-                        />
+                          />
-                      ))}
+                        ) : (
-                  </>
+                          <Intl
-                ) : (
+                            i18n={i18n}
-                  canReply && (
+                            id="MyStories__replies--plural"
-                    <button
+                            components={[<strong>{replyCount}</strong>]}
-                      className="StoryViewer__reply"
+                          />
-                      onClick={() => setHasReplyModal(true)}
+                        ))}
-                      tabIndex={0}
+                      {!viewCount && !replyCount && i18n('StoryViewer__reply')}
-                      type="button"
+                    </>
-                    >
+                  </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) => {
-              setHasReplyModal(false);
+              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,12 +216,48 @@ export const StoryViewsNRepliesModal = ({
     );
   }
 
-  const repliesElement = replies.length ? (
+  let repliesElement: JSX.Element | undefined;
-    <div className="StoryViewsNRepliesModal__replies">
+
-      {replies.map(reply =>
+  if (replies.length) {
-        reply.reactionEmoji ? (
+    repliesElement = (
-          <div className="StoryViewsNRepliesModal__reaction" key={reply.id}>
+      <div className="StoryViewsNRepliesModal__replies">
-            <div className="StoryViewsNRepliesModal__reaction--container">
+        {replies.map(reply =>
+          reply.reactionEmoji ? (
+            <div className="StoryViewsNRepliesModal__reaction" key={reply.id}>
+              <div className="StoryViewsNRepliesModal__reaction--container">
+                <Avatar
+                  acceptedMessageRequest={reply.acceptedMessageRequest}
+                  avatarPath={reply.avatarPath}
+                  badge={undefined}
+                  color={getAvatarColor(reply.color)}
+                  conversationType="direct"
+                  i18n={i18n}
+                  isMe={Boolean(reply.isMe)}
+                  name={reply.name}
+                  profileName={reply.profileName}
+                  sharedGroupNames={reply.sharedGroupNames || []}
+                  size={AvatarSize.TWENTY_EIGHT}
+                  title={reply.title}
+                />
+                <div className="StoryViewsNRepliesModal__reaction--body">
+                  <div className="StoryViewsNRepliesModal__reply--title">
+                    <ContactName
+                      contactNameColor={reply.contactNameColor}
+                      title={reply.title}
+                    />
+                  </div>
+                  {i18n('StoryViewsNRepliesModal__reacted')}
+                  <MessageTimestamp
+                    i18n={i18n}
+                    module="StoryViewsNRepliesModal__reply--timestamp"
+                    timestamp={reply.timestamp}
+                  />
+                </div>
+              </div>
+              <Emojify text={reply.reactionEmoji} />
+            </div>
+          ) : (
+            <div className="StoryViewsNRepliesModal__reply" key={reply.id}>
               <Avatar
                 acceptedMessageRequest={reply.acceptedMessageRequest}
                 avatarPath={reply.avatarPath}
@@ -224,14 +272,32 @@ export const StoryViewsNRepliesModal = ({
                 size={AvatarSize.TWENTY_EIGHT}
                 title={reply.title}
               />
-              <div className="StoryViewsNRepliesModal__reaction--body">
+              <div
+                className={classNames(
+                  'StoryViewsNRepliesModal__message-bubble',
+                  {
+                    'StoryViewsNRepliesModal__message-bubble--doe': Boolean(
+                      reply.deletedForEveryone
+                    ),
+                  }
+                )}
+              >
                 <div className="StoryViewsNRepliesModal__reply--title">
                   <ContactName
                     contactNameColor={reply.contactNameColor}
                     title={reply.title}
                   />
                 </div>
-                {i18n('StoryViewsNRepliesModal__reacted')}
+
+                <MessageBody
+                  i18n={i18n}
+                  text={
+                    reply.deletedForEveryone
+                      ? i18n('message--deletedForEveryone')
+                      : String(reply.body)
+                  }
+                />
+
                 <MessageTimestamp
                   i18n={i18n}
                   module="StoryViewsNRepliesModal__reply--timestamp"
@@ -239,58 +305,18 @@ export const StoryViewsNRepliesModal = ({
                 />
               </div>
             </div>
-            <Emojify text={reply.reactionEmoji} />
+          )
-          </div>
+        )}
-        ) : (
+        <div ref={setBottom} />
-          <div className="StoryViewsNRepliesModal__reply" key={reply.id}>
+      </div>
-            <Avatar
+    );
-              acceptedMessageRequest={reply.acceptedMessageRequest}
+  } else if (isGroupStory) {
-              avatarPath={reply.avatarPath}
+    repliesElement = (
-              badge={undefined}
+      <div className="StoryViewsNRepliesModal__replies--none">
-              color={getAvatarColor(reply.color)}
+        {i18n('StoryViewsNRepliesModal__no-replies')}
-              conversationType="direct"
+      </div>
-              i18n={i18n}
+    );
-              isMe={Boolean(reply.isMe)}
+  }
-              name={reply.name}
-              profileName={reply.profileName}
-              sharedGroupNames={reply.sharedGroupNames || []}
-              size={AvatarSize.TWENTY_EIGHT}
-              title={reply.title}
-            />
-            <div
-              className={classNames('StoryViewsNRepliesModal__message-bubble', {
-                'StoryViewsNRepliesModal__message-bubble--doe': Boolean(
-                  reply.deletedForEveryone
-                ),
-              })}
-            >
-              <div className="StoryViewsNRepliesModal__reply--title">
-                <ContactName
-                  contactNameColor={reply.contactNameColor}
-                  title={reply.title}
-                />
-              </div>
-
-              <MessageBody
-                i18n={i18n}
-                text={
-                  reply.deletedForEveryone
-                    ? i18n('message--deletedForEveryone')
-                    : String(reply.body)
-                }
-              />
-
-              <MessageTimestamp
-                i18n={i18n}
-                module="StoryViewsNRepliesModal__reply--timestamp"
-                timestamp={reply.timestamp}
-              />
-            </div>
-          </div>
-        )
-      )}
-    </div>
-  ) : undefined;
 
   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}
     >
-      {tabsElement || (
+      <div
-        <>
+        className={classNames({
-          {viewsElement}
+          'StoryViewsNRepliesModal--group': Boolean(isGroupStory),
-          {repliesElement}
+        })}
-          {composerElement}
+      >
-        </>
+        {tabsElement || (
-      )}
+          <>
+            {viewsElement || 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"
   },