diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js
index 44992b426..8683ab9dd 100644
--- a/app/soapbox/features/status/index.js
+++ b/app/soapbox/features/status/index.js
@@ -77,7 +77,7 @@ const makeMapStateToProps = () => {
if (status) {
ancestorsIds = ancestorsIds.withMutations(mutable => {
- let id = status.get('in_reply_to_id');
+ let id = state.getIn(['contexts', 'inReplyTos', status.get('id')]);
while (id) {
mutable.unshift(id);
@@ -409,8 +409,16 @@ class Status extends ImmutablePureComponent {
}
}
- renderChildren(list) {
- return list.map(id => (
+ renderTombstone(id) {
+ return (
+
+ );
+ }
+
+ renderStatus(id) {
+ return (
- ));
+ );
+ }
+
+ renderChildren(list) {
+ return list.map(id => {
+ if (id.startsWith('tombstone-')) {
+ return this.renderTombstone(id);
+ } else {
+ return this.renderStatus(id);
+ }
+ });
}
setRef = c => {
diff --git a/app/soapbox/reducers/contexts.js b/app/soapbox/reducers/contexts.js
index 844f9f78f..c0266d853 100644
--- a/app/soapbox/reducers/contexts.js
+++ b/app/soapbox/reducers/contexts.js
@@ -27,6 +27,15 @@ const normalizeContext = (immutableState, id, ancestors, descendants) => immutab
ancestors.forEach(addReply);
descendants.forEach(addReply);
+
+ if (ancestors.length > 0 && !inReplyTos.get(id)) {
+ const tombstoneId = `tombstone-${id}`;
+ const { id: lastId } = ancestors[ancestors.length - 1];
+ replies.update(tombstoneId, ImmutableOrderedSet(), siblings => siblings.add(id).sort());
+ replies.update(lastId, ImmutableOrderedSet(), siblings => siblings.add(tombstoneId).sort());
+ inReplyTos.set(id, tombstoneId);
+ inReplyTos.set(tombstoneId, lastId);
+ }
}));
}));
});
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 88912cc35..fc020d498 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -658,3 +658,14 @@ a.status-card.compact:hover {
max-height: 100%;
}
}
+
+.tombstone {
+ padding: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-size: 14px;
+ border-bottom: 1px solid var(--brand-color--faint);
+ color: var(--primary-text-color--faint);
+}