fix: Mudando o botão de gravação de lugar

src/components/story/AudioRecorder.tsx

@@ -174,7 +174,7 @@ export function AudioRecorder({
 
   return (
     <div className={cn(
-      "p-4 bg-white rounded-lg shadow",
+      "",
       focusModeActive && "bg-purple-50"
     )}>
       <div className="flex items-center gap-4 mb-4">

src/pages/student-dashboard/StoryPage.tsx

@@ -768,21 +768,43 @@ export function StoryPage() {
               </>
             )}
           </button>
-          
+
-          <TextCaseToggle
+          <AudioRecorder
-            isUpperCase={isUpperCase}
+            storyId={id || ''}
-            onToggle={toggleUppercase}
+            studentId={session?.user?.id || ''}
-            isLoading={isLoading}
+            onAudioUploaded={(audioUrl) => {
+              const newRecording: StoryRecording = {
+                id: crypto.randomUUID(),
+                audio_url: audioUrl,
+                created_at: new Date().toISOString(),
+                processed_at: null,
+                fluency_score: 0,
+                pronunciation_score: 0,
+                accuracy_score: 0,
+                comprehension_score: 0,
+                words_per_minute: 0,
+                pause_count: 0,
+                error_count: 0,
+                self_corrections: 0,
+                strengths: [],
+                improvements: [],
+                suggestions: '',
+                transcription: ''
+              };
+              setRecordings(prev => [newRecording, ...prev]);
+              
+              if (focusMode.isActive) {
+                handleFocusModeToggle();
+              }
+            }}
+            onRecordingStart={handleRecordingStart}
+            onRecordingStop={handleRecordingStop}
+            focusModeActive={focusMode.isActive}
+            onFocusModeToggle={handleFocusModeToggle}
           />
-          <button
+          
-            onClick={toggleSyllables}
+          
-            className="flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors text-gray-600 hover:text-gray-900 hover:bg-gray-100 border border-gray-200"
+        {/*
-          >
-            <Type className="h-4 w-4" />
-            <span className="text-sm font-medium">
-              {isSyllablesEnabled ? 'Desativar Sílabas' : 'Ativar Sílabas'}
-            </span>
-          </button>
           <button
             onClick={handleShare}
             className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900"
@@ -790,6 +812,8 @@ export function StoryPage() {
             <Share2 className="h-5 w-5" />
             Compartilhar
           </button>
+        */}
+
         </div>
       </div>
 
@@ -890,47 +914,15 @@ export function StoryPage() {
         )}
 
         {/* 6. Controle de Gravação */}
+        {/* 
         <div>
           <div className="flex items-center justify-between">
             <h2 className="text-lg font-semibold text-gray-900">
               {focusMode.isActive ? "Modo Foco Ativado" : "Gravação de Áudio"}
             </h2>
-            <AudioRecorder
-              storyId={story.id}
-              studentId={session?.user?.id || ''}
-              onAudioUploaded={(audioUrl) => {
-                const newRecording: StoryRecording = {
-                  id: crypto.randomUUID(),
-                  audio_url: audioUrl,
-                  created_at: new Date().toISOString(),
-                  processed_at: null,
-                  fluency_score: 0,
-                  pronunciation_score: 0,
-                  accuracy_score: 0,
-                  comprehension_score: 0,
-                  words_per_minute: 0,
-                  pause_count: 0,
-                  error_count: 0,
-                  self_corrections: 0,
-                  strengths: [],
-                  improvements: [],
-                  suggestions: '',
-                  transcription: ''
-                };
-                setRecordings(prev => [newRecording, ...prev]);
-                
-                // Desativar modo foco após finalizar gravação
-                if (focusMode.isActive) {
-                  handleFocusModeToggle();
-                }
-              }}
-              onRecordingStart={handleRecordingStart}
-              onRecordingStop={handleRecordingStop}
-              focusModeActive={focusMode.isActive}
-              onFocusModeToggle={handleFocusModeToggle}
-            />
           </div>
         </div>
+        */}
       </div>
 
       {/* Dashboard de métricas */}