Make comments nested lists

src/assets/css/main.css

@@ -213,6 +213,11 @@ blockquote {
   overflow-y: auto;
 }
 
+.comments {
+  list-style: none;
+  padding: 0;
+}
+
 .thumbnail {
   object-fit: cover;
   min-height: 60px;

src/shared/components/comment/comment-node.tsx

@@ -159,18 +159,18 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   }
 
   render() {
-    let node = this.props.node;
+    const node = this.props.node;
-    let cv = this.props.node.comment_view;
+    const cv = this.props.node.comment_view;
 
-    let purgeTypeText =
+    const purgeTypeText =
       this.state.purgeType == PurgeType.Comment
         ? i18n.t("purge_comment")
         : `${i18n.t("purge")} ${cv.creator.name}`;
 
-    let canMod_ =
+    const canMod_ =
       canMod(cv.creator.id, this.props.moderators, this.props.admins) &&
       cv.community.local;
-    let canModOnSelf =
+    const canModOnSelf =
       canMod(
         cv.creator.id,
         this.props.moderators,
@@ -178,59 +178,46 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
         UserService.Instance.myUserInfo,
         true
       ) && cv.community.local;
-    let canAdmin_ =
+    const canAdmin_ =
       canAdmin(cv.creator.id, this.props.admins) && cv.community.local;
-    let canAdminOnSelf =
+    const canAdminOnSelf =
       canAdmin(
         cv.creator.id,
         this.props.admins,
         UserService.Instance.myUserInfo,
         true
       ) && cv.community.local;
-    let isMod_ = isMod(cv.creator.id, this.props.moderators);
+    const isMod_ = isMod(cv.creator.id, this.props.moderators);
-    let isAdmin_ =
+    const isAdmin_ =
       isAdmin(cv.creator.id, this.props.admins) && cv.community.local;
-    let amCommunityCreator_ = amCommunityCreator(
+    const amCommunityCreator_ = amCommunityCreator(
       cv.creator.id,
       this.props.moderators
     );
 
-    let borderColor = this.props.node.depth
+    const moreRepliesBorderColor = this.props.node.depth
-      ? colorList[(this.props.node.depth - 1) % colorList.length]
-      : colorList[0];
-    let moreRepliesBorderColor = this.props.node.depth
       ? colorList[this.props.node.depth % colorList.length]
       : colorList[0];
 
-    let showMoreChildren =
+    const showMoreChildren =
       this.props.viewType == CommentViewType.Tree &&
       !this.state.collapsed &&
       node.children.length == 0 &&
       node.comment_view.counts.child_count > 0;
 
     return (
-      <div
+      <li className="comment" role="comment">
-        className={`comment ${
-          this.props.node.depth && !this.props.noIndent ? "ml-1" : ""
-        }`}
-      >
         <div
           id={`comment-${cv.comment.id}`}
           className={classNames(`details comment-node py-2`, {
-            "border-top border-light": !this.props.noBorder,
             mark:
               this.isCommentNew ||
               this.props.node.comment_view.comment.distinguished,
           })}
-          style={
-            !this.props.noIndent && this.props.node.depth
-              ? `border-left: 2px ${borderColor} solid !important`
-              : ""
-          }
         >
           <div
             className={classNames({
-              "ml-2": !this.props.noIndent && this.props.node.depth,
+              "ml-2": !this.props.noIndent,
             })}
           >
             <div className="d-flex flex-wrap align-items-center text-muted small">
@@ -1024,11 +1011,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
             hideImages={this.props.hideImages}
+            isChild={!this.props.noIndent}
+            depth={this.props.node.depth + 1}
           />
         )}
         {/* A collapsed clearfix */}
-        {this.state.collapsed && <div className="row col-12"></div>}
+        {this.state.collapsed && <div className="row col-12" />}
-      </div>
+      </li>
     );
   }
 

src/shared/components/comment/comment-nodes.tsx

@@ -1,6 +1,8 @@
+import classNames from "classnames";
 import { Component } from "inferno";
 import { CommunityModeratorView, Language, PersonView } from "lemmy-js-client";
 import { CommentNodeI, CommentViewType } from "../../interfaces";
+import { colorList } from "../../utils";
 import { CommentNode } from "./comment-node";
 
 interface CommentNodesProps {
@@ -20,6 +22,8 @@ interface CommentNodesProps {
   allLanguages: Language[];
   siteLanguages: number[];
   hideImages?: boolean;
+  isChild?: boolean;
+  depth?: number;
 }
 
 export class CommentNodes extends Component<CommentNodesProps, any> {
@@ -28,10 +32,24 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
   }
 
   render() {
-    let maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
+    const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
 
-    return (
+    const borderColor = this.props.depth
-      <div className="comments">
+      ? colorList[this.props.depth % colorList.length]
+      : colorList[0];
+
+    return this.props.nodes.length > 0 ? (
+      <ul
+        className={classNames("comments", {
+          "ms-2": !!this.props.isChild,
+          "border-top border-light": !this.props.noBorder,
+        })}
+        style={{
+          "border-left-color": borderColor,
+          "border-left-style": "solid",
+          "border-left-width": `2px`,
+        }}
+      >
         {this.props.nodes.slice(0, maxComments).map(node => (
           <CommentNode
             key={node.comment_view.comment.id}
@@ -52,7 +70,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
             hideImages={this.props.hideImages}
           />
         ))}
-      </div>
+      </ul>
-    );
+    ) : null;
   }
 }