show only authorized projects

src/components/Menu.vue

@@ -48,7 +48,7 @@
           }}</span>
         </li>
       </ul>
-      <details open>
+      <details v-if="currentProjects.length" open>
         <summary>Projets en cours</summary>
         <ul>
           <li v-for="project in currentProjects">
@@ -58,7 +58,7 @@
           </li>
         </ul>
       </details>
-      <details>
+      <details v-if="archivedProjects.length">
         <summary>Projets archivés</summary>
         <ul>
           <li v-for="project in archivedProjects">

src/components/comments/Comment.vue

@@ -1,5 +1,9 @@
 <template>
-  <article class="comment | flow" :data-status="setStatus(comment)">
+  <article
+    :id="`comment-${comment.id}`"
+    class="comment | flow"
+    :data-status="setStatus(comment)"
+  >
     <header>
       <p>
         <strong>{{ comment.author.name ?? comment.author.email }}</strong>
@@ -126,7 +130,12 @@ async function deleteComment(event, comment) {
   border-radius: var(--rounded-lg);
   padding: var(--space-12);
   color: var(--color-grey-400);
+  transition: border-color 0.1s ease-in-out;
 }
+.comment.highlight {
+  border-color: #fff;
+}
+
 .comment header p {
   display: flex;
   gap: var(--space-8);

src/components/comments/Comments.vue

@@ -137,19 +137,44 @@ const sortedReplies = ref(null);
 watch(openedComment, (newVal) => {
   sortedReplies.value = newVal ? newVal.replies.slice().reverse() : null;
 });
-
+watch(
+  () => file,
+  (newVal) => {
+    if (newVal.comments) {
+      sortedComments.value = newVal.comments;
+    }
+  }
+);
 watch(
   () => comments,
   (newVal) => {
     sortedComments.value = newVal.reverse();
   }
 );
+watch(isAddOpen, (newVal) => {
+  if (newVal) {
+    setTimeout(() => {
+      document.querySelector("textarea#comment").focus();
+    }, 100);
+  }
+});
 
 const viewContainer = document.querySelector(".vpv-pages-inner-container");
 
+window.addEventListener("keydown", (event) => {
+  if (
+    isAddOpen.value &&
+    event.key === "Enter" &&
+    (event.metaKey || event.ctrlKey)
+  ) {
+    handleSubmit();
+  }
+});
 // Functions
-function handleSubmit(event) {
-  event.preventDefault();
+function handleSubmit(event = null) {
+  if (event) {
+    event.preventDefault();
+  }
   const date = dayjs().format();
   const newComment = {
     pageUri: page.uri + "/client-brief",
@@ -160,8 +185,8 @@ function handleSubmit(event) {
     position:
       {
         pageIndex: newCommentPageIndex.value,
-        x: newCommentPosition.value.x,
-        y: newCommentPosition.value.y,
+        x: newCommentPosition.value?.x,
+        y: newCommentPosition.value?.y,
       } ?? false,
     id: uniqid(),
   };
@@ -192,7 +217,6 @@ async function addComment(newComment) {
 }
 
 function changeFile(newFile) {
-  console.log(newFile);
   emits("update:file", newFile);
 }
 
@@ -229,9 +253,12 @@ function handleCommentPositionClick(event) {
   const y = mouseTop - viewRect.top + pageScroll;
   const x = event.clientX - pageRect.left;
 
+  const relativeX = (x / pageRect.width) * 100;
+  const relativeY = (y / pageRect.height) * 100;
+
   newCommentPosition.value = {
-    x,
-    y,
+    x: relativeX,
+    y: relativeY,
   };
   isAddOpen.value = true;
   toggleCommentPositionMode(false);
@@ -256,6 +283,7 @@ function handleCommentPositionClick(event) {
   padding: var(--space-24) var(--space-32);
 }
 .comments {
+  scroll-behavior: smooth;
   overflow-y: auto;
   height: calc(100% - 3.5rem);
   margin-bottom: 1rem;

src/components/project/client-brief/PdfViewer.vue

@@ -67,9 +67,21 @@ const currentPageIndex = ref(1);
 watch(isCommentsOpen, (newVal) => {
   if (newVal) {
     setCommentBubbles();
+  } else {
+    removeCommentBubbles();
   }
 });
 
+watch(
+  () => file,
+  (newVal) => {
+    removeCommentBubbles();
+    if (newVal.comments) {
+      setCommentBubbles();
+    }
+  }
+);
+
 // Functions
 const onPdfLoaded = () => {
   const wrapper = document.querySelector(".vpv-pages-inner-container");
@@ -116,26 +128,54 @@ function changeFile(newFile) {
 }
 
 function setCommentBubbles() {
+  console.log(file.comments);
+  if (!file.comments) return;
   file.comments.forEach((comment) => {
-    const bubble = document.createElement("button");
+    const bubble = document.createElement("a");
+
     bubble.classList.add("comment-bubble");
-    bubble.style.left = comment.position.x + "px";
-    bubble.style.top = comment.position.y + "px";
+    bubble.style.left = comment.position.x + "%";
+    bubble.style.top = comment.position.y + "%";
+    bubble.href = "#comment-" + comment.id;
+
     const container = document.querySelector(
       `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
     );
 
     container.appendChild(bubble);
+
+    setTimeout(() => {
+      bubble.addEventListener("mouseenter", () => highlight(comment));
+      bubble.addEventListener("mouseleave", () => unhighlight(comment));
+    }, 100);
+  });
+}
+
+function highlight(comment) {
+  const target = document.querySelector("#comment-" + comment.id);
+  target.classList.add("highlight");
+}
+function unhighlight(comment) {
+  const target = document.querySelector("#comment-" + comment.id);
+  target.classList.remove("highlight");
+}
+
+function removeCommentBubbles() {
+  document.querySelectorAll(".comment-bubble").forEach((bubble) => {
+    bubble.parentNode.removeChild(bubble);
   });
 }
 </script>
 
 <style>
-button.comment-bubble {
+.comment-bubble {
   position: absolute;
+  display: block;
   width: 1.2rem;
   height: 1.2rem;
   background: url("/assets/svg/comment-bubble.svg") no-repeat !important;
+  cursor: pointer !important;
+  z-index: 999;
 }
 #vpv-container {
   width: var(--dialog-max-w);