refactor comment system into comments plugin

src/components/comments/Comments.vue

@@ -2,32 +2,30 @@
   <aside id="comments-container" aria-labelledby="comments-label">
     <h2 id="comments-label" class="sr-only">Commentaires</h2>
     <div class="comments | flow">
-      <div v-for="(page, pageIndex) in comments" class="comments__page-group">
-        <article
-          v-for="(comment, commentIndex) in Object.values(page)"
-          :key="pageIndex + commentIndex"
-          class="comment | flow"
-          :data-status="setStatus(comment)"
-          @click="readNotification(comment)"
-        >
-          <header>
-            <p>
-              <strong>{{ comment.username }}</strong>
-              <span class="comment__id">#{{ commentIndex + 1 }}</span> •
-              <span class="comment__page">Page {{ pageIndex }}</span>
-              <time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
-                formatDate(comment.date)
-              }}</time>
-            </p>
-          </header>
-          <p class="comment__body">
-            {{ comment.text }}
+      <article
+        v-for="(comment, commentIndex) in Object.values(comments).reverse()"
+        :key="commentIndex"
+        class="comment | flow"
+        :data-status="setStatus(comment)"
+        @click="open(comment)"
+      >
+        <header>
+          <p>
+            <strong>{{ comment.user.name ?? comment.user.email }}</strong>
+            <span class="comment__id">#{{ commentIndex + 1 }}</span> •
+            <span class="comment__page">Page {{ pageIndex }}</span>
+            <time :datetime="dayjs(comment.date).format('YYYY-MM-DD')">{{
+              formatDate(comment.date)
+            }}</time>
           </p>
-        </article>
-      </div>
+        </header>
+        <p class="comment__body">
+          {{ comment.text }}
+        </p>
+      </article>
     </div>
     <button
-      id="add-comment"
+      id="create-comment"
       class="btn btn--white-20 | w-full"
       @click="isAddOpen = true"
     >
@@ -100,6 +98,7 @@ async function addComment(event) {
   const newFile = await api.addComment(comment);
   newCommentText.value = "";
   isAddOpen.value = false;
+  emits("update:file", newFile);
 }
 
 function formatDate(date) {

src/stores/api.js

@@ -128,7 +128,7 @@ export const useApiStore = defineStore("api", () => {
     };
 
     try {
-      const response = await fetch("/add-comment.json", headers);
+      const response = await fetch("/create-comment.json", headers);
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }