Compare commits

...

2 Commits

Author SHA1 Message Date
Augustin
58f8cb0bd3 fix(config): per-provider form state to avoid field cross-talk
All checks were successful
Beta Release / beta (push) Successful in 38s
- providerForm is now keyed by provider name
- Each provider (minimax/glm/claude) has isolated form data
- Validation and save target the specific provider being edited

💘 Generated with Crush

Assisted-by: MiniMax-M2.7 via Crush <crush@charm.land>
2026-04-22 20:56:04 +02:00
Augustin
b52feccc17 fix(onboarding): auto-save on done step, keyboard nav, error feedback
All checks were successful
Beta Release / beta (push) Successful in 40s
- 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>
2026-04-22 20:53:12 +02:00
2 changed files with 72 additions and 27 deletions

View File

@@ -6,7 +6,6 @@ import { getLayoutList } from '../i18n/keyboards'
const PANELS = [ const PANELS = [
{ id: 'profile', icon: User }, { id: 'profile', icon: User },
{ id: 'providers', icon: Brain }, { id: 'providers', icon: Brain },
{ id: 'terminal', icon: Monitor },
{ id: 'updates', icon: RefreshCw }, { id: 'updates', icon: RefreshCw },
{ id: 'locale', icon: Globe }, { id: 'locale', icon: Globe },
{ id: 'skills', icon: Wrench }, { id: 'skills', icon: Wrench },
@@ -26,7 +25,7 @@ export default function Config({ api }) {
const [editProfile, setEditProfile] = useState(false) const [editProfile, setEditProfile] = useState(false)
const [editProvider, setEditProvider] = useState(null) const [editProvider, setEditProvider] = useState(null)
const [profileForm, setProfileForm] = useState({}) const [profileForm, setProfileForm] = useState({})
const [providerForm, setProviderForm] = useState({}) const [providerForm, setProviderForm] = useState({}) // keyed by provider name
const [toast, setToast] = useState(null) const [toast, setToast] = useState(null)
@@ -108,9 +107,11 @@ export default function Config({ api }) {
} }
} }
const handleSaveProvider = async () => { const handleSaveProvider = async (name) => {
const form = providerForm[name]
if (!form) return
try { try {
await api.saveProvider(providerForm) await api.saveProvider({ name, ...form })
setEditProvider(null) setEditProvider(null)
loadData() loadData()
showToast(t('config.saved')) showToast(t('config.saved'))
@@ -120,12 +121,15 @@ export default function Config({ api }) {
} }
const openProviderEdit = (p) => { const openProviderEdit = (p) => {
setProviderForm({ setProviderForm(prev => ({
name: p.name, ...prev,
api_key: p.apiKey || '', [p.name]: {
model: p.model || '', name: p.name,
base_url: p.baseURL || '', api_key: p.apiKey || '',
}) model: p.model || '',
base_url: p.baseURL || '',
},
}))
setEditProvider(p.name) setEditProvider(p.name)
} }
@@ -303,23 +307,26 @@ function PanelProviders({ providers, editProvider, providerForm, setProviderForm
className="config-form-input" className="config-form-input"
type="password" type="password"
placeholder={t('config.tokenPlaceholder')} placeholder={t('config.tokenPlaceholder')}
value={isEditing ? providerForm.api_key : ''} value={isEditing ? (providerForm[p.name]?.api_key || '') : ''}
onChange={e => { onChange={e => {
if (!isEditing) openProviderEdit(p) if (!isEditing) openProviderEdit(p)
setProviderForm(f => ({ ...f, api_key: e.target.value })) setProviderForm(prev => ({
...prev,
[p.name]: { ...(prev[p.name] || {}), api_key: e.target.value },
}))
}} }}
/> />
</div> </div>
<div className="provider-setup-token-actions"> <div className="provider-setup-token-actions">
<button <button
className="sm primary" className="sm primary"
disabled={validating === p.name || !providerForm.api_key} disabled={validating === p.name || !providerForm[p.name]?.api_key}
onClick={() => handleValidate(p.name, providerForm.api_key, providerForm.model, providerForm.base_url)} onClick={() => handleValidate(p.name, providerForm[p.name]?.api_key, providerForm[p.name]?.model, providerForm[p.name]?.base_url)}
> >
{validating === p.name ? t('config.validating') : t('config.validateKey')} {validating === p.name ? t('config.validating') : t('config.validateKey')}
</button> </button>
{isValidationTarget && validationStatus?.valid && ( {isValidationTarget && validationStatus?.valid && (
<button className="sm" onClick={handleSaveProvider}>{t('config.save')}</button> <button className="sm" onClick={() => handleSaveProvider(p.name)}>{t('config.save')}</button>
)} )}
</div> </div>
</div> </div>

View File

@@ -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 { useI18n, LANGUAGES } from '../i18n'
import { getLayoutList } from '../i18n/keyboards' import { getLayoutList } from '../i18n/keyboards'
@@ -24,6 +24,7 @@ export default function OnboardingWizard({ api, onComplete }) {
editor: '', editor: '',
}) })
const [saving, setSaving] = useState(false) const [saving, setSaving] = useState(false)
const [error, setError] = useState(null)
const current = STEPS[step] const current = STEPS[step]
const layouts = getLayoutList() const layouts = getLayoutList()
@@ -32,8 +33,28 @@ export default function OnboardingWizard({ api, onComplete }) {
if (step < STEPS.length - 1) setStep(step + 1) 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 () => { const handleSave = async () => {
setSaving(true) setSaving(true)
setError(null)
try { try {
await api.saveProfile({ await api.saveProfile({
name: answers.name, name: answers.name,
@@ -46,9 +67,9 @@ export default function OnboardingWizard({ api, onComplete }) {
}) })
onComplete() onComplete()
} catch (err) { } catch (err) {
console.error(err) setError(err.message || 'Erreur lors de la sauvegarde')
setSaving(false)
} }
setSaving(false)
} }
return ( return (
@@ -149,20 +170,37 @@ export default function OnboardingWizard({ api, onComplete }) {
{current.key === 'done' && ( {current.key === 'done' && (
<div className="onboarding-step"> <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> </div>
<div className="onboarding-footer"> <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> </button>
) : ( )}
<div style={{ flex: 1 }} />
{step < STEPS.length - 1 && (
<button className="primary" onClick={goNext}> <button className="primary" onClick={goNext}>
Suivant <ArrowRight size={14} /> Suivant <ArrowRight size={14} />
</button> </button>