show only authorized projects

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);