prepare extended brief

src/views/Inspirations.vue

@@ -12,10 +12,7 @@
         :inspiration="currentInspiration"
       />
       <div class="masonry flow">
-        <template
-          v-for="(item, index) in currentInspiration.media"
-          :key="item.id"
-        >
+        <template v-for="(item, index) in displayedImages" :key="item.id">
           <Image
             :item="item"
             :inspirationUri="currentInspiration.uri"
@@ -37,39 +34,50 @@ import { ref, computed } from "vue";
 import { usePageStore } from "../stores/page";
 import { storeToRefs } from "pinia";
 
+// Stores
 const { page } = storeToRefs(usePageStore());
-const user = useUserStore().user;
-const currentTab = ref("all");
-const tabs = computed(() => {
-  return [
-    {
-      label: "Les Inspirations",
-      id: "all",
-      icon: null,
-      count: currentInspiration.value.media.length,
-      isActive: currentTab.value === "all",
-    },
-    {
-      label: "Mes Favoris",
-      id: "favorites",
-      icon: "favorite",
-      count: favoriteImages.value.length,
-      isActive: currentTab.value === "favorites",
-    },
-  ];
-});
+const userStore = useUserStore();
+const user = computed(() => userStore.user);
 
-const allImages = page.value.inspirations.flatMap(
-  (inspiration) => inspiration.media
+// Reactive
+const currentTab = ref("all");
+const currentInspiration = ref(page.value.inspirations[0]);
+
+// Computed
+const allImages = computed(() =>
+  page.value.inspirations.flatMap((inspiration) => inspiration.media)
 );
 
-const currentInspiration = ref(page.value.inspirations[0]);
-const favoriteImages = computed(() => {
-  return allImages.filter(
-    (image) => image.favoriteForUsers?.includes(user.uuid) ?? false
-  );
-});
+const favoriteImages = computed(() =>
+  allImages.value.filter(
+    (image) => image.favoriteForUsers?.includes(user.value.uuid) ?? false
+  )
+);
 
+const tabs = computed(() => [
+  {
+    label: "Les Inspirations",
+    id: "all",
+    icon: null,
+    count: currentInspiration.value.media.length,
+    isActive: currentTab.value === "all",
+  },
+  {
+    label: "Mes Favoris",
+    id: "favorites",
+    icon: "favorite",
+    count: favoriteImages.value.length,
+    isActive: currentTab.value === "favorites",
+  },
+]);
+
+const displayedImages = computed(() =>
+  currentTab.value === "favorites"
+    ? favoriteImages.value
+    : currentInspiration.value.media
+);
+
+// Methods
 function changeTab(newValue) {
   currentTab.value = newValue;
 }