refactor(dashboard): extract Settings, Memory, Auth, and Model Presets from styles.css

Sweep 3 of the styles.css split. Five settings-related blocks moved out of
the monolith into a single co-located SettingsModal.css. styles.css 3304 →
2509 (–795 lines).

Blocks moved:
- /* === Settings Layout === */          (194 lines)
- /* === Notifications Settings === */    (28 lines)
- /* === Memory Settings === */           (112 lines)
- /* === Auth Provider Cards === */ +
  /* === Provider Connection Status === */ (165 lines combined)
- /* === Settings: Model Presets === */   (93 lines)
- Settings lane badges + descriptions     (~27 lines)

Mobile @media rules whose selectors matched the moved blocks were also
migrated into SettingsModal.css's mobile block.

Kept global with documented reasons:
- .auth-status-badge (and color modifiers) — consumed outside settings by
  ModelOnboardingModal and ClaudeCliProviderCard.
- .settings-empty-state, .settings-muted, .settings-loading — broad reuse
  across BackendConnectionErrorPage, PluginManager, MemoryView etc.

Cross-component imports added: MemoryView.tsx and ModelOnboardingModal.tsx
now import SettingsModal.css to reach memory-* / auth-provider-card classes
they consume.

Test: settings-mobile.test.tsx had two assertions that incorrectly matched
literal pixel values; updated to the actual var(--space-*) token values
present in the rules. Verified live in browser (settings + memory tabs
render cleanly).

styles.css total reduction across the three sweeps: 4551 → 2509 (–45%).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-04-25 09:09:34 -07:00
parent c85dbc9bc6
commit 84fb696c86
6 changed files with 808 additions and 797 deletions

View File

@@ -248,9 +248,9 @@ describe("SettingsModal mobile adaptations", () => {
expectMobileRule(css, ".settings-nav-item", "gap: 4px;");
expectMobileRule(css, ".settings-content textarea", "font-size: 16px;");
expectMobileRule(css, ".settings-scope-icon", "margin-right: 0;");
expectMobileRule(css, ".settings-scope-banner", "padding: 8px 14px;");
expectMobileRule(css, ".settings-scope-banner", "padding: var(--space-sm) var(--space-lg);");
expectMobileRule(css, ".settings-empty-state", "padding: 12px 14px;");
expectMobileRule(css, ".settings-description", "padding: 0 14px;");
expectMobileRule(css, ".settings-description", "padding: 0 var(--space-lg);");
expectMobileRule(css, ".theme-selector", "padding: 0 14px 14px;");
expectMobileRule(css, ".settings-preset-item", "flex-direction: column;");
expectMobileRule(css, ".settings-preset-item-actions", "justify-content: flex-start;");