From d8fc93ff5d6eb3c3ac4ff0595940dc1187d95f39 Mon Sep 17 00:00:00 2001
From: neckfire <nfteamhead@proton.me>
Date: Sun, 19 Jul 2026 03:24:37 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20d=C3=A9ballage=20resource=20{data}=20+?=
 =?UTF-8?q?=20cl=C3=A9=20useAsyncData=20sur=20d=C3=A9tail=20exercice/s?=
 =?UTF-8?q?=C3=A9ance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/pages/exercises/[id].vue | 36 +++++++++++++++++++-----------------
 app/pages/session/[id].vue   |  6 +++++-
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/app/pages/exercises/[id].vue b/app/pages/exercises/[id].vue
index 00f1c0e..1b7064e 100644
--- a/app/pages/exercises/[id].vue
+++ b/app/pages/exercises/[id].vue
@@ -6,7 +6,7 @@ const route = useRoute()
 interface ExerciseDetail {
   id: number
   name: string
-  body_part: string | null
+  body_part?: string | null
   category: string | null
   equipment: string | null
   target: string | null
@@ -18,10 +18,12 @@ interface ExerciseDetail {
   attribution: string | null
 }
 
-const { data, pending } = await useAsyncData(
-  () => `exercise-${route.params.id}`,
-  () => api<ExerciseDetail>(`/api/exercises/${route.params.id}`, { query: { locale: locale.value } }),
-  { watch: [locale] }
+// L'API enveloppe la resource dans { data: {...} } → on déballe.
+const { data: ex, pending } = await useAsyncData(
+  `exercise-${route.params.id}`,
+  () => api<{ data: ExerciseDetail }>(`/api/exercises/${route.params.id}`, { query: { locale: locale.value } })
+    .then(r => r.data),
+  { watch: [() => route.params.id, locale] }
 )
 </script>
 
@@ -29,38 +31,38 @@ const { data, pending } = await useAsyncData(
   <div class="space-y-5">
     <UButton to="/exercises" icon="i-lucide-arrow-left" color="neutral" variant="ghost" :label="t('common.back')" />
 
-    <div v-if="pending && !data" class="flex justify-center py-16"><SfLogo :size="56" loader /></div>
+    <div v-if="pending && !ex" class="flex justify-center py-16"><SfLogo :size="56" loader /></div>
 
-    <template v-else-if="data">
+    <template v-else-if="ex">
       <div class="rounded-2xl overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-square max-w-sm mx-auto">
-        <img v-if="data.gif_url || data.image_url" :src="data.gif_url || data.image_url || ''" :alt="data.name" class="w-full h-full object-cover">
+        <img v-if="ex.gif_url || ex.image_url" :src="ex.gif_url || ex.image_url || ''" :alt="ex.name" class="w-full h-full object-cover">
       </div>
 
       <div>
-        <h1 class="text-2xl font-black tracking-tight capitalize">{{ data.name }}</h1>
+        <h1 class="text-2xl font-black tracking-tight capitalize">{{ ex.name }}</h1>
         <div class="flex flex-wrap gap-2 mt-2">
-          <UBadge v-if="data.target" color="primary" variant="soft" class="capitalize">{{ data.target }}</UBadge>
-          <UBadge v-if="data.equipment" color="neutral" variant="soft" class="capitalize">{{ data.equipment }}</UBadge>
-          <UBadge v-if="data.body_part" color="neutral" variant="outline" class="capitalize">{{ data.body_part }}</UBadge>
+          <UBadge v-if="ex.target" color="primary" variant="soft" class="capitalize">{{ ex.target }}</UBadge>
+          <UBadge v-if="ex.equipment" color="neutral" variant="soft" class="capitalize">{{ ex.equipment }}</UBadge>
+          <UBadge v-if="ex.body_part || ex.category" color="neutral" variant="outline" class="capitalize">{{ ex.body_part || ex.category }}</UBadge>
         </div>
       </div>
 
-      <div v-if="data.secondary_muscles?.length">
+      <div v-if="ex.secondary_muscles?.length">
         <h2 class="text-sm font-semibold text-zinc-500 mb-1">{{ t('exercises.secondaryMuscles') }}</h2>
-        <p class="text-sm capitalize">{{ data.secondary_muscles.join(', ') }}</p>
+        <p class="text-sm capitalize">{{ ex.secondary_muscles.join(', ') }}</p>
       </div>
 
-      <div v-if="data.instructions?.length">
+      <div v-if="ex.instructions?.length">
         <h2 class="text-sm font-semibold text-zinc-500 mb-2">{{ t('exercises.instructions') }}</h2>
         <ol class="space-y-2">
-          <li v-for="(step, i) in data.instructions" :key="i" class="flex gap-3">
+          <li v-for="(step, i) in ex.instructions" :key="i" class="flex gap-3">
             <span class="shrink-0 size-6 rounded-full sf-flame-bg text-white text-xs font-bold flex items-center justify-center">{{ i + 1 }}</span>
             <span class="text-sm">{{ step }}</span>
           </li>
         </ol>
       </div>
 
-      <p v-if="data.attribution" class="text-xs text-zinc-400 pt-4">{{ data.attribution }}</p>
+      <p v-if="ex.attribution" class="text-xs text-zinc-400 pt-4">{{ ex.attribution }}</p>
     </template>
   </div>
 </template>
diff --git a/app/pages/session/[id].vue b/app/pages/session/[id].vue
index 9efd599..7e08b27 100644
--- a/app/pages/session/[id].vue
+++ b/app/pages/session/[id].vue
@@ -10,7 +10,11 @@ interface SetLog { id: number, exercise_id: number, set_number: number, reps: nu
 interface Exercise { id: number, name: string, image_url: string | null, target?: string | null }
 interface Session { id: number, title: string | null, status: string, set_logs: (SetLog & { exercise?: Exercise })[] }
 
-const { data: session, refresh } = await useAsyncData(`session-${sessionId}`, () => api<Session>(`/api/sessions/${sessionId}`))
+// L'API peut envelopper la resource dans { data: {...} } → déballage tolérant.
+const { data: session, refresh } = await useAsyncData(
+  `session-${sessionId}`,
+  () => api<Session | { data: Session }>(`/api/sessions/${sessionId}`).then((r: unknown) => (r as { data?: Session })?.data ?? r as Session)
+)
 
 // Exercices actifs = ceux ayant des sets + ceux ajoutés manuellement
 const added = ref<Exercise[]>([])