Refactor: Vertical and more detailed Comments

src/comp/comment.svelte

@@ -3,12 +3,18 @@
     import Avatar from "./avatar.svelte";
     import Mention from "./mention.svelte";
     import Rating from "./rating.svelte";
+    import Tablericon from "./tablericon.svelte";
 
   /**
    * @type {import("$types/base").CommentTreeNode}
    */
   export let commentNode;
 
+  /**
+   * @type {import("$types/base").CommentTreeNode | null}
+   */
+  export let replyTo = null;
+
   /**
    * @type {(function(import("$types/base").Comment): string[]) | undefined}
    */
@@ -54,32 +60,60 @@
   .date {
     color: var(--white-dim);
   }
+
+  .comment {
+    display: flex;
+    flex-flow: column nowrap;
+    width: 100%;
+    gap: 32px;
+  }
+
+  .replyBar {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 4px;
+    align-items: center;
+
+    font-size: 0.85em;
+  }
 </style>
 
 <div class="message">
   <Avatar size={48}></Avatar>
-  <div class="content">
-    <div class="topBar">
-      <div class="nameField">
-        <Mention user={comment.author}></Mention>
-        {#each tags as tag}
-        <span class="tag typeContent">{tag}</span>
-        {/each}
+  <div class="comment">
+    <div class="content">
+      <div class="topBar">
+        <div class="nameField">
+          <Mention user={comment.author}></Mention>
+          {#each tags as tag}
+          <span class="tag typeContent">{tag}</span>
+          {/each}
+
+          {#if replyTo}
+          <span class="replyBar">
+            <Tablericon name="square-rounded-arrow-right" size={16} color="white"></Tablericon>
+            reply
+            <Mention user={replyTo.parent.author}></Mention>
+          </span>
+          {/if}
+        </div>
+  
+        <span class="date">{moment(comment.commentDate).fromNow()}</span>
       </div>
   
-      <span class="date">{moment(comment.commentDate).fromNow()}</span>
-    </div>
-
-    <p>{comment.content}</p>
-
-    <div class="actionBar">
-      <Rating rating={comment.rating}></Rating>
+      <p>{comment.content}</p>
+  
+      <div class="actionBar">
+        <Rating rating={comment.rating}></Rating>
+      </div>
     </div>
     
+    {#if commentNode.children.length}
     <div class="replyTree">
       {#each commentNode.children as reply}
-        <svelte:self commentNode={reply} getTags={getTags}></svelte:self>
+        <svelte:self commentNode={reply} getTags={getTags} replyTo={commentNode}></svelte:self>
       {/each}
     </div>
+    {/if}
   </div>
 </div>

src/comp/page/post.svelte

@@ -45,7 +45,7 @@
   .commentList {
     display: flex;
     flex-flow: column nowrap;
-    gap: 16px;
+    gap: 32px;
   }
 
   .comments {
@@ -91,7 +91,7 @@
       {#each commentTree as reply}
         <Comment commentNode={reply} getTags={(comment) => {
           if (comment.author?.id == post.author?.id) {
-            return ["OP"];
+            return ["OP 🖋️"];
           }
           return [];
         }}></Comment>