Settings: Move from modal to chrome surface

[shaunandrews]

Proposed Changes

Right now, app settings live in a small floating modal. It works, but it's cramped — and as we add more settings (AI agents, skills, MCP, and whatever comes next), that modal is going to feel increasingly inadequate.

This PR moves settings out of the modal and onto a full-screen "chrome surface." The chrome is the dark background area behind the sidebar and content frame — it's always been there, we just haven't used it for anything interactive before.

When you open settings, the sidebar slides left and the content frame slides right, revealing the settings panel underneath. It gets the full viewport to breathe. Closing settings reverses the animation and everything slides back into place.

What's here:

• SettingsPanelProvider — shared context for settings open/close state, replaces the old IPC-listener + local state approach
• SettingsPanel — new two-column layout (nav + content) rendered directly on the chrome surface, reusing all existing tab components
• Chrome surface design tokens — --color-chrome-* CSS custom properties and matching Tailwind utilities, plus a .settings-chrome-surface class that remaps both Studio and WordPress component tokens for dark-background rendering
• Choreographed transitions — sidebar, frame, and topbar elements animate in coordination using matched easing curves
• Sidebar toggle refactor — now uses transform + negative margin instead of width transitions, which eliminates text reflow during collapse

What's NOT here:

• Tests haven't been updated for the new component structure
• The old UserSettings modal component still exists (unused) — can be removed once this direction is confirmed
• Windows testing — the titlebar spacing may need platform-specific adjustments

Future thinking:

• New site flow could get a similar treatment. It currently uses a white surface, but sliding the chrome open for that flow too would give us a consistent interaction pattern for full-screen tasks.
• Chrome theming — the chrome color is hardcoded dark right now. Down the road we could make it theme-aware (lighter in light mode) or even let users pick a custom color to personalize their Studio. The token architecture in this PR is set up to support that.

How AI was used in this PR

This was a vibe-coded exploration with Claude Code. I directed the design and interaction decisions, Claude helped implement.

Testing Instructions

• Open settings via the gear icon, Cmd+,, or the "Howdy, [name]" button
• Verify sidebar and frame slide away smoothly, settings panel appears on the dark surface
• Close via the Close button, Escape, or Cmd+, again — everything should slide back
• Toggle the sidebar off, then open settings — sidebar should be fully hidden, no footer leaking
• Check all settings tabs (General, Account, and Skills/MCP if feature-flagged) render correctly on the dark surface
• Verify select dropdowns, toggles, progress bars, and buttons have proper dark-surface styling

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?