Add: Comment tags

src/comp/comment.svelte

@@ -7,12 +7,19 @@
   /**
    * @type {import("$types/base").CommentTreeNode}
    */
-   export let commentNode;
+  export let commentNode;
+
+  /**
+   * @type {(function(import("$types/base").Comment): string[]) | undefined}
+   */
+  export let getTags = undefined;
 
   $: comment = commentNode.parent;
+
+  $: tags = getTags ? getTags(comment) : [];
 </script>
 
-<style>
+<style lang="scss">
   .message {
     display: flex;
     flex-flow: row nowrap;
@@ -31,6 +38,17 @@
     flex-flow: row nowrap;
     gap: 8px;
     align-items: start;
+    justify-content: space-between;
+  }
+
+  .nameField {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 8px;
+
+    & > .tag {
+      color: var(--white-dim);
+    }
   }
 
   .date {
@@ -42,17 +60,26 @@
   <Avatar size={48}></Avatar>
   <div class="content">
     <div class="topBar">
-      <Mention user={comment.author}></Mention>
+      <div class="nameField">
+        <Mention user={comment.author}></Mention>
+        {#each tags as tag}
+        <span class="tag typeContent">{tag}</span>
+        {/each}
+      </div>
+
       <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>
+      <svelte:self commentNode={reply} getTags={getTags}></svelte:self>
     {/each}
   </div>
 </div>

src/comp/page/post.svelte

@@ -89,7 +89,12 @@
 
     <div class="commentList">
       {#each commentTree as reply}
-        <Comment commentNode={reply}></Comment>
+        <Comment commentNode={reply} getTags={(comment) => {
+          if (comment.author?.id == post.author?.id) {
+            return ["OP"];
+          }
+          return [];
+        }}></Comment>
       {/each}
     </div>
   </section>