From 75d3abfec8e4a18aef25d095891b06b287d24ed8 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 6 Nov 2024 14:59:17 +0100
Subject: [PATCH] Update Comments.vue: add empty state message and add
 new-comment element

---
 src/components/comments/Comments.vue | 53 ++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index 3328986..9cadeac 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -1,7 +1,7 @@
 <template>
   <aside id="comments-container" aria-labelledby="comments-label">
     <h2 id="comments-label" class="sr-only">Commentaires</h2>
-    <div class="comments | flow">
+    <div class="comments | flow" :class="{ empty: comments.length === 0 }">
       <template v-if="comments">
         <template v-if="!openedComment">
           <Comment
@@ -61,7 +61,15 @@
     >
       Répondre…
     </button>
-
+    <!-- TODO: afficher #new-comment une fois le bouton Ajouter un commentaire cliqué -->
+    <div
+      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>
+    </div>
     <form
       v-if="isAddOpen"
       action=""
@@ -198,6 +206,47 @@ function closeComment() {
   margin-right: -2rem;
   padding-right: 2rem;
 }
+.comments.empty::after {
+  content: 'Partagez vos idées en ajoutant des commentaires';
+  height: 100%;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  max-width: 24ch;
+  margin: auto;
+  font-size: var(--text-sm);
+  color: var(--color-grey-400);
+  background-image: var(--icon-comment);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.comments.empty::before {
+  --icon-size: 1.25rem;
+  --icon-color: var(--color-white);
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, calc(-50% - 4.5rem));
+  width: var(--icon-size);
+  height: var(--icon-size);
+  background: var(--icon-color, currentColor);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: var(--icon-size);
+  mask-image: var(--icon-comment);
+}
+#new-comment {
+  position: absolute;
+  bottom: var(--space-24);
+  left: var(--space-32);
+  right: var(--space-32);
+}
+#new-comment [data-icon] {
+  --column-gap: var(--space-12);
+  font-weight: 500;
+}
 #comments-container form {
   --flow-space: 0.5rem;
   flex-direction: column;