Skip to content

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

Draft
shaunandrews wants to merge 22 commits into
trunkfrom
stu-2162-site-header-actions
Draft

Design Exploration: Replace the site dropdown with a permanent site header#4400
shaunandrews wants to merge 22 commits into
trunkfrom
stu-2162-site-header-actions

Conversation

@shaunandrews

@shaunandrews shaunandrews commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Related issues

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. I've read the resulting diff.

Proposed Changes

Site header exploration Site header actions Site header dialog Compact site header Site header sync flow

This remains a visual design exploration rather than a merge-ready proposal. The screenshots capture earlier points in the exploration; reviewers should use the current build for the latest hierarchy and treatments.

Site actions currently live behind a dropdown whose trigger reads primarily as status. This exploration replaces that hidden entry point with a permanent site header: site identity and state on the left, with the most relevant actions visible on the right.

The current action hierarchy is:

  • Open in as a quiet tertiary split button, placed last after the site actions.
  • Share... as a secondary action.
  • Publish... or Sync... as the primary action, depending on site state.

The header also provides dedicated publish, share, sync, connection, and status flows, while preserving compact behavior at narrow widths. The split button has no border or fill at rest and reveals its frame through interaction.

Testing Instructions

  1. Launch the agentic UI and open a local site chat.
  2. Confirm the permanent site header appears and the actions are ordered Share..., Publish.../Sync..., then Open in.
  3. Exercise each Open in destination and confirm the remembered default action updates.
  4. Exercise the Share, Publish, and Sync dialogs, including connected and disconnected site states.
  5. Resize the chat panel and confirm the header remains usable at narrow widths.
  6. Check the header, menus, and dialogs in both light and dark themes.

Automated checks run locally:

  • npx eslint --fix on every changed TypeScript/TSX file
  • npm run typecheck
  • 7 targeted test files (101 tests)
  • npm run cli:build:ui

Pre-merge Checklist

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

shaunandrews and others added 19 commits August 4, 2026 13:40
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>
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>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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>
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>
@shaunandrews
shaunandrews force-pushed the stu-2162-site-header-actions branch from 0dfb256 to e200d5a Compare August 4, 2026 17:55
@shaunandrews 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
…-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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant