Refactor: New CommentList system

src/comp/comment.svelte

@@ -6,12 +6,12 @@
     import Tablericon from "./tablericon.svelte";
 
   /**
-   * @type {import("$types/base").CommentTreeNode}
+   * @type {import("$types/base").Comment}
    */
-  export let commentNode;
+  export let comment;
 
   /**
-   * @type {import("$types/base").CommentTreeNode | null}
+   * @type {import("$types/base").Comment | null}
    */
   export let replyTo = null;
 
@@ -20,8 +20,6 @@
    */
   export let getTags = undefined;
 
-  $: comment = commentNode.parent;
-
   $: tags = getTags ? getTags(comment) : [];
 </script>
 
@@ -61,13 +59,6 @@
     color: var(--white-dim);
   }
 
-  .comment {
-    display: flex;
-    flex-flow: column nowrap;
-    width: 100%;
-    gap: 32px;
-  }
-
   .replyBar {
     display: flex;
     flex-flow: row nowrap;
@@ -80,40 +71,30 @@
 
 <div class="message">
   <Avatar size={48}></Avatar>
-  <div class="comment">
+  <div class="content">
-    <div class="content">
+    <div class="topBar">
-      <div class="topBar">
+      <div class="nameField">
-        <div class="nameField">
+        <Mention user={comment.author}></Mention>
-          <Mention user={comment.author}></Mention>
+        {#each tags as tag}
-          {#each tags as tag}
+        <span class="tag typeContent">{tag}</span>
-          <span class="tag typeContent">{tag}</span>
+        {/each}
-          {/each}
 
-          {#if replyTo}
+        {#if replyTo}
-          <span class="replyBar">
+        <span class="replyBar">
-            <Tablericon name="square-rounded-arrow-right" size={16} color="white"></Tablericon>
+          <Tablericon name="square-rounded-arrow-right" size={16} color="white"></Tablericon>
-            reply
+          reply
-            <Mention user={replyTo.parent.author}></Mention>
+          <Mention user={replyTo.author}></Mention>
-          </span>
+        </span>
-          {/if}
+        {/if}
-        </div>
-  
-        <span class="date">{moment(comment.commentDate).fromNow()}</span>
       </div>
 
-      <p>{comment.content}</p>
+      <span class="date">{moment(comment.commentDate).fromNow()}</span>
-  
-      <div class="actionBar">
-        <Rating rating={comment.rating}></Rating>
-      </div>
     </div>
 
-    {#if commentNode.children.length}
+    <p>{comment.content}</p>
-    <div class="replyTree">
+
-      {#each commentNode.children as reply}
+    <div class="actionBar">
-        <svelte:self commentNode={reply} getTags={getTags} replyTo={commentNode}></svelte:self>
+      <Rating rating={comment.rating}></Rating>
-      {/each}
     </div>
-    {/if}
   </div>
 </div>

src/comp/commentlist.svelte

@@ -0,0 +1,59 @@
+<script>
+  import moment from "moment";
+  import Mention from "$comp/mention.svelte";
+  import Comment from "$comp/comment.svelte";
+  import UserItem from "$comp/useritem.svelte";
+  import { buildCommentTree } from "$lib/client/nodetree";
+  import { getNamedId, gotoNamedId } from "$lib/util";
+  import { onMount } from "svelte";
+  import Rating from "$comp/rating.svelte";
+
+  /**
+   * @type {import("$types/base").CommentTreeNode[]}
+   */
+  export let commentTreeList;
+
+  /**
+   * @type {import("$types/base").Comment | null}
+   */
+  export let replyTo = null;
+
+  /**
+   * @type {(function(import("$types/base").Comment): string[]) | undefined}
+   */
+  export let getTags = undefined;
+</script>
+
+<style lang="scss">
+  .commentList {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 32px;
+  }
+
+  .comments {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 32px;
+  }
+  
+  .commentReplies {
+    padding-left: 62px;
+  }
+</style>
+
+<section class="comments">
+  <div class="commentList">
+    {#each commentTreeList as commentTree}
+      <Comment comment={commentTree.parent} getTags={getTags} replyTo={replyTo}></Comment>
+
+      {#if commentTree.children.length}
+      <div class="commentReplies">
+        <div class="replyTree">
+          <svelte:self commentTreeList={commentTree.children} getTags={getTags} replyTo={commentTree.parent}></svelte:self>
+        </div>
+      </div>
+      {/if}
+    {/each}
+  </div>
+</section>

src/comp/page/post.svelte

@@ -7,6 +7,7 @@
   import { getNamedId, gotoNamedId } from "$lib/util";
   import { onMount } from "svelte";
   import Rating from "$comp/rating.svelte";
+  import CommentList from "$comp/commentlist.svelte";
 
   /**
    * @type {import("$types/base").Post}
@@ -42,13 +43,7 @@
     }
   }
 
-  .commentList {
+  .commentsPart {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 32px;
-  }
-
-  .comments {
     display: flex;
     flex-flow: column nowrap;
     gap: 32px;
@@ -77,26 +72,16 @@
     <Rating rating={post.rating}></Rating>
   </article>
   
-    <!-- <UserItem user={post.author}></UserItem>
-  
-    <p>{post.content}</p> -->
-  
-    <!-- <Message message={post}></Message> -->
-  
   {#if commentTree}
-  <section class="comments">
+  <div class="commentsPart">
     <h3 class="commentsHead typeName">Comments</h3>
 
-    <div class="commentList">
+    <CommentList commentTreeList={commentTree} getTags={(comment) => {
-      {#each commentTree as reply}
+      if (comment.author?.id == post.author?.id) {
-        <Comment commentNode={reply} getTags={(comment) => {
+        return ["OP 🖋️"];
-          if (comment.author?.id == post.author?.id) {
+      }
-            return ["OP 🖋️"];
+      return [];
-          }
+    }}></CommentList>
-          return [];
+  </div>
-        }}></Comment>
-      {/each}
-    </div>
-  </section>
   {/if}
 </div>