Update comments replies markup and style

src/components/comments/Comments.vue

@@ -3,6 +3,7 @@
     <h2 id="comments-label" class="sr-only">Commentaires</h2>
     <div class="comments | flow">
       <template v-if="!openedComment">
+        <!-- TODO: faire un composant comment -->
         <article
           v-for="(comment, commentIndex) in Object.values(comments).reverse()"
           :key="commentIndex"
@@ -23,46 +24,104 @@
           <p class="comment__body">
             {{ comment.text }}
           </p>
+          <!-- TODO: à dynamiser (affichage ou non si replies + nombre de replies)-->
+          <footer class="comment__replies">
+            <span>1 réponse</span>
+          </footer>
         </article>
       </template>
       <template v-else>
-        <article>
-          {{ openedComment.title }}
+        <!-- TODO: mettre la bonne cible pour to: -->
+        <router-link
+          :to="'/' + page.parent"
+          class="btn | justify-start w-full | bg-white-10 text-white | px-8"
+          data-icon="chevron-single-left"
+        >
+          <span>Retour à la liste</span>
+        </router-link>
+        <!-- TODO: utiliser le composant comment ici -->
+        <article 
+          class="comment"
+          data-opened="true"
+        >
+          <header>
+            <p>
+              <strong>{{ openedComment.user.name ?? openedComment.user.email }}</strong>
+              <span class="comment__id">#{{ commentIndex + 1 }}</span> •
+              <span class="comment__page">Page {{ pageIndex }}</span>
+              <time :datetime="dayjs(openedComment.date).format('YYYY-MM-DD')">{{
+                formatDate(openedComment.date)
+              }}</time>
+            </p>
+          </header>
+          <p class="comment__body">
+            {{ openedComment.text }}
+          </p>
+          <footer class="comment__replies">
+            <span>1 réponse</span>
+          </footer>
         </article>
         <div class="replies">
-          <article v-for="reply in openedComment.replies"></article>
+          <!-- TODO: utiliser le composant comment ici -->
+          <article 
+            v-for="comment in openedComment.replies"
+            class="comment reply"
+          >
+            <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>
+            </header>
+            <p class="comment__body">
+              {{ comment.text }}
+            </p>
+          </article>
         </div>
       </template>
     </div>
     <button
+      v-if="!openedComment && !isAddOpen"
       id="create-comment"
       class="btn btn--white-20 | w-full"
       @click="isAddOpen = true"
     >
       Ajouter un commentaire
     </button>
+    <button
+      v-if="openedComment && !isReplyOpen"
+      id="reply-comment"
+      class="btn btn--white-20 | justify-start w-full | text-white-50"
+      @click="isReplyOpen = true"
+    >
+      Répondre…
+    </button>
 
     <form
       v-if="isAddOpen"
       action=""
       method="post"
-      class="flow"
+      class="flow | bg-white-20 | p-12 | rounded-xl"
       @submit="addComment"
     >
       <label class="sr-only" for="comment">Votre commentaire</label>
       <textarea
         name="comment"
         id="comment"
-        placeholder="Ajouter un commentaire"
-        rows="3"
+        placeholder="Ajouter un commentaire…"
+        rows="5"
         class="text-sm | rounded-lg bg-black p-12"
         v-model="newCommentText"
       ></textarea>
       <footer class="flex">
-        <button class="btn btn--white-20" @click="closeAddField()">
+        <input type="submit" class="btn btn--tranparent" />
+        <button class="btn btn--white-10" @click="closeAddField()">
           Annuler
         </button>
-        <input type="submit" class="btn btn--tranparent" />
       </footer>
     </form>
   </aside>

src/components/project/client-brief/PdfViewer.vue

@@ -179,6 +179,7 @@ function changeFile(newFile) {
   --flow-space: var(--space-12);
   font-size: var(--text-sm);
   border: var(--border);
+  border-width: 2px;
   border-radius: var(--rounded-lg);
   padding: var(--space-12);
   color: var(--color-grey-400);
@@ -219,20 +220,26 @@ function changeFile(newFile) {
 .comment[data-status="unread"] header time {
   color: var(--color-primary);
 }
+.comment[data-opened="true"] {
+  border-color: transparent;
+}
+.comment[data-opened="true"] .comment__replies {
+  color: var(--color-primary);
+}
 #comments-container form {
   --flow-space: 0.5rem;
   flex-direction: column;
   position: -webkit-sticky;
   position: sticky;
-  bottom: 4.5rem;
-  background: black;
-  padding: var(--space-24) 0;
+  bottom: 5.5rem;
 }
 #comments-container textarea {
   position: sticky;
   bottom: 0;
   margin: 0;
   resize: none;
+  background: none;
+  padding: 0;
   color: var(--color-white);
 }
 ::placeholder {