comments panel : fix comments when active track is single file

src/components/comments/Comments.vue

@@ -104,19 +104,19 @@
 </template>
 
 <script setup>
-import dayjs from "dayjs";
-import "dayjs/locale/fr";
-import uniqid from "uniqid";
-import { watch, ref, computed } from "vue";
-import { useUserStore } from "../../stores/user";
-import { usePageStore } from "../../stores/page";
-import { useApiStore } from "../../stores/api";
-import { useDialogStore } from "../../stores/dialog";
-import Comment from "./Comment.vue";
-import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
+import dayjs from 'dayjs';
+import 'dayjs/locale/fr';
+import uniqid from 'uniqid';
+import { watch, ref, computed } from 'vue';
+import { useUserStore } from '../../stores/user';
+import { usePageStore } from '../../stores/page';
+import { useApiStore } from '../../stores/api';
+import { useDialogStore } from '../../stores/dialog';
+import Comment from './Comment.vue';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
 
-dayjs.locale("fr");
+dayjs.locale('fr');
 
 const { user } = useUserStore();
 const { page } = usePageStore();
@@ -145,20 +145,20 @@ watch(openedComment, (newVal) => {
 watch(isAddOpen, (newVal) => {
   if (newVal) {
     setTimeout(() => {
-      document.querySelector("textarea#comment").focus();
+      document.querySelector('textarea#comment').focus();
     }, 100);
   }
 });
 
 const viewContainer =
-  openedFile.value.type === "document"
-    ? document.querySelector(".vpv-pages-inner-container")
-    : document.querySelector(".track");
+  openedFile.value?.type === 'document'
+    ? document.querySelector('.vpv-pages-inner-container')
+    : document.querySelector('.track');
 
-window.addEventListener("keydown", (event) => {
+window.addEventListener('keydown', (event) => {
   if (
     isAddOpen.value &&
-    event.key === "Enter" &&
+    event.key === 'Enter' &&
     (event.metaKey || event.ctrlKey)
   ) {
     handleSubmit();
@@ -167,9 +167,9 @@ window.addEventListener("keydown", (event) => {
 
 // Functions
 function unhighlightAllComments() {
-  document.querySelectorAll(".comment-marker.big").forEach((commentNode) => {
-    commentNode.classList.remove("big");
-    commentNode.classList.remove("active");
+  document.querySelectorAll('.comment-marker.big').forEach((commentNode) => {
+    commentNode.classList.remove('big');
+    commentNode.classList.remove('active');
   });
 }
 
@@ -236,7 +236,7 @@ async function addComment(newComment) {
 }
 
 function resetDraftComment() {
-  draftComment.value.text = "";
+  draftComment.value.text = '';
   draftComment.value.position = null;
   draftComment.value.padeIndex = null;
 }
@@ -248,17 +248,17 @@ function closeComment() {
 function toggleCommentPositionMode(enable) {
   if (enable) {
     waitingForCommentPosition.value = true;
-    viewContainer.classList.add("waiting-comment");
-    viewContainer.addEventListener("click", handleCommentPositionClick);
+    viewContainer.classList.add('waiting-comment');
+    viewContainer.addEventListener('click', handleCommentPositionClick);
   } else {
     waitingForCommentPosition.value = false;
-    viewContainer.classList.remove("waiting-comment");
-    viewContainer.removeEventListener("click", handleCommentPositionClick);
+    viewContainer.classList.remove('waiting-comment');
+    viewContainer.removeEventListener('click', handleCommentPositionClick);
   }
 }
 
 function handleCommentPositionClick(event) {
-  if (openedFile.value.type === "document") {
+  if (openedFile.value.type === 'document') {
     prepareDraftCommentInPdf(event);
   } else {
     prepareDraftCommentInImage(event);
@@ -268,12 +268,12 @@ function handleCommentPositionClick(event) {
 }
 
 function prepareDraftCommentInPdf(event) {
-  const pageContainer = event.target.closest(".page-inner-container");
+  const pageContainer = event.target.closest('.page-inner-container');
   if (!pageContainer || !viewContainer) return;
 
   const pageLabel = pageContainer
-    .closest(".vpv-page-inner-container")
-    .getAttribute("aria-label");
+    .closest('.vpv-page-inner-container')
+    .getAttribute('aria-label');
   const pageIndex = pageLabel.charAt(pageLabel.length - 1);
 
   const viewRect = viewContainer.getBoundingClientRect();
@@ -356,7 +356,7 @@ function showCorrespondingView() {
   padding-right: 2rem;
 }
 .comments.empty::after {
-  content: "Partagez vos idées en ajoutant des commentaires";
+  content: 'Partagez vos idées en ajoutant des commentaires';
   height: 100%;
   display: grid;
   place-items: center;
@@ -369,7 +369,7 @@ function showCorrespondingView() {
 .comments.empty::before {
   --icon-size: 1.25rem;
   --icon-color: var(--color-white);
-  content: "";
+  content: '';
   display: block;
   position: absolute;
   top: 50%;

src/components/project/virtual-sample/DynamicView.vue

@@ -55,9 +55,8 @@ import { useDialogStore } from '../../../stores/dialog';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
 
 const { page } = storeToRefs(usePageStore());
-const { isCommentsOpen, isCommentPanelEnabled, activeTracks } = storeToRefs(
-  useDialogStore()
-);
+const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
+  storeToRefs(useDialogStore());
 
 const { isCompareModeEnabled } = storeToRefs(useVirtualSampleStore());
 
@@ -67,6 +66,27 @@ const tracks = computed(
       .dynamic
 );
 
+const isSingleImage = computed(() => {
+  return (
+    activeTracks.value?.length === 1 &&
+    activeTracks.value[0]?.files.length === 1
+  );
+});
+
+const singleFile = computed(() => {
+  return isSingleImage.value && activeTracks.value[0].files[0];
+});
+
+watch(
+  singleFile,
+  (newValue) => {
+    if (newValue) {
+      openedFile.value = singleFile;
+    }
+  },
+  { immediate: true }
+);
+
 watch(isCompareModeEnabled, (newValue) => {
   if (newValue) {
     isCommentsOpen.value = false;