Skip to content

Agentic UI: Improve site menu button and dropdown contrast#4227

Open
bcotrim wants to merge 3 commits into
trunkfrom
mognet/stu-1989-site-menu-button-contrast
Open

Agentic UI: Improve site menu button and dropdown contrast#4227
bcotrim wants to merge 3 commits into
trunkfrom
mognet/stu-1989-site-menu-button-contrast

Conversation

@bcotrim

@bcotrim bcotrim commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Related issues

How AI was used in this PR

Implemented with Claude Code: ported the site-menu trigger/dropdown styling from the design-preview branch onto trunk (resolving overlap with #4191), and verified light/dark rendering in a browser harness before manual review. All changes were reviewed and visually tested by the author.

Proposed Changes

The site menu trigger (the button showing the site name/status that opens publish/preview/settings) sat on a near-transparent background, so it was easy to miss and didn't read as clickable. Its content also changed with sidebar state, since the site icon only appeared when the sidebar was collapsed.

  • The trigger now uses an inverted, solid fill that always contrasts with the surrounding panel — dark-on-light in light mode, light-on-dark in dark mode — using theme-adaptive --wpds-color-*-interactive-neutral-strong tokens.
  • The dropdown opens on the same inverted surface, so the button and its menu read as one connected control. The menu's wpds tokens are remapped locally, letting the existing row styles (labels, dividers, hover/disabled states) adapt without per-element overrides.
  • The site icon is always visible, so the button looks the same whether the sidebar is expanded or collapsed. The running/stopped status dot overlays the icon's corner and only shows when the sidebar is collapsed — the expanded sidebar already shows status.
  • The start/stop toggle now follows the menu surface. It previously keyed some colors off the OS color scheme, which landed backwards on the inverted surface (invisible thumb in dark mode).
  • New floating prop on the trigger controls the drop shadow: on for overlay placements (chat header), available to turn off for in-flow header rows.

Note: The actions from the menu are out of scope for this PR, my goal is to address the layout of the menu only.

Light Dark
image image

Testing Instructions

  1. Enable the Agentic UI beta and open a site.
  2. Check the site menu button in the chat header and in site settings: solid fill, site icon always visible, status dot on the icon corner only when the sidebar is collapsed.
  3. Open the dropdown: it should share the button's surface, with legible rows and a working start/stop toggle (running/stopped/stopping states).
  4. Repeat all of the above in light and dark mode.

Pre-merge Checklist

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

@bcotrim
bcotrim requested review from a team and katinthehatsite July 16, 2026 13:22
@bcotrim
bcotrim marked this pull request as ready for review July 16, 2026 13:23
@wpmobilebot

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing 7bc0c9a vs trunk

app-size

Metric trunk 7bc0c9a Diff Change
App Size (Mac) 1352.96 MB 1352.96 MB +0.00 MB ⚪ 0.0%

site-editor

Metric trunk 7bc0c9a Diff Change
load 1050 ms 1063 ms +13 ms ⚪ 0.0%

site-startup

Metric trunk 7bc0c9a Diff Change
siteCreation 7007 ms 6996 ms 11 ms ⚪ 0.0%
siteStartup 2356 ms 2356 ms 0 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants