Improve 'In Review' UX

app/soapbox/__fixtures__/truthsocial-status-in-moderation.json

@@ -82,4 +82,4 @@
   "emojis": [],
   "card": null,
   "poll": null
-}
+}

app/soapbox/components/status-media.tsx

@@ -144,7 +144,6 @@ const StatusMedia: React.FC<IStatusMedia> = ({
             <Component
               media={status.media_attachments}
               sensitive={status.sensitive}
-              inReview={status.visibility === 'self'}
               height={285}
               onOpenMedia={openMedia}
               visible={showMedia}

app/soapbox/components/status.tsx

@@ -18,6 +18,7 @@ import StatusActionBar from './status-action-bar';
 import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
 import StatusContent from './status_content';
+import ModerationOverlay from './statuses/moderation-overlay';
 import { Card, HStack, Text } from './ui';
 
 import type { Map as ImmutableMap } from 'immutable';
@@ -299,6 +300,8 @@ const Status: React.FC<IStatus> = (props) => {
 
   const accountAction = props.accountAction || reblogElement;
 
+  const inReview = status.visibility === 'self';
+
   return (
     <HotKeys handlers={handlers} data-testid='status'>
       <div
@@ -348,7 +351,15 @@ const Status: React.FC<IStatus> = (props) => {
             />
           </div>
 
-          <div className='status__content-wrapper'>
+          <div
+            className={classNames('status__content-wrapper relative', {
+              'min-h-[220px]': inReview,
+            })}
+          >
+            {inReview ? (
+              <ModerationOverlay />
+            ) : null}
+
             {!group && actualStatus.group && (
               <div className='status__meta'>
                 Posted in <NavLink to={`/groups/${actualStatus.getIn(['group', 'id'])}`}>{String(actualStatus.getIn(['group', 'title']))}</NavLink>
@@ -385,8 +396,8 @@ const Status: React.FC<IStatus> = (props) => {
             )}
           </div>
         </Card>
-      </div>
+      </div >
-    </HotKeys>
+    </HotKeys >
   );
 };
 

app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../../jest/test-helpers';
+import ModerationOverlay from '../moderation-overlay';
+
+describe('<ModerationOverlay />', () => {
+  it('defaults to enabled', () => {
+    render(<ModerationOverlay />);
+    expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Content Under Review');
+  });
+
+  it('can be toggled', () => {
+    render(<ModerationOverlay />);
+
+    fireEvent.click(screen.getByTestId('button'));
+    expect(screen.getByTestId('moderation-overlay')).not.toHaveTextContent('Content Under Review');
+    expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Hide');
+  });
+});

app/soapbox/components/statuses/moderation-overlay.tsx

@@ -0,0 +1,93 @@
+import classNames from 'clsx';
+import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { useSoapboxConfig } from 'soapbox/hooks';
+
+import { Button, HStack, Text } from '../ui';
+
+const messages = defineMessages({
+  hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide' },
+  title: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
+  subtitle: { id: 'moderation_overlay.subtitle', defaultMessage: 'This Post has been sent to Moderation for review and is only visible to you. If you believe this is an error please contact Support.' },
+  contact: { id: 'moderation_overlay.contact', defaultMessage: 'Contact' },
+  show: { id: 'moderation_overlay.show', defaultMessage: 'Show Content' },
+});
+
+const ModerationOverlay = () => {
+  const intl = useIntl();
+
+  const { links } = useSoapboxConfig();
+
+  const [visible, setVisible] = useState<boolean>(false);
+
+  const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+
+    setVisible((prevValue) => !prevValue);
+  };
+
+  return (
+    <div
+      className={classNames('absolute z-40', {
+        'cursor-default backdrop-blur-lg rounded-lg w-full h-full border-0 flex justify-center items-center': !visible,
+        'bg-gray-800/75 inset-0': !visible,
+        'top-1 left-1': visible,
+      })}
+      data-testid='moderation-overlay'
+    >
+      {visible ? (
+        <Button
+          text={intl.formatMessage(messages.hide)}
+          icon={require('@tabler/icons/eye-off.svg')}
+          onClick={toggleVisibility}
+          theme='transparent'
+          size='sm'
+        />
+      ) : (
+        <div className='text-center w-3/4 mx-auto space-y-4'>
+          <div className='space-y-1'>
+            <Text theme='white' weight='semibold'>
+              {intl.formatMessage(messages.title)}
+            </Text>
+
+            <Text theme='white' size='sm' weight='medium'>
+              {intl.formatMessage(messages.subtitle)}
+            </Text>
+          </div>
+
+          <HStack alignItems='center' justifyContent='center' space={2}>
+            {links.get('support') && (
+              <a
+                href={links.get('support')}
+                target='_blank'
+                onClick={(event) => event.stopPropagation()}
+              >
+                <Button
+                  type='button'
+                  theme='outline'
+                  size='sm'
+                  icon={require('@tabler/icons/headset.svg')}
+                >
+                  {intl.formatMessage(messages.contact)}
+                </Button>
+              </a>
+            )}
+
+            <Button
+              type='button'
+              theme='outline'
+              size='sm'
+              icon={require('@tabler/icons/eye.svg')}
+              onClick={toggleVisibility}
+            >
+              {intl.formatMessage(messages.show)}
+            </Button>
+          </HStack>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ModerationOverlay;

app/soapbox/features/status/index.tsx

@@ -29,6 +29,7 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import StatusActionBar from 'soapbox/components/status-action-bar';
+import ModerationOverlay from 'soapbox/components/statuses/moderation-overlay';
 import SubNavigation from 'soapbox/components/sub_navigation';
 import Tombstone from 'soapbox/components/tombstone';
 import { Column, Stack } from 'soapbox/components/ui';
@@ -134,6 +135,7 @@ const Thread: React.FC<IThread> = (props) => {
   const me = useAppSelector(state => state.me);
   const status = useAppSelector(state => getStatus(state, { id: props.params.statusId }));
   const displayMedia = settings.get('displayMedia') as DisplayMedia;
+  const inReview = status?.visibility === 'self';
 
   const { ancestorsIds, descendantsIds } = useAppSelector(state => {
     let ancestorsIds = ImmutableOrderedSet<string>();
@@ -459,11 +461,19 @@ const Thread: React.FC<IThread> = (props) => {
       <HotKeys handlers={handlers}>
         <div
           ref={statusRef}
-          className='detailed-status__wrapper focusable'
+          className={
+            classNames('detailed-status__wrapper focusable relative', {
+              'min-h-[220px]': inReview,
+            })
+          }
           tabIndex={0}
           // FIXME: no "reblogged by" text is added for the screen reader
           aria-label={textForScreenReader(intl, status)}
         >
+          {inReview ? (
+            <ModerationOverlay />
+          ) : null}
+
           <DetailedStatus
             status={status}
             onOpenVideo={handleOpenVideo}

app/soapbox/utils/status.ts

@@ -11,9 +11,7 @@ export const defaultMediaVisibility = (status: StatusEntity | undefined | null,
     status = status.reblog;
   }
 
-  const isSensitive = status.sensitive || status.visibility === 'self';
+  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
-
-  return (displayMedia !== 'hide_all' && !isSensitive || displayMedia === 'show_all');
 };
 
 /** Grab the first external link from a status. */