From 1286de4c6428321c3f52a6d73b1636932a99b85b Mon Sep 17 00:00:00 2001
From: bloodwiing <bloodwiing+git@alchemix.dev>
Date: Tue, 14 May 2024 12:26:38 +0300
Subject: [PATCH] Add: ActionBar component

---
 src/comp/actionbar.svelte | 22 ++++++++++++++++++++++
 src/comp/comment.svelte   | 15 ++++++---------
 src/comp/page/post.svelte |  5 ++++-
 3 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 src/comp/actionbar.svelte

diff --git a/src/comp/actionbar.svelte b/src/comp/actionbar.svelte
new file mode 100644
index 0000000..106e538
--- /dev/null
+++ b/src/comp/actionbar.svelte
@@ -0,0 +1,22 @@
+<script>
+    import Rating from "./rating.svelte";
+
+  /**
+   * @type {import("$types/base").Post | import("$types/base").Comment}
+   */
+  export let message;
+</script>
+
+<style lang="scss">
+  .actionBar {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    flex: 1;
+    position: relative;
+  }
+</style>
+
+<div class="actionBar">
+  <Rating rating={message.rating}></Rating>
+</div>
diff --git a/src/comp/comment.svelte b/src/comp/comment.svelte
index d4411bd..f1f29dc 100644
--- a/src/comp/comment.svelte
+++ b/src/comp/comment.svelte
@@ -4,6 +4,9 @@
     import Mention from "./mention.svelte";
     import Rating from "./rating.svelte";
     import Tablericon from "./tablericon.svelte";
+    import Ago from "./ago.svelte";
+    import ActionBar from "./actionbar.svelte";
+    import { circOut } from "svelte/easing";
 
   /**
    * @type {import("$types/base").Comment}
@@ -55,10 +58,6 @@
     }
   }
 
-  .date {
-    color: var(--white-dim);
-  }
-
   .replyBar {
     display: flex;
     flex-flow: row nowrap;
@@ -76,7 +75,7 @@
       <div class="nameField">
         <Mention user={comment.author}></Mention>
         {#each tags as tag}
-        <span class="tag typeContent">{tag}</span>
+        <span class="tag typeTitle">{tag}</span>
         {/each}
 
         {#if replyTo}
@@ -88,13 +87,11 @@
         {/if}
       </div>
 
-      <span class="date">{moment(comment.commentDate).fromNow()}</span>
+      <Ago date={comment.commentDate}></Ago>
     </div>
 
     <p>{comment.content}</p>
 
-    <div class="actionBar">
-      <Rating rating={comment.rating}></Rating>
-    </div>
+    <ActionBar message={comment}></ActionBar>
   </div>
 </div>
diff --git a/src/comp/page/post.svelte b/src/comp/page/post.svelte
index dca0418..80f53e6 100644
--- a/src/comp/page/post.svelte
+++ b/src/comp/page/post.svelte
@@ -8,6 +8,9 @@
   import { onMount } from "svelte";
   import Rating from "$comp/rating.svelte";
   import CommentList from "$comp/commentlist.svelte";
+    import Avatar from "$comp/avatar.svelte";
+    import Ago from "$comp/ago.svelte";
+    import Actionbar from "$comp/actionbar.svelte";
 
   /**
    * @type {import("$types/base").Post}
@@ -69,7 +72,7 @@
       {post.content}
     </p>
   
-    <Rating rating={post.rating}></Rating>
+    <Actionbar message={post}></Actionbar>
   </article>
   
   {#if commentTree}