From e154dd23729f576bd675f0d64ef2308de76f8be2 Mon Sep 17 00:00:00 2001
From: Lucas Santana <lucasrcsantana@gmail.com>
Date: Thu, 23 Jan 2025 19:01:03 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20Corrigindo=20capas=20das=20hist=C3=B3ria?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/student-dashboard/StoryPage.tsx     |  1 +
 .../StudentDashboardPage.tsx                  |  7 ++---
 .../student-dashboard/StudentStoriesPage.tsx  | 29 ++++++++++++++-----
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/pages/student-dashboard/StoryPage.tsx b/src/pages/student-dashboard/StoryPage.tsx
index 79a2e7a..90ec26b 100644
--- a/src/pages/student-dashboard/StoryPage.tsx
+++ b/src/pages/student-dashboard/StoryPage.tsx
@@ -293,6 +293,7 @@ function RecordingHistoryCard({ recording }: { recording: StoryRecording }) {
                 text={recording.transcription || 'Transcrição não disponível'}
                 isUpperCase={isUpperCase}
                 className="text-sm text-gray-600 whitespace-pre-wrap"
+                highlightSyllables={isHighlighted}
               />
             </div>
           </div>
diff --git a/src/pages/student-dashboard/StudentDashboardPage.tsx b/src/pages/student-dashboard/StudentDashboardPage.tsx
index b0fea81..22b77bd 100644
--- a/src/pages/student-dashboard/StudentDashboardPage.tsx
+++ b/src/pages/student-dashboard/StudentDashboardPage.tsx
@@ -77,7 +77,7 @@ export function StudentDashboardPage() {
           .eq('student_id', session.user.id)
           .eq('story_pages.page_number', 1) // Garante que pegamos a primeira página
           .order('created_at', { ascending: false })
-          .limit(3);
+          .limit(6);
 
         if (error) throw error;
         setRecentStories(data || []);
@@ -252,10 +252,7 @@ export function StudentDashboardPage() {
                 {story.cover && (
                   <div className="relative aspect-video">
                     <img
-                      src={supabase.storage
-                        .from('story-images')
-                        .getPublicUrl(story.cover.image_url).data.publicUrl + 
-                        `?width=400&height=300&quality=80&format=webp`}
+                      src={`${story.cover[0].image_url}?width=400&height=300&quality=80&format=webp`}
                       alt={story.title}
                       className="w-full h-48 object-cover"
                       loading="lazy"
diff --git a/src/pages/student-dashboard/StudentStoriesPage.tsx b/src/pages/student-dashboard/StudentStoriesPage.tsx
index 3c96bcb..1358ae7 100644
--- a/src/pages/student-dashboard/StudentStoriesPage.tsx
+++ b/src/pages/student-dashboard/StudentStoriesPage.tsx
@@ -25,8 +25,16 @@ export function StudentStoriesPage() {
 
         const query = supabase
           .from('stories')
-          .select('*')
-          .eq('student_id', session.user.id);
+          .select(`
+            *,
+            pages:story_pages (
+              image_url
+            )
+          `)
+          .eq('student_id', session.user.id)
+          .order('created_at', { ascending: false })
+          .order('page_number', { foreignTable: 'story_pages', ascending: true })
+          .limit(1, { foreignTable: 'story_pages' });
 
         if (statusFilter !== 'all') {
           query.eq('status', statusFilter);
@@ -197,16 +205,21 @@ export function StudentStoriesPage() {
                 className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden cursor-pointer hover:shadow-md transition"
                 onClick={() => navigate(`/aluno/historias/${story.id}`)}
               >
-                {story.cover && (
+                {!story.pages?.[0]?.image_url && (
+                  <div className="bg-gray-100 aspect-video flex items-center justify-center">
+                    <BookOpen className="h-12 w-12 text-gray-400" />
+                  </div>
+                )}
+                {story.pages?.[0]?.image_url && (
                   <div className="relative aspect-video">
                     <img
-                      src={supabase.storage
-                        .from('story-images')
-                        .getPublicUrl(story.cover.image_url).data.publicUrl + 
-                        `?width=400&height=300&quality=80&format=webp`}
-                      alt={story.title}
+                      src={story.pages[0].image_url}
+                      alt={`Capa da história: ${story.title}`}
                       className="w-full h-48 object-cover"
                       loading="lazy"
+                      onError={(e) => {
+                        e.currentTarget.style.display = 'none';
+                      }}
                     />
                   </div>
                 )}