#84

src/components/comments/Comments.vue

@@ -121,13 +121,10 @@ dayjs.locale("fr");
 const { user } = useUserStore();
 const { page } = usePageStore();
 const dialog = useDialogStore();
-const { comments, openedFile, draftComment, activeTracks } = storeToRefs(
-  useDialogStore()
-);
+const { comments, openedFile, openedComment, draftComment, activeTracks } =
+  storeToRefs(useDialogStore());
 const api = useApiStore();
 
-const openedComment = ref(null);
-
 const isAddOpen = ref(false);
 const route = useRoute();
 const waitingForCommentPosition = ref(false);
@@ -139,6 +136,10 @@ const sortedReplies = ref(null);
 
 watch(openedComment, (newVal) => {
   sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null;
+
+  if (!newVal) {
+    unhighlightAllComments();
+  }
 });
 
 watch(isAddOpen, (newVal) => {
@@ -165,6 +166,13 @@ window.addEventListener("keydown", (event) => {
 });
 
 // Functions
+function unhighlightAllComments() {
+  document.querySelectorAll(".comment-marker.big").forEach((commentNode) => {
+    commentNode.classList.remove("big");
+    commentNode.classList.remove("active");
+  });
+}
+
 function handleSubmit(event = null) {
   if (event) {
     event.preventDefault();
@@ -427,6 +435,7 @@ function openComment(comment) {
   width: var(--marker-size);
   height: var(--marker-size);
   background: var(--icon-comment-default) no-repeat center / contain;
+  scroll-margin-block-start: 4rem;
   cursor: pointer !important;
   z-index: 999;
   overflow: visible;
@@ -435,7 +444,8 @@ function openComment(comment) {
   margin-left: calc(var(--marker-size) * -0.025);
   margin-top: calc(var(--marker-size) / -1.025);
 }
-.comment-marker:hover {
+.comment-marker:hover,
+.comment-marker.big {
   transform: scale(1.1);
 }
 .comment-marker.active,