Improvements to the MyStories row

stylesheets/components/MyStories.scss

@@ -129,3 +129,7 @@
     }
   }
 }
+
+.StoryListItem__button:hover .MyStories__avatar__add-story {
+  border-color: $color-gray-65;
+}

stylesheets/components/StoryListItem.scss

@@ -83,15 +83,6 @@
     position: relative;
     width: 46px;
 
-    &--add {
-      &::after {
-        content: '';
-        @include color-svg('../images/icons/v2/plus-20.svg', $color-gray-15);
-        height: 18px;
-        width: 18px;
-      }
-    }
-
     &--image {
       @include button-reset;
 

ts/components/ContextMenu.tsx

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { KeyboardEvent, ReactNode } from 'react';
-import type { Options } from '@popperjs/core';
+import type { Options, VirtualElement } from '@popperjs/core';
 import FocusTrap from 'focus-trap-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { usePopper } from 'react-popper';
 import { noop } from 'lodash';
@@ -23,6 +23,7 @@ export type ContextMenuOptionType<T> = {
 };
 
 export type PropsType<T> = {
+  readonly ariaLabel?: string;
   readonly children?: ReactNode;
   readonly i18n: LocalizerType;
   readonly menuOptions: ReadonlyArray<ContextMenuOptionType<T>>;
@@ -37,7 +38,27 @@ export type PropsType<T> = {
 
 let closeCurrentOpenContextMenu: undefined | (() => unknown);
 
+// https://popper.js.org/docs/v2/virtual-elements/
+// Generating a virtual element here so that we can make the menu pop up
+// right under the mouse cursor.
+function generateVirtualElement(x: number, y: number): VirtualElement {
+  return {
+    getBoundingClientRect: () => ({
+      bottom: y,
+      height: 0,
+      left: x,
+      right: x,
+      toJSON: () => ({ x, y }),
+      top: y,
+      width: 0,
+      x,
+      y,
+    }),
+  };
+}
+
 export function ContextMenu<T>({
+  ariaLabel,
   children,
   i18n,
   menuOptions,
@@ -56,14 +77,21 @@ export function ContextMenu<T>({
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
     null
   );
+
+  const virtualElement = useRef<VirtualElement>(generateVirtualElement(0, 0));
+
   const [referenceElement, setReferenceElement] =
     useState<HTMLButtonElement | null>(null);
 
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+  const { styles, attributes } = usePopper(
+    virtualElement.current,
+    popperElement,
+    {
       placement: 'top-start',
       strategy: 'fixed',
       ...popperOptions,
-  });
+    }
+  );
 
   useEffect(() => {
     if (onMenuShowingChanged) {
@@ -129,9 +157,10 @@ export function ContextMenu<T>({
     }
   };
 
-  const handleClick = (ev: KeyboardEvent | React.MouseEvent) => {
+  const handleClick = (ev: React.MouseEvent) => {
     closeCurrentOpenContextMenu?.();
     closeCurrentOpenContextMenu = () => setIsMenuShowing(false);
+    virtualElement.current = generateVirtualElement(ev.clientX, ev.clientY);
     setIsMenuShowing(true);
     ev.stopPropagation();
     ev.preventDefault();
@@ -147,7 +176,7 @@ export function ContextMenu<T>({
       )}
     >
       <button
-        aria-label={i18n('ContextMenu--button')}
+        aria-label={ariaLabel || i18n('ContextMenu--button')}
         className={classNames(
           getClassName('__button'),
           isMenuShowing ? getClassName('__button--active') : undefined

ts/components/MyStoriesButton.stories.tsx

@@ -36,6 +36,7 @@ export default {
     onAddStory: { action: true },
     onClick: { action: true },
     queueStoryDownload: { action: true },
+    showToast: { action: true },
   },
 } as Meta;
 
@@ -50,7 +51,7 @@ const interactionTest: PlayFunction<ReactFramework, PropsType> = async ({
   await userEvent.click(btnAddStory);
   await expect(args.onAddStory).toHaveBeenCalled();
 
-  const [btnStory] = canvas.getAllByLabelText('Story');
+  const [btnStory] = canvas.getAllByText('My Stories');
   await userEvent.click(btnStory);
   await expect(args.onClick).toHaveBeenCalled();
 };

ts/components/MyStoriesButton.tsx

@@ -5,11 +5,14 @@ import React from 'react';
 import classNames from 'classnames';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
+import type { ShowToastActionCreatorType } from '../state/ducks/toast';
 import type { StoryViewType } from '../types/Stories';
 import { Avatar, AvatarSize } from './Avatar';
 import { StoryImage } from './StoryImage';
 import { getAvatarColor } from '../types/Colors';
 
+import { StoriesAddStoryButton } from './StoriesAddStoryButton';
+
 export type PropsType = {
   hasMultiple: boolean;
   i18n: LocalizerType;
@@ -18,6 +21,7 @@ export type PropsType = {
   onAddStory: () => unknown;
   onClick: () => unknown;
   queueStoryDownload: (storyId: string) => unknown;
+  showToast: ShowToastActionCreatorType;
 };
 
 export const MyStoriesButton = ({
@@ -28,6 +32,7 @@ export const MyStoriesButton = ({
   onAddStory,
   onClick,
   queueStoryDownload,
+  showToast,
 }: PropsType): JSX.Element => {
   const {
     acceptedMessageRequest,
@@ -40,9 +45,14 @@ export const MyStoriesButton = ({
     title,
   } = me;
 
+  if (!newestStory) {
     return (
-    <div className="Stories__my-stories">
+      <StoriesAddStoryButton
-      <div className="StoryListItem__button">
+        i18n={i18n}
+        moduleClassName="StoryListItem"
+        onAddStory={onAddStory}
+        showToast={showToast}
+      >
         <div className="MyStories__avatar-container">
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}
@@ -53,7 +63,6 @@ export const MyStoriesButton = ({
             i18n={i18n}
             isMe={Boolean(isMe)}
             name={name}
-            onClick={onAddStory}
             profileName={profileName}
             sharedGroupNames={sharedGroupNames}
             size={AvatarSize.FORTY_EIGHT}
@@ -62,22 +71,50 @@ export const MyStoriesButton = ({
           <div
             aria-label={i18n('Stories__add')}
             className="MyStories__avatar__add-story"
-            onClick={ev => {
-              onAddStory();
-              ev.stopPropagation();
-              ev.preventDefault();
-            }}
-            onKeyDown={ev => {
-              if (ev.key === 'Enter') {
-                onAddStory();
-                ev.stopPropagation();
-                ev.preventDefault();
-              }
-            }}
-            role="button"
-            tabIndex={0}
           />
         </div>
+        <div className="StoryListItem__info">
+          <>
+            <div className="StoryListItem__info--title">
+              {i18n('Stories__mine')}
+            </div>
+            <div className="StoryListItem__info--timestamp">
+              {i18n('Stories__add')}
+            </div>
+          </>
+        </div>
+      </StoriesAddStoryButton>
+    );
+  }
+
+  return (
+    <div className="StoryListItem__button">
+      <div className="MyStories__avatar-container">
+        <StoriesAddStoryButton
+          i18n={i18n}
+          onAddStory={onAddStory}
+          showToast={showToast}
+        >
+          <Avatar
+            acceptedMessageRequest={acceptedMessageRequest}
+            avatarPath={avatarPath}
+            badge={undefined}
+            color={getAvatarColor(color)}
+            conversationType="direct"
+            i18n={i18n}
+            isMe={Boolean(isMe)}
+            name={name}
+            profileName={profileName}
+            sharedGroupNames={sharedGroupNames}
+            size={AvatarSize.FORTY_EIGHT}
+            title={title}
+          />
+          <div
+            aria-label={i18n('Stories__add')}
+            className="MyStories__avatar__add-story"
+          />
+        </StoriesAddStoryButton>
+      </div>
       <div
         className="StoryListItem__click-container"
         onClick={onClick}
@@ -96,14 +133,8 @@ export const MyStoriesButton = ({
             <div className="StoryListItem__info--title">
               {i18n('Stories__mine')}
             </div>
-              {!newestStory && (
-                <div className="StoryListItem__info--timestamp">
-                  {i18n('Stories__add')}
-                </div>
-              )}
           </>
         </div>
-
         <div
           aria-label={i18n('StoryListItem__label')}
           className={classNames('StoryListItem__previews', {
@@ -111,7 +142,6 @@ export const MyStoriesButton = ({
           })}
         >
           {hasMultiple && <div className="StoryListItem__previews--more" />}
-            {newestStory ? (
           <StoryImage
             attachment={newestStory.attachment}
             firstName={i18n('you')}
@@ -123,13 +153,6 @@ export const MyStoriesButton = ({
             queueStoryDownload={queueStoryDownload}
             storyId={newestStory.messageId}
           />
-            ) : (
-              <div
-                aria-label={i18n('Stories__add')}
-                className="StoryListItem__previews--add StoryListItem__previews--image"
-              />
-            )}
-          </div>
         </div>
       </div>
     </div>

ts/components/StoriesAddStoryButton.tsx

@@ -0,0 +1,90 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import type { LocalizerType } from '../types/Util';
+import type { ShowToastActionCreatorType } from '../state/ducks/toast';
+import { ContextMenu } from './ContextMenu';
+import { Theme } from '../util/theme';
+import { ToastType } from '../state/ducks/toast';
+import {
+  isVideoGoodForStories,
+  ReasonVideoNotGood,
+} from '../util/isVideoGoodForStories';
+
+export type PropsType = {
+  children?: ReactNode;
+  i18n: LocalizerType;
+  moduleClassName?: string;
+  onAddStory: (file?: File) => unknown;
+  showToast: ShowToastActionCreatorType;
+};
+
+export const StoriesAddStoryButton = ({
+  children,
+  i18n,
+  moduleClassName,
+  onAddStory,
+  showToast,
+}: PropsType): JSX.Element => {
+  return (
+    <ContextMenu
+      ariaLabel={i18n('Stories__add')}
+      i18n={i18n}
+      menuOptions={[
+        {
+          label: i18n('Stories__add-story--media'),
+          onClick: () => {
+            const input = document.createElement('input');
+            input.accept = 'image/*,video/mp4';
+            input.type = 'file';
+            input.onchange = async () => {
+              const file = input.files ? input.files[0] : undefined;
+
+              if (!file) {
+                return;
+              }
+
+              const result = await isVideoGoodForStories(file);
+
+              if (
+                result === ReasonVideoNotGood.UnsupportedCodec ||
+                result === ReasonVideoNotGood.UnsupportedContainer
+              ) {
+                showToast(ToastType.StoryVideoUnsupported);
+                return;
+              }
+
+              if (result === ReasonVideoNotGood.TooLong) {
+                showToast(ToastType.StoryVideoTooLong);
+                return;
+              }
+
+              if (result !== ReasonVideoNotGood.AllGoodNevermind) {
+                showToast(ToastType.StoryVideoError);
+                return;
+              }
+
+              onAddStory(file);
+            };
+            input.click();
+          },
+        },
+        {
+          label: i18n('Stories__add-story--text'),
+          onClick: () => onAddStory(),
+        },
+      ]}
+      moduleClassName={moduleClassName}
+      popperOptions={{
+        placement: 'bottom',
+        strategy: 'absolute',
+      }}
+      theme={Theme.Dark}
+    >
+      {children}
+    </ContextMenu>
+  );
+};

ts/components/StoriesPane.tsx

@@ -20,14 +20,10 @@ import type { ShowToastActionCreatorType } from '../state/ducks/toast';
 import { ContextMenu } from './ContextMenu';
 import { MyStoriesButton } from './MyStoriesButton';
 import { SearchInput } from './SearchInput';
+import { StoriesAddStoryButton } from './StoriesAddStoryButton';
 import { StoryListItem } from './StoryListItem';
 import { Theme } from '../util/theme';
-import { ToastType } from '../state/ducks/toast';
 import { isNotNil } from '../util/isNotNil';
-import {
-  isVideoGoodForStories,
-  ReasonVideoNotGood,
-} from '../util/isVideoGoodForStories';
 
 const FUSE_OPTIONS: Fuse.IFuseOptions<ConversationStoryType> = {
   getFn: (story, path) => {
@@ -126,58 +122,11 @@ export const StoriesPane = ({
         <div className="Stories__pane__header--title">
           {i18n('Stories__title')}
         </div>
-        <ContextMenu
+        <StoriesAddStoryButton
           i18n={i18n}
-          menuOptions={[
-            {
-              label: i18n('Stories__add-story--media'),
-              onClick: () => {
-                const input = document.createElement('input');
-                input.accept = 'image/*,video/mp4';
-                input.type = 'file';
-                input.onchange = async () => {
-                  const file = input.files ? input.files[0] : undefined;
-
-                  if (!file) {
-                    return;
-                  }
-
-                  const result = await isVideoGoodForStories(file);
-
-                  if (
-                    result === ReasonVideoNotGood.UnsupportedCodec ||
-                    result === ReasonVideoNotGood.UnsupportedContainer
-                  ) {
-                    showToast(ToastType.StoryVideoUnsupported);
-                    return;
-                  }
-
-                  if (result === ReasonVideoNotGood.TooLong) {
-                    showToast(ToastType.StoryVideoTooLong);
-                    return;
-                  }
-
-                  if (result !== ReasonVideoNotGood.AllGoodNevermind) {
-                    showToast(ToastType.StoryVideoError);
-                    return;
-                  }
-
-                  onAddStory(file);
-                };
-                input.click();
-              },
-            },
-            {
-              label: i18n('Stories__add-story--text'),
-              onClick: () => onAddStory(),
-            },
-          ]}
           moduleClassName="Stories__pane__add-story"
-          popperOptions={{
+          onAddStory={onAddStory}
-            placement: 'bottom',
+          showToast={showToast}
-            strategy: 'absolute',
-          }}
-          theme={Theme.Dark}
         />
         <ContextMenu
           i18n={i18n}
@@ -218,6 +167,7 @@ export const StoriesPane = ({
             onAddStory={onAddStory}
             onClick={onMyStoriesClicked}
             queueStoryDownload={queueStoryDownload}
+            showToast={showToast}
           />
           {renderedStories.map(story => (
             <StoryListItem

ts/util/lint/exceptions.json

@@ -8959,6 +8959,13 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-07-30T16:57:33.618Z"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/ContextMenu.tsx",
+    "line": "  const virtualElement = useRef<VirtualElement>(generateVirtualElement(0, 0));",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-08-19T17:09:38.534Z"
+  },
   {
     "rule": "React-useRef",
     "path": "ts/components/ConversationList.tsx",
@@ -9203,13 +9210,6 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-11-30T10:15:33.662Z"
   },
-  {
-    "rule": "React-useRef",
-    "path": "ts/components/TextStoryCreator.tsx",
-    "line": "  const textEditorRef = useRef<HTMLInputElement | null>(null);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2022-06-16T23:23:32.306Z"
-  },
   {
     "rule": "React-useRef",
     "path": "ts/components/StoryImage.tsx",
@@ -9252,6 +9252,13 @@
     "reasonCategory": "usageTrusted",
     "updated": "2022-06-16T23:23:32.306Z"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/TextStoryCreator.tsx",
+    "line": "  const textEditorRef = useRef<HTMLInputElement | null>(null);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-06-16T23:23:32.306Z"
+  },
   {
     "rule": "React-useRef",
     "path": "ts/components/Tooltip.tsx",