fix(onboarding): auto-save on done step, keyboard nav, error feedback

- Trigger save automatically when reaching done step
- Add Escape to go back, Enter to advance (works in text fields)
- Add back button visible between step 1 and last step
- Fix accent encoding in done message
- Show saving state and error with retry button

💘 Generated with Crush

Assisted-by: MiniMax-M2.7 via Crush <crush@charm.land>

web/src/components/OnboardingWizard.jsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
-import { Sparkles, ArrowRight } from 'lucide-react'
+import { Sparkles, ArrowRight, ArrowLeft } from 'lucide-react'
 import { useI18n, LANGUAGES } from '../i18n'
 import { getLayoutList } from '../i18n/keyboards'
 
@@ -24,6 +24,7 @@ export default function OnboardingWizard({ api, onComplete }) {
     editor: '',
   })
   const [saving, setSaving] = useState(false)
+  const [error, setError] = useState(null)
 
   const current = STEPS[step]
   const layouts = getLayoutList()
@@ -32,8 +33,28 @@ export default function OnboardingWizard({ api, onComplete }) {
     if (step < STEPS.length - 1) setStep(step + 1)
   }
 
+  const goPrev = () => {
+    if (step > 0) setStep(step - 1)
+  }
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === 'Escape') { goPrev(); return }
+      if (e.key === 'Enter' && current.key !== 'done') { e.preventDefault(); goNext() }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [step, current])
+
+  useEffect(() => {
+    if (current.key === 'done' && !saving) {
+      handleSave()
+    }
+  }, [step])
+
   const handleSave = async () => {
     setSaving(true)
+    setError(null)
     try {
       await api.saveProfile({
         name: answers.name,
@@ -46,9 +67,9 @@ export default function OnboardingWizard({ api, onComplete }) {
       })
       onComplete()
     } catch (err) {
-      console.error(err)
+      setError(err.message || 'Erreur lors de la sauvegarde')
+      setSaving(false)
     }
-    setSaving(false)
   }
 
   return (
@@ -149,20 +170,37 @@ export default function OnboardingWizard({ api, onComplete }) {
 
           {current.key === 'done' && (
             <div className="onboarding-step">
-              <div className="onboarding-title">C'est parti ! 🚀</div>
+              {saving ? (
-              <div className="onboarding-desc">
+                <>
-                Votre profil est configur\u00e9. Vous pouvez toujours ajuster les param\u00e8tres dans l'onglet Configuration.
+                  <div className="onboarding-title">Configuration en cours...</div>
-              </div>
+                  <div className="onboarding-desc">Sauvegarde de vos préférences.</div>
+                </>
+              ) : error ? (
+                <>
+                  <div className="onboarding-title" style={{ color: 'var(--error)' }}>Erreur</div>
+                  <div className="onboarding-desc" style={{ color: 'var(--error)' }}>{error}</div>
+                  <button className="primary" style={{ alignSelf: 'flex-start', marginTop: 8 }} onClick={() => handleSave()}>Réessayer</button>
+                </>
+              ) : (
+                <>
+                  <div className="onboarding-title">C'est parti ! 🚀</div>
+                  <div className="onboarding-desc">
+                    Votre profil est configuré. Vous pouvez toujours ajuster les paramètres dans l'onglet Configuration.
+                  </div>
+                </>
+              )}
             </div>
           )}
         </div>
 
         <div className="onboarding-footer">
-          {current.key === 'done' ? (
+          {step > 0 && step < STEPS.length - 1 && (
-            <button className="primary" onClick={handleSave} disabled={saving}>
+            <button className="ghost" onClick={goPrev}>
-              {saving ? '...' : 'Commencer'}
+              <ArrowLeft size={14} /> Précédent
             </button>
-          ) : (
+          )}
+          <div style={{ flex: 1 }} />
+          {step < STEPS.length - 1 && (
             <button className="primary" onClick={goNext}>
               Suivant <ArrowRight size={14} />
             </button>