[next] Permalink View (#1987)

* feat: Implement converation thread

* Update unit tests

* test: adapt integration tests

* test: refactor denormalization helpers

* test: Include multiple parents in permalink View

* test: add integration test for loading previous parent comments

* feat: use dashed & solid time line

* feat: use new conversation thread design

* feat: add header from new design

* test: update snapshots

* fix: better scrolling behavior

* feat: add user box

* fix: add translations

* fix: typo

* fix: plural translation

* fix: paddings

* feat: better styling for level 0 comments

* fix: gutter size

* fix: update iframe url with new comment id

* test: add unit tests

src/core/client/framework/testHelpers/denormalize.ts

@@ -0,0 +1,48 @@
+export function denormalizeComment(comment: any, parents: any[] = []) {
+  const replyNodes =
+    (comment.replies &&
+      comment.replies.edges.map((edge: any) =>
+        denormalizeComment(edge, [...parents, comment])
+      )) ||
+    [];
+  const repliesPageInfo = (comment.replies && comment.replies.pageInfo) || {
+    endCursor: null,
+    hasNextPage: false,
+  };
+  return {
+    ...comment,
+    replies: { edges: replyNodes, pageInfo: repliesPageInfo },
+    replyCount: replyNodes.length,
+    parentCount: parents.length,
+    parents: {
+      edges: parents,
+      pageInfo: { startCursor: null, hasPreviousPage: false },
+    },
+  };
+}
+
+export function denormalizeComments(commentList: any[]) {
+  return commentList.map(c => denormalizeComment(c));
+}
+
+export function denormalizeAsset(asset: any) {
+  const commentNodes =
+    (asset.comments &&
+      asset.comments.edges.map((edge: any) => denormalizeComment(edge))) ||
+    [];
+  const commentsPageInfo = (asset.comments && asset.comments.pageInfo) || {
+    endCursor: null,
+    hasNextPage: false,
+  };
+  return {
+    ...asset,
+    comments: { edges: commentNodes, pageInfo: commentsPageInfo },
+    commentCounts: {
+      totalVisible: commentNodes.length,
+    },
+  };
+}
+
+export function denormalizeAssets(assetList: any[]) {
+  return assetList.map(a => denormalizeAsset(a));
+}

src/core/client/framework/testHelpers/index.ts

@@ -9,3 +9,4 @@ export {
   NoFragmentRefs,
 } from "./removeFragmentRefs";
 export { default as createUUIDGenerator } from "./createUUIDGenerator";
+export * from "./denormalize";

src/core/client/stream/listeners/OnPymSetCommentID.spec.tsx

@@ -1,4 +1,5 @@
 import { shallow } from "enzyme";
+import qs from "query-string";
 import React from "react";
 import { Environment, RecordSource } from "relay-runtime";
 
@@ -10,12 +11,20 @@ import { OnPymSetCommentID } from "./OnPymSetCommentID";
 let relayEnvironment: Environment;
 const source: RecordSource = new RecordSource();
 
+const previousLocation = location.toString();
+const previousState = window.history.state;
+
 beforeAll(() => {
   relayEnvironment = createRelayEnvironment({
     source,
   });
 });
 
+afterEach(() => {
+  // As history will change after the listener triggers, reset this to before.
+  window.history.replaceState(previousState, document.title, previousLocation);
+});
+
 it("Sets comment id", () => {
   const id = "comment1-id";
   const props = {
@@ -29,6 +38,7 @@ it("Sets comment id", () => {
   };
   shallow(<OnPymSetCommentID {...props} />);
   expect(source.get(LOCAL_ID)!.commentID).toEqual(id);
+  expect(qs.parse(location.search).commentID).toEqual(id);
 });
 
 it("Sets comment id to null when empty", () => {
@@ -44,4 +54,5 @@ it("Sets comment id to null when empty", () => {
   };
   shallow(<OnPymSetCommentID {...props} />);
   expect(source.get(LOCAL_ID)!.commentID).toEqual(null);
+  expect(qs.parse(location.search).commentID).toBeUndefined();
 });

src/core/client/stream/listeners/OnPymSetCommentID.ts

@@ -3,6 +3,7 @@ import { Component } from "react";
 import { commitLocalUpdate } from "react-relay";
 import { Environment } from "relay-runtime";
 
+import { getURLWithCommentID } from "talk-framework/helpers";
 import { withContext } from "talk-framework/lib/bootstrap";
 import { LOCAL_ID } from "talk-framework/lib/relay";
 
@@ -21,6 +22,15 @@ export class OnPymSetCommentID extends Component<Props> {
         const id = raw || null;
         if (s.get(LOCAL_ID)!.getValue("commentID") !== id) {
           s.get(LOCAL_ID)!.setValue(id, "commentID");
+
+          // Change iframe url, this is important
+          // because it is used to cleanly initialized
+          // a user session.
+          window.history.replaceState(
+            window.history.state,
+            document.title,
+            getURLWithCommentID(location.href, id || undefined)
+          );
         }
       });
     });

src/core/client/stream/mutations/SetCommentIDMutation.spec.ts

@@ -1,3 +1,4 @@
+import qs from "query-string";
 import { Environment, RecordSource } from "relay-runtime";
 import sinon from "sinon";
 
@@ -16,10 +17,19 @@ beforeAll(() => {
   });
 });
 
+const previousLocation = location.toString();
+const previousState = window.history.state;
+
+afterEach(() => {
+  // As history will change after the listener triggers, reset this to before.
+  window.history.replaceState(previousState, document.title, previousLocation);
+});
+
 it("Sets comment id", () => {
   const id = "comment1-id";
   commit(environment, { id }, {} as any);
   expect(source.get(LOCAL_ID)!.commentID).toEqual(id);
+  expect(qs.parse(location.search).commentID).toEqual(id);
 });
 
 it("Should call setCommentID in pym", async () => {
@@ -50,5 +60,6 @@ it("Should call setCommentID in pym with empty id", async () => {
   commit(environment, { id: null }, context as any);
   await timeout();
   expect(source.get(LOCAL_ID)!.commentID).toEqual(null);
+  expect(qs.parse(location.search).commentID).toBeUndefined();
   context.pym.sendMessage.verify();
 });

src/core/client/stream/mutations/SetCommentIDMutation.ts

@@ -1,5 +1,6 @@
 import { commitLocalUpdate, Environment } from "relay-runtime";
 
+import { getURLWithCommentID } from "talk-framework/helpers";
 import { TalkContext } from "talk-framework/lib/bootstrap";
 import { createMutationContainer } from "talk-framework/lib/relay";
 import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
@@ -19,6 +20,16 @@ export async function commit(
     const record = store.get(LOCAL_ID)!;
     record.setValue(input.id, "commentID");
     record.setValue("COMMENTS", "activeTab");
+
+    // Change iframe url, this is important
+    // because it is used to cleanly initialized
+    // a user session.
+    window.history.replaceState(
+      window.history.state,
+      document.title,
+      getURLWithCommentID(location.href, input.id || undefined)
+    );
+
     if (pym) {
       // This sets the comment id on the parent url.
       pym.sendMessage("setCommentID", input.id || "");

src/core/client/stream/tabs/comments/components/Comment/Comment.css

@@ -1,5 +1,9 @@
 .root {
 }
+.highlight {
+  background-color: var(--palette-primary-lightest);
+  padding: var(--spacing-unit);
+}
 .topBar {
   margin-bottom: calc(0.5 * var(--spacing-unit));
 }

src/core/client/stream/tabs/comments/components/Comment/Comment.spec.tsx

@@ -8,9 +8,7 @@ import Comment from "./Comment";
 it("renders username and body", () => {
   const props: PropTypesOf<typeof Comment> = {
     id: "comment-id",
-    author: {
-      username: "Marvin",
-    },
+    username: "Marvin",
     body: "Woof",
     createdAt: "1995-12-17T03:24:00.000Z",
     topBarRight: "topBarRight",

src/core/client/stream/tabs/comments/components/Comment/Comment.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import React, { StatelessComponent } from "react";
 
 import HTMLContent from "talk-stream/components/HTMLContent";
@@ -12,19 +13,21 @@ import Username from "./Username";
 export interface CommentProps {
   id?: string;
   className?: string;
-  author: {
-    username: string | null;
-  } | null;
+  username: string | null;
   body: string | null;
   createdAt: string;
   topBarRight?: React.ReactNode;
   footer?: React.ReactNode;
   showEditedMarker?: boolean;
+  highlight?: boolean;
 }
 
 const Comment: StatelessComponent<CommentProps> = props => {
   return (
-    <div role="article" className={styles.root}>
+    <div
+      role="article"
+      className={cn(styles.root, { [styles.highlight]: props.highlight })}
+    >
       <Flex
         className={styles.topBar}
         direction="row"
@@ -32,10 +35,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
         id={props.id}
       >
         <TopBarLeft>
-          {props.author &&
-            props.author.username && (
-              <Username>{props.author.username}</Username>
-            )}
+          {props.username && <Username>{props.username}</Username>}
           <Flex direction="row" alignItems="baseline" itemGutter>
             <Timestamp>{props.createdAt}</Timestamp>
             {props.showEditedMarker && <EditedMarker />}

src/core/client/stream/tabs/comments/components/Comment/IndentedComment.spec.tsx

@@ -8,9 +8,7 @@ import IndentedComment from "./IndentedComment";
 it("renders correctly", () => {
   const props: PropTypesOf<typeof IndentedComment> = {
     indentLevel: 1,
-    author: {
-      username: "Marvin",
-    },
+    username: "Marvin",
     body: "Woof",
     createdAt: "1995-12-17T03:24:00.000Z",
   };

src/core/client/stream/tabs/comments/components/Comment/RootParent.tsx

@@ -0,0 +1,28 @@
+import React, { StatelessComponent } from "react";
+
+import Timestamp from "talk-stream/components/Timestamp";
+import { Flex } from "talk-ui/components";
+
+import TopBarLeft from "./TopBarLeft";
+import Username from "./Username";
+
+export interface RootParentProps {
+  id?: string;
+  username: string | null;
+  createdAt: string;
+}
+
+const RootParent: StatelessComponent<RootParentProps> = props => {
+  return (
+    <Flex direction="row" justifyContent="space-between" id={props.id}>
+      <TopBarLeft>
+        {props.username && <Username>{props.username}</Username>}
+        <Flex direction="row" alignItems="baseline" itemGutter>
+          <Timestamp>{props.createdAt}</Timestamp>
+        </Flex>
+      </TopBarLeft>
+    </Flex>
+  );
+};
+
+export default RootParent;

src/core/client/stream/tabs/comments/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap

@@ -6,13 +6,9 @@ exports[`renders correctly 1`] = `
   level={1}
 >
   <Comment
-    author={
-      Object {
-        "username": "Marvin",
-      }
-    }
     body="Woof"
     createdAt="1995-12-17T03:24:00.000Z"
+    username="Marvin"
   />
 </Indent>
 `;

src/core/client/stream/tabs/comments/components/Comment/index.ts

@@ -3,3 +3,4 @@ export { default as TopBarLeft } from "./TopBarLeft";
 export { default as Username } from "./Username";
 export { default as ButtonsBar } from "./ButtonsBar";
 export { default as ShowConversationLink } from "./ShowConversationLink";
+export { default as RootParent } from "./RootParent";

src/core/client/stream/tabs/comments/components/ConversationThread.css

@@ -0,0 +1,7 @@
+.root {
+}
+
+.loadMore {
+  padding-left: var(--spacing-unit);
+  padding-bottom: var(--spacing-unit);
+}

src/core/client/stream/tabs/comments/components/ConversationThread.spec.tsx

@@ -0,0 +1,70 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { removeFragmentRefs } from "talk-framework/testHelpers";
+import ConversationThread from "./ConversationThread";
+
+const ConversationThreadN = removeFragmentRefs(ConversationThread);
+
+describe("with 2 remaining parent comments", () => {
+  it("renders correctly", () => {
+    const props: PropTypesOf<typeof ConversationThreadN> = {
+      className: "root",
+      me: {},
+      asset: {},
+      settings: {},
+      comment: {},
+      disableLoadMore: false,
+      loadMore: noop,
+      remaining: 2,
+      parents: [],
+      rootParent: {
+        id: "root-parent",
+        createdAt: "1995-12-17T03:24:00.000Z",
+        username: "parentAuthor",
+      },
+    };
+    const wrapper = shallow(<ConversationThreadN {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("renders with disabled load more", () => {
+    const props: PropTypesOf<typeof ConversationThreadN> = {
+      className: "root",
+      me: {},
+      asset: {},
+      settings: {},
+      comment: {},
+      disableLoadMore: true,
+      loadMore: noop,
+      remaining: 2,
+      parents: [],
+      rootParent: {
+        id: "root-parent",
+        createdAt: "1995-12-17T03:24:00.000Z",
+        username: "parentAuthor",
+      },
+    };
+    const wrapper = shallow(<ConversationThreadN {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+it("renders with no parent comments", () => {
+  const props: PropTypesOf<typeof ConversationThreadN> = {
+    className: "root",
+    me: {},
+    asset: {},
+    settings: {},
+    comment: {},
+    disableLoadMore: false,
+    loadMore: noop,
+    remaining: 0,
+    parents: [],
+    rootParent: null,
+  };
+  const wrapper = shallow(<ConversationThreadN {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/tabs/comments/components/ConversationThread.tsx

@@ -0,0 +1,122 @@
+import cn from "classnames";
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+import { Button, Flex, HorizontalGutter } from "talk-ui/components";
+
+import CommentContainer from "../containers/CommentContainer";
+import LocalReplyListContainer from "../containers/LocalReplyListContainer";
+import { RootParent } from "./Comment";
+import * as styles from "./ConversationThread.css";
+import Counter from "./Counter";
+import { Circle, Line } from "./Timeline";
+
+export interface ConversationThreadProps {
+  className?: string;
+  me: PropTypesOf<typeof CommentContainer>["me"] &
+    (PropTypesOf<typeof LocalReplyListContainer>["me"] | null);
+  asset: PropTypesOf<typeof CommentContainer>["asset"] &
+    PropTypesOf<typeof LocalReplyListContainer>["asset"];
+  settings: PropTypesOf<typeof CommentContainer>["settings"] &
+    PropTypesOf<typeof LocalReplyListContainer>["settings"];
+  comment: PropTypesOf<typeof CommentContainer>["comment"];
+  disableLoadMore: boolean;
+  loadMore: () => void;
+  remaining: number;
+  parents: Array<
+    { id: string } & PropTypesOf<typeof CommentContainer>["comment"] &
+      PropTypesOf<typeof LocalReplyListContainer>["comment"]
+  >;
+  rootParent: {
+    id: string;
+    createdAt: string;
+    username: string | null;
+  } | null;
+}
+
+const ConversationThread: StatelessComponent<
+  ConversationThreadProps
+> = props => {
+  if (props.remaining === 0 && props.parents.length === 0) {
+    return (
+      <div className={cn(props.className, styles.root)}>
+        <CommentContainer
+          comment={props.comment}
+          asset={props.asset}
+          settings={props.settings}
+          me={props.me}
+          highlight
+        />
+      </div>
+    );
+  }
+  return (
+    <div className={cn(props.className, styles.root)}>
+      <HorizontalGutter container={<Line dotted />}>
+        {props.rootParent && (
+          <Circle>
+            <RootParent
+              id={props.rootParent.id}
+              username={props.rootParent.username}
+              createdAt={props.rootParent.createdAt}
+            />
+          </Circle>
+        )}
+        {props.remaining > 0 && (
+          <Circle hollow className={styles.loadMore}>
+            <Flex alignItems="center" itemGutter="half">
+              <Localized
+                id="comments-conversationThread-showHiddenComments"
+                $count={props.remaining}
+              >
+                <Button
+                  onClick={props.loadMore}
+                  disabled={props.disableLoadMore}
+                  id="comments-conversationThread-showHiddenComments"
+                  variant="underlined"
+                >
+                  Show hidden comments
+                </Button>
+              </Localized>
+              {props.remaining > 1 && <Counter>{props.remaining}</Counter>}
+            </Flex>
+          </Circle>
+        )}
+      </HorizontalGutter>
+      <HorizontalGutter container={Line}>
+        {props.parents.map((parent, i) => (
+          <Circle key={parent.id} hollow={!!props.remaining || i > 0}>
+            <CommentContainer
+              comment={parent}
+              asset={props.asset}
+              me={props.me}
+              settings={props.settings}
+              localReply
+            />
+            {props.me && (
+              <LocalReplyListContainer
+                asset={props.asset}
+                me={props.me}
+                settings={props.settings}
+                comment={parent}
+                indentLevel={1}
+              />
+            )}
+          </Circle>
+        ))}
+        <Circle end>
+          <CommentContainer
+            comment={props.comment}
+            asset={props.asset}
+            settings={props.settings}
+            me={props.me}
+            highlight
+          />
+        </Circle>
+      </HorizontalGutter>
+    </div>
+  );
+};
+
+export default ConversationThread;

src/core/client/stream/tabs/comments/components/Counter.spec.tsx

@@ -0,0 +1,9 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import Counter from "./Counter";
+
+it("renders correctly", () => {
+  const wrapper = shallow(<Counter>20</Counter>);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/tabs/comments/components/Counter.tsx

@@ -0,0 +1,16 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+
+import * as styles from "./Counter.css";
+
+interface Props {
+  className?: string;
+}
+
+const Counter: StatelessComponent<Props> = props => {
+  return (
+    <span className={cn(styles.root, props.className)}>{props.children}</span>
+  );
+};
+
+export default Counter;

src/core/client/stream/tabs/comments/components/PermalinkView.css

@@ -2,6 +2,23 @@
   width: 100%;
 }
 
-.button {
-  margin-bottom: calc(2 * var(--spacing-unit));
+.replyList {
+  padding-left: calc(2 * var(--spacing-unit));
+}
+
+.title1 {
+  font-size: calc(14rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-sans-serif);
+  line-height: calc(20em / 16);
+  letter-spacing: calc(0.2em / 16);
+  color: var(--palette-text-primary);
+}
+.title2 {
+  font-size: calc(18rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-sans-serif);
+  line-height: calc(20em / 16);
+  letter-spacing: calc(0.2em / 16);
+  color: var(--palette-text-primary);
 }

src/core/client/stream/tabs/comments/components/PermalinkView.spec.tsx

@@ -0,0 +1,36 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { removeFragmentRefs } from "talk-framework/testHelpers";
+import PermalinkView from "./PermalinkView";
+
+const PermalinkViewN = removeFragmentRefs(PermalinkView);
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof PermalinkViewN> = {
+    me: {},
+    asset: {},
+    settings: {},
+    comment: {},
+    showAllCommentsHref: "http://localhost/link",
+    onShowAllComments: noop,
+  };
+  const wrapper = shallow(<PermalinkViewN {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders comment not found", () => {
+  const props: PropTypesOf<typeof PermalinkViewN> = {
+    me: {},
+    asset: {},
+    settings: {},
+    comment: null,
+    showAllCommentsHref: "http://localhost/link",
+    onShowAllComments: noop,
+  };
+  const wrapper = shallow(<PermalinkViewN {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/tabs/comments/components/PermalinkView.tsx

@@ -2,16 +2,25 @@ import { Localized } from "fluent-react/compat";
 import React, { MouseEvent, StatelessComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
-import { Button, Typography } from "talk-ui/components";
+import { Button, Flex, HorizontalGutter, Typography } from "talk-ui/components";
 
-import CommentContainer from "../containers/CommentContainer";
+import UserBoxContainer from "../../../containers/UserBoxContainer";
+import ConversationThreadContainer from "../containers/ConversationThreadContainer";
+import ReplyListContainer from "../containers/ReplyListContainer";
 import * as styles from "./PermalinkView.css";
 
 export interface PermalinkViewProps {
-  me: PropTypesOf<typeof CommentContainer>["me"];
-  asset: PropTypesOf<typeof CommentContainer>["asset"];
-  settings: PropTypesOf<typeof CommentContainer>["settings"];
-  comment: PropTypesOf<typeof CommentContainer>["comment"] | null;
+  me: PropTypesOf<typeof ConversationThreadContainer>["me"] &
+    PropTypesOf<typeof ReplyListContainer>["me"] &
+    PropTypesOf<typeof UserBoxContainer>["me"];
+  asset: PropTypesOf<typeof ConversationThreadContainer>["asset"] &
+    PropTypesOf<typeof ReplyListContainer>["asset"];
+  comment:
+    | PropTypesOf<typeof ConversationThreadContainer>["comment"] &
+        PropTypesOf<typeof ReplyListContainer>["comment"]
+    | null;
+  settings: PropTypesOf<typeof ConversationThreadContainer>["settings"] &
+    PropTypesOf<typeof ReplyListContainer>["settings"];
   showAllCommentsHref: string | null;
   onShowAllComments: (e: MouseEvent<any>) => void;
 }
@@ -25,38 +34,57 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
   me,
 }) => {
   return (
-    <div className={styles.root}>
-      {showAllCommentsHref && (
-        <Localized id="comments-permalinkView-showAllComments">
-          <Button
-            id="talk-comments-permalinkView-showAllComments"
-            variant="outlined"
-            color="primary"
-            onClick={onShowAllComments}
-            className={styles.button}
-            href={showAllCommentsHref}
-            target="_parent"
-            fullWidth
-            anchor
-          >
-            Show all Comments
-          </Button>
+    <HorizontalGutter className={styles.root} size="double">
+      <UserBoxContainer me={me} />
+      <Flex alignItems="center" justifyContent="center" direction="column">
+        <Localized id="comments-permalinkView-currentViewing">
+          <Typography className={styles.title1}>
+            You are currently viewing a
+          </Typography>
         </Localized>
-      )}
+        <Localized id="comments-permalinkView-singleConversation">
+          <Typography className={styles.title2}>SINGLE CONVERSATION</Typography>
+        </Localized>
+        {showAllCommentsHref && (
+          <Localized id="comments-permalinkView-viewFullDiscussion">
+            <Button
+              id="talk-comments-permalinkView-viewFullDiscussion"
+              variant="underlined"
+              color="primary"
+              onClick={onShowAllComments}
+              href={showAllCommentsHref}
+              target="_parent"
+              anchor
+            >
+              View Full Discussion
+            </Button>
+          </Localized>
+        )}
+      </Flex>
       {!comment && (
         <Localized id="comments-permalinkView-commentNotFound">
           <Typography>Comment not found</Typography>
         </Localized>
       )}
       {comment && (
-        <CommentContainer
-          settings={settings}
-          me={me}
-          comment={comment}
-          asset={asset}
-        />
+        <HorizontalGutter>
+          <ConversationThreadContainer
+            me={me}
+            comment={comment}
+            asset={asset}
+            settings={settings}
+          />
+          <div className={styles.replyList}>
+            <ReplyListContainer
+              me={me}
+              comment={comment}
+              asset={asset}
+              settings={settings}
+            />
+          </div>
+        </HorizontalGutter>
       )}
-    </div>
+    </HorizontalGutter>
   );
 };
 

src/core/client/stream/tabs/comments/components/RTE.css

@@ -2,6 +2,10 @@
   composes: root from "talk-stream/shared/htmlContent.css";
 }
 
+.toolbar {
+  background-color: var(--palette-common-white);
+}
+
 .placeholder {
   composes: placeholder from "talk-ui/shared/typography.css";
   margin: var(--spacing-unit) 0 0 calc(1px + var(--spacing-unit));

src/core/client/stream/tabs/comments/components/RTE.tsx

@@ -95,6 +95,7 @@ const RTE: StatelessComponent<RTEProps> = props => {
         className={className}
         contentClassName={styles.content}
         placeholderClassName={styles.placeholder}
+        toolbarClassName={styles.toolbar}
         onChange={onChange}
         value={value || defaultValue}
         disabled={disabled}

src/core/client/stream/tabs/comments/components/Timeline/Circle.css

@@ -0,0 +1,31 @@
+.circleContainer {
+  position: relative;
+}
+
+.circleSubContainer {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: calc(-1 * var(--spacing-unit) - var(--spacing-unit) - 1px);
+  background-color: var(--palette-common-white);
+  width: calc(2 * var(--spacing-unit));
+  height: 23px;
+  color: var(--palette-grey-main);
+}
+
+.end {
+  align-items: flex-start;
+  padding-top: 8px;
+  height: 100%;
+  @media (min-width: $breakpoints-xs) {
+    padding-top: 6px;
+  }
+}
+
+.circle {
+  width: var(--spacing-unit);
+  height: var(--spacing-unit);
+  fill: currentColor;
+  stroke: currentColor;
+}

src/core/client/stream/tabs/comments/components/Timeline/Circle.spec.tsx

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Circle from "./Circle";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Circle> = {
+    className: "root",
+    hollow: true,
+    end: true,
+  };
+  const wrapper = shallow(<Circle {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/tabs/comments/components/Timeline/Circle.tsx

@@ -0,0 +1,35 @@
+import cn from "classnames";
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import styles from "./Circle.css";
+
+export interface CircleProps {
+  className?: string;
+  hollow?: boolean;
+  end?: boolean;
+}
+
+const Circle: StatelessComponent<CircleProps> = props => {
+  return (
+    <div className={cn(styles.circleContainer, props.className)}>
+      <div
+        className={cn(styles.circleSubContainer, { [styles.end]: props.end })}
+      >
+        <svg
+          className={styles.circle}
+          viewBox="0 0 100 100"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          {props.hollow && (
+            <circle cx="50" cy="50" r="40" strokeWidth="8" fill="none" />
+          )}
+          {!props.hollow && <circle cx="50" cy="50" r="50" />}
+        </svg>
+      </div>
+      {props.children}
+    </div>
+  );
+};
+
+export default Circle;

src/core/client/stream/tabs/comments/components/Timeline/Line.css

@@ -0,0 +1,9 @@
+.root {
+  border-left: 2px solid var(--palette-grey-main);
+  padding-left: var(--spacing-unit);
+  margin-left: calc(0.5 * var(--spacing-unit));
+}
+
+.dotted {
+  border-left-style: dotted;
+}

src/core/client/stream/tabs/comments/components/Timeline/Line.spec.tsx

@@ -0,0 +1,15 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Line from "./Line";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Line> = {
+    className: "root",
+    dotted: true,
+  };
+  const wrapper = shallow(<Line {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/tabs/comments/components/Timeline/Line.tsx

@@ -0,0 +1,24 @@
+import cn from "classnames";
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import styles from "./Line.css";
+
+interface LineProps {
+  className?: string;
+  dotted?: boolean;
+}
+
+const Line: StatelessComponent<LineProps> = props => {
+  return (
+    <div
+      className={cn(styles.root, props.className, {
+        [styles.dotted]: props.dotted,
+      })}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default Line;

src/core/client/stream/tabs/comments/components/Timeline/__snapshots__/Circle.spec.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Circle-circleContainer root"
+>
+  <div
+    className="Circle-circleSubContainer Circle-end"
+  >
+    <svg
+      className="Circle-circle"
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="50"
+        cy="50"
+        fill="none"
+        r="40"
+        strokeWidth="8"
+      />
+    </svg>
+  </div>
+</div>
+`;

src/core/client/stream/tabs/comments/components/Timeline/__snapshots__/Line.spec.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Line-root root Line-dotted"
+/>
+`;

src/core/client/stream/tabs/comments/components/Timeline/index.ts

@@ -0,0 +1,2 @@
+export { default as Circle } from "./Circle";
+export { default as Line } from "./Line";

src/core/client/stream/tabs/comments/components/__snapshots__/ConversationThread.spec.tsx.snap

@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders with no parent comments 1`] = `
+<div
+  className="root ConversationThread-root"
+>
+  <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
+    asset={Object {}}
+    comment={Object {}}
+    highlight={true}
+    me={Object {}}
+    settings={Object {}}
+  />
+</div>
+`;
+
+exports[`with 2 remaining parent comments renders correctly 1`] = `
+<div
+  className="root ConversationThread-root"
+>
+  <withPropsOnChange(HorizontalGutter)
+    container={
+      <Line
+        dotted={true}
+      />
+    }
+  >
+    <Circle>
+      <RootParent
+        createdAt="1995-12-17T03:24:00.000Z"
+        id="root-parent"
+        username="parentAuthor"
+      />
+    </Circle>
+    <Circle
+      className="ConversationThread-loadMore"
+      hollow={true}
+    >
+      <withPropsOnChange(Flex)
+        alignItems="center"
+        itemGutter="half"
+      >
+        <Localized
+          $count={2}
+          id="comments-conversationThread-showHiddenComments"
+        >
+          <withPropsOnChange(Button)
+            disabled={false}
+            id="comments-conversationThread-showHiddenComments"
+            onClick={[Function]}
+            variant="underlined"
+          >
+            Show hidden comments
+          </withPropsOnChange(Button)>
+        </Localized>
+        <Counter>
+          2
+        </Counter>
+      </withPropsOnChange(Flex)>
+    </Circle>
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
+    container={[Function]}
+  >
+    <Circle
+      end={true}
+    >
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
+        asset={Object {}}
+        comment={Object {}}
+        highlight={true}
+        me={Object {}}
+        settings={Object {}}
+      />
+    </Circle>
+  </withPropsOnChange(HorizontalGutter)>
+</div>
+`;
+
+exports[`with 2 remaining parent comments renders with disabled load more 1`] = `
+<div
+  className="root ConversationThread-root"
+>
+  <withPropsOnChange(HorizontalGutter)
+    container={
+      <Line
+        dotted={true}
+      />
+    }
+  >
+    <Circle>
+      <RootParent
+        createdAt="1995-12-17T03:24:00.000Z"
+        id="root-parent"
+        username="parentAuthor"
+      />
+    </Circle>
+    <Circle
+      className="ConversationThread-loadMore"
+      hollow={true}
+    >
+      <withPropsOnChange(Flex)
+        alignItems="center"
+        itemGutter="half"
+      >
+        <Localized
+          $count={2}
+          id="comments-conversationThread-showHiddenComments"
+        >
+          <withPropsOnChange(Button)
+            disabled={true}
+            id="comments-conversationThread-showHiddenComments"
+            onClick={[Function]}
+            variant="underlined"
+          >
+            Show hidden comments
+          </withPropsOnChange(Button)>
+        </Localized>
+        <Counter>
+          2
+        </Counter>
+      </withPropsOnChange(Flex)>
+    </Circle>
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
+    container={[Function]}
+  >
+    <Circle
+      end={true}
+    >
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
+        asset={Object {}}
+        comment={Object {}}
+        highlight={true}
+        me={Object {}}
+        settings={Object {}}
+      />
+    </Circle>
+  </withPropsOnChange(HorizontalGutter)>
+</div>
+`;

src/core/client/stream/tabs/comments/components/__snapshots__/Counter.spec.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<span
+  className="Counter-root"
+>
+  20
+</span>
+`;

src/core/client/stream/tabs/comments/components/__snapshots__/PermalinkView.spec.tsx.snap

@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comment not found 1`] = `
+<withPropsOnChange(HorizontalGutter)
+  className="PermalinkView-root"
+  size="double"
+>
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
+    me={Object {}}
+  />
+  <withPropsOnChange(Flex)
+    alignItems="center"
+    direction="column"
+    justifyContent="center"
+  >
+    <Localized
+      id="comments-permalinkView-currentViewing"
+    >
+      <withPropsOnChange(Typography)
+        className="PermalinkView-title1"
+      >
+        You are currently viewing a
+      </withPropsOnChange(Typography)>
+    </Localized>
+    <Localized
+      id="comments-permalinkView-singleConversation"
+    >
+      <withPropsOnChange(Typography)
+        className="PermalinkView-title2"
+      >
+        SINGLE CONVERSATION
+      </withPropsOnChange(Typography)>
+    </Localized>
+    <Localized
+      id="comments-permalinkView-viewFullDiscussion"
+    >
+      <withPropsOnChange(Button)
+        anchor={true}
+        color="primary"
+        href="http://localhost/link"
+        id="talk-comments-permalinkView-viewFullDiscussion"
+        onClick={[Function]}
+        target="_parent"
+        variant="underlined"
+      >
+        View Full Discussion
+      </withPropsOnChange(Button)>
+    </Localized>
+  </withPropsOnChange(Flex)>
+  <Localized
+    id="comments-permalinkView-commentNotFound"
+  >
+    <withPropsOnChange(Typography)>
+      Comment not found
+    </withPropsOnChange(Typography)>
+  </Localized>
+</withPropsOnChange(HorizontalGutter)>
+`;
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(HorizontalGutter)
+  className="PermalinkView-root"
+  size="double"
+>
+  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
+    me={Object {}}
+  />
+  <withPropsOnChange(Flex)
+    alignItems="center"
+    direction="column"
+    justifyContent="center"
+  >
+    <Localized
+      id="comments-permalinkView-currentViewing"
+    >
+      <withPropsOnChange(Typography)
+        className="PermalinkView-title1"
+      >
+        You are currently viewing a
+      </withPropsOnChange(Typography)>
+    </Localized>
+    <Localized
+      id="comments-permalinkView-singleConversation"
+    >
+      <withPropsOnChange(Typography)
+        className="PermalinkView-title2"
+      >
+        SINGLE CONVERSATION
+      </withPropsOnChange(Typography)>
+    </Localized>
+    <Localized
+      id="comments-permalinkView-viewFullDiscussion"
+    >
+      <withPropsOnChange(Button)
+        anchor={true}
+        color="primary"
+        href="http://localhost/link"
+        id="talk-comments-permalinkView-viewFullDiscussion"
+        onClick={[Function]}
+        target="_parent"
+        variant="underlined"
+      >
+        View Full Discussion
+      </withPropsOnChange(Button)>
+    </Localized>
+  </withPropsOnChange(Flex)>
+  <withPropsOnChange(HorizontalGutter)>
+    <withContext(withContext(createMutationContainer(Relay(ConversationThreadContainer))))
+      asset={Object {}}
+      comment={Object {}}
+      me={Object {}}
+      settings={Object {}}
+    />
+    <div
+      className="PermalinkView-replyList"
+    >
+      <withProps(Relay(ReplyListContainer))
+        asset={Object {}}
+        comment={Object {}}
+        me={Object {}}
+        settings={Object {}}
+      />
+    </div>
+  </withPropsOnChange(HorizontalGutter)>
+</withPropsOnChange(HorizontalGutter)>
+`;

src/core/client/stream/tabs/comments/components/__snapshots__/RTE.spec.tsx.snap

@@ -62,7 +62,7 @@ exports[`renders correctly 1`] = `
     placeholder="Post a comment"
     placeholderClassName="RTE-placeholder"
     placeholderClassNameDisabled=""
-    toolbarClassName=""
+    toolbarClassName="RTE-toolbar"
     toolbarClassNameDisabled=""
     value="Hello world"
   />

src/core/client/stream/tabs/comments/containers/CommentContainer.tsx

@@ -17,8 +17,9 @@ import {
   withShowAuthPopupMutation,
 } from "talk-stream/mutations";
 
-import ReactionButtonContainer from "talk-stream/tabs/comments/containers/ReactionButtonContainer";
-import { Button } from "talk-ui/components";
+import { Button, HorizontalGutter } from "talk-ui/components";
+import ReactionButtonContainer from "./ReactionButtonContainer";
+
 import Comment, {
   ButtonsBar,
   ShowConversationLink,
@@ -45,6 +46,7 @@ interface InnerProps {
   disableReplies?: boolean;
   /** showConversationLink will render a link to the conversation */
   showConversationLink?: boolean;
+  highlight?: boolean;
 }
 
 interface State {
@@ -140,6 +142,7 @@ export class CommentContainer extends Component<InnerProps, State> {
       localReply,
       disableReplies,
       showConversationLink,
+      highlight,
       me,
     } = this.props;
     const { showReplyDialog, showEditDialog, editable } = this.state;
@@ -152,15 +155,16 @@ export class CommentContainer extends Component<InnerProps, State> {
       );
     }
     return (
-      <>
+      <HorizontalGutter>
         <Comment
           id={`comment-${comment.id}`}
           indentLevel={indentLevel}
-          author={comment.author}
+          username={comment.author && comment.author.username}
           body={comment.body}
           createdAt={comment.createdAt}
           blur={comment.pending || false}
           showEditedMarker={comment.editing.edited}
+          highlight={highlight}
           topBarRight={
             (editable && (
               <Localized id="comments-commentContainer-editButton">
@@ -216,7 +220,7 @@ export class CommentContainer extends Component<InnerProps, State> {
             localReply={localReply}
           />
         )}
-      </>
+      </HorizontalGutter>
     );
   }
 }

src/core/client/stream/tabs/comments/containers/ConversationThreadContainer.tsx

@@ -0,0 +1,186 @@
+import { Child as PymChild } from "pym.js";
+import React from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
+
+import { withContext } from "talk-framework/lib/bootstrap";
+import { withPaginationContainer } from "talk-framework/lib/relay";
+import { ConversationThreadContainer_asset as AssetData } from "talk-stream/__generated__/ConversationThreadContainer_asset.graphql";
+import { ConversationThreadContainer_comment as CommentData } from "talk-stream/__generated__/ConversationThreadContainer_comment.graphql";
+import { ConversationThreadContainer_me as MeData } from "talk-stream/__generated__/ConversationThreadContainer_me.graphql";
+import { ConversationThreadContainer_settings as SettingsData } from "talk-stream/__generated__/ConversationThreadContainer_settings.graphql";
+import { ConversationThreadContainerPaginationQueryVariables } from "talk-stream/__generated__/ConversationThreadContainerPaginationQuery.graphql";
+import {
+  SetCommentIDMutation,
+  withSetCommentIDMutation,
+} from "talk-stream/mutations";
+
+import ConversationThread from "../components/ConversationThread";
+
+interface ConversationThreadContainerProps {
+  comment: CommentData;
+  asset: AssetData;
+  settings: SettingsData;
+  me: MeData | null;
+  setCommentID: SetCommentIDMutation;
+  pym: PymChild | undefined;
+  relay: RelayPaginationProp;
+}
+
+class ConversationThreadContainer extends React.Component<
+  ConversationThreadContainerProps
+> {
+  public state = {
+    disableLoadMore: false,
+  };
+
+  private loadMore = () => {
+    if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
+      return;
+    }
+    this.setState({ disableLoadMore: true });
+    this.props.relay.loadMore(
+      5, // Fetch the next 5 feed items
+      error => {
+        this.setState({ disableLoadMore: false });
+        if (error) {
+          // tslint:disable-next-line:no-console
+          console.error(error);
+        }
+      }
+    );
+  };
+
+  public render() {
+    const { comment, asset, me, settings } = this.props;
+    const hasMore = this.props.relay.hasMore();
+    return (
+      <ConversationThread
+        me={me}
+        asset={asset}
+        comment={comment}
+        settings={settings}
+        parents={comment.parents.edges.map(edge => edge.node)}
+        disableLoadMore={this.state.disableLoadMore}
+        loadMore={this.loadMore}
+        remaining={comment.parentCount - comment.parents.edges.length}
+        rootParent={
+          (hasMore &&
+            comment &&
+            comment.rootParent && {
+              id: comment.rootParent.id,
+              createdAt: comment.rootParent.createdAt,
+              username:
+                comment.rootParent.author && comment.rootParent.author.username,
+            }) ||
+          null
+        }
+      />
+    );
+  }
+}
+
+// TODO: (cvle) This should be autogenerated.
+interface FragmentVariables {
+  count: number;
+  cursor?: string;
+}
+
+const enhanced = withContext(ctx => ({
+  pym: ctx.pym,
+}))(
+  withSetCommentIDMutation(
+    withPaginationContainer<
+      ConversationThreadContainerProps,
+      ConversationThreadContainerPaginationQueryVariables,
+      FragmentVariables
+    >(
+      {
+        asset: graphql`
+          fragment ConversationThreadContainer_asset on Asset {
+            ...CommentContainer_asset
+            ...LocalReplyListContainer_asset
+          }
+        `,
+        settings: graphql`
+          fragment ConversationThreadContainer_settings on Settings {
+            ...CommentContainer_settings
+            ...LocalReplyListContainer_settings
+          }
+        `,
+        comment: graphql`
+          fragment ConversationThreadContainer_comment on Comment
+            @argumentDefinitions(
+              count: { type: "Int!", defaultValue: 0 }
+              cursor: { type: "Cursor" }
+            ) {
+            id
+            ...CommentContainer_comment
+            rootParent {
+              id
+              author {
+                id
+                username
+              }
+              createdAt
+            }
+            parentCount
+            parents(last: $count, before: $cursor)
+              @connection(key: "ConversationThread_parents") {
+              edges {
+                node {
+                  id
+                  ...CommentContainer_comment
+                  ...LocalReplyListContainer_comment
+                }
+              }
+            }
+          }
+        `,
+        me: graphql`
+          fragment ConversationThreadContainer_me on User {
+            ...CommentContainer_me
+            ...LocalReplyListContainer_me
+          }
+        `,
+      },
+      {
+        direction: "backward",
+        getConnectionFromProps(props) {
+          return props.comment && props.comment.parents;
+        },
+        // This is also the default implementation of `getFragmentVariables` if it isn't provided.
+        getFragmentVariables(prevVars, totalCount) {
+          return {
+            ...prevVars,
+            count: totalCount,
+          };
+        },
+        getVariables(props, { count, cursor }) {
+          return {
+            count,
+            cursor,
+            // commentID isn't specified as an @argument for the fragment, but it should be a
+            // variable available for the fragment under the query root.
+            commentID: props.comment.id,
+          };
+        },
+        query: graphql`
+          # Pagination query to be fetched upon calling 'loadMore'.
+          # Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
+          query ConversationThreadContainerPaginationQuery(
+            $count: Int!
+            $cursor: Cursor
+            $commentID: ID!
+          ) {
+            comment(id: $commentID) {
+              ...ConversationThreadContainer_comment
+                @arguments(count: $count, cursor: $cursor)
+            }
+          }
+        `,
+      }
+    )(ConversationThreadContainer)
+  )
+);
+
+export default enhanced;

src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx

@@ -40,12 +40,7 @@ class PermalinkViewContainer extends React.Component<
 
   public componentDidMount() {
     if (this.props.pym) {
-      const scrollTo = this.props.comment
-        ? document
-            .getElementById(`comment-${this.props.comment.id}`)!
-            .getBoundingClientRect().top + window.pageYOffset
-        : 50;
-      setTimeout(() => this.props.pym!.scrollParentToChildPos(scrollTo), 100);
+      setTimeout(() => this.props.pym!.scrollParentToChildPos(0), 100);
     }
   }
 
@@ -71,23 +66,28 @@ const enhanced = withContext(ctx => ({
     withFragmentContainer<PermalinkViewContainerProps>({
       asset: graphql`
         fragment PermalinkViewContainer_asset on Asset {
-          ...CommentContainer_asset
+          ...ConversationThreadContainer_asset
+          ...ReplyListContainer1_asset
         }
       `,
       comment: graphql`
         fragment PermalinkViewContainer_comment on Comment {
           id
-          ...CommentContainer_comment
+          ...ConversationThreadContainer_comment
+          ...ReplyListContainer1_comment
         }
       `,
       me: graphql`
         fragment PermalinkViewContainer_me on User {
-          ...CommentContainer_me
+          ...ConversationThreadContainer_me
+          ...ReplyListContainer1_me
+          ...UserBoxContainer_me
         }
       `,
       settings: graphql`
         fragment PermalinkViewContainer_settings on Settings {
-          ...CommentContainer_settings
+          ...ConversationThreadContainer_settings
+          ...ReplyListContainer1_settings
         }
       `,
     })(PermalinkViewContainer)

src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap

@@ -1,14 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`hide reply button 1`] = `
-<React.Fragment>
+<withPropsOnChange(HorizontalGutter)>
   <IndentedComment
-    author={
-      Object {
-        "id": "author-id",
-        "username": "Marvin",
-      }
-    }
     blur={false}
     body="Woof"
     createdAt="1995-12-17T03:24:00.000Z"
@@ -51,19 +45,14 @@ exports[`hide reply button 1`] = `
     id="comment-comment-id"
     indentLevel={1}
     showEditedMarker={false}
+    username="Marvin"
   />
-</React.Fragment>
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`renders body only 1`] = `
-<React.Fragment>
+<withPropsOnChange(HorizontalGutter)>
   <IndentedComment
-    author={
-      Object {
-        "id": "author-id",
-        "username": null,
-      }
-    }
     blur={false}
     body="Woof"
     createdAt="1995-12-17T03:24:00.000Z"
@@ -111,19 +100,14 @@ exports[`renders body only 1`] = `
     id="comment-comment-id"
     indentLevel={1}
     showEditedMarker={false}
+    username={null}
   />
-</React.Fragment>
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`renders username and body 1`] = `
-<React.Fragment>
+<withPropsOnChange(HorizontalGutter)>
   <IndentedComment
-    author={
-      Object {
-        "id": "author-id",
-        "username": "Marvin",
-      }
-    }
     blur={false}
     body="Woof"
     createdAt="1995-12-17T03:24:00.000Z"
@@ -171,19 +155,14 @@ exports[`renders username and body 1`] = `
     id="comment-comment-id"
     indentLevel={1}
     showEditedMarker={false}
+    username="Marvin"
   />
-</React.Fragment>
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`shows conversation link 1`] = `
-<React.Fragment>
+<withPropsOnChange(HorizontalGutter)>
   <IndentedComment
-    author={
-      Object {
-        "id": "author-id",
-        "username": "Marvin",
-      }
-    }
     blur={false}
     body="Woof"
     createdAt="1995-12-17T03:24:00.000Z"
@@ -237,6 +216,7 @@ exports[`shows conversation link 1`] = `
     id="comment-comment-id"
     indentLevel={1}
     showEditedMarker={false}
+    username="Marvin"
   />
-</React.Fragment>
+</withPropsOnChange(HorizontalGutter)>
 `;

src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap

@@ -84,7 +84,7 @@ exports[`loads more comments 1`] = `
                 className=""
               >
                 <div
-                  className=" RTE-toolbarDisabled Toolbar-toolbar"
+                  className="RTE-toolbar  RTE-toolbarDisabled Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -182,85 +182,89 @@ exports[`loads more comments 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-0"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-0"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Markus
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Markus
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Joining Too",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-0"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Joining Too",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -271,85 +275,89 @@ exports[`loads more comments 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-1"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-1"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Lukas
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Lukas
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "What's up?",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-1"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "What's up?",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-1"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -360,85 +368,89 @@ exports[`loads more comments 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-2"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-2"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Isabelle
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Isabelle
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Hey!",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-2"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Hey!",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-2"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -535,7 +547,7 @@ exports[`renders comment stream 1`] = `
                 className=""
               >
                 <div
-                  className=" RTE-toolbarDisabled Toolbar-toolbar"
+                  className="RTE-toolbar  RTE-toolbarDisabled Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -633,85 +645,89 @@ exports[`renders comment stream 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-0"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-0"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Markus
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Markus
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Joining Too",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-0"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Joining Too",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -722,85 +738,89 @@ exports[`renders comment stream 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-1"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-1"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Lukas
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Lukas
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "What's up?",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-1"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "What's up?",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-1"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>

src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap

@@ -38,24 +38,68 @@ exports[`renders permalink view with unknown comment 1`] = `
     role="tabpanel"
   >
     <div
-      className="PermalinkView-root"
+      className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
     >
-      <a
-        className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-        href="http://localhost/"
-        id="talk-comments-permalinkView-showAllComments"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        target="_parent"
-        type="button"
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
       >
-        Show All Comments
-      </a>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
+      >
+        <p
+          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
+        >
+          You are currently viewing a
+        </p>
+        <p
+          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
+        >
+          SINGLE CONVERSATION
+        </p>
+        <a
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+          href="http://localhost/"
+          id="talk-comments-permalinkView-viewFullDiscussion"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          target="_parent"
+          type="button"
+        >
+          View Full Discussion
+        </a>
+      </div>
       <p
         className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
       >
@@ -150,7 +194,7 @@ exports[`show all comments 1`] = `
                 className=""
               >
                 <div
-                  className=" RTE-toolbarDisabled Toolbar-toolbar"
+                  className="RTE-toolbar  RTE-toolbarDisabled Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -248,85 +292,89 @@ exports[`show all comments 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-0"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-0"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Markus
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Markus
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Joining Too",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-0"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Joining Too",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>

src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap

@@ -0,0 +1,771 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders permalink view 1`] = `
+<div
+  className="HorizontalGutter-root App-root HorizontalGutter-full"
+>
+  <ul
+    className="TabBar-root TabBar-primary"
+    role="tablist"
+  >
+    <li
+      className="Tab-root"
+      id="tab-COMMENTS"
+      role="presentation"
+    >
+      <button
+        aria-controls="tabPane-COMMENTS"
+        aria-selected={true}
+        className="BaseButton-root Tab-button Tab-primary Tab-active"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        role="tab"
+        type="button"
+      >
+        ⁨2⁩ Comments
+      </button>
+    </li>
+  </ul>
+  <section
+    aria-labelledby="tab-COMMENTS"
+    className="App-tabContent"
+    id="tabPane-COMMENTS"
+    role="tabpanel"
+  >
+    <div
+      className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
+      >
+        <p
+          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
+        >
+          You are currently viewing a
+        </p>
+        <p
+          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
+        >
+          SINGLE CONVERSATION
+        </p>
+        <a
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+          href="http://localhost/"
+          id="talk-comments-permalinkView-viewFullDiscussion"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          target="_parent"
+          type="button"
+        >
+          View Full Discussion
+        </a>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="ConversationThread-root"
+        >
+          <div
+            className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
+          >
+            <div
+              className="Circle-circleContainer"
+            >
+              <div
+                className="Circle-circleSubContainer"
+              >
+                <svg
+                  className="Circle-circle"
+                  viewBox="0 0 100 100"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="50"
+                    cy="50"
+                    r="50"
+                  />
+                </svg>
+              </div>
+              <div
+                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-2"
+              >
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                >
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    Isabelle
+                  </span>
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                  >
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
+                    >
+                      2018-07-06T18:24:00.000Z
+                    </time>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="Circle-circleContainer ConversationThread-loadMore"
+            >
+              <div
+                className="Circle-circleSubContainer"
+              >
+                <svg
+                  className="Circle-circle"
+                  viewBox="0 0 100 100"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="50"
+                    cy="50"
+                    fill="none"
+                    r="40"
+                    strokeWidth="8"
+                  />
+                </svg>
+              </div>
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
+              >
+                <button
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
+                  disabled={false}
+                  id="comments-conversationThread-showHiddenComments"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  SHOW HIDDEN COMMENTS
+                </button>
+                <span
+                  className="Counter-root"
+                >
+                  2
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            className="Line-root HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div
+              className="Circle-circleContainer"
+            >
+              <div
+                className="Circle-circleSubContainer Circle-end"
+              >
+                <svg
+                  className="Circle-circle"
+                  viewBox="0 0 100 100"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="50"
+                    cy="50"
+                    r="50"
+                  />
+                </svg>
+              </div>
+              <div
+                className="HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="Indent-root"
+                >
+                  <div
+                    className=""
+                  >
+                    <div
+                      className="Comment-root Comment-highlight"
+                      role="article"
+                    >
+                      <div
+                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-0"
+                      >
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        >
+                          <span
+                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          >
+                            Markus
+                          </span>
+                          <div
+                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="HorizontalGutter-root HorizontalGutter-full"
+                      >
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "Joining Too",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        >
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-0"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="PermalinkView-replyList"
+        />
+      </div>
+    </div>
+  </section>
+</div>
+`;
+
+exports[`views pervious comments 1`] = `
+<div
+  className="HorizontalGutter-root App-root HorizontalGutter-full"
+>
+  <ul
+    className="TabBar-root TabBar-primary"
+    role="tablist"
+  >
+    <li
+      className="Tab-root"
+      id="tab-COMMENTS"
+      role="presentation"
+    >
+      <button
+        aria-controls="tabPane-COMMENTS"
+        aria-selected={true}
+        className="BaseButton-root Tab-button Tab-primary Tab-active"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        role="tab"
+        type="button"
+      >
+        ⁨2⁩ Comments
+      </button>
+    </li>
+  </ul>
+  <section
+    aria-labelledby="tab-COMMENTS"
+    className="App-tabContent"
+    id="tabPane-COMMENTS"
+    role="tabpanel"
+  >
+    <div
+      className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
+      >
+        <p
+          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
+        >
+          You are currently viewing a
+        </p>
+        <p
+          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
+        >
+          SINGLE CONVERSATION
+        </p>
+        <a
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+          href="http://localhost/"
+          id="talk-comments-permalinkView-viewFullDiscussion"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          target="_parent"
+          type="button"
+        >
+          View Full Discussion
+        </a>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="ConversationThread-root"
+        >
+          <div
+            className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
+          />
+          <div
+            className="Line-root HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div
+              className="Circle-circleContainer"
+            >
+              <div
+                className="Circle-circleSubContainer"
+              >
+                <svg
+                  className="Circle-circle"
+                  viewBox="0 0 100 100"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="50"
+                    cy="50"
+                    r="50"
+                  />
+                </svg>
+              </div>
+              <div
+                className="HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="Indent-root"
+                >
+                  <div
+                    className=""
+                  >
+                    <div
+                      className="Comment-root"
+                      role="article"
+                    >
+                      <div
+                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-1"
+                      >
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        >
+                          <span
+                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          >
+                            Lukas
+                          </span>
+                          <div
+                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="HorizontalGutter-root HorizontalGutter-full"
+                      >
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "What's up?",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        >
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-1"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="Circle-circleContainer"
+            >
+              <div
+                className="Circle-circleSubContainer"
+              >
+                <svg
+                  className="Circle-circle"
+                  viewBox="0 0 100 100"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="50"
+                    cy="50"
+                    fill="none"
+                    r="40"
+                    strokeWidth="8"
+                  />
+                </svg>
+              </div>
+              <div
+                className="HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="Indent-root"
+                >
+                  <div
+                    className=""
+                  >
+                    <div
+                      className="Comment-root"
+                      role="article"
+                    >
+                      <div
+                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-2"
+                      >
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        >
+                          <span
+                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          >
+                            Isabelle
+                          </span>
+                          <div
+                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="HorizontalGutter-root HorizontalGutter-full"
+                      >
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "Hey!",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        >
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-2"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="Circle-circleContainer"
+            >
+              <div
+                className="Circle-circleSubContainer Circle-end"
+              >
+                <svg
+                  className="Circle-circle"
+                  viewBox="0 0 100 100"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="50"
+                    cy="50"
+                    r="50"
+                  />
+                </svg>
+              </div>
+              <div
+                className="HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="Indent-root"
+                >
+                  <div
+                    className=""
+                  >
+                    <div
+                      className="Comment-root Comment-highlight"
+                      role="article"
+                    >
+                      <div
+                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-0"
+                      >
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        >
+                          <span
+                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          >
+                            Markus
+                          </span>
+                          <div
+                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="HorizontalGutter-root HorizontalGutter-full"
+                      >
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "Joining Too",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        >
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-0"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="PermalinkView-replyList"
+        />
+      </div>
+    </div>
+  </section>
+</div>
+`;

src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap

@@ -84,7 +84,7 @@ exports[`renders comment stream 1`] = `
                 className=""
               >
                 <div
-                  className=" RTE-toolbarDisabled Toolbar-toolbar"
+                  className="RTE-toolbar  RTE-toolbarDisabled Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -182,85 +182,89 @@ exports[`renders comment stream 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-0"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-0"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Markus
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Markus
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Joining Too",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-0"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Joining Too",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -271,85 +275,89 @@ exports[`renders comment stream 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-with-deep-replies"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-with-deep-replies"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Markus
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Markus
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "I like yoghurt",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-with-deep-replies"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "I like yoghurt",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-with-deep-replies"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -364,85 +372,89 @@ exports[`renders comment stream 1`] = `
               className="HorizontalGutter-root HorizontalGutter-full"
             >
               <div
-                className="Indent-root"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="Indent-level1"
+                  className="Indent-root"
                 >
                   <div
-                    className="Comment-root"
-                    role="article"
+                    className="Indent-level1"
                   >
                     <div
-                      className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                      id="comment-comment-with-replies"
+                      className="Comment-root"
+                      role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-with-replies"
                       >
-                        <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                        >
-                          Markus
-                        </span>
                         <div
-                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                         >
-                          <time
-                            className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:24:00.000Z"
-                            title="2018-07-06T18:24:00.000Z"
+                          <span
+                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                           >
-                            2018-07-06T18:24:00.000Z
-                          </time>
+                            Markus
+                          </span>
+                          <div
+                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
-                    >
                       <div
-                        className="HTMLContent-root"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "I like yoghurt",
-                          }
-                        }
-                      />
-                      <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="HorizontalGutter-root HorizontalGutter-full"
                       >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          id="comments-commentContainer-replyButton-comment-with-replies"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "I like yoghurt",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                         >
-                          <span>
-                            Reply
-                          </span>
-                        </button>
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Respect
-                          </span>
-                        </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-with-replies"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -457,85 +469,89 @@ exports[`renders comment stream 1`] = `
                   className="HorizontalGutter-root HorizontalGutter-full"
                 >
                   <div
-                    className="Indent-root"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
                     <div
-                      className="Indent-level2"
+                      className="Indent-root"
                     >
                       <div
-                        className="Comment-root"
-                        role="article"
+                        className="Indent-level2"
                       >
                         <div
-                          className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                          id="comment-comment-3"
+                          className="Comment-root"
+                          role="article"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            id="comment-comment-3"
                           >
-                            <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                            >
-                              Isabelle
-                            </span>
                             <div
-                              className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                             >
-                              <time
-                                className="Timestamp-root RelativeTime-root"
-                                dateTime="2018-07-06T18:24:00.000Z"
-                                title="2018-07-06T18:24:00.000Z"
+                              <span
+                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                               >
-                                2018-07-06T18:24:00.000Z
-                              </time>
+                                Isabelle
+                              </span>
+                              <div
+                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                              >
+                                <time
+                                  className="Timestamp-root RelativeTime-root"
+                                  dateTime="2018-07-06T18:24:00.000Z"
+                                  title="2018-07-06T18:24:00.000Z"
+                                >
+                                  2018-07-06T18:24:00.000Z
+                                </time>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                        <div
-                          className="HorizontalGutter-root HorizontalGutter-full"
-                        >
                           <div
-                            className="HTMLContent-root"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "Comment Body 3",
-                              }
-                            }
-                          />
-                          <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="HorizontalGutter-root HorizontalGutter-full"
                           >
-                            <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              id="comments-commentContainer-replyButton-comment-3"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
+                            <div
+                              className="HTMLContent-root"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "Comment Body 3",
+                                }
+                              }
+                            />
+                            <div
+                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                             >
-                              <span>
-                                Reply
-                              </span>
-                            </button>
-                            <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Respect
-                              </span>
-                            </button>
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                id="comments-commentContainer-replyButton-comment-3"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseDown={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Reply
+                                </span>
+                              </button>
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseDown={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Respect
+                                </span>
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -546,85 +562,89 @@ exports[`renders comment stream 1`] = `
                   className="HorizontalGutter-root HorizontalGutter-full"
                 >
                   <div
-                    className="Indent-root"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
                     <div
-                      className="Indent-level2"
+                      className="Indent-root"
                     >
                       <div
-                        className="Comment-root"
-                        role="article"
+                        className="Indent-level2"
                       >
                         <div
-                          className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                          id="comment-comment-4"
+                          className="Comment-root"
+                          role="article"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            id="comment-comment-4"
                           >
-                            <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                            >
-                              Isabelle
-                            </span>
                             <div
-                              className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                             >
-                              <time
-                                className="Timestamp-root RelativeTime-root"
-                                dateTime="2018-07-06T18:24:00.000Z"
-                                title="2018-07-06T18:24:00.000Z"
+                              <span
+                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                               >
-                                2018-07-06T18:24:00.000Z
-                              </time>
+                                Isabelle
+                              </span>
+                              <div
+                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                              >
+                                <time
+                                  className="Timestamp-root RelativeTime-root"
+                                  dateTime="2018-07-06T18:24:00.000Z"
+                                  title="2018-07-06T18:24:00.000Z"
+                                >
+                                  2018-07-06T18:24:00.000Z
+                                </time>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                        <div
-                          className="HorizontalGutter-root HorizontalGutter-full"
-                        >
                           <div
-                            className="HTMLContent-root"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "Comment Body 4",
-                              }
-                            }
-                          />
-                          <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="HorizontalGutter-root HorizontalGutter-full"
                           >
-                            <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              id="comments-commentContainer-replyButton-comment-4"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
+                            <div
+                              className="HTMLContent-root"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "Comment Body 4",
+                                }
+                              }
+                            />
+                            <div
+                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                             >
-                              <span>
-                                Reply
-                              </span>
-                            </button>
-                            <button
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseDown={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Respect
-                              </span>
-                            </button>
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                id="comments-commentContainer-replyButton-comment-4"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseDown={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Reply
+                                </span>
+                              </button>
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseDown={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Respect
+                                </span>
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -637,85 +657,89 @@ exports[`renders comment stream 1`] = `
               className="HorizontalGutter-root HorizontalGutter-full"
             >
               <div
-                className="Indent-root"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="Indent-level1"
+                  className="Indent-root"
                 >
                   <div
-                    className="Comment-root"
-                    role="article"
+                    className="Indent-level1"
                   >
                     <div
-                      className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                      id="comment-comment-5"
+                      className="Comment-root"
+                      role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-5"
                       >
-                        <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                        >
-                          Isabelle
-                        </span>
                         <div
-                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                         >
-                          <time
-                            className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:24:00.000Z"
-                            title="2018-07-06T18:24:00.000Z"
+                          <span
+                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                           >
-                            2018-07-06T18:24:00.000Z
-                          </time>
+                            Isabelle
+                          </span>
+                          <div
+                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
-                    >
                       <div
-                        className="HTMLContent-root"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "Comment Body 5",
-                          }
-                        }
-                      />
-                      <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="HorizontalGutter-root HorizontalGutter-full"
                       >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          id="comments-commentContainer-replyButton-comment-5"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "Comment Body 5",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                         >
-                          <span>
-                            Reply
-                          </span>
-                        </button>
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Respect
-                          </span>
-                        </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-5"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>

src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap

@@ -84,7 +84,7 @@ exports[`renders comment stream 1`] = `
                 className=""
               >
                 <div
-                  className=" RTE-toolbarDisabled Toolbar-toolbar"
+                  className="RTE-toolbar  RTE-toolbarDisabled Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -182,85 +182,89 @@ exports[`renders comment stream 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-0"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-0"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Markus
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Markus
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Joining Too",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-0"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Joining Too",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -271,85 +275,89 @@ exports[`renders comment stream 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-1"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-1"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Lukas
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Lukas
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "What's up?",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-1"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "What's up?",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-1"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>

src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap

@@ -84,7 +84,7 @@ exports[`renders comment stream 1`] = `
                 className=""
               >
                 <div
-                  className=" RTE-toolbarDisabled Toolbar-toolbar"
+                  className="RTE-toolbar  RTE-toolbarDisabled Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -182,85 +182,89 @@ exports[`renders comment stream 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-0"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-0"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Markus
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Markus
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Joining Too",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-0"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Joining Too",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -275,85 +279,89 @@ exports[`renders comment stream 1`] = `
               className="HorizontalGutter-root HorizontalGutter-full"
             >
               <div
-                className="Indent-root"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="Indent-level1"
+                  className="Indent-root"
                 >
                   <div
-                    className="Comment-root"
-                    role="article"
+                    className="Indent-level1"
                   >
                     <div
-                      className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                      id="comment-comment-1"
+                      className="Comment-root"
+                      role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-1"
                       >
-                        <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                        >
-                          Lukas
-                        </span>
                         <div
-                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                         >
-                          <time
-                            className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:24:00.000Z"
-                            title="2018-07-06T18:24:00.000Z"
+                          <span
+                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                           >
-                            2018-07-06T18:24:00.000Z
-                          </time>
+                            Lukas
+                          </span>
+                          <div
+                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
-                    >
                       <div
-                        className="HTMLContent-root"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "What's up?",
-                          }
-                        }
-                      />
-                      <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="HorizontalGutter-root HorizontalGutter-full"
                       >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          id="comments-commentContainer-replyButton-comment-1"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "What's up?",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                         >
-                          <span>
-                            Reply
-                          </span>
-                        </button>
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Respect
-                          </span>
-                        </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-1"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -476,7 +484,7 @@ exports[`show all replies 1`] = `
                 className=""
               >
                 <div
-                  className=" RTE-toolbarDisabled Toolbar-toolbar"
+                  className="RTE-toolbar  RTE-toolbarDisabled Toolbar-toolbar"
                 >
                   <button
                     className="Button-button"
@@ -574,85 +582,89 @@ exports[`show all replies 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Indent-root"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className=""
+              className="Indent-root"
             >
               <div
-                className="Comment-root"
-                role="article"
+                className=""
               >
                 <div
-                  className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  id="comment-comment-0"
+                  className="Comment-root"
+                  role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-0"
                   >
-                    <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                    >
-                      Markus
-                    </span>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                     >
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:24:00.000Z"
-                        title="2018-07-06T18:24:00.000Z"
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        2018-07-06T18:24:00.000Z
-                      </time>
+                        Markus
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Joining Too",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-0"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Joining Too",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
-                    >
-                      <span>
-                        Respect
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -667,85 +679,89 @@ exports[`show all replies 1`] = `
               className="HorizontalGutter-root HorizontalGutter-full"
             >
               <div
-                className="Indent-root"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="Indent-level1"
+                  className="Indent-root"
                 >
                   <div
-                    className="Comment-root"
-                    role="article"
+                    className="Indent-level1"
                   >
                     <div
-                      className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                      id="comment-comment-1"
+                      className="Comment-root"
+                      role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-1"
                       >
-                        <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                        >
-                          Lukas
-                        </span>
                         <div
-                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                         >
-                          <time
-                            className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:24:00.000Z"
-                            title="2018-07-06T18:24:00.000Z"
+                          <span
+                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                           >
-                            2018-07-06T18:24:00.000Z
-                          </time>
+                            Lukas
+                          </span>
+                          <div
+                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
-                    >
                       <div
-                        className="HTMLContent-root"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "What's up?",
-                          }
-                        }
-                      />
-                      <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="HorizontalGutter-root HorizontalGutter-full"
                       >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          id="comments-commentContainer-replyButton-comment-1"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "What's up?",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                         >
-                          <span>
-                            Reply
-                          </span>
-                        </button>
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Respect
-                          </span>
-                        </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-1"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -756,85 +772,89 @@ exports[`show all replies 1`] = `
               className="HorizontalGutter-root HorizontalGutter-full"
             >
               <div
-                className="Indent-root"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="Indent-level1"
+                  className="Indent-root"
                 >
                   <div
-                    className="Comment-root"
-                    role="article"
+                    className="Indent-level1"
                   >
                     <div
-                      className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                      id="comment-comment-2"
+                      className="Comment-root"
+                      role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-2"
                       >
-                        <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                        >
-                          Isabelle
-                        </span>
                         <div
-                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                         >
-                          <time
-                            className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:24:00.000Z"
-                            title="2018-07-06T18:24:00.000Z"
+                          <span
+                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                           >
-                            2018-07-06T18:24:00.000Z
-                          </time>
+                            Isabelle
+                          </span>
+                          <div
+                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
-                    >
                       <div
-                        className="HTMLContent-root"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "Hey!",
-                          }
-                        }
-                      />
-                      <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="HorizontalGutter-root HorizontalGutter-full"
                       >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          id="comments-commentContainer-replyButton-comment-2"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "Hey!",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                         >
-                          <span>
-                            Reply
-                          </span>
-                        </button>
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Respect
-                          </span>
-                        </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-2"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>

src/core/client/stream/test/comments/permalinkView.spec.tsx

@@ -4,13 +4,29 @@ import sinon from "sinon";
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
 
-import { assets, comments, settings } from "../fixtures";
+import { assets, comments, commentWithReplies, settings } from "../fixtures";
 import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
   const commentStub = {
-    ...comments[0],
+    ...commentWithReplies,
+    parentCount: 2,
+    parents: {
+      pageInfo: {
+        hasPreviousPage: false,
+      },
+      edges: [
+        {
+          node: comments[1],
+          cursor: comments[1].createdAt,
+        },
+        {
+          node: comments[2],
+          cursor: comments[2].createdAt,
+        },
+      ],
+    },
   };
 
   const assetStub = {
@@ -68,7 +84,7 @@ it("show all comments", async () => {
   };
   testRenderer.root
     .findByProps({
-      id: "talk-comments-permalinkView-showAllComments",
+      id: "talk-comments-permalinkView-viewFullDiscussion",
     })
     .props.onClick(mockEvent);
   await timeout();

src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx

@@ -66,7 +66,7 @@ it("show all comments", async () => {
 
   testRenderer.root
     .findByProps({
-      id: "talk-comments-permalinkView-showAllComments",
+      id: "talk-comments-permalinkView-viewFullDiscussion",
     })
     .props.onClick(mockEvent);
   await timeout();

src/core/client/stream/test/comments/permalinkViewLoadMoreParents.spec.tsx

@@ -0,0 +1,105 @@
+import { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { createSinonStub } from "talk-framework/testHelpers";
+
+import { assets, comments, settings } from "../fixtures";
+import create from "./create";
+
+let testRenderer: ReactTestRenderer;
+beforeEach(() => {
+  const commentStub = {
+    ...comments[0],
+    parentCount: 2,
+    rootParent: comments[2],
+    parents: createSinonStub(
+      s => s.throws(),
+      s =>
+        s.withArgs({ last: 0 }).returns({
+          pageInfo: {
+            startCursor: "0",
+            hasPreviousPage: true,
+          },
+          edges: [],
+        }),
+      s =>
+        s.withArgs({ last: 5, before: "0" }).returns({
+          pageInfo: {
+            startCursor: "2",
+            hasPreviousPage: false,
+          },
+          edges: [
+            {
+              node: comments[1],
+              cursor: comments[1].createdAt,
+            },
+            {
+              node: comments[2],
+              cursor: comments[2].createdAt,
+            },
+          ],
+        })
+    ),
+  };
+
+  const assetStub = {
+    ...assets[0],
+    comments: {
+      pageInfo: {
+        hasNextPage: false,
+      },
+      edges: [
+        {
+          node: commentStub,
+          cursor: commentStub.createdAt,
+        },
+      ],
+    },
+  };
+
+  const resolvers = {
+    Query: {
+      comment: createSinonStub(
+        s => s.throws(),
+        s => s.withArgs(undefined, { id: commentStub.id }).returns(commentStub)
+      ),
+      asset: createSinonStub(
+        s => s.throws(),
+        s =>
+          s
+            .withArgs(undefined, { id: assetStub.id, url: null })
+            .returns(assetStub)
+      ),
+      settings: sinon.stub().returns(settings),
+    },
+  };
+
+  ({ testRenderer } = create({
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    initLocalState: localRecord => {
+      localRecord.setValue(assetStub.id, "assetID");
+      localRecord.setValue(commentStub.id, "commentID");
+    },
+  }));
+});
+
+it("renders permalink view", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("views pervious comments", async () => {
+  testRenderer.root
+    .find(
+      node =>
+        node.props.onClick &&
+        node.props.id === "comments-conversationThread-showHiddenComments"
+    )
+    .props.onClick();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});

src/core/client/stream/test/fixtures.ts

@@ -1,3 +1,10 @@
+import {
+  denormalizeAsset,
+  denormalizeAssets,
+  denormalizeComment,
+  denormalizeComments,
+} from "talk-framework/testHelpers";
+
 export const settings = {
   reaction: {
     icon: "thumb_up",
@@ -38,7 +45,7 @@ export const baseComment = {
   },
 };
 
-export const comments = [
+export const comments = denormalizeComments([
   {
     ...baseComment,
     id: "comment-0",
@@ -75,9 +82,9 @@ export const comments = [
     author: users[2],
     body: "Comment Body 5",
   },
-];
+]);
 
-export const commentWithReplies = {
+export const commentWithReplies = denormalizeComment({
   ...baseComment,
   id: "comment-with-replies",
   author: users[0],
@@ -92,9 +99,9 @@ export const commentWithReplies = {
     },
   },
   replyCount: 2,
-};
+});
 
-export const commentWithDeepReplies = {
+export const commentWithDeepReplies = denormalizeComment({
   ...baseComment,
   id: "comment-with-deep-replies",
   author: users[0],
@@ -109,9 +116,9 @@ export const commentWithDeepReplies = {
     },
   },
   replyCount: 2,
-};
+});
 
-export const commentWithDeepestReplies = {
+export const commentWithDeepestReplies = denormalizeComment({
   ...baseComment,
   id: "comment-with-deepest-replies",
   body: "body 0",
@@ -205,7 +212,7 @@ export const commentWithDeepestReplies = {
       },
     ],
   },
-};
+});
 
 export const baseAsset = {
   isClosed: false,
@@ -220,7 +227,7 @@ export const baseAsset = {
   },
 };
 
-export const assets = [
+export const assets = denormalizeAssets([
   {
     ...baseAsset,
     id: "asset-1",
@@ -234,13 +241,10 @@ export const assets = [
         hasNextPage: false,
       },
     },
-    commentCounts: {
-      totalVisible: 2,
-    },
   },
-];
+]);
 
-export const assetWithReplies = {
+export const assetWithReplies = denormalizeAsset({
   ...baseAsset,
   id: "asset-with-replies",
   url: "http://localhost/assets/asset-with-replies",
@@ -253,12 +257,9 @@ export const assetWithReplies = {
       hasNextPage: false,
     },
   },
-  commentCounts: {
-    totalVisible: 2,
-  },
-};
+});
 
-export const assetWithDeepReplies = {
+export const assetWithDeepReplies = denormalizeAsset({
   ...baseAsset,
   id: "asset-with-deep-replies",
   url: "http://localhost/assets/asset-with-replies",
@@ -274,12 +275,9 @@ export const assetWithDeepReplies = {
       hasNextPage: false,
     },
   },
-  commentCounts: {
-    totalVisible: 2,
-  },
-};
+});
 
-export const assetWithDeepestReplies = {
+export const assetWithDeepestReplies = denormalizeAsset({
   ...baseAsset,
   id: "asset-with-deepest-replies",
   url: "http://localhost/assets/asset-with-replies",
@@ -294,7 +292,4 @@ export const assetWithDeepestReplies = {
       hasNextPage: false,
     },
   },
-  commentCounts: {
-    totalVisible: 1,
-  },
-};
+});

src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx

@@ -20,16 +20,37 @@ interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLDivElement>;
+
+  /**
+   * The container used for the root node.
+   * Either a string to use a DOM element, a component, or an element.
+   * By default, it maps the variant to a good default headline component.
+   */
+  container?: React.ReactElement<any> | React.ComponentType<any> | string;
 }
 
 const HorizontalGutter: StatelessComponent<InnerProps> = props => {
-  const { classes, className, size, forwardRef, ...rest } = props;
+  const { classes, className, size, forwardRef, container, ...rest } = props;
   const rootClassName = cn(classes.root, className, classes[size!]);
-  return <div className={rootClassName} {...rest} ref={forwardRef} />;
+
+  const innerProps = {
+    className: rootClassName,
+    ref: forwardRef,
+    ...rest,
+  };
+
+  const Container = container!;
+
+  if (React.isValidElement<any>(Container)) {
+    return React.cloneElement(Container, innerProps);
+  } else {
+    return <Container {...innerProps} />;
+  }
 };
 
 HorizontalGutter.defaultProps = {
   size: "full",
+  container: "div",
 } as Partial<InnerProps>;
 
 const enhanced = withForwardRef(withStyles(styles)(HorizontalGutter));

src/core/client/ui/shared/typography.css

@@ -181,3 +181,12 @@
   letter-spacing: 0;
   color: var(--palette-grey-lighter);
 }
+
+.subTabCounter {
+  font-size: calc(14rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-sans-serif);
+  line-height: calc(18em / 18);
+  letter-spacing: calc(0.2em / 18);
+  color: var(--palette-text-primary);
+}

src/core/server/graph/tenant/schema/schema.graphql

@@ -917,12 +917,12 @@ type PageInfo {
   """
   Indicates that there are more nodes after this subset.
   """
-  hasNextPage: Boolean
+  hasNextPage: Boolean!
 
   """
   Included for legacy Relay reasons. Always set to false.
   """
-  hasPreviousPage: Boolean
+  hasPreviousPage: Boolean!
 
   """
   Included for legacy Relay reasons. Always set to null.

src/core/server/models/comment.ts

@@ -316,7 +316,7 @@ export async function retrieveCommentParentsConnection(
   mongo: Db,
   tenantID: string,
   comment: Comment,
-  { last: limit, before: skip = -1 }: { last: number; before?: number }
+  { last: limit, before: skip = 0 }: { last: number; before?: number }
 ): Promise<Readonly<Connection<Readonly<Comment>>>> {
   // Return nothing if this comment does not have any parents.
   if (!comment.parent_id) {
@@ -334,26 +334,28 @@ export async function retrieveCommentParentsConnection(
     return createConnection({
       pageInfo: {
         hasNextPage: false,
-        hasPreviousPage: false,
+        hasPreviousPage: !!comment.parent_id,
+        endCursor: 0,
+        startCursor: 0,
       },
     });
   }
 
   // If the last paramter is 1, and the after paramter is either unset or equal
   // to zero, then all we have to return is the direct parent.
-  if (limit === 1 && skip < 0) {
+  if (limit === 1 && skip <= 0) {
     const parent = await retrieveComment(mongo, tenantID, comment.parent_id);
     if (!parent) {
       throw new Error("parent comment not found");
     }
 
     return {
-      edges: [{ node: parent, cursor: 0 }],
+      edges: [{ node: parent, cursor: 1 }],
       pageInfo: {
         hasNextPage: false,
         hasPreviousPage: comment.grandparent_ids.length > 0,
-        endCursor: 0,
-        startCursor: 0,
+        endCursor: 1,
+        startCursor: 1,
       },
     };
   }
@@ -362,7 +364,7 @@ export async function retrieveCommentParentsConnection(
   const parentIDs = [comment.parent_id, ...comment.grandparent_ids.reverse()];
 
   // Fetch the subset of the comment id's that we are going to query for.
-  const parentIDSubset = parentIDs.slice(skip + 1, skip + 1 + limit);
+  const parentIDSubset = parentIDs.slice(skip, skip + limit);
 
   // Retrieve the parents via the subset list.
   const parents = await retrieveManyComments(mongo, tenantID, parentIDSubset);

src/core/server/models/connection.ts

@@ -32,7 +32,10 @@ export function createConnection<T>(
   return merge(
     {
       edges: [],
-      pageInfo: {},
+      pageInfo: {
+        hasNextPage: false,
+        hasPreviousPage: false,
+      },
     },
     connection
   );

src/locales/en-US/stream.ftl

@@ -26,7 +26,7 @@ comments-replyList-showAll = Show All
 comments-permalinkButton-share = Share
 comments-permalinkPopover-copy = Copy
 comments-permalinkPopover-copied = Copied
-comments-permalinkView-showAllComments = Show All Comments
+comments-permalinkView-viewFullDiscussion = View Full Discussion
 comments-permalinkView-commentNotFound = Comment not found
 
 comments-rte-bold =
@@ -72,6 +72,14 @@ comments-editCommentForm-editRemainingTime = Edit: <time></time> remaining
 comments-editCommentForm-editTimeExpired = Edit time has expired. You can no longer edit this comment. Why not post another one?
 comments-editedMarker-edited = Edited
 comments-showConversationLink-readMore = Read More of this Conversation >
+comments-conversationThread-showHiddenComments =
+  { $count ->
+      [1] SHOW HIDDEN COMMENT
+      *[other] SHOW HIDDEN COMMENTS
+  }
+
+comments-permalinkView-currentViewing = You are currently viewing a
+comments-permalinkView-singleConversation = SINGLE CONVERSATION
 
 ## Profile Tab
 profile-historyComment-viewConversation = View Conversation