From 94ae22017443ff931897e77f7ad93268fdcde55c Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 19 Dec 2024 16:03:20 +0100
Subject: [PATCH 1/3] create store for comment draft

---
 ...6-demonstrateurs-recharge-en-forme.pdf.txt | 69 +++++++++++++++++++
 public/site/plugins/classes/Position.php      | 14 ++--
 .../site/plugins/comments/routes/create.php   |  5 +-
 src/components/comments/Comments.vue          | 56 ++++++++++-----
 src/components/project/PdfViewer.vue          | 26 ++-----
 .../project/virtual-sample/StaticView.vue     |  2 +-
 src/stores/dialog.js                          | 37 +++++++++-
 7 files changed, 162 insertions(+), 47 deletions(-)

diff --git a/public/content/projects/2_projet-recharge-en-forme/2_extended-brief/wip-20240916-demonstrateurs-recharge-en-forme.pdf.txt b/public/content/projects/2_projet-recharge-en-forme/2_extended-brief/wip-20240916-demonstrateurs-recharge-en-forme.pdf.txt
index fec48c0..3ae77dd 100644
--- a/public/content/projects/2_projet-recharge-en-forme/2_extended-brief/wip-20240916-demonstrateurs-recharge-en-forme.pdf.txt
+++ b/public/content/projects/2_projet-recharge-en-forme/2_extended-brief/wip-20240916-demonstrateurs-recharge-en-forme.pdf.txt
@@ -1,7 +1,76 @@
+Comments:
+
+- 
+  location:
+    page:
+      uri: >
+        projects/projet-recharge-en-forme/extended-brief
+      title: Brief enrichi
+    project:
+      title: Projet Recharge en forme
+      uri: projects/projet-recharge-en-forme
+    dialogUri: >
+      /projects/projet-recharge-en-forme?dialog=extended-brief
+    file:
+      uuid: file://7Bqr3iCH8ltDrdGi
+      url: >
+        http://localhost:8888/media/pages/projects/projet-recharge-en-forme/extended-brief/d44de3da29-1733319278/wip-20240916-demonstrateurs-recharge-en-forme.pdf
+  position:
+    pageIndex: 1
+    x: "64.385025360981"
+    y: "48.295454545455"
+  text: test
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-12-19T16:02:45+01:00
+  id: ee0c6c8d-4d0f-4262-b4b7-d6c5230b2802
+  type: comment
+  replies:
+    - 
+      location:
+        page:
+          uri: >
+            projects/projet-recharge-en-forme/extended-brief
+          title: Brief enrichi
+        project:
+          title: Projet Recharge en forme
+          uri: projects/projet-recharge-en-forme
+        dialogUri: >
+          /projects/projet-recharge-en-forme?dialog=extended-brief
+        file:
+          uuid: file://7Bqr3iCH8ltDrdGi
+          url: >
+            http://localhost:8888/media/pages/projects/projet-recharge-en-forme/extended-brief/d44de3da29-1733319278/wip-20240916-demonstrateurs-recharge-en-forme.pdf
+        parent:
+          author:
+            name: Adrien Payet
+            email: adrien.payet@outlook.com
+          id: ee0c6c8d-4d0f-4262-b4b7-d6c5230b2802
+      position:
+        pageIndex: 1
+      text: test
+      author:
+        name: Adrien Payet
+        email: adrien.payet@outlook.com
+        uuid: user://WWjXgPWk
+        role: admin
+      date: 2024-12-19T16:02:52+01:00
+      id: 3ddd2679-4c67-4efa-8492-a325fda425fb
+      type: comment-reply
+
+----
+
 Cover: 
 
 ----
 
+Label: 
+
+----
+
 Uuid: 7Bqr3iCH8ltDrdGi
 
 ----
diff --git a/public/site/plugins/classes/Position.php b/public/site/plugins/classes/Position.php
index b85b596..29c8dca 100644
--- a/public/site/plugins/classes/Position.php
+++ b/public/site/plugins/classes/Position.php
@@ -4,13 +4,15 @@ namespace adrienpayet\D2P\data;
 
 class Position
 {
-    public int $pageIndex;
+    public ?int $pageIndex = null;
     public ?float $x = null;
     public ?float $y = null;
 
     public function __construct(array $data)
     {
-        $this->pageIndex = $data['pageIndex'];
+        if (isset($data["pageIndex"])) {
+            $this->pageIndex = $data['pageIndex'];
+        }
         if (isset($data["x"])) {
             $this->x = (float) $data['x'];
             $this->y = (float) $data['y'];
@@ -18,9 +20,11 @@ class Position
     }
 
     public function toArray() {
-        $array = [
-            "pageIndex" => $this->pageIndex,
-        ];
+        $array = [];
+
+        if ($this->pageIndex) {
+            $array["pageIndex"] = $this->pageIndex;
+        }
 
         if ($this->x) {
             $array["x"] = $this->x;
diff --git a/public/site/plugins/comments/routes/create.php b/public/site/plugins/comments/routes/create.php
index 695d848..9183c8e 100644
--- a/public/site/plugins/comments/routes/create.php
+++ b/public/site/plugins/comments/routes/create.php
@@ -31,7 +31,6 @@ return [
           "file" => $file
         ],
         "position" => [
-          "pageIndex" => $data->position->pageIndex,
           "x" => $data->position->x,
           "y" => $data->position->y
         ],
@@ -42,6 +41,10 @@ return [
         "type" => "comment",
       ];
 
+      if ($data->position->pageIndex) {
+        $commentData["position"]["pageIndex"] = $data->position->pageIndex;
+      }
+
       $newComment = new Comment($commentData);
 
       $comments[] = $newComment->toArray();
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index 7fb7d5f..1332104 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -118,15 +118,12 @@ import { useRoute } from "vue-router";
 
 dayjs.locale("fr");
 
-const emits = defineEmits(["show-draft-marker"]);
-
 const { user } = useUserStore();
 const { page } = usePageStore();
 const dialog = useDialogStore();
-const { comments, openedFile } = storeToRefs(useDialogStore());
+const { comments, openedFile, draftComment } = storeToRefs(useDialogStore());
 const api = useApiStore();
 
-const draftComment = ref({});
 const openedComment = ref(null);
 
 const isAddOpen = ref(false);
@@ -150,17 +147,10 @@ watch(isAddOpen, (newVal) => {
   }
 });
 
-watch(
-  draftComment,
-  (newVal) => {
-    if (newVal.position) {
-      emits("show-draft-marker", newVal);
-    }
-  },
-  { deep: true }
-);
-
-const viewContainer = document.querySelector(".vpv-pages-inner-container");
+const viewContainer =
+  openedFile.value.type === "document"
+    ? document.querySelector(".vpv-pages-inner-container")
+    : document.querySelector(".track");
 
 window.addEventListener("keydown", (event) => {
   if (
@@ -171,6 +161,7 @@ window.addEventListener("keydown", (event) => {
     handleSubmit();
   }
 });
+
 // Functions
 function handleSubmit(event = null) {
   if (event) {
@@ -240,8 +231,18 @@ function toggleCommentPositionMode(enable) {
 }
 
 function handleCommentPositionClick(event) {
+  if (openedFile.value.type === "document") {
+    prepareDraftCommentInPdf(event);
+  } else {
+    prepareDraftCommentInImage(event);
+  }
+  isAddOpen.value = true;
+  toggleCommentPositionMode(false);
+}
+
+function prepareDraftCommentInPdf(event) {
   const pageContainer = event.target.closest(".page-inner-container");
-  if (!pageContainer) return;
+  if (!pageContainer || !viewContainer) return;
 
   const pageLabel = pageContainer
     .closest(".vpv-page-inner-container")
@@ -259,13 +260,30 @@ function handleCommentPositionClick(event) {
   const relativeX = (x / pageRect.width) * 100;
   const relativeY = (y / pageRect.height) * 100;
 
+  console.log(pageIndex);
+
   draftComment.value.position = {
     x: relativeX,
     y: relativeY,
     pageIndex: parseInt(pageIndex),
   };
-  isAddOpen.value = true;
-  toggleCommentPositionMode(false);
+}
+
+function prepareDraftCommentInImage(event) {
+  if (!viewContainer) return;
+
+  const imageRect = viewContainer.getBoundingClientRect();
+
+  const mouseTop = event.clientY;
+  const mouseLeft = event.clientX;
+
+  const relativeX = ((mouseLeft - imageRect.left) / imageRect.width) * 100;
+  const relativeY = ((mouseTop - imageRect.top) / imageRect.height) * 100;
+
+  draftComment.value.position = {
+    x: relativeX,
+    y: relativeY,
+  };
 }
 
 function openComment(comment) {
@@ -366,6 +384,8 @@ function openComment(comment) {
   flex-grow: 1;
 }
 
+.track.waiting-comment,
+.track.waiting-comment .drag-zone,
 .vpv-pages-inner-container.waiting-comment .page-inner-container,
 .vpv-pages-inner-container.waiting-comment .vpv-text-layer-text,
 .vpv-pages-inner-container.waiting-comment .vpv-text-layer-wrapper {
diff --git a/src/components/project/PdfViewer.vue b/src/components/project/PdfViewer.vue
index 8c3bca1..53de449 100644
--- a/src/components/project/PdfViewer.vue
+++ b/src/components/project/PdfViewer.vue
@@ -18,7 +18,7 @@
       >{{ isCommentsOpen ? "Masquer" : "Afficher" }} les commentaires</span
     >
   </button>
-  <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
+  <Comments v-if="isCommentsOpen" />
 </template>
 
 <script setup>
@@ -32,9 +32,9 @@ import { useRoute, useRouter } from "vue-router";
 const licenseKey = import.meta.env.VITE_VPV_LICENSE ?? 'd0ab730a-ebba-4060-856c-76d322565645';
 useLicense({ licenseKey });
 
-const { openedFile, isCommentsOpen, comments } = storeToRefs(useDialogStore());
-
-const draftComment = ref(null);
+const { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
+  useDialogStore()
+);
 
 const isViewerDisabled = ref(false);
 
@@ -122,6 +122,8 @@ function setCommentMarkers() {
       `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
     );
 
+    console.log(container);
+
     container.appendChild(bubble);
 
     setTimeout(() => {
@@ -145,22 +147,6 @@ function removeCommentMarkers() {
     bubble.parentNode.removeChild(bubble);
   });
 }
-
-function showDraftMarker(draftComment) {
-  const bubble = document.createElement("a");
-
-  bubble.classList.add("comment-marker");
-  bubble.classList.add("comment-marker--draft");
-  bubble.style.left = draftComment.position.x + "%";
-  bubble.style.top = draftComment.position.y + "%";
-  bubble.href = "#comment-" + draftComment.id;
-
-  const container = document.querySelector(
-    `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
-  );
-
-  container.appendChild(bubble);
-}
 </script>
 
 <style scoped>
diff --git a/src/components/project/virtual-sample/StaticView.vue b/src/components/project/virtual-sample/StaticView.vue
index a7b9c58..d4448f7 100644
--- a/src/components/project/virtual-sample/StaticView.vue
+++ b/src/components/project/virtual-sample/StaticView.vue
@@ -24,7 +24,7 @@
       <span class="label">Verre parachevé</span>
     </button>
   </header>
-  <div class="dialog__inner" id="verre-brut">
+  <div id="vpv-container" class="dialog__inner">
     <PdfViewer />
   </div>
 </template>
diff --git a/src/stores/dialog.js b/src/stores/dialog.js
index 07db65f..5c1e61e 100644
--- a/src/stores/dialog.js
+++ b/src/stores/dialog.js
@@ -1,10 +1,11 @@
 import { defineStore } from "pinia";
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useRoute } from "vue-router";
 
 export const useDialogStore = defineStore("dialog", () => {
   const content = ref(null);
   const openedFile = ref(null);
+
   const comments = computed(() => {
     return openedFile.value.comments;
   });
@@ -23,5 +24,37 @@ export const useDialogStore = defineStore("dialog", () => {
     route.query.hasOwnProperty("comments") ? true : false
   );
 
-  return { content, openedFile, comments, isCommentsOpen, updateFile };
+  const draftComment = ref({});
+  watch(
+    draftComment,
+    (newVal) => {
+      if (draftComment.value.position) showDraftMarker(newVal);
+    },
+    { deep: true }
+  );
+  function showDraftMarker(draftComment) {
+    console.log("showDraftMarker");
+    const bubble = document.createElement("a");
+
+    bubble.classList.add("comment-marker");
+    bubble.classList.add("comment-marker--draft");
+    bubble.style.left = draftComment.position.x + "%";
+    bubble.style.top = draftComment.position.y + "%";
+    bubble.href = "#comment-" + draftComment.id;
+
+    const container = document.querySelector(
+      `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
+    );
+
+    container.appendChild(bubble);
+  }
+
+  return {
+    content,
+    openedFile,
+    comments,
+    draftComment,
+    isCommentsOpen,
+    updateFile,
+  };
 });

From bc0ae8861fe2d4531b6ac9fc911676a249134055 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 19 Dec 2024 16:07:01 +0100
Subject: [PATCH 2/3] create comment working

---
 ...mise-au-service-de-sarkozy-le-boss.pdf.txt | 61 +-----------------
 ...6-demonstrateurs-recharge-en-forme.pdf.txt | 63 +------------------
 .../site/plugins/comments/routes/create.php   |  4 +-
 3 files changed, 3 insertions(+), 125 deletions(-)

diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf.txt b/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf.txt
index 623c4e1..6872059 100644
--- a/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf.txt
+++ b/public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf.txt
@@ -1,63 +1,4 @@
-Comments:
-
-- 
-  location:
-    page:
-      uri: >
-        projects/miss-dior-blooming-bouquet/proposal
-      title: Offre commerciale
-    project:
-      title: Miss Dior Blooming Bouquet
-      uri: projects/miss-dior-blooming-bouquet
-    dialogUri: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
-    file:
-      uuid: file://3vTh1tMFeFM2JxaN
-      url: >
-        http://localhost:8888/media/pages/projects/miss-dior-blooming-bouquet/proposal/788ddebfe3-1731941917/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf
-  position:
-    pageIndex: 1
-    x: "57.105131038425"
-    y: "13.127413127413"
-  text: un commentaire
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-12-19T10:26:05+01:00
-  id: e16a5304-330b-4460-acbd-a6e471f4cda2
-  type: comment
-  replies:
-    - 
-      location:
-        page:
-          uri: >
-            projects/miss-dior-blooming-bouquet/proposal
-          title: Offre commerciale
-        project:
-          title: Miss Dior Blooming Bouquet
-          uri: projects/miss-dior-blooming-bouquet
-        dialogUri: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
-        file:
-          uuid: file://3vTh1tMFeFM2JxaN
-          url: >
-            http://localhost:8888/media/pages/projects/miss-dior-blooming-bouquet/proposal/788ddebfe3-1731941917/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf
-        parent:
-          author:
-            name: Adrien Payet
-            email: adrien.payet@outlook.com
-          id: e16a5304-330b-4460-acbd-a6e471f4cda2
-      position:
-        pageIndex: 1
-      text: une réponse
-      author:
-        name: Adrien Payet
-        email: adrien.payet@outlook.com
-        uuid: user://WWjXgPWk
-        role: admin
-      date: 2024-12-19T10:26:09+01:00
-      id: bc64e066-299d-4d80-a651-2c17482cda2f
-      type: comment-reply
+Comments: 
 
 ----
 
diff --git a/public/content/projects/2_projet-recharge-en-forme/2_extended-brief/wip-20240916-demonstrateurs-recharge-en-forme.pdf.txt b/public/content/projects/2_projet-recharge-en-forme/2_extended-brief/wip-20240916-demonstrateurs-recharge-en-forme.pdf.txt
index 3ae77dd..03aea75 100644
--- a/public/content/projects/2_projet-recharge-en-forme/2_extended-brief/wip-20240916-demonstrateurs-recharge-en-forme.pdf.txt
+++ b/public/content/projects/2_projet-recharge-en-forme/2_extended-brief/wip-20240916-demonstrateurs-recharge-en-forme.pdf.txt
@@ -1,65 +1,4 @@
-Comments:
-
-- 
-  location:
-    page:
-      uri: >
-        projects/projet-recharge-en-forme/extended-brief
-      title: Brief enrichi
-    project:
-      title: Projet Recharge en forme
-      uri: projects/projet-recharge-en-forme
-    dialogUri: >
-      /projects/projet-recharge-en-forme?dialog=extended-brief
-    file:
-      uuid: file://7Bqr3iCH8ltDrdGi
-      url: >
-        http://localhost:8888/media/pages/projects/projet-recharge-en-forme/extended-brief/d44de3da29-1733319278/wip-20240916-demonstrateurs-recharge-en-forme.pdf
-  position:
-    pageIndex: 1
-    x: "64.385025360981"
-    y: "48.295454545455"
-  text: test
-  author:
-    name: Adrien Payet
-    email: adrien.payet@outlook.com
-    uuid: user://WWjXgPWk
-    role: admin
-  date: 2024-12-19T16:02:45+01:00
-  id: ee0c6c8d-4d0f-4262-b4b7-d6c5230b2802
-  type: comment
-  replies:
-    - 
-      location:
-        page:
-          uri: >
-            projects/projet-recharge-en-forme/extended-brief
-          title: Brief enrichi
-        project:
-          title: Projet Recharge en forme
-          uri: projects/projet-recharge-en-forme
-        dialogUri: >
-          /projects/projet-recharge-en-forme?dialog=extended-brief
-        file:
-          uuid: file://7Bqr3iCH8ltDrdGi
-          url: >
-            http://localhost:8888/media/pages/projects/projet-recharge-en-forme/extended-brief/d44de3da29-1733319278/wip-20240916-demonstrateurs-recharge-en-forme.pdf
-        parent:
-          author:
-            name: Adrien Payet
-            email: adrien.payet@outlook.com
-          id: ee0c6c8d-4d0f-4262-b4b7-d6c5230b2802
-      position:
-        pageIndex: 1
-      text: test
-      author:
-        name: Adrien Payet
-        email: adrien.payet@outlook.com
-        uuid: user://WWjXgPWk
-        role: admin
-      date: 2024-12-19T16:02:52+01:00
-      id: 3ddd2679-4c67-4efa-8492-a325fda425fb
-      type: comment-reply
+Comments: 
 
 ----
 
diff --git a/public/site/plugins/comments/routes/create.php b/public/site/plugins/comments/routes/create.php
index 9183c8e..525dba9 100644
--- a/public/site/plugins/comments/routes/create.php
+++ b/public/site/plugins/comments/routes/create.php
@@ -58,9 +58,7 @@ return [
       try {
         $user->sendNotification($project, $commentData);
       } catch (\Throwable $th) {
-        echo json_encode([
-          "error" => $th->getMessage() . " in " . $th->getFile() . " line " . $th->getLine(),
-        ]);
+        throw new Exception($th->getMessage(), 1);
       }
 
       exit;

From 4daaa3dc8896b1f847acbb6346000070e4af0a88 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 19 Dec 2024 17:11:46 +0100
Subject: [PATCH 3/3] comment 360 working

---
 .../4_virtual-sample/1_piste-1/0_6.png.txt    | 33 +++++++
 .../adrien-payet_-az60.pdf.txt                |  4 +-
 public/site/blueprints/files/default.yml      |  3 +
 .../site/plugins/comments/routes/create.php   | 16 +---
 public/site/plugins/helpers/index.php         |  2 +-
 src/components/comments/Comments.vue          |  4 +
 src/components/project/PdfViewer.vue          | 69 --------------
 src/stores/dialog.js                          | 94 +++++++++++++++++--
 8 files changed, 134 insertions(+), 91 deletions(-)
 create mode 100644 public/site/blueprints/files/default.yml

diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/1_piste-1/0_6.png.txt b/public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/1_piste-1/0_6.png.txt
index 057fd9c..9e7b110 100644
--- a/public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/1_piste-1/0_6.png.txt
+++ b/public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/1_piste-1/0_6.png.txt
@@ -1 +1,34 @@
+Comments:
+
+- 
+  location:
+    page:
+      uri: >
+        projects/miss-dior-blooming-bouquet/virtual-sample/piste-1
+      title: Piste 1
+    project:
+      title: Miss Dior Blooming Bouquet
+      uri: projects/miss-dior-blooming-bouquet
+    dialogUri: >
+      /projects/miss-dior-blooming-bouquet?dialog=virtual-sample
+    file:
+      uuid: file://J9q2ceZL2aW19oEU
+      url: >
+        http://localhost:8888/media/pages/projects/miss-dior-blooming-bouquet/virtual-sample/piste-1/f26b2c223b-1733765560/0_6.png
+  position:
+    x: '50.119047619048'
+    y: '42.563482466747'
+  text: test
+  author:
+    name: Adrien Payet
+    email: adrien.payet@outlook.com
+    uuid: user://WWjXgPWk
+    role: admin
+  date: 2024-12-19T16:49:15+01:00
+  id: 4b311fe6-a6e4-486f-a9ce-b8820a234e2e
+  type: comment
+  replies: [ ]
+
+----
+
 Uuid: J9q2ceZL2aW19oEU
\ No newline at end of file
diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/adrien-payet_-az60.pdf.txt b/public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/adrien-payet_-az60.pdf.txt
index d39527e..ebb87db 100644
--- a/public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/adrien-payet_-az60.pdf.txt
+++ b/public/content/projects/1_miss-dior-blooming-bouquet/4_virtual-sample/adrien-payet_-az60.pdf.txt
@@ -1,5 +1,5 @@
-Uuid: WrFkfiMVZuxwdYad
+Comments: 
 
 ----
 
-Comments: 
\ No newline at end of file
+Uuid: WrFkfiMVZuxwdYad
\ No newline at end of file
diff --git a/public/site/blueprints/files/default.yml b/public/site/blueprints/files/default.yml
new file mode 100644
index 0000000..39d62c7
--- /dev/null
+++ b/public/site/blueprints/files/default.yml
@@ -0,0 +1,3 @@
+fields:
+  comments:
+    type: hidden
diff --git a/public/site/plugins/comments/routes/create.php b/public/site/plugins/comments/routes/create.php
index 525dba9..69f18be 100644
--- a/public/site/plugins/comments/routes/create.php
+++ b/public/site/plugins/comments/routes/create.php
@@ -9,17 +9,11 @@ return [
       $json = file_get_contents('php://input');
       $data = json_decode($json);
 
-      $parsedUrl = parse_url($data->dialogUri);
-      $query = $parsedUrl['query'] ?? null;
-      parse_str($query, $queryParams);
-      $stepSlug = $queryParams['dialog'] ?? null;
-
-      $targetPageUri = $stepSlug ? $parsedUrl['path'] . '/' . $stepSlug : $parsedUrl['path'];
-
-      $project = page($parsedUrl['path']);
-      $page = page($targetPageUri);
+      $page = page($data->fileParentUri);
+      $project = $page->parent()->template() == "project" ? $page->parent() : $page->parent()->parent();
       $file = $page->file($data->fileName);
       $user = kirby()->user($data->userUuid);   
+      
 
       $comments = $file->comments()->isEmpty() == true ? [] : Yaml::decode($file->comments()->value());
 
@@ -41,13 +35,13 @@ return [
         "type" => "comment",
       ];
 
-      if ($data->position->pageIndex) {
+      if (isset($data->position->pageIndex)) {
         $commentData["position"]["pageIndex"] = $data->position->pageIndex;
       }
 
       $newComment = new Comment($commentData);
 
-      $comments[] = $newComment->toArray();
+      $comments[] = $newComment->toArray();      
       
       $newFile = $file->update([
         'comments' => $comments
diff --git a/public/site/plugins/helpers/index.php b/public/site/plugins/helpers/index.php
index 34d7b0b..74c897d 100644
--- a/public/site/plugins/helpers/index.php
+++ b/public/site/plugins/helpers/index.php
@@ -19,7 +19,7 @@ function getFileData($file) {
     $data['tags'] = $file->tags()->split();
   };
 
-  if($file->extension() == "pdf") {
+  if($file->comments()->exists()) {
     $data['comments'] = $file->comments()->exists() && $file->comments() ? Data::decode($file->comments()->value(), 'yaml') : [];
     $data['cover'] = $file->cover()->exists() && $file->cover()->isNotEmpty() ? $file->cover()->toFile()->resize(576)->url() : false;
   } 
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index 1332104..ee39fb5 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -202,6 +202,10 @@ async function replyComment(newComment) {
 }
 
 async function addComment(newComment) {
+  const matchFileParentUri = openedFile.value.url.match(
+    /projects\/.*?(?=\/[^/]+\/[^/]+$)/
+  );
+  newComment.fileParentUri = matchFileParentUri ? matchFileParentUri[0] : null;
   const newFile = await api.addComment(newComment);
   resetDraftComment();
   isAddOpen.value = false;
diff --git a/src/components/project/PdfViewer.vue b/src/components/project/PdfViewer.vue
index 53de449..82c872c 100644
--- a/src/components/project/PdfViewer.vue
+++ b/src/components/project/PdfViewer.vue
@@ -36,35 +36,6 @@ const { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
   useDialogStore()
 );
 
-const isViewerDisabled = ref(false);
-
-watch(openedFile, () => {
-  removeCommentMarkers();
-  setCommentMarkers();
-});
-
-watch(isCommentsOpen, (newVal) => {
-  if (newVal) {
-    setCommentMarkers();
-  } else {
-    removeCommentMarkers();
-  }
-});
-
-watch(openedFile, (newVal, oldVal) => {
-  if (newVal.url === oldVal.url) return;
-
-  isViewerDisabled.value = true;
-
-  setTimeout(() => {
-    isViewerDisabled.value = false;
-    removeCommentMarkers();
-    if (newVal.comments) {
-      setCommentMarkers();
-    }
-  }, 100);
-});
-
 const currentPageIndex = ref(1);
 
 // Functions
@@ -107,46 +78,6 @@ const onPdfLoaded = () => {
 
   observePages();
 };
-
-function setCommentMarkers() {
-  if (!comments.value) return;
-  comments.value.forEach((comment) => {
-    const bubble = document.createElement("a");
-
-    bubble.classList.add("comment-marker");
-    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`
-    );
-
-    console.log(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 removeCommentMarkers() {
-  document.querySelectorAll(".comment-marker").forEach((bubble) => {
-    bubble.parentNode.removeChild(bubble);
-  });
-}
 </script>
 
 <style scoped>
diff --git a/src/stores/dialog.js b/src/stores/dialog.js
index 5c1e61e..19d5524 100644
--- a/src/stores/dialog.js
+++ b/src/stores/dialog.js
@@ -11,12 +11,13 @@ export const useDialogStore = defineStore("dialog", () => {
   });
 
   function updateFile(newFile) {
+    console.log(newFile);
     openedFile.value = newFile;
 
-    if (!content.value.files) return;
-    content.value.files = content.value.files.map((file) =>
-      file.id === newFile.id ? newFile : file
-    );
+    // if (!content.value.files) return;
+    // content.value.files = content.value.files.map((file) =>
+    //   file.id === newFile.id ? newFile : file
+    // );
   }
 
   const route = useRoute();
@@ -33,7 +34,6 @@ export const useDialogStore = defineStore("dialog", () => {
     { deep: true }
   );
   function showDraftMarker(draftComment) {
-    console.log("showDraftMarker");
     const bubble = document.createElement("a");
 
     bubble.classList.add("comment-marker");
@@ -42,13 +42,91 @@ export const useDialogStore = defineStore("dialog", () => {
     bubble.style.top = draftComment.position.y + "%";
     bubble.href = "#comment-" + draftComment.id;
 
-    const container = document.querySelector(
-      `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
-    );
+    const container = draftComment.position.pageIndex
+      ? document.querySelector(
+          `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
+        )
+      : document.querySelector(".track");
 
     container.appendChild(bubble);
   }
 
+  const isViewerDisabled = ref(false);
+  watch(isCommentsOpen, (newVal) => {
+    if (newVal) {
+      setCommentMarkers();
+    } else {
+      removeCommentMarkers();
+    }
+  });
+  watch(openedFile, () => {
+    removeCommentMarkers();
+    if (isCommentsOpen.value) {
+      setCommentMarkers();
+    }
+  });
+  watch(openedFile, (newVal, oldVal) => {
+    if (!isCommentsOpen.value || !oldVal || newVal.url == oldVal.url) return;
+
+    isViewerDisabled.value = true;
+
+    setTimeout(() => {
+      isViewerDisabled.value = false;
+      removeCommentMarkers();
+      if (newVal.comments) {
+        setCommentMarkers();
+      }
+    }, 100);
+  });
+  function setCommentMarkers() {
+    if (!comments.value) return;
+    comments.value.forEach((comment) => {
+      const bubble = document.createElement("a");
+
+      bubble.classList.add("comment-marker");
+      bubble.style.left = comment.position.x + "%";
+      bubble.style.top = comment.position.y + "%";
+      bubble.href = "#comment-" + comment.id;
+
+      let container = comment.position?.pageIndex
+        ? document.querySelector(
+            `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
+          )
+        : document.querySelector(".track");
+
+      const timeOut = container ? 0 : 500;
+      setTimeout(() => {
+        container = comment.position?.pageIndex
+          ? document.querySelector(
+              `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
+            )
+          : document.querySelector(".track");
+
+        container.appendChild(bubble);
+
+        setTimeout(() => {
+          bubble.addEventListener("mouseenter", () => highlight(comment));
+          bubble.addEventListener("mouseleave", () => unhighlight(comment));
+        }, 100);
+      }, timeOut);
+    });
+  }
+
+  function removeCommentMarkers() {
+    document.querySelectorAll(".comment-marker").forEach((bubble) => {
+      bubble.parentNode.removeChild(bubble);
+    });
+  }
+
+  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");
+  }
+
   return {
     content,
     openedFile,