show only authorized projects

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;