Add: New Comments design

src/comp/comment.svelte

@@ -1,4 +1,6 @@
 <script>
+    import moment from "moment";
+    import Avatar from "./avatar.svelte";
     import Mention from "./mention.svelte";
     import Rating from "./rating.svelte";
 
@@ -11,17 +13,43 @@ import Rating from "./rating.svelte";
 </script>
 
 <style>
-  .replyTree {
+  .message {
-    padding-left: 20px;
+    display: flex;
-    margin-left: 10px;
+    flex-flow: row nowrap;
-    border-left: 2px #fff5 solid;
+    gap: 16px;
+  }
+
+  .content {
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1;
+    gap: 8px;
+  }
+
+  .topBar {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 8px;
+    align-items: start;
+  }
+
+  .date {
+    color: var(--white-dim);
   }
 </style>
 
-<div>
+<div class="message">
+  <Avatar size={48}></Avatar>
+  <div class="content">
+    <div class="topBar">
       <Mention user={comment.author}></Mention>
-  <Rating rating={comment.rating}></Rating>
+      <span class="date">{moment(comment.commentDate).fromNow()}</span>
+    </div>
     <p>{comment.content}</p>
+    <div class="actionBar">
+      <Rating rating={comment.rating}></Rating>
+    </div>
+  </div>
   <div class="replyTree">
     {#each commentNode.children as reply}
       <svelte:self commentNode={reply}></svelte:self>