Merge branch 'main' into comment-depth

diff --cc src/assets/css/main.css
Simple merge

diff --cc src/shared/components/comment/comment-node.tsx
index 35ef33ac61f2274f04d05f23c6b02532d397a89f,8559f38baa1355d0809ed3766d34f328a35dc639..51826462352b4d3f8bcec75e2e03f189851079c6
--- 1/src/shared/components/comment/comment-node.tsx
--- 2/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@@ -195,6 -270,9 +270,10 @@@ export class CommentNode extends Compon
        this.props.moderators
      );
  
++
+     const borderColor = this.props.node.depth
+       ? colorList[(this.props.node.depth - 1) % colorList.length]
+       : colorList[0];
      const moreRepliesBorderColor = this.props.node.depth
        ? colorList[this.props.node.depth % colorList.length]
        : colorList[0];
@@@ -210,10 -292,14 +289,9 @@@
          <div
            id={`comment-${cv.comment.id}`}
            className={classNames(`details comment-node py-2`, {
-             mark:
-               this.isCommentNew ||
-               this.props.node.comment_view.comment.distinguished,
+             "border-top border-light": !this.props.noBorder,
+             mark: this.isCommentNew || this.commentView.comment.distinguished,
            })}
 -          style={
 -            !this.props.noIndent && this.props.node.depth
 -              ? `border-left: 2px ${borderColor} solid !important`
 -              : ""
 -          }
          >
            <div
              className={classNames({
@@@ -1011,8 -1169,26 +1161,28 @@@
              allLanguages={this.props.allLanguages}
              siteLanguages={this.props.siteLanguages}
              hideImages={this.props.hideImages}
 +            isChild={!this.props.noIndent}
 +            depth={this.props.node.depth + 1}
+             finished={this.props.finished}
+             onCommentReplyRead={this.props.onCommentReplyRead}
+             onPersonMentionRead={this.props.onPersonMentionRead}
+             onCreateComment={this.props.onCreateComment}
+             onEditComment={this.props.onEditComment}
+             onCommentVote={this.props.onCommentVote}
+             onBlockPerson={this.props.onBlockPerson}
+             onSaveComment={this.props.onSaveComment}
+             onDeleteComment={this.props.onDeleteComment}
+             onRemoveComment={this.props.onRemoveComment}
+             onDistinguishComment={this.props.onDistinguishComment}
+             onAddModToCommunity={this.props.onAddModToCommunity}
+             onAddAdmin={this.props.onAddAdmin}
+             onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+             onBanPerson={this.props.onBanPerson}
+             onTransferCommunity={this.props.onTransferCommunity}
+             onFetchChildren={this.props.onFetchChildren}
+             onCommentReport={this.props.onCommentReport}
+             onPurgePerson={this.props.onPurgePerson}
+             onPurgeComment={this.props.onPurgeComment}
            />
          )}
          {/* A collapsed clearfix */}

diff --cc src/shared/components/comment/comment-nodes.tsx
index 64477fdf1bdddbb501096a5e1fad61a3e4f8960a,3f9b48ef68eaa0dffa5fb5ded882ce53a25c7557..e9876e6965ea8c57af46ea870b121244d486d419
--- 1/src/shared/components/comment/comment-nodes.tsx
--- 2/src/shared/components/comment/comment-nodes.tsx
+++ b/src/shared/components/comment/comment-nodes.tsx
@@@ -1,8 -1,30 +1,32 @@@
 +import classNames from "classnames";
  import { Component } from "inferno";
- import { CommunityModeratorView, Language, PersonView } from "lemmy-js-client";
+ import {
+   AddAdmin,
+   AddModToCommunity,
+   BanFromCommunity,
+   BanPerson,
+   BlockPerson,
+   CommentId,
+   CommunityModeratorView,
+   CreateComment,
+   CreateCommentLike,
+   CreateCommentReport,
+   DeleteComment,
+   DistinguishComment,
+   EditComment,
+   GetComments,
+   Language,
+   MarkCommentReplyAsRead,
+   MarkPersonMentionAsRead,
+   PersonView,
+   PurgeComment,
+   PurgePerson,
+   RemoveComment,
+   SaveComment,
+   TransferCommunity,
+ } from "lemmy-js-client";
  import { CommentNodeI, CommentViewType } from "../../interfaces";
 +import { colorList } from "../../utils";
  import { CommentNode } from "./comment-node";
  
  interface CommentNodesProps {
@@@ -22,8 -44,26 +46,28 @@@
    allLanguages: Language[];
    siteLanguages: number[];
    hideImages?: boolean;
 +  isChild?: boolean;
 +  depth?: number;
+   finished: Map<CommentId, boolean | undefined>;
+   onSaveComment(form: SaveComment): void;
+   onCommentReplyRead(form: MarkCommentReplyAsRead): void;
+   onPersonMentionRead(form: MarkPersonMentionAsRead): void;
+   onCreateComment(form: EditComment | CreateComment): void;
+   onEditComment(form: EditComment | CreateComment): void;
+   onCommentVote(form: CreateCommentLike): void;
+   onBlockPerson(form: BlockPerson): void;
+   onDeleteComment(form: DeleteComment): void;
+   onRemoveComment(form: RemoveComment): void;
+   onDistinguishComment(form: DistinguishComment): void;
+   onAddModToCommunity(form: AddModToCommunity): void;
+   onAddAdmin(form: AddAdmin): void;
+   onBanPersonFromCommunity(form: BanFromCommunity): void;
+   onBanPerson(form: BanPerson): void;
+   onTransferCommunity(form: TransferCommunity): void;
+   onFetchChildren?(form: GetComments): void;
+   onCommentReport(form: CreateCommentReport): void;
+   onPurgePerson(form: PurgePerson): void;
+   onPurgeComment(form: PurgeComment): void;
  }
  
  export class CommentNodes extends Component<CommentNodesProps, any> {
@@@ -64,9 -94,29 +108,29 @@@
              allLanguages={this.props.allLanguages}
              siteLanguages={this.props.siteLanguages}
              hideImages={this.props.hideImages}
+             onCommentReplyRead={this.props.onCommentReplyRead}
+             onPersonMentionRead={this.props.onPersonMentionRead}
+             finished={this.props.finished}
+             onCreateComment={this.props.onCreateComment}
+             onEditComment={this.props.onEditComment}
+             onCommentVote={this.props.onCommentVote}
+             onBlockPerson={this.props.onBlockPerson}
+             onSaveComment={this.props.onSaveComment}
+             onDeleteComment={this.props.onDeleteComment}
+             onRemoveComment={this.props.onRemoveComment}
+             onDistinguishComment={this.props.onDistinguishComment}
+             onAddModToCommunity={this.props.onAddModToCommunity}
+             onAddAdmin={this.props.onAddAdmin}
+             onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+             onBanPerson={this.props.onBanPerson}
+             onTransferCommunity={this.props.onTransferCommunity}
+             onFetchChildren={this.props.onFetchChildren}
+             onCommentReport={this.props.onCommentReport}
+             onPurgePerson={this.props.onPurgePerson}
+             onPurgeComment={this.props.onPurgeComment}
            />
          ))}
 -      </div>
 -    );
 +      </ul>
 +    ) : null;
    }
  }