Add: ActionBar component

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>

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">
+    <ActionBar message={comment}></ActionBar>
-      <Rating rating={comment.rating}></Rating>
-    </div>
   </div>
 </div>

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}