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:
@@ -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;");
|
||||
|
||||
Reference in New Issue
Block a user