Implement tree-like display on threads

app/soapbox/components/status.js

@@ -464,7 +464,7 @@ class Status extends ImmutablePureComponent {
                 </div>}
 
               <div className='status__profile'>
-                <div className='status__avatar' style={{ paddingLeft: `${(depth - 1) * 30}px` }}>
+                <div className='status__avatar' style={{ paddingLeft: `${depth * 30}px` }}>
                   <HoverRefWrapper accountId={status.getIn(['account', 'id'])}>
                     <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
                       {statusAvatar}
@@ -490,7 +490,7 @@ class Status extends ImmutablePureComponent {
               expanded={!status.get('hidden')}
               onExpandedToggle={this.handleExpandedToggle}
               collapsable
-              style={{ paddingLeft: `${(depth - 1) * 30}px` }}
+              style={{ paddingLeft: `${depth * 30}px` }}
             />
 
             {media}
@@ -502,7 +502,7 @@ class Status extends ImmutablePureComponent {
               </button>
             )}
 
-            <StatusActionBar status={status} style={{ paddingLeft: `${(depth - 1) * 30}px` }} account={account} {...other} />
+            <StatusActionBar status={status} style={{ paddingLeft: `${depth * 30}px` }} account={account} {...other} />
           </div>
         </div>
       </HotKeys>

app/soapbox/components/status_content.js

@@ -190,7 +190,7 @@ export default class StatusContent extends React.PureComponent {
       }
 
       return (
-        <div className={classNames} ref={this.setRef} tabIndex='0' style={directionStyle} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
+        <div className={classNames} ref={this.setRef} tabIndex='0' style={directionStyle, style} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
           <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
             <span dangerouslySetInnerHTML={spoilerContent} lang={status.get('language')} />
             {' '}
@@ -228,7 +228,7 @@ export default class StatusContent extends React.PureComponent {
           tabIndex='0'
           ref={this.setRef}
           className='status__content'
-          style={directionStyle}
+          style={directionStyle, style}
           dangerouslySetInnerHTML={content}
           lang={status.get('language')}
         />

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

@@ -78,6 +78,7 @@ class ActionBar extends React.PureComponent {
     onOpenUnauthorizedModal: PropTypes.func.isRequired,
     me: SoapboxPropTypes.me,
     isStaff: PropTypes.bool.isRequired,
+    depth: PropTypes.number,
   };
 
   static defaultProps = {
@@ -232,7 +233,7 @@ class ActionBar extends React.PureComponent {
   }
 
   render() {
-    const { status, intl, me, isStaff } = this.props;
+    const { status, intl, me, isStaff, depth } = this.props;
     const { emojiSelectorVisible } = this.state;
 
     const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
@@ -296,7 +297,7 @@ class ActionBar extends React.PureComponent {
     let reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private');
 
     return (
-      <div className='detailed-status__action-bar'>
+      <div className='detailed-status__action-bar' style={{ paddingLeft: `${depth * 30 + 15}px` }}>
         <div className='detailed-status__button'>
           <IconButton
             title={intl.formatMessage(messages.reply)}

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

@@ -36,6 +36,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
     compact: PropTypes.bool,
     showMedia: PropTypes.bool,
     onToggleMediaVisibility: PropTypes.func,
+    depth: PropTypes.number,
   };
 
   state = {
@@ -86,7 +87,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, depth } = this.props;
     const favicon = status.getIn(['account', 'pleroma', 'favicon']);
     const domain = getDomain(status.get('account'));
 
@@ -163,7 +164,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
     return (
       <div style={outerStyle}>
-        <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
+        <div ref={this.setRef} className={classNames('detailed-status', { compact })} style={{ paddingLeft: `${depth * 30 + 15}px` }}>
           <div className='detailed-status__profile'>
             <div className='detailed-status__display-name'>
               <NavLink to={`/@${status.getIn(['account', 'acct'])}`}>

app/soapbox/features/status/index.js

@@ -474,6 +474,7 @@ class Status extends ImmutablePureComponent {
       toggleHidden: this.handleHotkeyToggleHidden,
       toggleSensitive: this.handleHotkeyToggleSensitive,
     };
+    const depth = this.props.depths[status.get('id')];
 
     return (
       <Column label={intl.formatMessage(messages.detailedStatus)}>
@@ -509,6 +510,7 @@ class Status extends ImmutablePureComponent {
                 domain={domain}
                 showMedia={this.state.showMedia}
                 onToggleMediaVisibility={this.handleToggleMediaVisibility}
+                depth={depth}
               />
 
               <ActionBar
@@ -527,6 +529,7 @@ class Status extends ImmutablePureComponent {
                 onPin={this.handlePin}
                 onBookmark={this.handleBookmark}
                 onEmbed={this.handleEmbed}
+                depth={depth}
               />
             </div>
           </HotKeys>

app/styles/components/detailed-status.scss

@@ -25,6 +25,7 @@
   .status__content {
     font-size: 19px;
     line-height: 24px;
+    padding-left: 60px;
 
     .emojione {
       width: 24px;
@@ -50,6 +51,7 @@
   font-size: 14px;
   line-height: 18px;
   display: flex;
+  padding-left: 60px;
 
   i {
     margin-right: 0.4em;