Add quoted status tombstone

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/status.js

@@ -477,7 +477,15 @@ class Status extends ImmutablePureComponent {
     let quote;
 
     if (status.get('quote')) {
-      quote = <QuotedStatus statusId={status.get('quote')} />;
+      if (status.getIn(['pleroma', 'quote_visible'], true) === false) {
+        quote = (
+          <div className='quoted-status-tombstone'>
+            <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
+          </div>
+        );
+      } else {
+        quote = <QuotedStatus statusId={status.get('quote')} />;
+      }
     }
 
     if (otherAccounts && otherAccounts.size > 1) {

app/soapbox/features/status/components/detailed_status.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { FormattedDate } from 'react-intl';
 import { Link, NavLink } from 'react-router-dom';
 
@@ -164,7 +164,15 @@ class DetailedStatus extends ImmutablePureComponent {
     let quote;
 
     if (status.get('quote')) {
-      quote = <QuotedStatus statusId={status.get('quote')} />;
+      if (status.getIn(['pleroma', 'quote_visible'], true) === false) {
+        quote = (
+          <div className='quoted-status-tombstone'>
+            <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
+          </div>
+        );
+      } else {
+        quote = <QuotedStatus statusId={status.get('quote')} />;
+      }
     }
 
     if (status.get('visibility') === 'direct') {

app/styles/components/status.scss

@@ -820,4 +820,14 @@ a.status-card.compact:hover {
   .attachment-thumbs .media-gallery {
     margin-top: 5px !important;
   }
+
+  &-tombstone {
+    margin-top: 14px;
+    padding: 12px;
+    border: 1px solid var(--brand-color--med);
+    border-radius: 10px;
+    color: var(--primary-text-color--faint);
+    font-size: 14px;
+    text-align: center;
+  }
 }