Design Exploration: Replace the site dropdown with a permanent site header by shaunandrews · Pull Request #4400 · Automattic/studio

shaunandrews · 2026-07-30T21:10:12Z

Related issues

Related to STU-2162
Forms the persistent-header layer used by the browser-toolbar exploration in [Design Exploration] Browser-style preview toolbar #4746 and the full browser-tab exploration in [Design Exploration] Full browser preview tabs #4753.

How AI was used in this PR

Written with Claude Code and Codex through iterative design passes in the running app. I directed the interaction model and visual hierarchy, reviewed each pass, and had the implementation rebuilt on current trunk before updating this exploration.

Proposed Changes

This remains a visual design exploration rather than a merge-ready proposal.

This is the third PR in the site-management UI stack:

Agentic UI: Add Connections to site overview #4474 — Connections on the overview
Agentic UI: Add preview sites to site overview #4483 — Preview sites on the overview
Design Exploration: Replace the site dropdown with a permanent site header #4400 — Persistent site header with Share and Sync dialogs (this PR)
Agentic UI: Integrate the site overview, sharing, and sync progress #4601 — Integrated overview polish, reusable sharing controls, and operation progress

Site actions currently hide behind a dropdown whose trigger reads primarily as status. This exploration replaces that entry point with a permanent site header: site identity and state on one side, with the most relevant actions always visible on the other.

The visible hierarchy is:

Open in as a quiet split action.
Share… for temporary preview links.
Publish… or Sync… as the primary site action.

It also introduces dedicated Share, Publish/connect, and selective Sync dialogs. Sync supports multiple connected sites, Push/Pull direction, database selection, and a file tree. The responsive header truncates identity first, then progressively reduces secondary actions while preserving the primary action for as long as possible.

The final stack layer (#4601) reuses the exact Preview sites list inside Share, opens this Sync dialog from each connection row, and adds operation progress to both the overview and persistent notices.

Current UI

Share · light	Share · dark

Selective Sync · light	Selective Sync · dark

Testing Instructions

Launch the agentic UI and open a local site chat or Overview.
Confirm the permanent header appears consistently on both surfaces.
Exercise each Open in destination and confirm the remembered default updates.
Exercise Share, Publish/connect, and Sync with connected and disconnected sites.
In Sync, switch between multiple targets and Push/Pull, then change database/file selections.
Resize through wide, compact, icon-only, overflow, and minimal states.
Check headers, menus, tooltips, and dialogs in light, dark, and RTL layouts.

Verification used while preparing this stack:

Built this exact PR head and captured all three screenshots above.
Verified the final integrated dialogs in light, dark, and Hebrew RTL.
The site-toolbar tests and full typecheck pass on the integrated stack head.

Pre-merge Checklist

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

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

…ons as site tabs Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

…ons and results in toasts Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

…step Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

…t renderer Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

…used webview Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

…aks panel Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

…-actions # Conflicts: # apps/cli/commands/pull.ts # apps/local/src/index.ts # apps/studio/src/ipc-utils.ts # apps/studio/src/main-window.ts # apps/studio/src/menu.ts # apps/studio/src/modules/sync/lib/ipc-handlers.ts # apps/ui/src/components/progressive-blur/style.module.css # apps/ui/src/components/sidebar-layout/index.tsx # apps/ui/src/components/sidebar-layout/style.module.css # apps/ui/src/components/site-dropdown/index.tsx # apps/ui/src/components/site-dropdown/main-view.module.css # apps/ui/src/components/site-dropdown/main-view.test.tsx # apps/ui/src/components/site-dropdown/main-view.tsx # apps/ui/src/components/site-dropdown/trigger-secondary.ts # apps/ui/src/components/site-dropdown/utils.ts # apps/ui/src/components/site-list/index.tsx # apps/ui/src/components/site-overview-view/index.test.tsx # apps/ui/src/components/site-overview-view/index.tsx # apps/ui/src/components/site-toolbar/index.test.tsx # apps/ui/src/components/site-toolbar/utils.test.ts # apps/ui/src/data/core/connectors/ipc/index.ts # apps/ui/src/data/core/connectors/local/index.ts # apps/ui/src/data/core/index.ts # apps/ui/src/data/core/types.ts # apps/ui/src/data/queries/use-sync-site.ts # apps/ui/src/data/sync-activity.ts # apps/ui/src/ui-classic/components/session-view/index.tsx # apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx # apps/ui/src/ui-classic/router/route-onboarding-connect/style.module.css # apps/ui/src/ui-classic/router/route-site-overview/index.tsx # packages/common/sites/sync.ts

…r-overview # Conflicts: # apps/ui/src/components/menu/style.module.css

## Related issues - None — design exploration. - Compare the permanent site-header exploration in #4400 and the full browser-tab exploration in #4753, which extends this toolbar with independent tab/history state and platform-standard modifier-click navigation. ## How AI was used in this PR AI assisted with iterative implementation, refactoring, and test updates. Shaun directed the interaction and visual design through hands-on review of the running Studio preview, including toolbar spacing, responsive behavior, control states, icon treatment, and dark-mode corrections. ## Proposed Changes - Explore a conventional browser-style preview toolbar that replaces the realm tab selector with a filled URL field and familiar navigation controls. - Give the URL field a deliberate browser-address treatment: 32px tall, comfortably padded, strongly rounded, filled rather than bordered, and theme-aware in light and dark mode. - Keep Front-end, WordPress admin, and Database available from the address menu, then add deduplicated per-site recent addresses as the user navigates. - Make navigation more useful with browser-like back, forward, and refresh controls, including right-click history menus for jumping between visited pages. - Keep preview tools understandable at a glance: Annotate uses a bordered secondary treatment, while Responsive always keeps its current mode visible and uses a checkmark to identify the selected menu item. - Move the Open in action to the chat header, where its split button stays visually quiet at rest and preserves external destinations without crowding the browser toolbar. - Preserve compact behavior, truncation, theme-aware colors, and legible controls across narrow layouts and light/dark appearances. - Hide empty browser chrome while a site is stopped, remove obsolete realm-number shortcuts, and disable preview-only controls on Database with explanatory tooltips. This is intentionally a design exploration. The interaction model and visual treatment are presented for feedback rather than as a final approved direction. ## Current screenshots The set below covers the address menu and recents, compact toolbar behavior, dark mode, and the disabled Database state. | Wide · light · address menu | Narrow · light · toolbar | |---|---| | ![Wide light browser toolbar with address menu](https://github.com/Automattic/studio/blob/7c1c118e301db04605e88671e9fa64a316599e89/full-preview-light-address-menu.png?raw=true) | ![Narrow light browser toolbar](https://github.com/Automattic/studio/blob/7c1c118e301db04605e88671e9fa64a316599e89/narrow-light-toolbar.png?raw=true) | | Wide · dark · address menu | Narrow · light · Database state | |---|---| | ![Wide dark browser toolbar with address menu](https://github.com/Automattic/studio/blob/7c1c118e301db04605e88671e9fa64a316599e89/full-preview-dark-address-menu.png?raw=true) | ![Narrow Database toolbar with preview controls disabled](https://github.com/Automattic/studio/blob/7c1c118e301db04605e88671e9fa64a316599e89/narrow-light-database.png?raw=true) | ![Full preview toolbar in dark mode](https://github.com/Automattic/studio/blob/7c1c118e301db04605e88671e9fa64a316599e89/full-preview-dark.png?raw=true) ## Testing Instructions 1. Launch the Agentic UI in Studio and open a running local site with the preview visible. 2. Confirm the toolbar presents back, forward, refresh, the 32px filled URL field, Responsive, and Annotate. 3. Confirm the URL field has no resting border, retains a clear focus treatment, and remains legible in light and dark mode. 4. Focus the URL field and use Front-end, WordPress, and Database; verify the menu closes after selection. 5. Submit new paths, reopen the address menu, and confirm deduplicated recent addresses appear only for that site. 6. Navigate through several pages, then right-click Back and Forward; verify each history menu opens below its button and can jump to an entry. 7. Open the Responsive dropdown and try Responsive, Mobile, Tablet, Desktop, and Desktop + Mobile. Confirm the trigger label updates and only the selected row has a checkmark. 8. Open a Database destination and confirm Responsive and Annotate are disabled with explanatory tooltips. 9. Stop the site and confirm the empty browser toolbar is hidden. 10. Confirm Open in appears at the top-right of the chat panel, repeats the current default destination, has no border or fill at rest, and remains legible as chat content scrolls behind it. 11. Narrow the preview and confirm Responsive keeps its visible label while Annotate can collapse to its icon. 12. Repeat the visual checks in both light and dark color schemes. Automated verification completed for the latest update: - `npm test -- apps/ui/src/components/site-preview/address-bar.test.tsx apps/ui/src/components/site-preview/index.test.tsx apps/ui/src/components/site-preview/inspector-script.test.ts` (65 tests) - `npm run typecheck -w @studio/ui` - `npm run cli:build:ui` on the combined exploration branch ## Pre-merge Checklist - [x] Have you checked for TypeScript, React or other console errors? --------- Co-authored-by: Wojtek Naruniec <wojtek@naruniec.me> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

shaunandrews added the Proof of Concept label Jul 30, 2026

github-actions Bot assigned shaunandrews Jul 30, 2026

shaunandrews and others added 19 commits August 4, 2026 13:40

Replace the site dropdown with a permanent site header

d28698f

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Surface push and pull as separate buttons, with previews and connecti…

1d5adb9

…ons as site tabs Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Reduce the site header to two icon actions, with progress in the butt…

80a0f98

…ons and results in toasts Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Make the header and tab icons follow their button's text colour

f891d35

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Reduce the sync button tooltips to a single line

16b5e9b

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Choose a site to publish to in a modal, sharing onboarding's connect …

8c136d1

…step Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Keep a running toast open for the whole push, pull, or preview

3f66b0a

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Drive real toasts from the tweaks panel's scripted runs

c18e7c0

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Fix the crash when a toast is replaced in place with a different shape

0afe6d6

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Rebuild the tweak scenarios around the header as it stands

cee71a3

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Replace the push and pull buttons with one Sync action and a dialog

d256f55

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Move preview links from a tab into a Share dialog in the site header

d808520

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Replace design tokens that were never in the design system

e5c5c69

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Let the agentic UI window shrink to 420px, keeping 712 for the defaul…

c1bae62

…t renderer Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Point Reload and Toggle DevTools at the app window instead of the foc…

b5e2fc9

…used webview Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Raise toasts above the modal scrim so a running sync stays readable

0d9ffe2

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Carry selective-sync options and file-tree lookups through to the CLI

2ea04dd

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Rebuild the Share dialog around live sites and preview links

88035b7

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Choose exactly what a sync carries with a file tree, and drop the twe…

e200d5a

…aks panel Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

shaunandrews force-pushed the stu-2162-site-header-actions branch from 0dfb256 to e200d5a Compare August 4, 2026 17:55

shaunandrews changed the title ~~Replace the site dropdown with a permanent site header~~ Design Exploration: Replace the site dropdown with a permanent site header Aug 6, 2026

shaunandrews added 3 commits August 31, 2026 22:35

Refresh the site header exploration on trunk

c2f53fa

Align site actions with the combined toolbar treatment

f8cb670

This was referenced Sep 1, 2026

[Design Exploration] Full browser preview tabs #4753

Draft

[Design Exploration] Browser-style preview toolbar #4746

Merged

shaunandrews added 2 commits September 2, 2026 13:47

Adapt site header actions to available space

8480b4f

Keep overview columns visible at narrower widths

85568c8

shaunandrews added 4 commits September 4, 2026 12:47

Merge branch 'stu-2162-site-header-actions' into integrate-site-heade…

35c554b

…r-overview # Conflicts: # apps/ui/src/components/menu/style.module.css

Update site header design tokens

7642053

Prioritize overview details at narrow widths

e05e8d0

Align overview and chat site headers

9cf2bcc

shaunandrews changed the base branch from trunk to add-overview-preview-sites September 4, 2026 20:15

This was referenced Sep 4, 2026

Agentic UI: Add Connections to site overview #4474

Draft

Agentic UI: Add preview sites to site overview #4483

Draft

Agentic UI: Integrate the site overview, sharing, and sync progress #4601

Draft

Navigation Menu

Uh oh!

Design Exploration: Replace the site dropdown with a permanent site header - #4400

Design Exploration: Replace the site dropdown with a permanent site header#4400
shaunandrews wants to merge 28 commits into
add-overview-preview-sitesfrom
stu-2162-site-header-actions

shaunandrews commented Jul 30, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

shaunandrews commented Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

How AI was used in this PR

Proposed Changes

Current UI

Testing Instructions

Pre-merge Checklist

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

shaunandrews commented Jul 30, 2026 •

edited

Loading