diff --git a/app/soapbox/components/statuses/__tests__/sensitive-content-overlay.test.tsx b/app/soapbox/components/statuses/__tests__/sensitive-content-overlay.test.tsx
index 4b2823840..ad677856e 100644
--- a/app/soapbox/components/statuses/__tests__/sensitive-content-overlay.test.tsx
+++ b/app/soapbox/components/statuses/__tests__/sensitive-content-overlay.test.tsx
@@ -20,6 +20,11 @@ describe('', () => {
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content');
});
+ it('does not allow user to delete the status', () => {
+ render();
+ expect(screen.queryAllByTestId('icon-button')).toHaveLength(0);
+ });
+
it('can be toggled', () => {
render();
@@ -43,6 +48,11 @@ describe('', () => {
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
});
+ it('allows the user to delete the status', () => {
+ render();
+ expect(screen.getByTestId('icon-button')).toBeInTheDocument();
+ });
+
it('can be toggled', () => {
render();
diff --git a/app/soapbox/components/statuses/sensitive-content-overlay.tsx b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
index 59faef161..21630929f 100644
--- a/app/soapbox/components/statuses/sensitive-content-overlay.tsx
+++ b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
@@ -1,8 +1,11 @@
import classNames from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
-import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals';
+import { deleteStatus } from 'soapbox/actions/statuses';
+import DropdownMenu from 'soapbox/containers/dropdown-menu-container';
+import { useAppDispatch, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
import { defaultMediaVisibility } from 'soapbox/utils/status';
import { Button, HStack, Text } from '../ui';
@@ -10,6 +13,10 @@ import { Button, HStack, Text } from '../ui';
import type { Status as StatusEntity } from 'soapbox/types/entities';
const messages = defineMessages({
+ delete: { id: 'status.delete', defaultMessage: 'Delete' },
+ deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
+ deleteHeading: { id: 'confirmations.delete.heading', defaultMessage: 'Delete post' },
+ deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide content' },
sensitiveTitle: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
underReviewTitle: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
@@ -27,15 +34,17 @@ interface ISensitiveContentOverlay {
const SensitiveContentOverlay = React.forwardRef((props, ref) => {
const { onToggleVisibility, status } = props;
- const isUnderReview = status.visibility === 'self';
-
- const settings = useSettings();
- const displayMedia = settings.get('displayMedia') as string;
+ const account = useOwnAccount();
+ const dispatch = useAppDispatch();
const intl = useIntl();
-
+ const settings = useSettings();
const { links } = useSoapboxConfig();
+ const isUnderReview = status.visibility === 'self';
+ const isOwnStatus = status.getIn(['account', 'id']) === account?.id;
+ const displayMedia = settings.get('displayMedia') as string;
+
const [visible, setVisible] = useState(defaultMediaVisibility(status, displayMedia));
const toggleVisibility = (event: React.MouseEvent) => {
@@ -48,6 +57,32 @@ const SensitiveContentOverlay = React.forwardRef {
+ const deleteModal = settings.get('deleteModal');
+ if (!deleteModal) {
+ dispatch(deleteStatus(status.id, false));
+ } else {
+ dispatch(openModal('CONFIRM', {
+ icon: require('@tabler/icons/trash.svg'),
+ heading: intl.formatMessage(messages.deleteHeading),
+ message: intl.formatMessage(messages.deleteMessage),
+ confirm: intl.formatMessage(messages.deleteConfirm),
+ onConfirm: () => dispatch(deleteStatus(status.id, false)),
+ }));
+ }
+ };
+
+ const menu = useMemo(() => {
+ return [
+ {
+ text: intl.formatMessage(messages.delete),
+ action: handleDeleteStatus,
+ icon: require('@tabler/icons/trash.svg'),
+ destructive: true,
+ },
+ ];
+ }, []);
+
useEffect(() => {
if (typeof props.visible !== 'undefined') {
setVisible(!!props.visible);
@@ -122,6 +157,13 @@ const SensitiveContentOverlay = React.forwardRef
{intl.formatMessage(messages.show)}
+
+ {(isUnderReview && isOwnStatus) ? (
+
+ ) : null}
)}