fix: keep all tabs mounted, switch via CSS display instead of unmount

All 4 tabs (Dashboard, Studio, Shell, Config) are now always mounted and toggled via .tab-hidden (display:none). This preserves: - Dashboard graph history across tab switches - Terminal session state and progress - Studio chat context - Config form state Dashboard polling pauses after 3 ticks when hidden to save resources and auto-resumes when the tab becomes visible again. 💘 Generated with Crush Assisted-by: GLM-5.1 via Crush <crush@charm.land>
refactor(config): locale panel with edit/save flow like profile
2026-04-23 21:34:59 +02:00 · 2026-04-23 21:30:02 +02:00 · 2026-04-23 21:29:07 +02:00
6 changed files with 131 additions and 71 deletions
--- a/web/src/components/App.jsx
+++ b/web/src/components/App.jsx
@@ -92,16 +92,6 @@ export default function App() {
    config: [],
  }), [layout, t])

-  const renderContent = () => {
-    switch (activeTab) {
-      case 'dash': return <Dashboard api={api} refreshRef={dashRefreshRef} />
-      case 'studio': return <Studio api={api} />
-      case 'shell': return <Shell api={api} />
-      case 'config': return <Config api={api} />
-      default: return null
-    }
-  }
-
  return (
    <div className="app-layout">
      <header className="header">
@@ -143,8 +133,11 @@ export default function App() {
        </span>
      </header>

-      <main className="content fade-in" key={`${activeTab}-${TABS.length}`}>
-        {renderContent()}
+      <main className="content">
+        <div className={activeTab === 'dash' ? '' : 'tab-hidden'}><Dashboard api={api} refreshRef={dashRefreshRef} /></div>
+        <div className={activeTab === 'studio' ? '' : 'tab-hidden'}><Studio api={api} /></div>
+        <div className={activeTab === 'shell' ? '' : 'tab-hidden'}><Shell api={api} /></div>
+        <div className={activeTab === 'config' ? '' : 'tab-hidden'}><Config api={api} /></div>
      </main>

      <footer className="statusbar">
--- a/web/src/components/Config.jsx
+++ b/web/src/components/Config.jsx
@@ -220,28 +220,47 @@ function PanelProfile({ config, editProfile, profileForm, setProfileForm, setEdi

  if (!profile) {
    return (
-      <div className="config-card">
-        <div className="empty-state">{t('config.loadingProfile')}</div>
+      <div className="config-profile-center">
+        <div className="config-card">
+          <div className="empty-state">{t('config.loadingProfile')}</div>
+        </div>
      </div>
    )
  }

+  const personalKeys = Object.entries(profile).filter(([k, v]) => k !== 'preferences' && typeof v !== 'object')
+  const personalObj = Object.fromEntries(personalKeys)
+  const preferences = profile.preferences || null
+
  return (
-    <div className="config-card">
-      <RenderFields obj={profile} path="" editing={editProfile} onChange={updateField} t={t} />
-      <div className="config-card-actions">
-        {editProfile ? (
-          <>
-            <button className="primary sm" onClick={handleSaveProfile}>{t('config.save')}</button>
-            <button className="ghost sm" onClick={() => setEditProfile(false)}>{t('config.cancel')}</button>
-          </>
+    <div className="config-profile-center">
+      <div className="config-card">
+        <div className="section-title">{t('config.profileInfo') || 'Informations personnelles'}</div>
+        <RenderFields obj={personalObj} path="" editing={editProfile} onChange={updateField} t={t} />
+      </div>
+      <div className="config-card">
+        <div className="section-title">{t('config.profilePrefs') || 'Préférences'}</div>
+        {preferences ? (
+          <RenderFields obj={preferences} path="preferences" editing={editProfile} onChange={updateField} t={t} />
        ) : (
-          <button className="primary sm" onClick={() => {
-            setProfileForm(config.profile ? JSON.parse(JSON.stringify(config.profile)) : {})
-            setEditProfile(true)
-          }}>{t('config.editProfile')}</button>
+          <div className="config-card-row"><span className="config-card-value" style={{ color: 'var(--text-disabled)' }}>—</span></div>
        )}
      </div>
+      <div className="config-card">
+        <div className="config-card-actions" style={{ justifyContent: 'center' }}>
+          {editProfile ? (
+            <>
+              <button className="primary sm" onClick={handleSaveProfile}>{t('config.save')}</button>
+              <button className="ghost sm" onClick={() => setEditProfile(false)}>{t('config.cancel')}</button>
+            </>
+          ) : (
+            <button className="primary sm" onClick={() => {
+              setProfileForm(config.profile ? JSON.parse(JSON.stringify(config.profile)) : {})
+              setEditProfile(true)
+            }}>{t('config.editProfile')}</button>
+          )}
+        </div>
+      </div>
    </div>
  )
 }
@@ -249,19 +268,10 @@ function PanelProfile({ config, editProfile, profileForm, setProfileForm, setEdi
 function RenderFields({ obj, path, editing, onChange, t }) {
  if (!obj || typeof obj !== 'object') return null

-  return Object.entries(obj).map(([key, value]) => {
+  return Object.entries(obj).filter(([, v]) => v === null || typeof v !== 'object').map(([key, value]) => {
    const fieldPath = path ? `${path}.${key}` : key
    const label = getFieldLabel(key, t)

-    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
-      return (
-        <div key={key} className="config-card-group">
-          <span className="config-card-group-label">{label}</span>
-          <RenderFields obj={value} path={fieldPath} editing={editing} onChange={onChange} t={t} />
-        </div>
-      )
-    }
-
    if (editing) {
      if (typeof value === 'boolean') {
        return (
@@ -461,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)

@@ -472,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}`)
@@ -480,41 +497,67 @@ 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-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)}
-            >
-              {lang.name}
-            </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>
-      <div className="config-card-group">
-        <span className="config-card-group-label">{t('config.keyboardLayout')}</span>
-        <div className="chip-row">
-          {layouts.map(l => (
-            <div
-              key={l.id}
-              className={`chip ${keyboard === l.id ? 'active' : ''}`}
-              onClick={() => setKeyboard(l.id)}
-            >
-              {l.name}
+      {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 ${draftLang === lang.id ? 'active' : ''}`}
+                  onClick={() => setDraftLang(lang.id)}
+                >
+                  {lang.name}
+                </div>
+              ))}
            </div>
-          ))}
+          </div>
+          <div className="config-card-group">
+            <span className="config-card-group-label">{t('config.keyboardLayout')}</span>
+            <div className="chip-row">
+              {layouts.map(l => (
+                <div
+                  key={l.id}
+                  className={`chip ${draftKbd === l.id ? 'active' : ''}`}
+                  onClick={() => setDraftKbd(l.id)}
+                >
+                  {l.name}
+                </div>
+              ))}
+            </div>
+          </div>
+        </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 className="config-card-actions">
-        <button className="primary sm" onClick={handleSave} disabled={saving}>
-          {saving ? t('config.saving') : t('config.save')}
-        </button>
      </div>
    </div>
  )
--- a/web/src/components/Dashboard.jsx
+++ b/web/src/components/Dashboard.jsx
@@ -3,6 +3,9 @@ import { useI18n } from '../i18n'

 const MAX_POINTS = 30

+const POLL_INTERVAL = 5000
+const MAX_IDLE_POLLS = 3
+
 function MiniGraph({ data, max, color, label, unit }) {
  if (!data || data.length < 2) return <div className="dash-graph-empty">collecting...</div>
  const m = max || Math.max(...data, 1)
@@ -71,8 +74,19 @@ export default function Dashboard({ api, refreshRef }) {
  useEffect(() => {
    loadData()
    if (refreshRef) refreshRef.current = loadData
-    const iv = setInterval(loadData, 5000)
-    return () => clearInterval(iv)
+    let active = true
+    let idleTicks = 0
+    const iv = setInterval(() => {
+      const hidden = document.querySelector('.dash-grid')?.closest('.tab-hidden')
+      if (hidden) {
+        idleTicks++
+        if (idleTicks >= MAX_IDLE_POLLS) return
+      } else {
+        idleTicks = 0
+      }
+      if (active) loadData()
+    }, POLL_INTERVAL)
+    return () => { active = false; clearInterval(iv) }
  }, [loadData, refreshRef])

  const minimax = (quota || []).find(p => p.name === 'minimax')
--- a/web/src/i18n/en.js
+++ b/web/src/i18n/en.js
@@ -182,6 +182,8 @@ const en = {
    installed: 'Installed',
    missing: 'Missing',
    editProfile: 'Edit',
+    profileInfo: 'Personal Info',
+    profilePrefs: 'Preferences',
    cancel: 'Cancel',
    editProvider: 'Configure',
    validateKey: 'Validate',
--- a/web/src/i18n/fr.js
+++ b/web/src/i18n/fr.js
@@ -182,6 +182,8 @@ const fr = {
    installed: 'Install\u00e9',
    missing: 'Manquant',
    editProfile: 'Modifier',
+    profileInfo: 'Informations personnelles',
+    profilePrefs: 'Préférences',
    editProvider: 'Configurer',
    validateKey: 'Valider',
    validating: 'V\u00e9rification...',
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -154,7 +154,8 @@ input::placeholder { color: var(--text-disabled); }

 .header-clock { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 600; }

-.content { flex: 1; overflow: hidden; }
+.content { flex: 1; overflow: hidden; position: relative; }
+.tab-hidden { display: none; }

 .statusbar {
  height: 28px;
@@ -435,6 +436,10 @@ input::placeholder { color: var(--text-disabled); }

 .config-panel-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
 .config-panel-body { flex: 1; overflow-y: auto; padding: 16px 28px 28px; }
+.config-profile-center {
+  max-width: 540px; margin: 0 auto; width: 100%;
+  display: flex; flex-direction: column; gap: 12px;
+}

 .config-card {
  background: var(--bg-card); border: 1px solid var(--border);
@@ -602,10 +607,10 @@ input::placeholder { color: var(--text-disabled); }
 }
 .dash-proc-name {
  font-size: 11px; font-weight: 600; color: var(--text-primary);
-  font-family: var(--font-mono);
+  font-family: var(--font-mono); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .dash-proc-res {
-  font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary);
+  font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); flex-shrink: 0;
 }

 /* Commands */
@@ -622,6 +627,7 @@ input::placeholder { color: var(--text-disabled); }
 .dash-cmd-text {
  font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  flex: 1; min-width: 0;
 }

 /* Services */