Icone app

frontend/src/App.jsx

@@ -209,6 +209,7 @@ function TutorApp({ currentUser, onLogout }) {
   const [voiceProfiles, setVoiceProfiles] = useState([])
   const [selectedVoiceProfileId, setSelectedVoiceProfileId] = useState('')
   const [progressPanelOpen, setProgressPanelOpen] = useState(false)
+  const [settingsPanelOpen, setSettingsPanelOpen] = useState(false)
   const mediaRecorderRef = useRef(null)
   const mediaStreamRef = useRef(null)
   const recordedChunksRef = useRef([])
@@ -493,6 +494,7 @@ function TutorApp({ currentUser, onLogout }) {
     deactivateAutoListening(false)
     setSessionActive(false)
     setProgressPanelOpen(false)
+    setSettingsPanelOpen(false)
     setCurrentInstruction('')
     setAssessment(null)
     setAssessmentAnswer('')
@@ -942,6 +944,15 @@ function TutorApp({ currentUser, onLogout }) {
                 <h1>{lessonFocus?.label || 'Cours du jour'}</h1>
               </div>
               <div className="lesson-actions">
+                <button
+                  type="button"
+                  className="icon-button"
+                  aria-label="Parametres"
+                  title="Parametres"
+                  onClick={() => setSettingsPanelOpen(true)}
+                >
+                  ...
+                </button>
                 <button type="button" className="secondary-button" onClick={() => setProgressPanelOpen(true)}>
                   Progression
                 </button>
@@ -973,18 +984,6 @@ function TutorApp({ currentUser, onLogout }) {
                 }
                 placeholder={assessment ? 'Ta reponse au mini-test...' : 'Ecris ta reponse...'}
               />
-              <select
-                value={selectedVoiceProfileId}
-                onChange={(event) => setSelectedVoiceProfileId(event.target.value)}
-                title="Choisir la voix de Professeur TOP"
-              >
-                <option value="">Voix</option>
-                {voiceProfiles.map((profile) => (
-                  <option key={profile.id} value={profile.id}>
-                    {formatVoiceLabel(profile)}
-                  </option>
-                ))}
-              </select>
               <button type="button" onClick={startVoiceInput} disabled={isTranscribing}>
                 {isAutoListening ? 'Stop micro' : isTranscribing ? 'Transcription...' : 'Dicter'}
               </button>
@@ -1012,6 +1011,38 @@ function TutorApp({ currentUser, onLogout }) {
                 </aside>
               </div>
             )}
+
+            {settingsPanelOpen && (
+              <div className="progress-panel-backdrop" role="presentation" onClick={() => setSettingsPanelOpen(false)}>
+                <aside className="progress-panel card" role="dialog" aria-label="Parametres" onClick={(event) => event.stopPropagation()}>
+                  <div className="progress-panel-head">
+                    <h2>Parametres</h2>
+                    <button type="button" className="secondary-button" onClick={() => setSettingsPanelOpen(false)}>
+                      Fermer
+                    </button>
+                  </div>
+                  <label className="settings-field">
+                    <span>Voix de Professeur TOP</span>
+                    <select
+                      value={selectedVoiceProfileId}
+                      onChange={(event) => setSelectedVoiceProfileId(event.target.value)}
+                    >
+                      <option value="">Voix de Professeur TOP</option>
+                      {voiceProfiles.map((profile) => (
+                        <option key={profile.id} value={profile.id}>
+                          {formatVoiceLabel(profile)}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  {selectedVoiceProfile && (
+                    <p className="muted voice-note visible-status">
+                      Voix IA non humaine: {selectedVoiceProfile.label} - {selectedVoiceProfile.description}
+                    </p>
+                  )}
+                </aside>
+              </div>
+            )}
           </main>
         )}
       </div>