Improve screen

This commit is contained in:
2026-05-01 20:53:36 +02:00
parent 40bdf95e99
commit 4b715ba408
2 changed files with 96 additions and 21 deletions

View File

@@ -211,6 +211,7 @@ function TutorApp({ currentUser, onLogout }) {
const [programLessons, setProgramLessons] = useState([])
const [programStatus, setProgramStatus] = useState(null)
const [studentProgram, setStudentProgram] = useState(null)
const [activeAssetIndex, setActiveAssetIndex] = useState(0)
const [progressPanelOpen, setProgressPanelOpen] = useState(false)
const [settingsPanelOpen, setSettingsPanelOpen] = useState(false)
const mediaRecorderRef = useRef(null)
@@ -319,6 +320,10 @@ function TutorApp({ currentUser, onLogout }) {
}
}, [selectedVoiceProfileId])
useEffect(() => {
setActiveAssetIndex(0)
}, [studentProgram?.id])
useEffect(() => {
loadVoiceProfiles()
return () => {
@@ -932,6 +937,8 @@ function TutorApp({ currentUser, onLogout }) {
const lastAssistantMessage = [...messages].reverse().find((message) => message.role === 'assistant')
const lastUserMessage = [...messages].reverse().find((message) => message.role === 'user')
const activeLessonTitle = studentProgram?.title || lessonFocus?.label || 'Cours du jour'
const lessonAssets = studentProgram?.assets || []
const activeAsset = lessonAssets[activeAssetIndex] || lessonAssets[0] || null
const lessonSummary = lastAssistantMessage?.content || 'Aucune ancienne séance trouvée pour le moment. Professeur TOP commencera par une reprise courte.'
const lastStudentWork = lastUserMessage?.content || 'Aucune réponse récente enregistrée.'
const nextLessonAdvice = studentProgram
@@ -1020,17 +1027,43 @@ function TutorApp({ currentUser, onLogout }) {
</header>
<section className="lesson-display">
<span className="stage-label">Professeur TOP</span>
<div className="lesson-display-head">
<span className="stage-label">Professeur TOP</span>
{activeAsset && (
<span className="asset-counter">
Fiche {activeAssetIndex + 1}/{lessonAssets.length}
</span>
)}
</div>
{currentInstruction ? (
<p>{currentInstruction}</p>
<p className="teacher-transcript">{currentInstruction}</p>
) : (
<p className="muted">Professeur TOP prépare la suite de la leçon.</p>
<p className="muted teacher-transcript">Professeur TOP prépare la suite de la leçon.</p>
)}
{studentProgram?.assets?.length > 0 && (
<div className="lesson-assets" aria-label="Fiches de leçon">
{studentProgram.assets.map((asset) => (
<img key={asset.path} src={asset.url} alt={asset.title} />
))}
{activeAsset && (
<div className="lesson-asset-view" aria-label="Fiche de leçon active">
<div className="lesson-asset-toolbar">
<strong>{activeAsset.title}</strong>
<div className="lesson-asset-actions">
<button
type="button"
className="secondary-button"
onClick={() => setActiveAssetIndex((index) => Math.max(index - 1, 0))}
disabled={activeAssetIndex === 0}
>
Précédente
</button>
<button
type="button"
className="secondary-button"
onClick={() => setActiveAssetIndex((index) => Math.min(index + 1, lessonAssets.length - 1))}
disabled={activeAssetIndex >= lessonAssets.length - 1}
>
Suivante
</button>
</div>
</div>
<img src={activeAsset.url} alt={activeAsset.title} />
</div>
)}
</section>