From 5d17752231a8480fe40371c394e98ef50cab8146 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 23 Aug 2024 23:50:00 +0200
Subject: [PATCH] Remove this sensitive content overlay fuckery
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/attachment-thumbs.tsx          |  4 +--
 src/components/media-gallery.tsx              |  7 +---
 src/components/quoted-status.tsx              | 33 ++++++-------------
 src/components/status-content.tsx             | 24 +++++++++++---
 src/components/status-media.tsx               |  3 --
 src/components/status.tsx                     | 24 +++-----------
 .../statuses/sensitive-content-overlay.tsx    | 14 +-------
 src/features/account-gallery/index.tsx        |  4 +--
 .../report/components/status-check-box.tsx    |  1 -
 .../status/components/detailed-status.tsx     | 25 +++-----------
 src/normalizers/status.ts                     |  6 +---
 src/selectors/index.ts                        |  2 +-
 12 files changed, 45 insertions(+), 102 deletions(-)

diff --git a/src/components/attachment-thumbs.tsx b/src/components/attachment-thumbs.tsx
index 4a8d2d36d..b5e48fe65 100644
--- a/src/components/attachment-thumbs.tsx
+++ b/src/components/attachment-thumbs.tsx
@@ -13,7 +13,7 @@ interface IAttachmentThumbs {
 }
 
 const AttachmentThumbs = (props: IAttachmentThumbs) => {
-  const { media, onClick, sensitive } = props;
+  const { media, onClick } = props;
   const dispatch = useAppDispatch();
 
   const fallback = <div className='media-gallery--compact' />;
@@ -27,8 +27,6 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => {
           onOpenMedia={onOpenMedia}
           height={50}
           compact
-          sensitive={sensitive}
-          visible
         />
       </Suspense>
 
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index d98a79eb7..634d6ba8c 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -55,7 +55,6 @@ interface IItem {
   size: number;
   onClick: (index: number) => void;
   displayWidth?: number;
-  visible: boolean;
   dimensions: Dimensions;
   last?: boolean;
   total: number;
@@ -66,7 +65,6 @@ const Item: React.FC<IItem> = ({
   index,
   onClick,
   standalone = false,
-  visible,
   dimensions,
   last,
   total,
@@ -266,19 +264,17 @@ const Item: React.FC<IItem> = ({
         hash={attachment.blurhash}
         className='media-gallery__preview'
       />
-      {visible && thumbnail}
+      {thumbnail}
     </div>
   );
 };
 
 interface IMediaGallery {
-  sensitive?: boolean;
   media: Array<MediaAttachment>;
   height?: number;
   onOpenMedia: (media: Array<MediaAttachment>, index: number) => void;
   defaultWidth?: number;
   cacheWidth?: (width: number) => void;
-  visible?: boolean;
   displayMedia?: string;
   compact?: boolean;
   className?: string;
@@ -538,7 +534,6 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
       index={i}
       size={sizeData.size}
       displayWidth={sizeData.width}
-      visible={!!props.visible}
       dimensions={sizeData.itemsDimensions[i]}
       last={i === ATTACHMENT_LIMIT - 1}
       total={media.length}
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index cdb491c52..1d4bfb432 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
+import React, { MouseEventHandler } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
@@ -34,16 +34,6 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   const intl = useIntl();
   const history = useHistory();
 
-  const overlay = useRef<HTMLDivElement>(null);
-
-  const [minHeight, setMinHeight] = useState(208);
-
-  useEffect(() => {
-    if (overlay.current) {
-      setMinHeight(overlay.current.getBoundingClientRect().height);
-    }
-  }, [overlay.current]);
-
   const handleExpandClick: MouseEventHandler<HTMLDivElement> = (e) => {
     if (!status) return;
     const account = status.account;
@@ -105,15 +95,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
         <StatusReplyMentions status={status} hoverable={false} />
 
         {status.event ? <EventPreview status={status} hideAction /> : (
-          <Stack
-            className='relative z-0'
-            style={{ minHeight: status.sensitive ? Math.max(minHeight, 208) + 12 : undefined }}
-          >
-            <SensitiveContentOverlay
-              status={status}
-              ref={overlay}
-            />
-
+          <Stack className='relative z-0'>
             <Stack space={4}>
               <StatusContent
                 status={status}
@@ -122,9 +104,14 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
 
               {status.quote_id && <QuotedStatusIndicator statusId={status.quote_id} />}
 
-              {status.media_attachments.length > 0 && (
-                <StatusMedia status={status} muted={compose} />
-              )}
+              <div className='relative'>
+                <SensitiveContentOverlay
+                  status={status}
+                />
+                {status.media_attachments.length > 0 && (
+                  <StatusMedia status={status} muted={compose} />
+                )}
+              </div>
             </Stack>
           </Stack>
         )}
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index 5c50120f4..15c242942 100644
--- a/src/components/status-content.tsx
+++ b/src/components/status-content.tsx
@@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
+import { Text } from 'soapbox/components/ui';
 import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich-content';
 
 import { getTextDirection } from '../utils/rtl';
@@ -15,7 +16,6 @@ import Markup from './markup';
 import Poll from './polls/poll';
 
 import type { Sizes } from 'soapbox/components/ui/text/text';
-// import type { Status } from 'soapbox/normalizers';
 import type { MinifiedStatus } from 'soapbox/reducers/statuses';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
@@ -156,8 +156,22 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
     'leading-normal big-emoji': onlyEmoji,
   });
 
+  const spoilerText = status.spoilerMapHtml && status.currentLanguage
+    ? status.spoilerMapHtml[status.currentLanguage] || status.spoilerHtml
+    : status.spoilerHtml;
+
+  const output = [];
+
+  if (spoilerText) {
+    output.push(
+      <Text className='mb-2' size='2xl' weight='medium'>
+        <span dangerouslySetInnerHTML={{ __html: spoilerText }} />
+      </Text>,
+    );
+  }
+
   if (onClick) {
-    const output = [
+    output.push(
       <Markup
         ref={node}
         tabIndex={0}
@@ -169,7 +183,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
       >
         {content}
       </Markup>,
-    ];
+    );
 
     if (collapsed) {
       output.push(<ReadMoreButton onClick={onClick} key='read-more' />);
@@ -184,7 +198,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
 
     return <div className={clsx({ 'bg-gray-100 dark:bg-primary-800 rounded-md p-4': hasPoll })}>{output}</div>;
   } else {
-    const output = [
+    output.push(
       <Markup
         ref={node}
         tabIndex={0}
@@ -198,7 +212,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
       >
         {content}
       </Markup>,
-    ];
+    );
 
     if (status.poll_id) {
       output.push(<Poll id={status.poll_id} key='poll' status={status} />);
diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx
index 6ee0ad760..c52710c0a 100644
--- a/src/components/status-media.tsx
+++ b/src/components/status-media.tsx
@@ -59,7 +59,6 @@ const StatusMedia: React.FC<IStatusMedia> = ({
         <AttachmentThumbs
           media={status.media_attachments}
           onClick={onClick}
-          sensitive={status.sensitive}
         />
       );
     } else if (size === 1 && firstAttachment.type === 'video') {
@@ -101,10 +100,8 @@ const StatusMedia: React.FC<IStatusMedia> = ({
         <Suspense fallback={renderLoadingMediaGallery()}>
           <MediaGallery
             media={status.media_attachments}
-            sensitive={status.sensitive}
             height={285}
             onOpenMedia={openMedia}
-            visible={visible}
           />
         </Suspense>
       );
diff --git a/src/components/status.tsx b/src/components/status.tsx
index c771530d1..b72a5d827 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { defineMessages, useIntl, FormattedList, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
@@ -79,9 +79,6 @@ const Status: React.FC<IStatus> = (props) => {
   const { boostModal } = useSettings();
   const didShowCard = useRef(false);
   const node = useRef<HTMLDivElement>(null);
-  const overlay = useRef<HTMLDivElement>(null);
-
-  const [minHeight, setMinHeight] = useState(208);
 
   const getStatus = useCallback(makeGetStatus(), []);
   const actualStatus = useAppSelector(state => status.reblog_id && getStatus(state, { id: status.reblog_id }) || status)!;
@@ -97,12 +94,6 @@ const Status: React.FC<IStatus> = (props) => {
     didShowCard.current = Boolean(!muted && !hidden && status?.card);
   }, []);
 
-  useEffect(() => {
-    if (overlay.current) {
-      setMinHeight(overlay.current.getBoundingClientRect().height);
-    }
-  }, [overlay.current]);
-
   const handleClick = (e?: React.MouseEvent): void => {
     e?.stopPropagation();
 
@@ -426,15 +417,7 @@ const Status: React.FC<IStatus> = (props) => {
           <div className='status__content-wrapper'>
             <StatusReplyMentions status={actualStatus} hoverable={hoverable} />
 
-            <Stack
-              className='relative z-0'
-              style={{ minHeight: actualStatus.sensitive ? Math.max(minHeight, 208) + 12 : undefined }}
-            >
-              <SensitiveContentOverlay
-                status={actualStatus}
-                ref={overlay}
-              />
-
+            <Stack className='relative z-0'>
               {actualStatus.event ? <EventPreview className='shadow-xl' status={actualStatus} /> : (
                 <Stack space={4}>
                   <StatusContent
@@ -447,7 +430,8 @@ const Status: React.FC<IStatus> = (props) => {
                   <TranslateButton status={actualStatus} />
 
                   {(quote || actualStatus.card || actualStatus.media_attachments.length > 0) && (
-                    <Stack space={4}>
+                    <Stack space={4} className='relative'>
+                      <SensitiveContentOverlay status={actualStatus} />
                       <StatusMedia
                         status={actualStatus}
                         muted={muted}
diff --git a/src/components/statuses/sensitive-content-overlay.tsx b/src/components/statuses/sensitive-content-overlay.tsx
index 239648145..f974cd882 100644
--- a/src/components/statuses/sensitive-content-overlay.tsx
+++ b/src/components/statuses/sensitive-content-overlay.tsx
@@ -21,7 +21,7 @@ const messages = defineMessages({
 });
 
 interface ISensitiveContentOverlay {
-  status: Pick<Status, 'id' | 'sensitive' | 'hidden' | 'media_attachments' | 'currentLanguage' | 'spoilerHtml' | 'spoilerMapHtml' | 'spoiler_text'>;
+  status: Pick<Status, 'id' | 'sensitive' | 'hidden' | 'media_attachments' | 'currentLanguage'>;
 }
 
 const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
@@ -47,10 +47,6 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
 
   if (visible && !showHideButton) return null;
 
-  const spoilerText = status.currentLanguage
-    ? status.spoilerMapHtml![status.currentLanguage] || status.spoilerHtml
-    : status.spoilerHtml;
-
   return (
     <div
       className={clsx('absolute z-40', {
@@ -79,14 +75,6 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
               <Text theme='white' size='sm' weight='medium'>
                 {intl.formatMessage(messages.sensitiveSubtitle)}
               </Text>
-
-              {status.spoiler_text && (
-                <div className='py-4 italic'>
-                  <Text className='line-clamp-6' theme='white' size='md' weight='medium'>
-                    &ldquo;<span dangerouslySetInnerHTML={{ __html: spoilerText }} />&rdquo;
-                  </Text>
-                </div>
-              )}
             </div>
 
             <HStack alignItems='center' justifyContent='center' space={2}>
diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx
index 30c106a92..d088c6218 100644
--- a/src/features/account-gallery/index.tsx
+++ b/src/features/account-gallery/index.tsx
@@ -40,8 +40,8 @@ const AccountGallery = () => {
   } = useAccountLookup(username, { withRelationship: true });
 
   const attachments: ImmutableList<AccountGalleryAttachment> = useAppSelector((state) => account ? getAccountGallery(state, account.id) : ImmutableList());
-  const isLoading = useAppSelector((state) => state.timelines.get(`account:${account?.id}:media`)?.isLoading);
-  const hasMore = useAppSelector((state) => state.timelines.get(`account:${account?.id}:media`)?.hasMore);
+  const isLoading = useAppSelector((state) => state.timelines.get(`account:${account?.id}:with_replies:media`)?.isLoading);
+  const hasMore = useAppSelector((state) => state.timelines.get(`account:${account?.id}:with_replies:media`)?.hasMore);
 
   const node = useRef<HTMLDivElement>(null);
 
diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index 2669fd596..98906d8e9 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -61,7 +61,6 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
       media = (
         <MediaGallery
           media={status.media_attachments}
-          sensitive={status.sensitive}
           height={110}
           onOpenMedia={noop}
           visible
diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index 6857d2490..be5a56c36 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
@@ -31,15 +31,6 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   const intl = useIntl();
 
   const node = useRef<HTMLDivElement>(null);
-  const overlay = useRef<HTMLDivElement>(null);
-
-  const [minHeight, setMinHeight] = useState(208);
-
-  useEffect(() => {
-    if (overlay.current) {
-      setMinHeight(overlay.current.getBoundingClientRect().height);
-    }
-  }, [overlay.current]);
 
   const handleOpenCompareHistoryModal = () => {
     onOpenCompareHistoryModal(status);
@@ -124,15 +115,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
 
         <StatusReplyMentions status={actualStatus} />
 
-        <Stack
-          className='relative z-0'
-          style={{ minHeight: actualStatus.sensitive ? Math.max(minHeight, 208) + 12 : undefined }}
-        >
-          <SensitiveContentOverlay
-            status={status}
-            ref={overlay}
-          />
-
+        <Stack className='relative z-0'>
           <Stack space={4}>
             <StatusContent
               status={actualStatus}
@@ -143,7 +126,9 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             <TranslateButton status={actualStatus} />
 
             {(withMedia && (quote || actualStatus.card || actualStatus.media_attachments.length > 0)) && (
-              <Stack space={4}>
+              <Stack space={4} className='relative'>
+                <SensitiveContentOverlay status={status} />
+
                 <StatusMedia status={actualStatus} />
 
                 {quote}
diff --git a/src/normalizers/status.ts b/src/normalizers/status.ts
index e6000ec3b..eda1d4fa6 100644
--- a/src/normalizers/status.ts
+++ b/src/normalizers/status.ts
@@ -114,9 +114,6 @@ const normalizeStatus = (status: BaseStatus & {
     mentions = [selfMention, ...mentions];
   }
 
-  // If the status contains spoiler text, treat it as sensitive.
-  const sensitive = !!status.spoiler_text || status.sensitive;
-
   // Normalize event
   let event: BaseStatus['event'] & ({
     banner: MediaAttachment | null;
@@ -162,8 +159,7 @@ const normalizeStatus = (status: BaseStatus & {
     account: normalizeAccount(status.account),
     accounts: status.accounts?.map(normalizeAccount),
     mentions,
-    sensitive,
-    hidden: sensitive,
+    hidden: status.sensitive,
     /** Rewrite `<p></p>` to empty string. */
     content: status.content === '<p></p>' ? '' : status.content,
     filtered: status.filtered?.map(result => result.filter.title),
diff --git a/src/selectors/index.ts b/src/selectors/index.ts
index 36943b92d..6b6956adc 100644
--- a/src/selectors/index.ts
+++ b/src/selectors/index.ts
@@ -206,7 +206,7 @@ type AccountGalleryAttachment = MediaAttachment & {
 }
 
 const getAccountGallery = createSelector([
-  (state: RootState, id: string) => state.timelines.get(`account:${id}:media`)?.items || ImmutableOrderedSet<string>(),
+  (state: RootState, id: string) => state.timelines.get(`account:${id}:with_replies:media`)?.items || ImmutableOrderedSet<string>(),
   (state: RootState) => state.statuses,
 ], (statusIds, statuses) =>
   statusIds.reduce((medias: ImmutableList<AccountGalleryAttachment>, statusId: string) => {