update kirby to v5 and add refresh cache panel view button

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

@@ -2,18 +2,15 @@
   <div class="dialog__inner">
     <header class="tracks-header | flex">
       <div class="tracks">
-        <button
+        <Selector
           v-for="(track, index) in tracks"
-          class="btn btn--image"
-          :aria-pressed="activeTracks.includes(track) ? true : false"
-          :aria-controls="track.slug"
-          :id="'track--' + track.slug"
-          :style="`--btn-image: url(${getFrontViewUrl(track)});`"
-          @click="selectTrack(track)"
-          :data-comments="getCommentsCount(track)"
-        >
-          <span>{{ track.title }}</span>
-        </button>
+          :key="track.slug"
+          :label="track.title"
+          :items="track.variations"
+          :isCompareModeEnabled="isCompareModeEnabled"
+          :index="index"
+          @update:selectedItems="selectTrack"
+        />
       </div>
       <button
         v-if="tracks.length > 1"
@@ -45,13 +42,13 @@
         v-if="isCompareModeEnabled && activeTracks.length < 2"
         class="track-empty | bg-white rounded-xl w-full p-32"
       >
-        <p>Cliquez sur la piste que vous souhaitez comparer</p>
+        <p>Sélectionnez sur la piste que vous souhaitez comparer</p>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeMount } from 'vue';
+import { computed, watch, onMounted, onBeforeMount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { usePageStore } from '../../../stores/page';
 import { useDialogStore } from '../../../stores/dialog';
@@ -59,6 +56,8 @@ import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { useRoute } from 'vue-router';
 import Interactive360 from './Interactive360.vue';
 import SingleImage from './SingleImage.vue';
+import Selector from '../../Selector.vue';
+import slugify from 'slugify';
 
 const route = useRoute();
 
@@ -68,15 +67,24 @@ const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
 
 const { isCompareModeEnabled } = storeToRefs(useVirtualSampleStore());
 
+const rawTracks = page.value.steps.find(
+  (step) => step.slug === 'virtual-sample'
+).files.dynamic;
+
 onBeforeMount(() => {
-  const trackToOpen = tracks.value.find(
-    (track) => track.slug === route.hash.substring(1)
-  );
-  if (trackToOpen) {
-    activeTracks.value = [trackToOpen];
-  } else {
-    activeTracks.value = [tracks.value[0]];
-  }
+  const firstTrack = rawTracks[Object.keys(rawTracks)[0]];
+  const firstVariation = firstTrack[0];
+  activeTracks.value = [firstVariation];
+
+  // TO RE-ENABLE
+  // if (route.hash.length > 0) {
+  //   const trackToOpen = tracks.value.find(
+  //     (track) => track.slug === route.hash.substring(1)
+  //   );
+  //   activeTracks.value = [trackToOpen];
+  // } else {
+  //   activeTracks.value = [tracks.value[0]];
+  // }
 });
 
 onMounted(() => {
@@ -89,16 +97,28 @@ onMounted(() => {
   }
 });
 
-const tracks = computed(
-  () =>
-    page.value.steps.find((step) => step.slug === 'virtual-sample').files
-      .dynamic
-);
+const tracks = computed(() => {
+  const rawTracks = page.value.steps.find(
+    (step) => step.slug === 'virtual-sample'
+  ).files.dynamic;
+
+  const tracks = [];
+
+  for (const key in rawTracks) {
+    tracks.push({
+      title: key,
+      slug: slugify(key),
+      variations: rawTracks[key],
+    });
+  }
+
+  return tracks;
+});
 
 const isSingleImage = computed(() => {
   return (
     activeTracks.value?.length === 1 &&
-    activeTracks.value[0]?.files.length === 1
+    activeTracks.value[0]?.files?.length === 1
   );
 });
 
@@ -129,41 +149,6 @@ watch(isCompareModeEnabled, (newValue) => {
   }
 });
 
-function getFrontViewUrl(track) {
-  if (track.files.length > 1) {
-    return track.files[7].url;
-  } else {
-    return track.files[0].url;
-  }
-}
-
-function selectTrack(track) {
-  if (!isCompareModeEnabled.value) {
-    activeTracks.value = [track];
-    return;
-  }
-
-  if (activeTracks.value.length === 1 && !activeTracks.value.includes(track)) {
-    activeTracks.value.push(track);
-    return;
-  }
-
-  if (activeTracks.value.length === 2) {
-    if (activeTracks.value.includes(track)) {
-      removeTrack(track);
-    } else {
-      activeTracks.value.pop();
-      activeTracks.value.push(track);
-    }
-  }
-}
-
-function removeTrack(track) {
-  activeTracks.value = activeTracks.value.filter(
-    (activeTrack) => activeTrack.title !== track.title
-  );
-}
-
 function getCommentsCount(track) {
   let count = 0;
   for (const file of track.files) {