Adds debugging information to stories

2022-07-25 14:55:44 -04:00 · 2022-07-25 14:55:44 -04:00 · 06476de6c9
commit 06476de6c9
parent badf9d7dda
36 changed files with 1089 additions and 530 deletions
--- a/ts/components/ContextMenu.tsx
+++ b/ts/components/ContextMenu.tsx
@ -1,7 +1,7 @@
 // Copyright 2018-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

-import type { CSSProperties, KeyboardEvent } from 'react';
+import type { KeyboardEvent, ReactNode } from 'react';
 import type { Options } from '@popperjs/core';
 import FocusTrap from 'focus-trap-react';
 import React, { useEffect, useState } from 'react';
@ -11,9 +11,10 @@ import { noop } from 'lodash';

 import type { Theme } from '../util/theme';
 import type { LocalizerType } from '../types/Util';
+import { getClassNamesFor } from '../util/getClassNamesFor';
 import { themeClassName } from '../util/theme';

-type OptionType<T> = {
+export type ContextMenuOptionType<T> = {
  readonly description?: string;
  readonly icon?: string;
  readonly label: string;
@ -21,47 +22,53 @@ type OptionType<T> = {
  readonly value?: T;
 };

-export type ContextMenuPropsType<T> = {
-  readonly focusedIndex?: number;
-  readonly isMenuShowing: boolean;
-  readonly menuOptions: ReadonlyArray<OptionType<T>>;
-  readonly onClose: () => unknown;
+export type PropsType<T> = {
+  readonly children?: ReactNode;
+  readonly i18n: LocalizerType;
+  readonly menuOptions: ReadonlyArray<ContextMenuOptionType<T>>;
+  readonly moduleClassName?: string;
+  readonly onClick?: () => unknown;
+  readonly onMenuShowingChanged?: (value: boolean) => unknown;
  readonly popperOptions?: Pick<Options, 'placement' | 'strategy'>;
-  readonly referenceElement: HTMLElement | null;
  readonly theme?: Theme;
  readonly title?: string;
  readonly value?: T;
 };

-export type PropsType<T> = {
-  readonly buttonClassName?: string;
-  readonly buttonStyle?: CSSProperties;
-  readonly i18n: LocalizerType;
-} & Pick<
-  ContextMenuPropsType<T>,
-  'menuOptions' | 'popperOptions' | 'theme' | 'title' | 'value'
->;
-
-export function ContextMenuPopper<T>({
+export function ContextMenu<T>({
+  children,
+  i18n,
  menuOptions,
-  focusedIndex,
-  isMenuShowing,
+  moduleClassName,
+  onClick,
+  onMenuShowingChanged,
  popperOptions,
-  onClose,
-  referenceElement,
-  title,
  theme,
+  title,
  value,
-}: ContextMenuPropsType<T>): JSX.Element | null {
+}: PropsType<T>): JSX.Element {
+  const [isMenuShowing, setIsMenuShowing] = useState<boolean>(false);
+  const [focusedIndex, setFocusedIndex] = useState<number | undefined>(
+    undefined
+  );
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
    null
  );
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: 'top-start',
    strategy: 'fixed',
    ...popperOptions,
  });

+  useEffect(() => {
+    if (onMenuShowingChanged) {
+      onMenuShowingChanged(isMenuShowing);
+    }
+  }, [isMenuShowing, onMenuShowingChanged]);
+
  useEffect(() => {
    if (!isMenuShowing) {
      return noop;
@ -69,7 +76,7 @@ export function ContextMenuPopper<T>({

    const handleOutsideClick = (event: MouseEvent) => {
      if (!referenceElement?.contains(event.target as Node)) {
-        onClose();
+        setIsMenuShowing(false);
        event.stopPropagation();
        event.preventDefault();
      }
@ -79,92 +86,10 @@ export function ContextMenuPopper<T>({
    return () => {
      document.removeEventListener('click', handleOutsideClick);
    };
-  }, [isMenuShowing, onClose, referenceElement]);
-
-  if (!isMenuShowing) {
-    return null;
-  }
-
-  return (
-    <FocusTrap
-      focusTrapOptions={{
-        allowOutsideClick: true,
-      }}
-    >
-      <div className={theme ? themeClassName(theme) : undefined}>
-        <div
-          className={classNames('ContextMenu__popper', {
-            'ContextMenu__popper--single-item': menuOptions.length === 1,
-          })}
-          ref={setPopperElement}
-          style={styles.popper}
-          {...attributes.popper}
-        >
-          {title && <div className="ContextMenu__title">{title}</div>}
-          {menuOptions.map((option, index) => (
-            <button
-              aria-label={option.label}
-              className={classNames({
-                ContextMenu__option: true,
-                'ContextMenu__option--focused': focusedIndex === index,
-              })}
-              key={option.label}
-              type="button"
-              onClick={() => {
-                option.onClick(option.value);
-                onClose();
-              }}
-            >
-              <div className="ContextMenu__option--container">
-                {option.icon && (
-                  <div
-                    className={classNames(
-                      'ContextMenu__option--icon',
-                      option.icon
-                    )}
-                  />
-                )}
-                <div>
-                  <div className="ContextMenu__option--title">
-                    {option.label}
-                  </div>
-                  {option.description && (
-                    <div className="ContextMenu__option--description">
-                      {option.description}
-                    </div>
-                  )}
-                </div>
-              </div>
-              {typeof value !== 'undefined' &&
-              typeof option.value !== 'undefined' &&
-              value === option.value ? (
-                <div className="ContextMenu__option--selected" />
-              ) : null}
-            </button>
-          ))}
-        </div>
-      </div>
-    </FocusTrap>
-  );
-}
-
-export function ContextMenu<T>({
-  buttonClassName,
-  buttonStyle,
-  i18n,
-  menuOptions,
-  popperOptions,
-  theme,
-  title,
-  value,
-}: PropsType<T>): JSX.Element {
-  const [menuShowing, setMenuShowing] = useState<boolean>(false);
-  const [focusedIndex, setFocusedIndex] = useState<number | undefined>(
-    undefined
-  );
+  }, [isMenuShowing, referenceElement]);

  const handleKeyDown = (ev: KeyboardEvent) => {
-    if (!menuShowing) {
+    if (!isMenuShowing) {
      if (ev.key === 'Enter') {
        setFocusedIndex(0);
      }
@ -194,46 +119,101 @@ export function ContextMenu<T>({
        const focusedOption = menuOptions[focusedIndex];
        focusedOption.onClick(focusedOption.value);
      }
-      setMenuShowing(false);
+      setIsMenuShowing(false);
      ev.stopPropagation();
      ev.preventDefault();
    }
  };

  const handleClick = (ev: KeyboardEvent | React.MouseEvent) => {
-    setMenuShowing(true);
+    setIsMenuShowing(true);
    ev.stopPropagation();
    ev.preventDefault();
  };

-  const [referenceElement, setReferenceElement] =
-    useState<HTMLButtonElement | null>(null);
+  const getClassName = getClassNamesFor('ContextMenu', moduleClassName);

  return (
    <div className={theme ? themeClassName(theme) : undefined}>
      <button
        aria-label={i18n('ContextMenu--button')}
-        className={classNames(buttonClassName, {
-          ContextMenu__button: true,
-          'ContextMenu__button--active': menuShowing,
-        })}
-        onClick={handleClick}
+        className={classNames(
+          getClassName('__button'),
+          isMenuShowing ? getClassName('__button--active') : undefined
+        )}
+        onClick={onClick || handleClick}
+        onContextMenu={handleClick}
        onKeyDown={handleKeyDown}
        ref={setReferenceElement}
-        style={buttonStyle}
        type="button"
-      />
-      {menuShowing && (
-        <ContextMenuPopper
-          focusedIndex={focusedIndex}
-          isMenuShowing={menuShowing}
-          menuOptions={menuOptions}
-          onClose={() => setMenuShowing(false)}
-          popperOptions={popperOptions}
-          referenceElement={referenceElement}
-          title={title}
-          value={value}
-        />
+      >
+        {children}
+      </button>
+      {isMenuShowing && (
+        <FocusTrap
+          focusTrapOptions={{
+            allowOutsideClick: true,
+          }}
+        >
+          <div className={theme ? themeClassName(theme) : undefined}>
+            <div
+              className={classNames(
+                getClassName('__popper'),
+                menuOptions.length === 1
+                  ? getClassName('__popper--single-item')
+                  : undefined
+              )}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              {title && <div className={getClassName('__title')}>{title}</div>}
+              {menuOptions.map((option, index) => (
+                <button
+                  aria-label={option.label}
+                  className={classNames(
+                    getClassName('__option'),
+                    focusedIndex === index
+                      ? getClassName('__option--focused')
+                      : undefined
+                  )}
+                  key={option.label}
+                  type="button"
+                  onClick={() => {
+                    option.onClick(option.value);
+                    setIsMenuShowing(false);
+                  }}
+                >
+                  <div className={getClassName('__option--container')}>
+                    {option.icon && (
+                      <div
+                        className={classNames(
+                          getClassName('__option--icon'),
+                          option.icon
+                        )}
+                      />
+                    )}
+                    <div>
+                      <div className={getClassName('__option--title')}>
+                        {option.label}
+                      </div>
+                      {option.description && (
+                        <div className={getClassName('__option--description')}>
+                          {option.description}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  {typeof value !== 'undefined' &&
+                  typeof option.value !== 'undefined' &&
+                  value === option.value ? (
+                    <div className={getClassName('__option--selected')} />
+                  ) : null}
+                </button>
+              ))}
+            </div>
+          </div>
+        </FocusTrap>
      )}
    </div>
  );
--- a/ts/components/MediaEditor.tsx
+++ b/ts/components/MediaEditor.tsx
@ -569,14 +569,6 @@ export const MediaEditor = ({
          value={sliderValue}
        />
        <ContextMenu
-          buttonClassName={classNames('MediaEditor__tools__tool', {
-            'MediaEditor__tools__button--text-regular':
-              textStyle === TextStyle.Regular,
-            'MediaEditor__tools__button--text-highlight':
-              textStyle === TextStyle.Highlight,
-            'MediaEditor__tools__button--text-outline':
-              textStyle === TextStyle.Outline,
-          })}
          i18n={i18n}
          menuOptions={[
            {
@ -598,6 +590,14 @@ export const MediaEditor = ({
              value: TextStyle.Outline,
            },
          ]}
+          moduleClassName={classNames('MediaEditor__tools__tool', {
+            'MediaEditor__tools__button--text-regular':
+              textStyle === TextStyle.Regular,
+            'MediaEditor__tools__button--text-highlight':
+              textStyle === TextStyle.Highlight,
+            'MediaEditor__tools__button--text-outline':
+              textStyle === TextStyle.Outline,
+          })}
          theme={Theme.Dark}
          value={textStyle}
        />
@ -628,11 +628,6 @@ export const MediaEditor = ({
          value={sliderValue}
        />
        <ContextMenu
-          buttonClassName={classNames('MediaEditor__tools__tool', {
-            'MediaEditor__tools__button--draw-pen': drawTool === DrawTool.Pen,
-            'MediaEditor__tools__button--draw-highlighter':
-              drawTool === DrawTool.Highlighter,
-          })}
          i18n={i18n}
          menuOptions={[
            {
@ -648,20 +643,15 @@ export const MediaEditor = ({
              value: DrawTool.Highlighter,
            },
          ]}
+          moduleClassName={classNames('MediaEditor__tools__tool', {
+            'MediaEditor__tools__button--draw-pen': drawTool === DrawTool.Pen,
+            'MediaEditor__tools__button--draw-highlighter':
+              drawTool === DrawTool.Highlighter,
+          })}
          theme={Theme.Dark}
          value={drawTool}
        />
        <ContextMenu
-          buttonClassName={classNames('MediaEditor__tools__tool', {
-            'MediaEditor__tools__button--width-thin':
-              drawWidth === DrawWidth.Thin,
-            'MediaEditor__tools__button--width-regular':
-              drawWidth === DrawWidth.Regular,
-            'MediaEditor__tools__button--width-medium':
-              drawWidth === DrawWidth.Medium,
-            'MediaEditor__tools__button--width-heavy':
-              drawWidth === DrawWidth.Heavy,
-          })}
          i18n={i18n}
          menuOptions={[
            {
@ -689,6 +679,16 @@ export const MediaEditor = ({
              value: DrawWidth.Heavy,
            },
          ]}
+          moduleClassName={classNames('MediaEditor__tools__tool', {
+            'MediaEditor__tools__button--width-thin':
+              drawWidth === DrawWidth.Thin,
+            'MediaEditor__tools__button--width-regular':
+              drawWidth === DrawWidth.Regular,
+            'MediaEditor__tools__button--width-medium':
+              drawWidth === DrawWidth.Medium,
+            'MediaEditor__tools__button--width-heavy':
+              drawWidth === DrawWidth.Heavy,
+          })}
          theme={Theme.Dark}
          value={drawWidth}
        />
--- a/ts/components/MyStories.tsx
+++ b/ts/components/MyStories.tsx
@ -83,7 +83,10 @@ export const MyStories = ({
                    aria-label={i18n('MyStories__story')}
                    className="MyStories__story__preview"
                    onClick={() =>
-                      viewStory(story.messageId, StoryViewModeType.Single)
+                      viewStory({
+                        storyId: story.messageId,
+                        storyViewMode: StoryViewModeType.Single,
+                      })
                    }
                    type="button"
                  >
@ -120,9 +123,15 @@ export const MyStories = ({
                  type="button"
                />
                <ContextMenu
-                  buttonClassName="MyStories__story__more"
                  i18n={i18n}
                  menuOptions={[
+                    {
+                      icon: 'MyStories__icon--forward',
+                      label: i18n('forward'),
+                      onClick: () => {
+                        onForward(story.messageId);
+                      },
+                    },
                    {
                      icon: 'MyStories__icon--save',
                      label: i18n('save'),
@ -131,10 +140,14 @@ export const MyStories = ({
                      },
                    },
                    {
-                      icon: 'MyStories__icon--forward',
-                      label: i18n('forward'),
+                      icon: 'StoryListItem__icon--info',
+                      label: i18n('StoryListItem__info'),
                      onClick: () => {
-                        onForward(story.messageId);
+                        viewStory({
+                          storyId: story.messageId,
+                          storyViewMode: StoryViewModeType.Single,
+                          shouldShowDetailsModal: true,
+                        });
                      },
                    },
                    {
@ -145,6 +158,7 @@ export const MyStories = ({
                      },
                    },
                  ]}
+                  moduleClassName="MyStories__story__more"
                  theme={Theme.Dark}
                />
              </div>
--- a/ts/components/MyStoriesButton.tsx
+++ b/ts/components/MyStoriesButton.tsx
@ -42,7 +42,7 @@ export const MyStoriesButton = ({
    <div className="Stories__my-stories">
      <button
        aria-label={i18n('StoryListItem__label')}
-        className="StoryListItem"
+        className="StoryListItem__button"
        onClick={onClick}
        tabIndex={0}
        type="button"
--- a/ts/components/Stories.tsx
+++ b/ts/components/Stories.tsx
@ -101,12 +101,12 @@ export const Stories = ({
                }
              }}
              onStoriesSettings={showStoriesSettings}
-              onStoryClicked={viewUserStories}
              queueStoryDownload={queueStoryDownload}
              showConversation={showConversation}
              stories={stories}
              toggleHideStories={toggleHideStories}
              toggleStoriesView={toggleStoriesView}
+              viewUserStories={viewUserStories}
            />
          )}
        </div>
--- a/ts/components/StoriesPane.tsx
+++ b/ts/components/StoriesPane.tsx
@ -66,12 +66,12 @@ export type PropsType = {
  onAddStory: () => unknown;
  onMyStoriesClicked: () => unknown;
  onStoriesSettings: () => unknown;
-  onStoryClicked: (conversationId: string) => unknown;
  queueStoryDownload: (storyId: string) => unknown;
  showConversation: ShowConversationType;
  stories: Array<ConversationStoryType>;
  toggleHideStories: (conversationId: string) => unknown;
  toggleStoriesView: () => unknown;
+  viewUserStories: (conversationId: string) => unknown;
 };

 export const StoriesPane = ({
@ -82,12 +82,12 @@ export const StoriesPane = ({
  onAddStory,
  onMyStoriesClicked,
  onStoriesSettings,
-  onStoryClicked,
  queueStoryDownload,
  showConversation,
  stories,
  toggleHideStories,
  toggleStoriesView,
+  viewUserStories,
 }: PropsType): JSX.Element => {
  const [searchTerm, setSearchTerm] = useState('');
  const [isShowingHiddenStories, setIsShowingHiddenStories] = useState(false);
@ -122,7 +122,6 @@ export const StoriesPane = ({
          type="button"
        />
        <ContextMenu
-          buttonClassName="Stories__pane__settings"
          i18n={i18n}
          menuOptions={[
            {
@ -130,6 +129,7 @@ export const StoriesPane = ({
              label: i18n('StoriesSettings__context-menu'),
            },
          ]}
+          moduleClassName="Stories__pane__settings"
          popperOptions={{
            placement: 'bottom',
            strategy: 'absolute',
@ -166,9 +166,6 @@ export const StoriesPane = ({
            group={story.group}
            i18n={i18n}
            key={story.storyView.timestamp}
-            onClick={() => {
-              onStoryClicked(story.conversationId);
-            }}
            onHideStory={toggleHideStories}
            onGoToConversation={conversationId => {
              showConversation({ conversationId });
@ -176,6 +173,7 @@ export const StoriesPane = ({
            }}
            queueStoryDownload={queueStoryDownload}
            story={story.storyView}
+            viewUserStories={viewUserStories}
          />
        ))}
        {Boolean(hiddenStories.length) && (
@ -195,9 +193,6 @@ export const StoriesPane = ({
                  key={story.storyView.timestamp}
                  i18n={i18n}
                  isHidden
-                  onClick={() => {
-                    onStoryClicked(story.conversationId);
-                  }}
                  onHideStory={toggleHideStories}
                  onGoToConversation={conversationId => {
                    showConversation({ conversationId });
@ -205,6 +200,7 @@ export const StoriesPane = ({
                  }}
                  queueStoryDownload={queueStoryDownload}
                  story={story.storyView}
+                  viewUserStories={viewUserStories}
                />
              ))}
          </>
--- a/ts/components/StoryCreator.tsx
+++ b/ts/components/StoryCreator.tsx
@ -267,18 +267,6 @@ export const StoryCreator = ({
                value={sliderValue}
              />
              <ContextMenu
-                buttonClassName={classNames('StoryCreator__tools__tool', {
-                  'StoryCreator__tools__button--font-regular':
-                    textStyle === TextStyle.Regular,
-                  'StoryCreator__tools__button--font-bold':
-                    textStyle === TextStyle.Bold,
-                  'StoryCreator__tools__button--font-serif':
-                    textStyle === TextStyle.Serif,
-                  'StoryCreator__tools__button--font-script':
-                    textStyle === TextStyle.Script,
-                  'StoryCreator__tools__button--font-condensed':
-                    textStyle === TextStyle.Condensed,
-                })}
                i18n={i18n}
                menuOptions={[
                  {
@ -312,6 +300,18 @@ export const StoryCreator = ({
                    value: TextStyle.Condensed,
                  },
                ]}
+                moduleClassName={classNames('StoryCreator__tools__tool', {
+                  'StoryCreator__tools__button--font-regular':
+                    textStyle === TextStyle.Regular,
+                  'StoryCreator__tools__button--font-bold':
+                    textStyle === TextStyle.Bold,
+                  'StoryCreator__tools__button--font-serif':
+                    textStyle === TextStyle.Serif,
+                  'StoryCreator__tools__button--font-script':
+                    textStyle === TextStyle.Script,
+                  'StoryCreator__tools__button--font-condensed':
+                    textStyle === TextStyle.Condensed,
+                })}
                theme={Theme.Dark}
                value={textStyle}
              />
--- a/ts/components/StoryDetailsModal.stories.tsx
+++ b/ts/components/StoryDetailsModal.stories.tsx
@ -0,0 +1,91 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { Meta, Story } from '@storybook/react';
+import React from 'react';
+import casual from 'casual';
+
+import type { PropsType } from './StoryDetailsModal';
+import enMessages from '../../_locales/en/messages.json';
+import { SendStatus } from '../messages/MessageSendState';
+import { StoryDetailsModal } from './StoryDetailsModal';
+import { fakeAttachment } from '../test-both/helpers/fakeAttachment';
+import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
+import { setupI18n } from '../util/setupI18n';
+
+const i18n = setupI18n('en', enMessages);
+
+export default {
+  title: 'Components/StoryDetailsModal',
+  component: StoryDetailsModal,
+  argTypes: {
+    getPreferredBadge: { action: true },
+    i18n: {
+      defaultValue: i18n,
+    },
+    onClose: { action: true },
+    sender: {
+      defaultValue: getDefaultConversation(),
+    },
+    sendState: {
+      defaultValue: undefined,
+    },
+    size: {
+      defaultValue: fakeAttachment().size,
+    },
+    timestamp: {
+      defaultValue: Date.now(),
+    },
+  },
+} as Meta;
+
+const Template: Story<PropsType> = args => <StoryDetailsModal {...args} />;
+
+export const MyStory = Template.bind({});
+MyStory.args = {
+  sendState: [
+    {
+      recipient: getDefaultConversation(),
+      status: SendStatus.Delivered,
+      updatedAt: casual.unix_time,
+    },
+    {
+      recipient: getDefaultConversation(),
+      status: SendStatus.Delivered,
+      updatedAt: casual.unix_time,
+    },
+    {
+      recipient: getDefaultConversation(),
+      status: SendStatus.Delivered,
+      updatedAt: casual.unix_time,
+    },
+    {
+      recipient: getDefaultConversation(),
+      status: SendStatus.Delivered,
+      updatedAt: casual.unix_time,
+    },
+    {
+      recipient: getDefaultConversation(),
+      status: SendStatus.Sent,
+      updatedAt: casual.unix_time,
+    },
+    {
+      recipient: getDefaultConversation(),
+      status: SendStatus.Viewed,
+      updatedAt: casual.unix_time,
+    },
+    {
+      recipient: getDefaultConversation(),
+      status: SendStatus.Viewed,
+      updatedAt: casual.unix_time,
+    },
+    {
+      recipient: getDefaultConversation(),
+      status: SendStatus.Viewed,
+      updatedAt: casual.unix_time,
+    },
+  ],
+};
+
+export const OtherStory = Template.bind({});
+OtherStory.args = {};
--- a/ts/components/StoryDetailsModal.tsx
+++ b/ts/components/StoryDetailsModal.tsx
@ -0,0 +1,244 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import formatFileSize from 'filesize';
+import type { LocalizerType } from '../types/Util';
+import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
+import type { StorySendStateType, StoryViewType } from '../types/Stories';
+import { Avatar, AvatarSize } from './Avatar';
+import { ContactName } from './conversation/ContactName';
+import { ContextMenu } from './ContextMenu';
+import { Intl } from './Intl';
+import { Modal } from './Modal';
+import { SendStatus } from '../messages/MessageSendState';
+import { Theme } from '../util/theme';
+import { ThemeType } from '../types/Util';
+import { Time } from './Time';
+import { formatDateTimeLong } from '../util/timestamp';
+import { groupBy } from '../util/mapUtil';
+
+export type PropsType = {
+  getPreferredBadge: PreferredBadgeSelectorType;
+  i18n: LocalizerType;
+  onClose: () => unknown;
+  sender: StoryViewType['sender'];
+  sendState?: Array<StorySendStateType>;
+  size?: number;
+  timestamp: number;
+};
+
+const contactSortCollator = new window.Intl.Collator();
+
+function getI18nKey(sendStatus: SendStatus | undefined): string {
+  if (sendStatus === SendStatus.Failed) {
+    return 'MessageDetailsHeader--Failed';
+  }
+
+  if (sendStatus === SendStatus.Viewed) {
+    return 'MessageDetailsHeader--Viewed';
+  }
+
+  if (sendStatus === SendStatus.Read) {
+    return 'MessageDetailsHeader--Read';
+  }
+
+  if (sendStatus === SendStatus.Delivered) {
+    return 'MessageDetailsHeader--Delivered';
+  }
+
+  if (sendStatus === SendStatus.Sent) {
+    return 'MessageDetailsHeader--Sent';
+  }
+
+  if (sendStatus === SendStatus.Pending) {
+    return 'MessageDetailsHeader--Pending';
+  }
+
+  return 'from';
+}
+
+export const StoryDetailsModal = ({
+  getPreferredBadge,
+  i18n,
+  onClose,
+  sender,
+  sendState,
+  size,
+  timestamp,
+}: PropsType): JSX.Element => {
+  const contactsBySendStatus = sendState
+    ? groupBy(sendState, contact => contact.status)
+    : undefined;
+
+  let content: JSX.Element;
+  if (contactsBySendStatus) {
+    content = (
+      <div className="StoryDetailsModal__contact-container">
+        {[
+          SendStatus.Failed,
+          SendStatus.Viewed,
+          SendStatus.Read,
+          SendStatus.Delivered,
+          SendStatus.Sent,
+          SendStatus.Pending,
+        ].map(sendStatus => {
+          const contacts = contactsBySendStatus.get(sendStatus);
+
+          if (!contacts) {
+            return null;
+          }
+
+          const i18nKey = getI18nKey(sendStatus);
+
+          const sortedContacts = [...contacts].sort((a, b) =>
+            contactSortCollator.compare(a.recipient.title, b.recipient.title)
+          );
+
+          return (
+            <div key={i18nKey} className="StoryDetailsModal__contact-group">
+              <div className="StoryDetailsModal__contact-group__header">
+                {i18n(i18nKey)}
+              </div>
+              {sortedContacts.map(status => {
+                const contact = status.recipient;
+
+                return (
+                  <div key={contact.id} className="StoryDetailsModal__contact">
+                    <Avatar
+                      acceptedMessageRequest={contact.acceptedMessageRequest}
+                      avatarPath={contact.avatarPath}
+                      badge={getPreferredBadge(contact.badges)}
+                      color={contact.color}
+                      conversationType="direct"
+                      i18n={i18n}
+                      isMe={contact.isMe}
+                      name={contact.profileName}
+                      phoneNumber={contact.phoneNumber}
+                      profileName={contact.profileName}
+                      sharedGroupNames={contact.sharedGroupNames}
+                      size={AvatarSize.THIRTY_SIX}
+                      theme={ThemeType.dark}
+                      title={contact.title}
+                      unblurredAvatarPath={contact.unblurredAvatarPath}
+                    />
+                    <div className="StoryDetailsModal__contact__text">
+                      <ContactName title={contact.title} />
+                    </div>
+                    {status.updatedAt && (
+                      <Time
+                        className="StoryDetailsModal__status-timestamp"
+                        timestamp={status.updatedAt}
+                      >
+                        {formatDateTimeLong(i18n, status.updatedAt)}
+                      </Time>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    );
+  } else {
+    content = (
+      <div className="StoryDetailsModal__contact-container">
+        <div className="StoryDetailsModal__contact-group">
+          <div className="StoryDetailsModal__contact-group__header">
+            {i18n('sent')}
+          </div>
+          <div className="StoryDetailsModal__contact">
+            <Avatar
+              acceptedMessageRequest={sender.acceptedMessageRequest}
+              avatarPath={sender.avatarPath}
+              badge={getPreferredBadge(sender.badges)}
+              color={sender.color}
+              conversationType="direct"
+              i18n={i18n}
+              isMe={sender.isMe}
+              name={sender.profileName}
+              profileName={sender.profileName}
+              sharedGroupNames={sender.sharedGroupNames}
+              size={AvatarSize.THIRTY_SIX}
+              theme={ThemeType.dark}
+              title={sender.title}
+            />
+            <div className="StoryDetailsModal__contact__text">
+              <div className="StoryDetailsModal__contact__name">
+                <ContactName title={sender.title} />
+              </div>
+            </div>
+            <Time
+              className="StoryDetailsModal__status-timestamp"
+              timestamp={timestamp}
+            >
+              {formatDateTimeLong(i18n, timestamp)}
+            </Time>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Modal
+      hasXButton
+      i18n={i18n}
+      moduleClassName="StoryDetailsModal"
+      onClose={onClose}
+      useFocusTrap={false}
+      theme={Theme.Dark}
+      title={
+        <ContextMenu
+          i18n={i18n}
+          menuOptions={[
+            {
+              icon: 'StoryDetailsModal__copy-icon',
+              label: i18n('StoryDetailsModal__copy-timestamp'),
+              onClick: () => {
+                window.navigator.clipboard.writeText(String(timestamp));
+              },
+            },
+          ]}
+          moduleClassName="StoryDetailsModal__debugger"
+          popperOptions={{
+            placement: 'bottom',
+            strategy: 'absolute',
+          }}
+          theme={Theme.Dark}
+        >
+          <div>
+            <Intl
+              i18n={i18n}
+              id="StoryDetailsModal__sent-time"
+              components={[
+                <Time
+                  className="StoryDetailsModal__debugger__button__text"
+                  timestamp={timestamp}
+                >
+                  {formatDateTimeLong(i18n, timestamp)}
+                </Time>,
+              ]}
+            />
+          </div>
+          {size && (
+            <div>
+              <Intl
+                i18n={i18n}
+                id="StoryDetailsModal__file-size"
+                components={[
+                  <span className="StoryDetailsModal__debugger__button__text">
+                    {formatFileSize(size)}
+                  </span>,
+                ]}
+              />
+            </div>
+          )}
+        </ContextMenu>
+      }
+    >
+      {content}
+    </Modal>
+  );
+};
--- a/ts/components/StoryListItem.stories.tsx
+++ b/ts/components/StoryListItem.stories.tsx
@ -23,7 +23,6 @@ export default {
    i18n: {
      defaultValue: i18n,
    },
-    onClick: { action: true },
    onGoToConversation: { action: true },
    onHideStory: { action: true },
    queueStoryDownload: { action: true },
@ -34,6 +33,7 @@ export default {
        timestamp: Date.now(),
      },
    },
+    viewUserStories: { action: true },
  },
 } as Meta;

--- a/ts/components/StoryListItem.tsx
+++ b/ts/components/StoryListItem.tsx
@ -7,7 +7,7 @@ import type { LocalizerType } from '../types/Util';
 import type { ConversationStoryType, StoryViewType } from '../types/Stories';
 import { Avatar, AvatarSize } from './Avatar';
 import { ConfirmationDialog } from './ConfirmationDialog';
-import { ContextMenuPopper } from './ContextMenu';
+import { ContextMenu } from './ContextMenu';
 import { HasStories } from '../types/Stories';
 import { MessageTimestamp } from './conversation/MessageTimestamp';
 import { StoryImage } from './StoryImage';
@ -15,27 +15,27 @@ import { getAvatarColor } from '../types/Colors';

 export type PropsType = Pick<ConversationStoryType, 'group' | 'isHidden'> & {
  i18n: LocalizerType;
-  onClick: () => unknown;
  onGoToConversation: (conversationId: string) => unknown;
  onHideStory: (conversationId: string) => unknown;
  queueStoryDownload: (storyId: string) => unknown;
  story: StoryViewType;
+  viewUserStories: (
+    conversationId: string,
+    shouldShowDetailsModal?: boolean
+  ) => unknown;
 };

 export const StoryListItem = ({
  group,
  i18n,
  isHidden,
-  onClick,
  onGoToConversation,
  onHideStory,
  queueStoryDownload,
  story,
+  viewUserStories,
 }: PropsType): JSX.Element => {
  const [hasConfirmHideStory, setHasConfirmHideStory] = useState(false);
-  const [isShowingContextMenu, setIsShowingContextMenu] = useState(false);
-  const [referenceElement, setReferenceElement] =
-    useState<HTMLButtonElement | null>(null);

  const {
    attachment,
@ -72,21 +72,42 @@ export const StoryListItem = ({

  return (
    <>
-      <button
+      <ContextMenu
        aria-label={i18n('StoryListItem__label')}
-        className={classNames('StoryListItem', {
+        i18n={i18n}
+        menuOptions={[
+          {
+            icon: 'StoryListItem__icon--hide',
+            label: isHidden
+              ? i18n('StoryListItem__unhide')
+              : i18n('StoryListItem__hide'),
+            onClick: () => {
+              if (isHidden) {
+                onHideStory(sender.id);
+              } else {
+                setHasConfirmHideStory(true);
+              }
+            },
+          },
+          {
+            icon: 'StoryListItem__icon--info',
+            label: i18n('StoryListItem__info'),
+            onClick: () => viewUserStories(sender.id, true),
+          },
+          {
+            icon: 'StoryListItem__icon--chat',
+            label: i18n('StoryListItem__go-to-chat'),
+            onClick: () => onGoToConversation(sender.id),
+          },
+        ]}
+        moduleClassName={classNames('StoryListItem', {
          'StoryListItem--hidden': isHidden,
        })}
-        onClick={onClick}
-        onContextMenu={ev => {
-          ev.preventDefault();
-          ev.stopPropagation();
-
-          setIsShowingContextMenu(true);
+        onClick={() => viewUserStories(sender.id)}
+        popperOptions={{
+          placement: 'bottom',
+          strategy: 'absolute',
        }}
-        ref={setReferenceElement}
-        tabIndex={0}
-        type="button"
      >
        <Avatar
          acceptedMessageRequest={acceptedMessageRequest}
@ -133,38 +154,7 @@ export const StoryListItem = ({
            storyId={story.messageId}
          />
        </div>
-      </button>
-      <ContextMenuPopper
-        isMenuShowing={isShowingContextMenu}
-        menuOptions={[
-          {
-            icon: 'StoryListItem__icon--hide',
-            label: isHidden
-              ? i18n('StoryListItem__unhide')
-              : i18n('StoryListItem__hide'),
-            onClick: () => {
-              if (isHidden) {
-                onHideStory(sender.id);
-              } else {
-                setHasConfirmHideStory(true);
-              }
-            },
-          },
-          {
-            icon: 'StoryListItem__icon--chat',
-            label: i18n('StoryListItem__go-to-chat'),
-            onClick: () => {
-              onGoToConversation(sender.id);
-            },
-          },
-        ]}
-        onClose={() => setIsShowingContextMenu(false)}
-        popperOptions={{
-          placement: 'bottom',
-          strategy: 'absolute',
-        }}
-        referenceElement={referenceElement}
-      />
+      </ContextMenu>
      {hasConfirmHideStory && (
        <ConfirmationDialog
          actions={[
--- a/ts/components/StoryViewer.stories.tsx
+++ b/ts/components/StoryViewer.stories.tsx
@ -121,3 +121,22 @@ LongCaption.args = {
    }),
  },
 };
+
+export const YourStory = Template.bind({});
+{
+  const storyView = getFakeStoryView(
+    '/fixtures/nathan-anderson-316188-unsplash.jpg'
+  );
+
+  YourStory.args = {
+    story: {
+      ...storyView,
+      sender: {
+        ...storyView.sender,
+        isMe: true,
+      },
+      sendState: [],
+    },
+  };
+  YourStory.storyName = 'Your story';
+}
--- a/ts/components/StoryViewer.tsx
+++ b/ts/components/StoryViewer.tsx
@ -12,6 +12,7 @@ import React, {
 import classNames from 'classnames';
 import { useSpring, animated, to } from '@react-spring/web';
 import type { BodyRangeType, LocalizerType } from '../types/Util';
+import type { ContextMenuOptionType } from './ContextMenu';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { EmojiPickDataType } from './emoji/EmojiPicker';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
@ -23,13 +24,14 @@ import * as log from '../logging/log';
 import { AnimatedEmojiGalore } from './AnimatedEmojiGalore';
 import { Avatar, AvatarSize } from './Avatar';
 import { ConfirmationDialog } from './ConfirmationDialog';
-import { ContextMenuPopper } from './ContextMenu';
+import { ContextMenu } from './ContextMenu';
 import { Intl } from './Intl';
 import { MessageTimestamp } from './conversation/MessageTimestamp';
 import { SendStatus } from '../messages/MessageSendState';
+import { StoryDetailsModal } from './StoryDetailsModal';
+import { StoryViewsNRepliesModal } from './StoryViewsNRepliesModal';
 import { StoryImage } from './StoryImage';
 import { StoryViewDirectionType, StoryViewModeType } from '../types/Stories';
-import { StoryViewsNRepliesModal } from './StoryViewsNRepliesModal';
 import { Theme } from '../util/theme';
 import { ToastType } from '../state/ducks/toast';
 import { getAvatarColor } from '../types/Colors';
@ -40,6 +42,7 @@ import { useEscapeHandling } from '../hooks/useEscapeHandling';

 export type PropsType = {
  currentIndex: number;
+  deleteStoryForEveryone: (story: StoryViewType) => unknown;
  getPreferredBadge: PreferredBadgeSelectorType;
  group?: Pick<
    ConversationType,
@ -74,6 +77,7 @@ export type PropsType = {
  recentEmojis?: Array<string>;
  renderEmojiPicker: (props: RenderEmojiPickerProps) => JSX.Element;
  replyState?: ReplyStateType;
+  shouldShowDetailsModal?: boolean;
  showToast: ShowToastActionCreatorType;
  skinTone?: number;
  story: StoryViewType;
@ -95,6 +99,7 @@ enum Arrow {

 export const StoryViewer = ({
  currentIndex,
+  deleteStoryForEveryone,
  getPreferredBadge,
  group,
  hasAllStoriesMuted,
@ -114,6 +119,7 @@ export const StoryViewer = ({
  recentEmojis,
  renderEmojiPicker,
  replyState,
+  shouldShowDetailsModal,
  showToast,
  skinTone,
  story,
@ -121,12 +127,14 @@ export const StoryViewer = ({
  toggleHasAllStoriesMuted,
  viewStory,
 }: PropsType): JSX.Element => {
+  const [isShowingContextMenu, setIsShowingContextMenu] =
+    useState<boolean>(false);
  const [storyDuration, setStoryDuration] = useState<number | undefined>();
-  const [isShowingContextMenu, setIsShowingContextMenu] = useState(false);
  const [hasConfirmHideStory, setHasConfirmHideStory] = useState(false);
-  const [referenceElement, setReferenceElement] =
-    useState<HTMLButtonElement | null>(null);
  const [reactionEmoji, setReactionEmoji] = useState<string | undefined>();
+  const [confirmDeleteStory, setConfirmDeleteStory] = useState<
+    StoryViewType | undefined
+  >();

  const { attachment, canReply, isHidden, messageId, sendState, timestamp } =
    story;
@ -143,19 +151,25 @@ export const StoryViewer = ({
    title,
  } = story.sender;

-  const [hasReplyModal, setHasReplyModal] = useState(false);
+  const [hasStoryViewsNRepliesModal, setHasStoryViewsNRepliesModal] =
+    useState(false);
+  const [hasStoryDetailsModal, setHasStoryDetailsModal] = useState(
+    Boolean(shouldShowDetailsModal)
+  );

  const onClose = useCallback(() => {
-    viewStory();
+    viewStory({
+      closeViewer: true,
+    });
  }, [viewStory]);

  const onEscape = useCallback(() => {
-    if (hasReplyModal) {
-      setHasReplyModal(false);
+    if (hasStoryViewsNRepliesModal) {
+      setHasStoryViewsNRepliesModal(false);
    } else {
      onClose();
    }
-  }, [hasReplyModal, onClose]);
+  }, [hasStoryViewsNRepliesModal, onClose]);

  useEscapeHandling(onEscape);

@ -225,11 +239,11 @@ export const StoryViewer = ({
          }

          if (value === 100) {
-            viewStory(
-              story.messageId,
+            viewStory({
+              storyId: story.messageId,
              storyViewMode,
-              StoryViewDirectionType.Next
-            );
+              viewDirection: StoryViewDirectionType.Next,
+            });
          }
        },
      },
@ -263,7 +277,8 @@ export const StoryViewer = ({
  const shouldPauseViewing =
    hasConfirmHideStory ||
    hasExpandedCaption ||
-    hasReplyModal ||
+    hasStoryDetailsModal ||
+    hasStoryViewsNRepliesModal ||
    isShowingContextMenu ||
    pauseStory ||
    Boolean(reactionEmoji);
@ -284,15 +299,19 @@ export const StoryViewer = ({
  const navigateStories = useCallback(
    (ev: KeyboardEvent) => {
      if (ev.key === 'ArrowRight') {
-        viewStory(story.messageId, storyViewMode, StoryViewDirectionType.Next);
+        viewStory({
+          storyId: story.messageId,
+          storyViewMode,
+          viewDirection: StoryViewDirectionType.Next,
+        });
        ev.preventDefault();
        ev.stopPropagation();
      } else if (ev.key === 'ArrowLeft') {
-        viewStory(
-          story.messageId,
+        viewStory({
+          storyId: story.messageId,
          storyViewMode,
-          StoryViewDirectionType.Previous
-        );
+          viewDirection: StoryViewDirectionType.Previous,
+        });
        ev.preventDefault();
        ev.stopPropagation();
      }
@ -357,10 +376,50 @@ export const StoryViewer = ({
  const replyCount = replies.length;
  const viewCount = views.length;

-  const shouldShowContextMenu = !sendState;
-
  const hasPrevNextArrows = storyViewMode !== StoryViewModeType.Single;

+  const contextMenuOptions: ReadonlyArray<ContextMenuOptionType<unknown>> =
+    sendState
+      ? [
+          {
+            icon: 'StoryListItem__icon--info',
+            label: i18n('StoryListItem__info'),
+            onClick: () => setHasStoryDetailsModal(true),
+          },
+          {
+            icon: 'StoryListItem__icon--delete',
+            label: i18n('StoryListItem__delete'),
+            onClick: () => setConfirmDeleteStory(story),
+          },
+        ]
+      : [
+          {
+            icon: 'StoryListItem__icon--info',
+            label: i18n('StoryListItem__info'),
+            onClick: () => setHasStoryDetailsModal(true),
+          },
+          {
+            icon: 'StoryListItem__icon--hide',
+            label: isHidden
+              ? i18n('StoryListItem__unhide')
+              : i18n('StoryListItem__hide'),
+            onClick: () => {
+              if (isHidden) {
+                onHideStory(id);
+              } else {
+                setHasConfirmHideStory(true);
+              }
+            },
+          },
+          {
+            icon: 'StoryListItem__icon--chat',
+            label: i18n('StoryListItem__go-to-chat'),
+            onClick: () => {
+              onGoToConversation(id);
+            },
+          },
+        ];
+
  return (
    <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
      <div className="StoryViewer">
@ -379,11 +438,11 @@ export const StoryViewer = ({
                }
              )}
              onClick={() =>
-                viewStory(
-                  story.messageId,
+                viewStory({
+                  storyId: story.messageId,
                  storyViewMode,
-                  StoryViewDirectionType.Previous
-                )
+                  viewDirection: StoryViewDirectionType.Previous,
+                })
              }
              onMouseMove={() => setArrowToShow(Arrow.Left)}
              type="button"
@ -519,15 +578,14 @@ export const StoryViewer = ({
                  onClick={toggleHasAllStoriesMuted}
                  type="button"
                />
-                {shouldShowContextMenu && (
-                  <button
-                    aria-label={i18n('MyStories__more')}
-                    className="StoryViewer__more"
-                    onClick={() => setIsShowingContextMenu(true)}
-                    ref={setReferenceElement}
-                    type="button"
-                  />
-                )}
+                <ContextMenu
+                  aria-label={i18n('MyStories__more')}
+                  i18n={i18n}
+                  menuOptions={contextMenuOptions}
+                  moduleClassName="StoryViewer__more"
+                  onMenuShowingChanged={setIsShowingContextMenu}
+                  theme={Theme.Dark}
+                />
              </div>
            </div>
            <div className="StoryViewer__progress">
@ -555,14 +613,14 @@ export const StoryViewer = ({
              {canReply && (
                <button
                  className="StoryViewer__reply"
-                  onClick={() => setHasReplyModal(true)}
+                  onClick={() => setHasStoryViewsNRepliesModal(true)}
                  tabIndex={0}
                  type="button"
                >
                  <>
-                    {viewCount > 0 || replyCount > 0 ? (
+                    {sendState || replyCount > 0 ? (
                      <span className="StoryViewer__reply__chevron">
-                        {viewCount > 0 &&
+                        {sendState &&
                          (viewCount === 1 ? (
                            <Intl
                              i18n={i18n}
@ -593,7 +651,7 @@ export const StoryViewer = ({
                          ))}
                      </span>
                    ) : null}
-                    {!viewCount && !replyCount && (
+                    {!sendState && !replyCount && (
                      <span className="StoryViewer__reply__arrow">
                        {isGroupStory
                          ? i18n('StoryViewer__reply-group')
@ -615,11 +673,11 @@ export const StoryViewer = ({
                }
              )}
              onClick={() =>
-                viewStory(
-                  story.messageId,
+                viewStory({
+                  storyId: story.messageId,
                  storyViewMode,
-                  StoryViewDirectionType.Next
-                )
+                  viewDirection: StoryViewDirectionType.Next,
+                })
              }
              onMouseMove={() => setArrowToShow(Arrow.Right)}
              type="button"
@ -634,51 +692,35 @@ export const StoryViewer = ({
            type="button"
          />
        </div>
-        <ContextMenuPopper
-          isMenuShowing={isShowingContextMenu}
-          menuOptions={[
-            {
-              icon: 'StoryListItem__icon--hide',
-              label: isHidden
-                ? i18n('StoryListItem__unhide')
-                : i18n('StoryListItem__hide'),
-              onClick: () => {
-                if (isHidden) {
-                  onHideStory(id);
-                } else {
-                  setHasConfirmHideStory(true);
-                }
-              },
-            },
-            {
-              icon: 'StoryListItem__icon--chat',
-              label: i18n('StoryListItem__go-to-chat'),
-              onClick: () => {
-                onGoToConversation(id);
-              },
-            },
-          ]}
-          onClose={() => setIsShowingContextMenu(false)}
-          referenceElement={referenceElement}
-          theme={Theme.Dark}
-        />
-        {hasReplyModal && canReply && (
+        {hasStoryDetailsModal && (
+          <StoryDetailsModal
+            getPreferredBadge={getPreferredBadge}
+            i18n={i18n}
+            onClose={() => setHasStoryDetailsModal(false)}
+            sender={story.sender}
+            sendState={sendState}
+            size={attachment?.size}
+            timestamp={timestamp}
+          />
+        )}
+        {hasStoryViewsNRepliesModal && (
          <StoryViewsNRepliesModal
            authorTitle={firstName || title}
+            canReply={Boolean(canReply)}
            getPreferredBadge={getPreferredBadge}
            i18n={i18n}
            isGroupStory={isGroupStory}
            isMyStory={isMe}
-            onClose={() => setHasReplyModal(false)}
+            onClose={() => setHasStoryViewsNRepliesModal(false)}
            onReact={emoji => {
              onReactToStory(emoji, story);
-              setHasReplyModal(false);
+              setHasStoryViewsNRepliesModal(false);
              setReactionEmoji(emoji);
              showToast(ToastType.StoryReact);
            }}
            onReply={(message, mentions, replyTimestamp) => {
              if (!isGroupStory) {
-                setHasReplyModal(false);
+                setHasStoryViewsNRepliesModal(false);
              }
              onReplyToStory(message, mentions, replyTimestamp, story);
              showToast(ToastType.StoryReply);
@ -712,6 +754,21 @@ export const StoryViewer = ({
            {i18n('StoryListItem__hide-modal--body', [String(firstName)])}
          </ConfirmationDialog>
        )}
+        {confirmDeleteStory && (
+          <ConfirmationDialog
+            actions={[
+              {
+                text: i18n('delete'),
+                action: () => deleteStoryForEveryone(confirmDeleteStory),
+                style: 'negative',
+              },
+            ]}
+            i18n={i18n}
+            onClose={() => setConfirmDeleteStory(undefined)}
+          >
+            {i18n('MyStories__delete')}
+          </ConfirmationDialog>
+        )}
      </div>
    </FocusTrap>
  );
--- a/ts/components/StoryViewsNRepliesModal.stories.tsx
+++ b/ts/components/StoryViewsNRepliesModal.stories.tsx
@ -1,8 +1,8 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only

+import type { Meta, Story } from '@storybook/react';
 import React from 'react';
-import { action } from '@storybook/addon-actions';

 import type { PropsType } from './StoryViewsNRepliesModal';
 import * as durations from '../util/durations';
@ -18,35 +18,50 @@ const i18n = setupI18n('en', enMessages);

 export default {
  title: 'Components/StoryViewsNRepliesModal',
-};
-
-function getDefaultProps(): PropsType {
-  return {
-    authorTitle: getDefaultConversation().title,
-    getPreferredBadge: () => undefined,
-    i18n,
-    isMyStory: false,
-    onClose: action('onClose'),
-    onSetSkinTone: action('onSetSkinTone'),
-    onReact: action('onReact'),
-    onReply: action('onReply'),
-    onTextTooLong: action('onTextTooLong'),
-    onUseEmoji: action('onUseEmoji'),
-    preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
-    renderEmojiPicker: () => <div />,
-    replies: [],
-    storyPreviewAttachment: fakeAttachment({
-      thumbnail: {
-        contentType: IMAGE_JPEG,
-        height: 64,
-        objectUrl: '/fixtures/nathan-anderson-316188-unsplash.jpg',
-        path: '',
-        width: 40,
-      },
-    }),
-    views: [],
-  };
-}
+  component: StoryViewsNRepliesModal,
+  argTypes: {
+    authorTitle: {
+      defaultValue: getDefaultConversation().title,
+    },
+    canReply: {
+      defaultValue: true,
+    },
+    getPreferredBadge: { action: true },
+    i18n: {
+      defaultValue: i18n,
+    },
+    isMyStory: {
+      defaultValue: false,
+    },
+    onClose: { action: true },
+    onSetSkinTone: { action: true },
+    onReact: { action: true },
+    onReply: { action: true },
+    onTextTooLong: { action: true },
+    onUseEmoji: { action: true },
+    preferredReactionEmoji: {
+      defaultValue: ['❤️', '👍', '👎', '😂', '😮', '😢'],
+    },
+    renderEmojiPicker: { action: true },
+    replies: {
+      defaultValue: [],
+    },
+    storyPreviewAttachment: {
+      defaultValue: fakeAttachment({
+        thumbnail: {
+          contentType: IMAGE_JPEG,
+          height: 64,
+          objectUrl: '/fixtures/nathan-anderson-316188-unsplash.jpg',
+          path: '',
+          width: 40,
+        },
+      }),
+    },
+    views: {
+      defaultValue: [],
+    },
+  },
+} as Meta;

 function getViewsAndReplies() {
  const p1 = getDefaultConversation();
@ -107,47 +122,51 @@ function getViewsAndReplies() {
  };
 }

-export const CanReply = (): JSX.Element => (
-  <StoryViewsNRepliesModal {...getDefaultProps()} />
+const Template: Story<PropsType> = args => (
+  <StoryViewsNRepliesModal {...args} />
 );

-CanReply.story = {
-  name: 'Can reply',
+export const CanReply = Template.bind({});
+CanReply.args = {};
+CanReply.storyName = 'Can reply';
+
+export const ViewsOnly = Template.bind({});
+ViewsOnly.args = {
+  isMyStory: true,
+  views: getViewsAndReplies().views,
 };
+ViewsOnly.storyName = 'Views only';

-export const ViewsOnly = (): JSX.Element => (
-  <StoryViewsNRepliesModal
-    {...getDefaultProps()}
-    isMyStory
-    views={getViewsAndReplies().views}
-  />
-);
-
-ViewsOnly.story = {
-  name: 'Views only',
+export const InAGroupNoReplies = Template.bind({});
+InAGroupNoReplies.args = {
+  isGroupStory: true,
 };
+InAGroupNoReplies.storyName = 'In a group (no replies)';

-export const InAGroupNoReplies = (): JSX.Element => (
-  <StoryViewsNRepliesModal {...getDefaultProps()} isGroupStory />
-);
-
-InAGroupNoReplies.story = {
-  name: 'In a group (no replies)',
-};
-
-export const InAGroup = (): JSX.Element => {
+export const InAGroup = Template.bind({});
+{
  const { views, replies } = getViewsAndReplies();
+  InAGroup.args = {
+    isGroupStory: true,
+    replies,
+    views,
+  };
+}
+InAGroup.storyName = 'In a group';

-  return (
-    <StoryViewsNRepliesModal
-      {...getDefaultProps()}
-      isGroupStory
-      replies={replies}
-      views={views}
-    />
-  );
+export const CantReply = Template.bind({});
+CantReply.args = {
+  canReply: false,
 };

-InAGroup.story = {
-  name: 'In a group',
-};
+export const InAGroupCantReply = Template.bind({});
+{
+  const { views, replies } = getViewsAndReplies();
+  InAGroupCantReply.args = {
+    canReply: false,
+    isGroupStory: true,
+    replies,
+    views,
+  };
+}
+InAGroupCantReply.storyName = "In a group (can't reply)";
--- a/ts/components/StoryViewsNRepliesModal.tsx
+++ b/ts/components/StoryViewsNRepliesModal.tsx
@ -34,6 +34,7 @@ enum Tab {

 export type PropsType = {
  authorTitle: string;
+  canReply: boolean;
  getPreferredBadge: PreferredBadgeSelectorType;
  i18n: LocalizerType;
  isGroupStory?: boolean;
@ -59,6 +60,7 @@ export type PropsType = {

 export const StoryViewsNRepliesModal = ({
  authorTitle,
+  canReply,
  getPreferredBadge,
  i18n,
  isGroupStory,
@ -76,7 +78,7 @@ export const StoryViewsNRepliesModal = ({
  skinTone,
  storyPreviewAttachment,
  views,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element | null => {
  const inputApiRef = useRef<InputApi | undefined>();
  const [bottom, setBottom] = useState<HTMLDivElement | null>(null);
  const [messageBodyText, setMessageBodyText] = useState('');
@ -117,7 +119,7 @@ export const StoryViewsNRepliesModal = ({

  let composerElement: JSX.Element | undefined;

-  if (!isMyStory) {
+  if (!isMyStory && canReply) {
    composerElement = (
      <>
        {!isGroupStory && (
@ -373,6 +375,10 @@ export const StoryViewsNRepliesModal = ({
      </Tabs>
    ) : undefined;

+  if (!tabsElement && !viewsElement && !repliesElement && !composerElement) {
+    return null;
+  }
+
  return (
    <Modal
      i18n={i18n}
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@ -1551,7 +1551,10 @@ export class Message extends React.PureComponent<Props, State> {
          isViewOnce={false}
          moduleClassName="StoryReplyQuote"
          onClick={() => {
-            viewStory(storyReplyContext.storyId, StoryViewModeType.Single);
+            viewStory({
+              storyId: storyReplyContext.storyId,
+              storyViewMode: StoryViewModeType.Single,
+            });
          }}
          rawAttachment={storyReplyContext.rawAttachment}
          reactionEmoji={storyReplyContext.emoji}
--- a/ts/components/conversation/MessageDetail.tsx
+++ b/ts/components/conversation/MessageDetail.tsx
@ -8,6 +8,7 @@ import { noop } from 'lodash';

 import { Avatar, AvatarSize } from '../Avatar';
 import { ContactName } from './ContactName';
+import { ContextMenu } from '../ContextMenu';
 import { Time } from '../Time';
 import type {
  Props as MessagePropsType,
@ -392,12 +393,27 @@ export class MessageDetail extends React.Component<Props> {
            <tr>
              <td className="module-message-detail__label">{i18n('sent')}</td>
              <td>
-                <Time timestamp={sentAt}>
-                  {formatDateTimeLong(i18n, sentAt)}
-                </Time>{' '}
-                <span className="module-message-detail__unix-timestamp">
-                  ({sentAt})
-                </span>
+                <ContextMenu
+                  i18n={i18n}
+                  menuOptions={[
+                    {
+                      icon: 'StoryDetailsModal__copy-icon',
+                      label: i18n('StoryDetailsModal__copy-timestamp'),
+                      onClick: () => {
+                        window.navigator.clipboard.writeText(String(sentAt));
+                      },
+                    },
+                  ]}
+                >
+                  <>
+                    <Time timestamp={sentAt}>
+                      {formatDateTimeLong(i18n, sentAt)}
+                    </Time>{' '}
+                    <span className="module-message-detail__unix-timestamp">
+                      ({sentAt})
+                    </span>
+                  </>
+                </ContextMenu>
              </td>
            </tr>
            {receivedAt && message.direction === 'incoming' ? (