diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx index 19290cbe33..bc59b0de4d 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx @@ -15,6 +15,7 @@ import { AnimatedNumber } from 'flavours/glitch/components/animated_number'; import AttachmentList from 'flavours/glitch/components/attachment_list'; import { ContentWarning } from 'flavours/glitch/components/content_warning'; 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'; @@ -74,6 +75,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(); const rewriteMentions = useAppSelector( @@ -102,6 +104,10 @@ export const DetailedStatus: React.FC<{ [onOpenVideo, status], ); + const handleFilterToggle = useCallback(() => { + setShowDespiteFilter(!showDespiteFilter); + }, [showDespiteFilter, setShowDespiteFilter]); + const handleExpandedToggle = useCallback(() => { if (onToggleHidden) onToggleHidden(status); }, [onToggleHidden, status]); @@ -320,7 +326,11 @@ export const DetailedStatus: React.FC<{ status as StatusLike, ); - expanded ||= status.get('spoiler_text').length === 0; + const matchedFilters = status.get('matched_filters'); + + expanded = + (!matchedFilters || showDespiteFilter) && + (expanded || status.get('spoiler_text').length === 0); return (
@@ -354,17 +364,26 @@ export const DetailedStatus: React.FC<{ )} - {status.get('spoiler_text').length > 0 && ( - )} + {status.get('spoiler_text').length > 0 && + (!matchedFilters || showDespiteFilter) && ( + + )} + {expanded && ( <> { }); const mapStateToProps = (state, props) => { - const status = getStatus(state, { id: props.params.statusId }); + const status = getStatus(state, { id: props.params.statusId, contextType: 'detailed' }); let ancestorsIds = ImmutableList(); let descendantsIds = ImmutableList(); diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js index 303f75470d..01e613d7c0 100644 --- a/app/javascript/flavours/glitch/selectors/index.js +++ b/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'))); diff --git a/app/javascript/flavours/glitch/utils/filters.ts b/app/javascript/flavours/glitch/utils/filters.ts index d299e80c40..c944599bb9 100644 --- a/app/javascript/flavours/glitch/utils/filters.ts +++ b/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';