directlx-claude-config/plans/memoized-splashing-book.md

Settings Pages: Improve & Visual Overhaul

Summary

Improve and visually overhaul the 5 existing Settings tabs, add a 6th Logging tab, expose backend fields missing from the frontend, and align styling with the app's design system (typography variables, blue gradient headers, card patterns, dark mode).

Files to Modify

File	Action
frontend/src/components/Settings/settings.ts	Add 5 missing fields to interface + defaults
frontend/src/components/Settings/Settings.svelte	Overhaul template + styles (details below)
frontend/src/app.css	Add shared color CSS variables to :root
frontend/src/App.svelte	Add Logging sidebar tab, add textarea dark mode rule

Step-by-Step

1. settings.ts - Add missing backend fields

Add to Settings interface and defaultSettings:

• showEmptyStates: boolean (default true) - Display tab
• requireAssignmentForProgress: boolean (default true) - Workflow tab
• slaWarningThresholdMinutes: number (default 30) - Workflow tab
• requirePasswordChangeDays: number (default 90) - Security tab
• ipWhitelist: string[] (default []) - Security tab

2. app.css - Add global color variables

Move from Settings.svelte scoped :global into :root:

--color-primary: #2563eb
--color-primary-hover: #1d4ed8
--color-danger: #d32f2f
--color-success: #2e7d32
--color-border: #e0e0e0
--color-text-primary: #1a1a1a
--color-text-secondary: #666
--color-bg-light: #fafbfc

3. Settings.svelte - Template improvements

Header: Remove local .header overrides - let global blue gradient apply. Restyle action buttons as white/transparent variants for visibility on blue background.

Each tab section: Upgrade .setting-section from flat dividers to mini-cards (subtle background, rounded corners, border). Add icons to <h3> headings.

New content per tab:

• Display: Add showEmptyStates checkbox
• Workflow: Add requireAssignmentForProgress checkbox, add SLA Configuration section with slaWarningThresholdMinutes
• Security: Add Password Policy section (requirePasswordChangeDays), add IP whitelist textarea (visible when ipWhitelistEnabled is true)
• Logging (new tab): Activity Logging toggle, Log Retention days, API Tracking toggle (all fields already in store but unexposed)

4. Settings.svelte - Style overhaul

Typography: Replace all hardcoded px font sizes with CSS variables:

• 28px h1 -> remove (global .header h1 handles it)
• 22px h2 -> var(--font-size-section-title)
• 16px h3 -> var(--font-size-card-title)
• 14px labels/body -> var(--font-size-body) / var(--font-size-label)
• 13px help text -> var(--font-size-caption)

Colors: Replace hardcoded colors with CSS variables from step 2.

Setting sections: Card-like sub-sections:

.setting-section {
  background: var(--color-bg-light);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--color-border);
}

Remove the :global { ... } block defining local CSS vars (moved to app.css).

5. App.svelte - Sidebar + dark mode

Add to settingsTabs array:

{ id: 'logging', label: 'Logging', icon: '📝' }

Add textarea to existing dark mode input rules (line ~773).

Add rendering for logging tab in the settings view section.

Verification

cd frontend && npm run build

Build should complete with no new errors. Visually: all settings tabs should render with blue gradient header, card-style sections, correct typography, and proper dark mode support.