comments : fix replies visibility

public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt

@@ -123,16 +123,16 @@ Comments:
     uuid: file://s0lNtRA0Z7ybTCWG
     pageIndex: 1
   replies: [ ]
-  text: commentaire positionné
+  text: ouveau commentaire
   author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-11-06T16:35:30+01:00
-  id: m361j842
+    name: Utilisateur Dior
+    email: utilisateur@dior.com
+    uuid: user://HfuumN8s
+    role: client
+  date: 2024-11-06T16:57:15+01:00
+  id: m362b71x
   type: comment
   isRead: false
   position:
-    x: '239.03332519531'
-    y: 74
+    x: '59.033325195312'
+    y: 59

src/components/comments/Comments.vue

@@ -63,12 +63,17 @@
     </button>
     <!-- TODO: afficher #new-comment une fois le bouton Ajouter un commentaire cliqué -->
     <div
-      hidden 
+      hidden
       id="new-comment"
       class="bg-primary | text-sm text-white | rounded-lg | p-12"
     >
-      <p class="flex justify-start | mb-12" data-icon="comment"><strong>Nouveau commentaire</strong></p>
-      <p>Dans la zone du contenu, cliquez où vous souhaitez positionner le commentaire</p>
+      <p class="flex justify-start | mb-12" data-icon="comment">
+        <strong>Nouveau commentaire</strong>
+      </p>
+      <p>
+        Dans la zone du contenu, cliquez où vous souhaitez positionner le
+        commentaire
+      </p>
     </div>
     <form
       v-if="isAddOpen"
@@ -125,11 +130,13 @@ const newCommentPosition = ref(null);
 const newCommentText = ref("");
 const isAddOpen = ref(false);
 const emits = defineEmits(["update:file"]);
+
 const sortedComments = ref(comments.reverse());
-const sortedReplies =
-  openedComment.value && openedComment.value.replies
-    ? ref(openedComment.value.replies.slice().reverse())
-    : ref([]);
+const sortedReplies = ref(null);
+
+watch(openedComment, (newVal) => {
+  sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null;
+});
 
 watch(
   () => comments,
@@ -254,7 +261,7 @@ function handleCommentPositionClick(event) {
   padding-right: 2rem;
 }
 .comments.empty::after {
-  content: 'Partagez vos idées en ajoutant des commentaires';
+  content: "Partagez vos idées en ajoutant des commentaires";
   height: 100%;
   display: grid;
   place-items: center;

src/components/project/ProjectStep.vue

@@ -41,7 +41,11 @@
               data-icon="document"
             ></div>
           </template>
-          <footer>2 commentaire(s)</footer>
+          <footer v-if="step?.files[0]?.comments?.length > 0">
+            {{ step.files[0].comments.length }} commentaire{{
+              step.files[0].comments.length > 1 ? "s" : ""
+            }}
+          </footer>
         </article>
       </div>
     </router-link>