Add edit and delete buttons under comments, and split <style> from PdfViewer to Comments and Comment components

src/components/comments/Comment.vue

@@ -17,7 +17,12 @@
       {{ comment.text }}
     </p>
     <footer v-if="comment.replies?.length > 0" class="comment__replies">
-      <span>{{ comment.replies.length }} réponse</span>
+      <p>{{ comment.replies.length }} réponse{{ comment.replies.length > 1 ? 's' : '' }}</p>
+      <!-- TODO: n'afficher que s'il s'agit du commentaire de l'utilisateur actuellement connecté -->
+      <div class="comment__ctas | mt-8">
+        <button class="btn btn--transparent btn--icon btn--sm" data-icon="edit"><span class="sr-only">Éditer</span></button>
+        <button class="btn btn--transparent btn--icon btn--sm" data-icon="delete"><span class="sr-only">Supprimer</span></button>
+      </div>
     </footer>
   </article>
 </template>
@@ -76,3 +81,64 @@ async function readNotification(notificationId) {
   user.notifications = newNotifications;
 }
 </script>
+
+<style scoped>
+.comments > .comment:not([data-opened="true"]) {
+  cursor: pointer;
+}
+.comment {
+  --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);
+}
+.comment header p {
+  display: flex;
+  gap: var(--space-8);
+}
+.comment header strong,
+.comment footer {
+  font-weight: 500;
+  color: var(--color-white);
+}
+.comment header time {
+  color: var(--color-primary);
+  font-weight: 500;
+  margin-left: auto;
+}
+.comment[data-status="unread"] {
+  background: var(--color-white);
+  border-color: var(--color-white);
+  color: var(--color-grey-700);
+}
+.comment[data-status="unread"] header p > :first-child::before {
+  content: "";
+  display: inline-block;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background: var(--color-primary);
+  margin-right: var(--space-8);
+  margin-bottom: 0.075em;
+}
+.comment[data-status="unread"] header strong,
+.comment[data-status="unread"] footer {
+  color: var(--color-black);
+}
+.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);
+}
+.comment__ctas > * {
+  --border-color: transparent;
+  margin-right: var(--space-4);
+}
+</style>

src/components/comments/Comments.vue

@@ -24,7 +24,7 @@
             <span>Retour à la liste</span>
           </button>
           <Comment :comment="openedComment" data-opened="true" />
-          <div v-if="sortedReplies.length > 0" class="replies">
+          <div v-if="sortedReplies.length > 0" class="replies | flow">
             <Comment
               v-for="(reply, commentIndex) in sortedReplies"
               :comment="reply"
@@ -155,3 +155,57 @@ async function addComment(newComment) {
   emits("update:file", newFile);
 }
 </script>
+
+<style>
+/* Comments */
+#toggle-comments {
+  position: absolute;
+  right: var(--space-16);
+  bottom: var(--space-16);
+  padding: 0.625rem;
+}
+#comments-container {
+  background-color: black;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 4.5rem;
+  width: var(--comments-w);
+  padding: var(--space-24) var(--space-32);
+}
+.comments {
+  overflow-y: auto;
+  height: calc(100% - 3.5rem);
+  margin-bottom: 1rem;
+  margin-right: -2rem;
+  padding-right: 2rem;
+}
+#comments-container form {
+  --flow-space: 0.5rem;
+  flex-direction: column;
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 5.5rem;
+}
+#comments-container textarea {
+  position: sticky;
+  bottom: 0;
+  margin: 0;
+  resize: none;
+  background: none;
+  padding: 0;
+  color: var(--color-white);
+}
+#comments-container textarea:focus {
+  outline: none;
+}
+::placeholder {
+  color: var(--color-white-50);
+}
+#comments-container form footer {
+  gap: var(--space-12);
+}
+#comments-container form footer > * {
+  flex-grow: 1;
+}
+</style>