[Glitch] Add lines to threads in web UI

Port 290e4aba31 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/status.jsx

@@ -67,6 +67,9 @@ class Status extends ImmutablePureComponent {
     id: PropTypes.string,
     status: ImmutablePropTypes.map,
     account: ImmutablePropTypes.map,
+    previousId: PropTypes.string,
+    nextInReplyToId: PropTypes.string,
+    rootId: PropTypes.string,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,
@@ -518,6 +521,9 @@ class Status extends ImmutablePureComponent {
       unread,
       featured,
       pictureInPicture,
+      previousId,
+      nextInReplyToId,
+      rootId,
       ...other
     } = this.props;
     const { isCollapsed, forceFilter } = this.state;
@@ -561,6 +567,8 @@ class Status extends ImmutablePureComponent {
       openMedia: this.handleHotkeyOpenMedia,
     };
 
+    let prepend, rebloggedByText;
+
     if (hidden) {
       return (
         <HotKeys handlers={handlers}>
@@ -572,7 +580,11 @@ class Status extends ImmutablePureComponent {
       );
     }
 
+    const connectUp = previousId && previousId === status.get('in_reply_to_id');
+    const connectToRoot = rootId && rootId === status.get('in_reply_to_id');
+    const connectReply = nextInReplyToId && nextInReplyToId === status.get('id');
     const matchedFilters = status.get('matched_filters');
+
     if (this.state.forceFilter === undefined ? matchedFilters : this.state.forceFilter) {
       const minHandlers = this.props.muted ? {} : {
         moveUp: this.handleHotkeyMoveUp,
@@ -726,8 +738,6 @@ class Status extends ImmutablePureComponent {
       'data-status-by': `@${status.getIn(['account', 'acct'])}`,
     };
 
-    let prepend;
-
     if (this.props.prepend && account) {
       const notifKind = {
         favourite: 'favourited',
@@ -748,8 +758,6 @@ class Status extends ImmutablePureComponent {
       );
     }
 
-    let rebloggedByText;
-
     if (this.props.prepend === 'reblog') {
       rebloggedByText = intl.formatMessage({ id: 'status.reblogged_by', defaultMessage: '{name} boosted' }, { name: account.get('acct') });
     }
@@ -758,6 +766,8 @@ class Status extends ImmutablePureComponent {
       collapsed: isCollapsed,
       'has-background': isCollapsed && background,
       'status__wrapper-reply': !!status.get('in_reply_to_id'),
+      'status--in-thread': !!rootId,
+      'status--first-in-thread': previousId && (!connectUp || connectToRoot),
       unread,
       muted,
     }, 'focusable');
@@ -774,6 +784,9 @@ class Status extends ImmutablePureComponent {
           aria-label={textForScreenReader(intl, status, rebloggedByText, !status.get('hidden'))}
         >
           {!muted && prepend}
+
+          {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}
+
           <header className='status__info'>
             <span>
               {muted && prepend}