[Glitch] Fix filters not applying in detailed view

Port 8c3eeb4d29 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/status/components/detailed_status.tsx

@@ -14,6 +14,7 @@ import { Link } from 'react-router-dom';
 import { AnimatedNumber } from 'flavours/glitch/components/animated_number';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
+import { FilterWarning } from 'flavours/glitch/components/filter_warning';
 import type { StatusLike } from 'flavours/glitch/components/hashtag_bar';
 import { getHashtagBarForStatus } from 'flavours/glitch/components/hashtag_bar';
 import { IconLogo } from 'flavours/glitch/components/logo';
@@ -72,6 +73,7 @@ export const DetailedStatus: React.FC<{
 }) => {
   const properStatus = status?.get('reblog') ?? status;
   const [height, setHeight] = useState(0);
+  const [showDespiteFilter, setShowDespiteFilter] = useState(false);
   const nodeRef = useRef<HTMLDivElement>();
   const history = useAppHistory();
 
@@ -108,6 +110,10 @@ export const DetailedStatus: React.FC<{
     [onOpenVideo, status],
   );
 
+  const handleFilterToggle = useCallback(() => {
+    setShowDespiteFilter(!showDespiteFilter);
+  }, [showDespiteFilter, setShowDespiteFilter]);
+
   const _measureHeight = useCallback(
     (heightJustChanged?: boolean) => {
       if (measureHeight && nodeRef.current) {
@@ -358,6 +364,8 @@ export const DetailedStatus: React.FC<{
   );
   contentMedia.push(hashtagBar);
 
+  const matchedFilters = status.get('matched_filters');
+
   return (
     <div style={outerStyle}>
       <div
@@ -386,22 +394,32 @@ export const DetailedStatus: React.FC<{
           )}
         </Permalink>
 
-        <StatusContent
-          status={status}
-          media={contentMedia}
-          extraMedia={extraMedia}
-          mediaIcons={contentMediaIcons}
-          expanded={expanded}
-          collapsed={false}
-          onExpandedToggle={onToggleHidden}
-          onTranslate={handleTranslate}
-          onUpdate={handleChildUpdate}
-          tagLinks={tagMisleadingLinks}
-          rewriteMentions={rewriteMentions}
-          parseClick={parseClick}
-          disabled
-          {...(statusContentProps as any)}
-        />
+        {matchedFilters && (
+          <FilterWarning
+            title={matchedFilters.join(', ')}
+            expanded={showDespiteFilter}
+            onClick={handleFilterToggle}
+          />
+        )}
+
+        {(!matchedFilters || showDespiteFilter) && (
+          <StatusContent
+            status={status}
+            media={contentMedia}
+            extraMedia={extraMedia}
+            mediaIcons={contentMediaIcons}
+            expanded={expanded}
+            collapsed={false}
+            onExpandedToggle={onToggleHidden}
+            onTranslate={handleTranslate}
+            onUpdate={handleChildUpdate}
+            tagLinks={tagMisleadingLinks}
+            rewriteMentions={rewriteMentions}
+            parseClick={parseClick}
+            disabled
+            {...(statusContentProps as any)}
+          />
+        )}
 
         <div className='detailed-status__meta'>
           <div className='detailed-status__meta__line'>

app/javascript/flavours/glitch/features/status/index.jsx

@@ -133,7 +133,7 @@ const makeMapStateToProps = () => {
   });
 
   const mapStateToProps = (state, props) => {
-    const status = getStatus(state, { id: props.params.statusId });
+    const status = getStatus(state, { id: props.params.statusId, contextType: 'detailed' });
 
     let ancestorsIds   = Immutable.List();
     let descendantsIds = Immutable.List();

app/javascript/flavours/glitch/selectors/index.js

@@ -15,9 +15,10 @@ export const makeGetStatus = () => {
       (state, { id }) => state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
       (state, { id }) => state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'account'])]),
       getFilters,
+      (_, { contextType }) => contextType === 'detailed',
     ],
 
-    (statusBase, statusReblog, accountBase, accountReblog, filters) => {
+    (statusBase, statusReblog, accountBase, accountReblog, filters, warnInsteadOfHide) => {
       if (!statusBase || statusBase.get('isLoading')) {
         return null;
       }
@@ -25,7 +26,7 @@ export const makeGetStatus = () => {
       let filtered = false;
       if ((accountReblog || accountBase).get('id') !== me && filters) {
         let filterResults = statusReblog?.get('filtered') || statusBase.get('filtered') || ImmutableList();
-        if (filterResults.some((result) => filters.getIn([result.get('filter'), 'filter_action']) === 'hide')) {
+        if (!warnInsteadOfHide && filterResults.some((result) => filters.getIn([result.get('filter'), 'filter_action']) === 'hide')) {
           return null;
         }
         filterResults = filterResults.filter(result => filters.has(result.get('filter')));

app/javascript/flavours/glitch/utils/filters.ts

@@ -6,6 +6,8 @@ export const toServerSideType = (columnType: string) => {
     case 'thread':
     case 'account':
       return columnType;
+    case 'detailed':
+      return 'thread';
     default:
       if (columnType.includes('list:')) {
         return 'home';