#84

src/components/comments/Comment.vue

@@ -3,7 +3,10 @@
     :id="`comment-${comment.id}`"
     class="comment | flow"
     :data-status="getStatus"
-    @click="read()"
+    @click="handleClick()"
+    @mouseenter="hightlightCorrespondingMarker()"
+    @mouseleave="unhightlightCorrespondingMarker()"
+    ref="comment-node"
   >
     <header>
       <p>
@@ -80,7 +83,7 @@ import "dayjs/locale/fr";
 import { useUserStore } from "../../stores/user";
 import { useApiStore } from "../../stores/api";
 import { useDialogStore } from "../../stores/dialog";
-import { computed, ref } from "vue";
+import { computed, onMounted, ref, useTemplateRef } from "vue";
 import { storeToRefs } from "pinia";
 
 dayjs.locale("fr");
@@ -95,9 +98,11 @@ const emits = defineEmits(["update:file", "close:comment"]);
 const userStore = useUserStore();
 const api = useApiStore();
 const dialog = useDialogStore();
-const { activeTracks } = storeToRefs(useDialogStore());
+const { activeTracks, openedComment } = storeToRefs(useDialogStore());
 const draftText = ref(comment.text);
 const editField = ref(null);
+const commentNode = useTemplateRef("comment-node");
+let correspondingMarker = null;
 
 //  Functions
 const getStatus = computed(() => {
@@ -130,6 +135,11 @@ function closeAddField() {
   newCommentText.value = "";
 }
 
+function handleClick() {
+  read();
+  scrollTo();
+}
+
 async function read() {
   if (getStatus.value !== "unread") return;
   try {
@@ -141,13 +151,21 @@ async function read() {
   }
 }
 
+function scrollTo() {
+  const correspondingMarker = document.querySelector(
+    `.comment-marker[href="#comment-${comment.id}"]`
+  );
+  if (!correspondingMarker) return;
+  correspondingMarker.scrollIntoView();
+}
+
 async function deleteComment(event) {
   event.stopPropagation();
   const newFile = await api.deleteComment(comment);
 
-  // If there is an active track,
-  // it's not the opened file that should be updated
-  // but the corresponding file in the active track
+  // If there is an active track, we are not in PDF mode with a single file.
+  // Thus, it's not the opened file that should be updated
+  // but the corresponding file in the active track.
   if (activeTracks.value?.length > 0) {
     activeTracks.value[0].files = activeTracks.value[0].files.map((file) => {
       if (file.uuid !== newFile.uuid) return file;
@@ -181,6 +199,32 @@ function editComment(event) {
     editField.value.focus();
   }, 100);
 }
+
+function hightlightCorrespondingMarker() {
+  if (comment.type === "comment-reply") return;
+
+  const correspondingMarker = document.querySelector(
+    `.comment-marker[href="#comment-${comment.id}"]`
+  );
+  if (!correspondingMarker) return;
+
+  commentNode.value.classList.add("highlight");
+  correspondingMarker.classList.add("active");
+  correspondingMarker.classList.add("big");
+}
+function unhightlightCorrespondingMarker() {
+  if (comment.type === "comment-reply") return;
+
+  const correspondingMarker = document.querySelector(
+    `.comment-marker[href="#comment-${comment.id}"]`
+  );
+  if (!correspondingMarker) return;
+  if (openedComment.value) return;
+
+  commentNode.value.classList.remove("highlight");
+  correspondingMarker.classList.remove("active");
+  correspondingMarker.classList.remove("big");
+}
 </script>
 
 <style scoped>