show depth and only show direct sons for 闭社树

app/javascript/mastodon/components/status.js

@@ -11,7 +11,7 @@ import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
 import AttachmentList from './attachment_list';
 import Card from '../features/status/components/card';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, FormattedMessage, FormattedNumber } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
 import { HotKeys } from 'react-hotkeys';
@@ -20,7 +20,6 @@ import Icon from 'mastodon/components/icon';
 import { displayMedia } from '../initial_state';
 
 import StatusContainer from '../containers/status_container2';
-//import DetailedStatus from '../features/status/components/detailed_status';
 
 // We use the component (and not the container) since we do not want
 // to use the progress bar to show download progress
@@ -309,7 +308,7 @@ class Status extends ImmutablePureComponent {
     let statusAvatar, prepend, rebloggedByText;
     let sons;
 
-    const { intl, hidden, featured, otherAccounts, unread, showThread, sonsIds } = this.props;
+    const { intl, hidden, featured, otherAccounts, unread, showThread, deep, sonsIds } = this.props;
 
     let { status, account, ...other } = this.props;
 
@@ -467,6 +466,19 @@ class Status extends ImmutablePureComponent {
   if(status.get('in_reply_to_id') == null && sonsIds && sonsIds.size > 0) {
     sons = <div className='comments_timeline'>{this.renderChildren(sonsIds)}</div>;
   }
+    
+    let deepRec;
+    if(deep != null) {
+      deepRec = (
+        <div className="detailed-status__button deep__number">
+          <Icon id="tree" />
+          <span>
+            【<FormattedNumber value={deep} />】
+          </span>
+        </div>
+      );
+    }
+
 
     return (
       <HotKeys handlers={handlers}>
@@ -487,6 +499,7 @@ class Status extends ImmutablePureComponent {
               </a>
             </div>
 
+            {deepRec}
             <StatusContent status={status} onClick={this.handleClick} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} collapsable />
 
             {media}

app/javascript/mastodon/features/status/components/detailed_status.js

@@ -91,7 +91,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
   render () {
     const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
     const outerStyle = { boxSizing: 'border-box' };
-    const { compact } = this.props;
+    const { compact, deep } = this.props;
 
     if (!status) {
       return null;
@@ -207,6 +207,18 @@ export default class DetailedStatus extends ImmutablePureComponent {
       );
     }
 
+    let deepRec;
+    if(deep != null) {
+      deepRec = (
+        <div className="detailed-status__button deep__number">
+          <Icon id="tree" />
+          <span>
+            【<FormattedNumber value={deep} />】
+          </span>
+        </div>
+      );
+    }
+
     return (
       <div style={outerStyle}>
         <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
@@ -215,6 +227,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             <DisplayName account={status.get('account')} localDomain={this.props.domain} />
           </a>
 
+          {deepRec}
           <StatusContent status={status} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} />
 
           {media}

app/javascript/mastodon/features/status/index.js

@@ -120,14 +120,25 @@ const makeMapStateToProps = () => {
     const status = getStatus(state, { id: props.params.statusId });
     let ancestorsIds = Immutable.List();
     let descendantsIds = Immutable.List();
+    let rootAcct;
+    let deep;
 
     if (status) {
       ancestorsIds = getAncestorsIds(state, { id: status.get('in_reply_to_id') });
-      descendantsIds = getDescendantsIds(state, { id: status.get('id') });
+      //console.log(ancestorsIds.get(0));
+      const root_status = ancestorsIds.size? getStatus(state, {id: ancestorsIds.get(0)}) : status; //error is directly visit url of non-root detailedStatus, feature!
+      //console.log('statuese', state.get('statuses').size);
+      //console.log('root_status', root_status);
+      //console.log(root_status.get('account'));
+      rootAcct = root_status.getIn(['account', 'acct']);
+      //console.log('rootAcct', rootAcct);
+      descendantsIds = rootAcct == '0' ? state.getIn(['contexts', 'replies', status.get('id')]) : getDescendantsIds(state, { id: status.get('id') });
+      deep = rootAcct == '0' ? ancestorsIds.size : null;
     }
 
     return {
       status,
+      deep,
       ancestorsIds,
       descendantsIds,
       askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0,
@@ -393,14 +404,16 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  renderChildren (list) {
-    return list.map(id => (
+  renderChildren (list, type) {
+    const { deep } = this.props;
+    return list.map((id,idx) => (
       <StatusContainer
         key={id}
         id={id}
         onMoveUp={this.handleMoveUp}
         onMoveDown={this.handleMoveDown}
         contextType='thread'
+        deep={deep==null? null : (type == 'ance'? idx : deep+1)}
       />
     ));
   }
@@ -436,7 +449,7 @@ class Status extends ImmutablePureComponent {
 
   render () {
     let ancestors, descendants;
-    const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain, multiColumn } = this.props;
+    const { shouldUpdateScroll, status, deep, ancestorsIds, descendantsIds, intl, domain, multiColumn } = this.props;
     const { fullscreen } = this.state;
 
     if (status === null) {
@@ -449,11 +462,11 @@ class Status extends ImmutablePureComponent {
     }
 
     if (ancestorsIds && ancestorsIds.size > 0) {
-      ancestors = <div>{this.renderChildren(ancestorsIds)}</div>;
+      ancestors = <div>{this.renderChildren(ancestorsIds, 'ance')}</div>;
     }
 
     if (descendantsIds && descendantsIds.size > 0) {
-      descendants = <div>{this.renderChildren(descendantsIds)}</div>;
+      descendants = <div>{this.renderChildren(descendantsIds, 'desc')}</div>;
     }
 
     const handlers = {
@@ -486,6 +499,7 @@ class Status extends ImmutablePureComponent {
               <div className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
                 <DetailedStatus
                   status={status}
+                  deep={deep}
                   onOpenVideo={this.handleOpenVideo}
                   onOpenMedia={this.handleOpenMedia}
                   onToggleHidden={this.handleToggleHidden}