Add: New Comments design

src/comp/comment.svelte

@@ -1,27 +1,55 @@
 <script>
+    import moment from "moment";
+    import Avatar from "./avatar.svelte";
     import Mention from "./mention.svelte";
-import Rating from "./rating.svelte";
+    import Rating from "./rating.svelte";
 
   /**
    * @type {import("$types/base").CommentTreeNode}
    */
-  export let commentNode;
+   export let commentNode;
 
   $: comment = commentNode.parent;
 </script>
 
 <style>
-  .replyTree {
-    padding-left: 20px;
-    margin-left: 10px;
-    border-left: 2px #fff5 solid;
+  .message {
+    display: flex;
+    flex-flow: row nowrap;
+    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>
-  <Mention user={comment.author}></Mention>
-  <Rating rating={comment.rating}></Rating>
-  <p>{comment.content}</p>
+<div class="message">
+  <Avatar size={48}></Avatar>
+  <div class="content">
+    <div class="topBar">
+      <Mention user={comment.author}></Mention>
+      <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>