refactor: redesign Config as settings window with sidebar panels, remove system overview from Dashboard

- Config: sidebar navigation with 5 panels (Profile, AI Providers, Updates, Locale, Skills)
- Dashboard: remove duplicated system overview section, keep workflows and activity log
- New CSS for config window layout, cards, provider cards, update rows
- Add i18n panel keys (FR/EN)

💾 Generated with Crush

Assisted-by: GLM-5-Turbo via Crush <crush@charm.land>

web/src/styles/global.css

@@ -407,34 +407,93 @@ input::placeholder { color: var(--text-disabled); }
   display: flex; justify-content: flex-end; gap: 8px;
 }
 
-.config-layout { max-width: 840px; margin: 0 auto; padding: 24px; overflow-y: auto; height: 100%; position: relative; }
-.config-section { margin-bottom: 28px; }
-.config-section-title {
-  font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase;
-  letter-spacing: 1px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
-  display: flex; align-items: center; justify-content: space-between;
+.config-window { display: flex; height: 100%; overflow: hidden; }
+
+.config-sidebar {
+  width: 180px; background: var(--bg-surface); border-right: 1px solid var(--border);
+  display: flex; flex-direction: column; padding: 12px 8px; gap: 2px; flex-shrink: 0;
+  overflow-y: auto;
 }
-.field-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px; }
-.field-row:last-child { border-bottom: none; }
-.field-label { width: 140px; flex-shrink: 0; color: var(--text-tertiary); font-size: 13px; }
-.field-value { color: var(--text-primary); font-size: 14px; flex: 1; }
-.field-value.empty { color: var(--text-disabled); font-style: italic; }
-.config-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; color: var(--text-primary); font-size: 13px; outline: none; font-family: var(--font-mono); }
-.config-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--border-accent); }
-.config-form-actions { display: flex; gap: 8px; padding: 12px 0 0 152px; }
-.config-actions-row { display: flex; gap: 8px; margin-bottom: 12px; }
-.config-stats { display: flex; gap: 8px; margin-bottom: 12px; }
+.config-sidebar-item {
+  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
+  border-radius: var(--radius); font-size: 13px; font-weight: 500;
+  color: var(--text-tertiary); cursor: pointer; transition: all 0.15s;
+  user-select: none;
+}
+.config-sidebar-item:hover { background: var(--bg-card); color: var(--text-primary); }
+.config-sidebar-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
+.config-sidebar-item svg { flex-shrink: 0; }
+
+.config-panel-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.config-panel-header {
+  padding: 20px 28px 0; flex-shrink: 0;
+}
+.config-panel-title {
+  font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0;
+}
+.config-panel-body { flex: 1; overflow-y: auto; padding: 16px 28px 28px; }
+
+.config-card {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 16px;
+}
+.config-card-row {
+  display: flex; align-items: center; padding: 10px 0;
+  border-bottom: 1px solid var(--border); gap: 16px;
+}
+.config-card-row:last-of-type { border-bottom: none; }
+.config-card-label { width: 130px; flex-shrink: 0; color: var(--text-tertiary); font-size: 13px; }
+.config-card-value { color: var(--text-primary); font-size: 14px; flex: 1; }
+.config-card-value.mono { font-family: var(--font-mono); }
+.config-card-value:not(.mono)[style*="—"] { color: var(--text-disabled); font-style: italic; }
+.config-card-actions { display: flex; gap: 8px; padding-top: 16px; }
+
+.config-form-field { margin-bottom: 14px; }
+.config-form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.3px; }
+.config-form-input {
+  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 8px 12px; color: var(--text-primary);
+  font-size: 13px; font-family: var(--font-mono); outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.config-form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--border-accent); }
+
+.config-card-group { margin-bottom: 20px; }
+.config-card-group:last-child { margin-bottom: 0; }
+.config-card-group-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
+
+.config-providers-list { display: flex; flex-direction: column; gap: 12px; }
+.provider-card-v2 {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 16px 20px; transition: border-color 0.2s;
+}
+.provider-card-v2:hover { border-color: var(--accent-dim); }
+.provider-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.provider-card-identity { display: flex; align-items: center; gap: 10px; }
+.provider-card-name { font-weight: 600; color: var(--text-primary); font-size: 14px; }
+.provider-card-actions { display: flex; gap: 8px; flex-shrink: 0; }
+.provider-card-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 8px; }
+.provider-card-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
+
+.config-update-controls {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
+}
+.config-update-stats { display: flex; gap: 8px; }
+.config-update-buttons { display: flex; gap: 8px; }
+
 .config-update-list { display: flex; flex-direction: column; gap: 2px; }
-.config-update-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius); }
-.config-update-row:hover { background: var(--bg-card); }
+.config-update-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); margin-bottom: 6px; }
+.config-update-row:hover { border-color: var(--accent-dim); }
 .config-update-info { display: flex; align-items: center; gap: 16px; flex: 1; }
 .config-update-name { color: var(--text-primary); font-weight: 600; font-size: 13px; min-width: 100px; }
 .config-update-versions { color: var(--text-tertiary); font-size: 12px; font-family: var(--font-mono); }
-.config-skill-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
+
+.config-skill-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
 .config-skill-row:last-child { border-bottom: none; }
 .config-skill-name { color: var(--text-primary); font-weight: 600; min-width: 120px; }
 .config-skill-desc { color: var(--text-tertiary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
+
 .config-toast {
   position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
   background: var(--accent); color: #fff; padding: 10px 24px; border-radius: var(--radius-lg);
@@ -442,15 +501,8 @@ input::placeholder { color: var(--text-disabled); }
   box-shadow: 0 4px 24px rgba(255, 0, 51, 0.3);
 }
 
-.provider-card {
-  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
-  padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between;
-  transition: border-color 0.2s;
-}
-.provider-card:hover { border-color: var(--accent-dim); }
-.provider-info { display: flex; flex-direction: column; gap: 4px; }
-.provider-name { font-weight: 600; color: var(--text-primary); font-size: 14px; }
-.provider-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); }
+.spin-icon { animation: spin 0.8s linear infinite; display: inline-block; vertical-align: middle; }
+.mono { font-family: var(--font-mono); }
 
 
 
@@ -480,11 +532,8 @@ input::placeholder { color: var(--text-disabled); }
 .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; }
 
 .dashboard-section {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 20px;
-  transition: border-color 0.2s;
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 20px; transition: border-color 0.2s;
 }
 .dashboard-section:hover { border-color: var(--accent-dim); }
 .dashboard-section.full-width { grid-column: 1 / -1; }
@@ -498,19 +547,6 @@ input::placeholder { color: var(--text-disabled); }
 
 .dashboard-notifications-inline { display: flex; flex-direction: column; gap: 2px; }
 
-.dashboard-tools { padding: 0; }
-.tools-compact { display: flex; flex-direction: column; gap: 2px; }
-.tool-compact-row {
-  display: flex; align-items: center; gap: 10px;
-  padding: 6px 12px; border-radius: var(--radius);
-  font-size: 13px; transition: background 0.1s;
-}
-.tool-compact-row:hover { background: var(--bg-card); }
-.badge.sm { padding: 1px 5px; font-size: 10px; }
-.tool-compact-name { color: var(--text-primary); font-weight: 500; flex: 1; }
-.tool-compact-ver { color: var(--text-tertiary); font-size: 11px; font-family: var(--font-mono); }
-.tool-compact-installed { color: var(--success); font-size: 11px; font-family: var(--font-mono); opacity: 0.7; }
-
 .dashboard-notifications { padding: 0; }
 .notif-row {
   display: flex; align-items: flex-start; gap: 12px;