diff --git a/app/soapbox/features/status/components/thread_status.js b/app/soapbox/features/status/components/thread_status.js
new file mode 100644
index 000000000..3df38013a
--- /dev/null
+++ b/app/soapbox/features/status/components/thread_status.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import StatusContainer from 'soapbox/containers/status_container';
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import classNames from 'classnames';
+
+const mapStateToProps = (state, { id }) => {
+ return {
+ replyToId: state.getIn(['statuses', id, 'in_reply_to_id']),
+ replyCount: state.getIn(['contexts', 'replies', id], ImmutableOrderedSet()).size,
+ };
+};
+
+export default @connect(mapStateToProps)
+class ThreadStatus extends React.Component {
+
+ static propTypes = {
+ focusedStatusId: PropTypes.string,
+ replyToId: PropTypes.string,
+ replyCount: PropTypes.number,
+ }
+
+ renderConnector() {
+ const { focusedStatusId, replyToId, replyCount } = this.props;
+
+ const isConnectedTop = replyToId && replyToId !== focusedStatusId;
+ const isConnectedBottom = replyCount > 0;
+ const isConnected = isConnectedTop || isConnectedBottom;
+
+ if (!isConnected) {
+ return null;
+ }
+
+ return (
+
+ );
+ }
+
+ render() {
+ return (
+
+ {this.renderConnector()}
+
+
+ );
+ }
+
+}
diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js
index ae2901f30..7c8e2f999 100644
--- a/app/soapbox/features/status/index.js
+++ b/app/soapbox/features/status/index.js
@@ -37,7 +37,6 @@ import { initMuteModal } from '../../actions/mutes';
import { initReport } from '../../actions/reports';
import { makeGetStatus } from '../../selectors';
// import ColumnHeader from '../../components/column_header';
-import StatusContainer from '../../containers/status_container';
import { openModal } from '../../actions/modal';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -49,6 +48,7 @@ import { textForScreenReader, defaultMediaVisibility } from '../../components/st
import { getSettings } from 'soapbox/actions/settings';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
+import ThreadStatus from './components/thread_status';
import SubNavigation from 'soapbox/components/sub_navigation';
const messages = defineMessages({
@@ -471,10 +471,13 @@ class Status extends ImmutablePureComponent {
}
renderStatus(id) {
+ const { status } = this.props;
+
return (
- {ancestors}
)}
-