Merge branch 'develop'

web/src/components/Config.jsx

@@ -471,6 +471,10 @@ function PanelUpdates({ updates, checking, updating, needsUpdateCount, installed
 }
 
 function PanelLocale({ language, keyboard, layouts, api, t }) {
+  const { setLanguage, setKeyboard } = useI18n()
+  const [editLocale, setEditLocale] = useState(false)
+  const [draftLang, setDraftLang] = useState(language)
+  const [draftKbd, setDraftKbd] = useState(keyboard)
   const [saving, setSaving] = useState(false)
   const [toast, setToast] = useState(null)
 
@@ -482,7 +486,10 @@ function PanelLocale({ language, keyboard, layouts, api, t }) {
   const handleSave = async () => {
     setSaving(true)
     try {
-      await api.savePreferences({ language, keyboard_layout: keyboard })
+      await api.savePreferences({ language: draftLang, keyboard_layout: draftKbd })
+      setLanguage(draftLang)
+      setKeyboard(draftKbd)
+      setEditLocale(false)
       showToast(t('config.saved'))
     } catch (err) {
       showToast(`${t('config.error')}: ${err.message}`)
@@ -490,17 +497,32 @@ function PanelLocale({ language, keyboard, layouts, api, t }) {
     setSaving(false)
   }
 
+  const currentLang = LANGUAGES.find(l => l.id === language)
+  const currentKbd = layouts.find(l => l.id === keyboard)
+
   return (
-    <div className="config-card">
+    <div className="config-profile-center">
       {toast && <div className="config-toast">{toast}</div>}
+      <div className="config-card">
+        <div className="config-card-row">
+          <span className="config-card-label">{t('config.language')}</span>
+          <span className="config-card-value">{currentLang?.name || language}</span>
+        </div>
+        <div className="config-card-row">
+          <span className="config-card-label">{t('config.keyboardLayout')}</span>
+          <span className="config-card-value">{currentKbd?.name || keyboard}</span>
+        </div>
+      </div>
+      {editLocale && (
+        <div className="config-card">
           <div className="config-card-group">
             <span className="config-card-group-label">{t('config.language')}</span>
             <div className="chip-row">
               {LANGUAGES.map(lang => (
                 <div
                   key={lang.id}
-              className={`chip ${language === lang.id ? 'active' : ''}`}
-              onClick={() => setLanguage(lang.id)}
+                  className={`chip ${draftLang === lang.id ? 'active' : ''}`}
+                  onClick={() => setDraftLang(lang.id)}
                 >
                   {lang.name}
                 </div>
@@ -513,18 +535,29 @@ function PanelLocale({ language, keyboard, layouts, api, t }) {
               {layouts.map(l => (
                 <div
                   key={l.id}
-              className={`chip ${keyboard === l.id ? 'active' : ''}`}
-              onClick={() => setKeyboard(l.id)}
+                  className={`chip ${draftKbd === l.id ? 'active' : ''}`}
+                  onClick={() => setDraftKbd(l.id)}
                 >
                   {l.name}
                 </div>
               ))}
             </div>
           </div>
-      <div className="config-card-actions">
+        </div>
+      )}
+      <div className="config-card">
+        <div className="config-card-actions" style={{ justifyContent: 'center' }}>
+          {editLocale ? (
+            <>
               <button className="primary sm" onClick={handleSave} disabled={saving}>
                 {saving ? t('config.saving') : t('config.save')}
               </button>
+              <button className="ghost sm" onClick={() => setEditLocale(false)}>{t('config.cancel')}</button>
+            </>
+          ) : (
+            <button className="primary sm" onClick={() => { setDraftLang(language); setDraftKbd(keyboard); setEditLocale(true) }}>{t('config.editProfile')}</button>
+          )}
+        </div>
       </div>
     </div>
   )