show comments and quote for status list

app/javascript/flavours/glitch/actions/timelines.js

@@ -1,5 +1,6 @@
 import { importFetchedStatus, importFetchedStatuses } from './importer';
 import { submitMarkers } from './markers';
+import { fetchContext } from './statuses';
 import api, { getLinks } from 'flavours/glitch/api';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import compareId from 'flavours/glitch/compare_id';
@@ -125,6 +126,17 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) {
       dispatch(importFetchedStatuses(response.data));
       dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.status === 206, isLoadingRecent, isLoadingMore, isLoadingRecent && preferPendingItems));
 
+      response.data.forEach((status) => {
+        // FIXME: better cache
+        if (!('REPLIES_COUNT' in window)) {
+          window.REPLIES_COUNT = {};
+        }
+        if (status.replies_count > 0 && status.replies_count !== window.REPLIES_COUNT[status.id]) {
+          dispatch(fetchContext(status.id));
+          window.REPLIES_COUNT[status.id] = status.replies_count;
+        }
+      });
+
       if (timelineId === 'home') {
         dispatch(submitMarkers());
       }

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

@@ -2,11 +2,12 @@ import { debounce } from 'lodash';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import StatusContainer from 'flavours/glitch/containers/status_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import LoadGap from './load_gap';
 import ScrollableList from './scrollable_list';
 import RegenerationIndicator from 'flavours/glitch/components/regeneration_indicator';
+import StatusWithComments from './status_with_comments';
+
 
 export default class StatusList extends ImmutablePureComponent {
 
@@ -94,7 +95,7 @@ export default class StatusList extends ImmutablePureComponent {
           onClick={onLoadMore}
         />
       ) : (
-        <StatusContainer
+        <StatusWithComments
           key={statusId}
           id={statusId}
           onMoveUp={this.handleMoveUp}
@@ -108,7 +109,7 @@ export default class StatusList extends ImmutablePureComponent {
 
     if (scrollableContent && featuredStatusIds) {
       scrollableContent = featuredStatusIds.map(statusId => (
-        <StatusContainer
+        <StatusWithComments
           key={`f-${statusId}`}
           id={statusId}
           featured

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import StatusContainer from 'flavours/glitch/containers/status_container';
+import LoadMore from 'flavours/glitch/components/load_more';
+
+const mapStateToProps = (state, { id }) => {
+  let status = state.getIn(['statuses', id]);
+  let reblogId = status.get('reblog'); // reblog here is a id
+
+  return {
+    childrenIds: state.getIn(['contexts', 'replies', reblogId || id]),
+    quotedId: reblogId && state.getIn(['statuses', reblogId, 'in_reply_to_id']),
+  };
+};
+
+
+export default @connect(mapStateToProps)
+class StatusWithComments extends ImmutablePureComponent {
+
+  state = {
+    showAll: false,
+  };
+
+  show = () => this.setState({ showAll: true });
+
+  render() {
+    const { id, childrenIds, quotedId, ...other } = this.props;
+    const { showAll } = this.state;
+    let hideSome = !showAll && !!childrenIds && childrenIds.size > 3;
+    return (
+      <div className='status-with-comments'>
+        {quotedId ? (
+          <div className='status__quoted-status'>
+            <StatusContainer
+              id={quotedId}
+            />
+          </div>
+        ) : null}
+        <StatusContainer
+          id={id}
+          {...other}
+        />
+        {childrenIds ? (
+          <div className='status__comments'>
+            {childrenIds
+              .filter((_, idx) => showAll || idx < 3)
+              .map(cid => (
+                <StatusContainer
+                  key={`comment-${cid}`}
+                  id={cid}
+                  collapse={hideSome}
+                />
+              ))}
+            {hideSome ? (
+              <LoadMore
+                visible={hideSome}
+                onClick={this.show}
+              />
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+}

app/javascript/flavours/glitch/styles/components/status.scss

@@ -1112,3 +1112,36 @@ a.status-card.compact:hover {
     border-color: lighten($ui-base-color, 12%);
   }
 }
+
+.status__comments {
+  margin-left: 30px;
+  border-left: 1px solid lighten($ui-base-color, 8%);
+
+  .status__avatar {
+    display: none;
+  }
+
+  .display-name strong {
+    display: inline-block;
+  }
+
+  .load-more {
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+  }
+}
+
+.status__quoted-status {
+  border-left: 4px solid #eee;
+  border-top: 2px solid #eee;
+  max-height: 200px;
+  overflow: hidden;
+  background: #eee2;
+  -webkit-mask-image: linear-gradient(#0002, #000d);
+  mask-image: linear-gradient(#0002, #000d);
+  transform: scale(.9);
+  transform-origin: bottom;
+
+  .status__info, .status__action-bar {
+    display: none;
+  }
+}