DTL panel : show proposal corresponding to dialog working for virtual sample (dynamic and static)

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

@@ -81,18 +81,24 @@
     </template>
     <Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
   </Dialog>
+  <DTLPanel
+    v-if="correspondingDTLProposal"
+    :proposals="[correspondingDTLProposal]"
+  />
 </template>
 
 <script setup>
 import Comments from "../../comments/Comments.vue";
-import { storeToRefs } from "pinia";
 import Dialog from "primevue/dialog";
 import DynamicView from "./DynamicView.vue";
 import StaticView from "./StaticView.vue";
+import DTLPanel from "../../design-to-light/DTLPanel.vue";
+import { storeToRefs } from "pinia";
 import { ref, watch, computed } from "vue";
 import { useVirtualSampleStore } from "../../../stores/virtualSample";
 import { useDialogStore } from "../../../stores/dialog";
 import { useRoute, useRouter } from "vue-router";
+import { usePageStore } from "../../../stores/page";
 
 const { file } = defineProps({
   file: Object,
@@ -105,10 +111,13 @@ const {
   isLoopAnimationEnabled,
   isDownloadTriggered,
 } = storeToRefs(useVirtualSampleStore());
+
+const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
+  storeToRefs(useDialogStore());
+
+const { page } = storeToRefs(usePageStore());
+
 isLoopAnimationEnabled.value = false;
-const { isCommentsOpen, isCommentPanelEnabled, activeTracks } = storeToRefs(
-  useDialogStore()
-);
 
 // Variables
 const router = useRouter();
@@ -130,6 +139,31 @@ const downloadText = computed(() => {
   }
 });
 
+const correspondingDTLProposal = computed(() => {
+  const hasDTLProposal = page.value?.designToLight;
+  if (!hasDTLProposal) return false;
+
+  const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
+    if (activeTab.value === "dynamic") {
+      return (
+        proposal.location.type === "dynamic" &&
+        activeTracks?.value?.some(
+          (activeTrack) => activeTrack.slug === proposal.location.trackSlug
+        )
+      );
+    } else {
+      return (
+        proposal.location.type === "static" &&
+        openedFile.value.source === proposal.location.source
+      );
+    }
+  });
+
+  if (!correspondingDTLProposal) return false;
+
+  return correspondingDTLProposal;
+});
+
 // Functions
 function downloadFiles() {
   isDownloadTriggered.value = true;