toggle favorite inspiration working + tab my favorite

src/views/Inspirations.vue

@@ -9,12 +9,16 @@
       <section :id="currentTab" class="inspiration">
         <Header :inspiration="currentInspiration" />
         <div class="grid masonry">
-          <Image
+          <template
             v-for="(item, index) in currentInspiration.media"
             :key="item.id"
-            :item="item"
-            :inspirationUri="currentInspiration.uri"
-          />
+          >
+            <Image
+              :item="item"
+              :inspirationUri="currentInspiration.uri"
+              :currentTab="currentTab"
+            />
+          </template>
         </div>
       </section>
     </main>
@@ -27,12 +31,14 @@ import Selector from "../components/inspirations/Selector.vue";
 import Header from "../components/inspirations/Header.vue";
 import Tabs from "../components/Tabs.vue";
 import Image from "../components/inspirations/Image.vue";
+import { useUserStore } from "../stores/user";
 import { ref, computed } from "vue";
 
 const { data } = defineProps({
   data: Object,
 });
 
+const user = useUserStore().user;
 const currentTab = ref("all");
 const tabs = computed(() => {
   return [
@@ -47,13 +53,18 @@ const tabs = computed(() => {
       label: "Mes Favoris",
       id: "favorites",
       icon: "favorite",
-      count: 6, // TODO: dynamiser (favorites.count)
+      count: favoriteImages.value.length, // TODO: dynamiser (favorites.count)
       isActive: currentTab.value === "favorites",
     },
   ];
 });
 
-const currentInspiration = data.inspirations[0];
+const currentInspiration = ref(data.inspirations[0]);
+const favoriteImages = computed(() => {
+  return currentInspiration.value.media.filter(
+    (image) => image.favoriteForUsers?.includes(user.uuid) ?? false
+  );
+});
 
 function changeTab(newValue) {
   currentTab.value = newValue;