Refactor sensitive content overlay to work with reposts

app/soapbox/components/quoted-status.tsx

@@ -10,6 +10,7 @@ import { useSettings } from 'soapbox/hooks';
 import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import OutlineBox from './outline-box';
+import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
 
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
@@ -127,7 +128,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   return (
     <OutlineBox
       data-testid='quoted-status'
-      className={classNames('mt-3 cursor-pointer', {
+      className={classNames('cursor-pointer relative', {
         'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
       })}
     >
@@ -152,12 +153,22 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
           dangerouslySetInnerHTML={{ __html: status.contentHtml }}
         />
 
-        <StatusMedia
-          status={status}
-          muted={compose}
-          showMedia={showMedia}
-          onToggleVisibility={handleToggleMediaVisibility}
-        />
+        <Stack>
+          {status.hidden && (
+            <SensitiveContentOverlay
+              status={status}
+              visible={showMedia}
+              onToggleVisibility={handleToggleMediaVisibility}
+            />
+          )}
+
+          <StatusMedia
+            status={status}
+            muted={compose}
+            showMedia={showMedia}
+            onToggleVisibility={handleToggleMediaVisibility}
+          />
+        </Stack>
       </Stack>
     </OutlineBox>
   );

app/soapbox/components/status.tsx

@@ -296,8 +296,8 @@ const Status: React.FC<IStatus> = (props) => {
 
   const accountAction = props.accountAction || reblogElement;
 
-  const inReview = status.visibility === 'self';
-  const isSensitive = status.hidden;
+  const inReview = actualStatus.visibility === 'self';
+  const isSensitive = actualStatus.hidden;
 
   return (
     <HotKeys handlers={handlers} data-testid='status'>
@@ -356,13 +356,13 @@ const Status: React.FC<IStatus> = (props) => {
                 })
               }
             >
-              {(inReview || isSensitive) ? (
+              {(inReview || isSensitive) && (
                 <SensitiveContentOverlay
                   status={status}
                   visible={showMedia}
                   onToggleVisibility={handleToggleMediaVisibility}
                 />
-              ) : null}
+              )}
 
               {!group && actualStatus.group && (
                 <div className='status__meta'>

app/soapbox/features/status/components/detailed-status.tsx

@@ -29,7 +29,6 @@ interface IDetailedStatus {
 
 const DetailedStatus: React.FC<IDetailedStatus> = ({
   status,
-  onToggleHidden,
   onOpenCompareHistoryModal,
   onToggleMediaVisibility,
   showMedia,
@@ -93,13 +92,13 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             })
           }
         >
-          {(isUnderReview || isSensitive) ? (
+          {(isUnderReview || isSensitive) && (
             <SensitiveContentOverlay
               status={status}
               visible={showMedia}
               onToggleVisibility={onToggleMediaVisibility}
             />
-          ) : null}
+          )}
 
           <StatusContent status={actualStatus} />