Fix sidebar header, preview, and publish behavior when logged out

- Revert sidebar header to simple "+" button (trunk version)
- Disable preview update button when signed out
- Disable pull/push/disconnect when signed out
- Show "Log in" button instead of "Publish" when signed out

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

apps/ui/src/components/sidebar-header/index.test.tsx

@@ -10,30 +10,10 @@ vi.mock( '@tanstack/react-router', () => ( {
 	useNavigate: () => navigate,
 } ) );
 
-vi.mock( '@/components/menu', () => {
-	const el = ( props: Record< string, unknown > ) => {
-		const { children, render: trigger, onClick, disabled } = props;
-		if ( trigger ) return trigger;
-		if ( onClick ) {
-			return (
-				<button type="button" onClick={ onClick as () => void } disabled={ !! disabled }>
-					{ children as never }
-				</button>
-			);
-		}
-		return <div>{ children as never }</div>;
-	};
-	return { Root: el, Trigger: el, Popup: el, Item: el };
-} );
-
 vi.mock( '@/data/core', () => ( {
 	useConnector: vi.fn(),
 } ) );
 
-vi.mock( '@/data/queries/use-agentic-features', () => ( {
-	useAgenticFeatures: vi.fn( () => ( { enabled: true, reason: null, isReady: true } ) ),
-} ) );
-
 vi.mock( '@/hooks/use-traffic-light-space', () => ( {
 	useTrafficLightSpace: () => false,
 } ) );
@@ -46,14 +26,14 @@ describe( 'SidebarHeader', () => {
 		useConnectorMock.mockReturnValue( { showsAppMenuButton: true, popupAppMenu } );
 	} );
 
-	it( 'shows a create menu with New chat, New site, and Import options', async () => {
+	it( 'starts the add-site workflow from the plus button', () => {
 		render( <SidebarHeader onToggleSidebar={ vi.fn() } /> );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Create new' } ) );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Add site' } ) );
 
-		expect( await screen.findByText( 'New chat' ) ).toBeInTheDocument();
-		expect( screen.getByText( 'New site' ) ).toBeInTheDocument();
-		expect( screen.getByText( 'Import from…' ) ).toBeInTheDocument();
+		expect( navigate ).toHaveBeenCalledWith( { to: '/onboarding' } );
+		expect( screen.queryByText( 'New chat' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'Import from…' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'hides the sidebar from the header toggle', () => {

apps/ui/src/components/sidebar-header/index.tsx

@@ -1,10 +1,8 @@
 import { useNavigate } from '@tanstack/react-router';
 import { __ } from '@wordpress/i18n';
-import { comment, download, globe, menu, plus } from '@wordpress/icons';
-import { Icon, IconButton } from '@wordpress/ui';
-import * as Menu from '@/components/menu';
+import { menu, plus } from '@wordpress/icons';
+import { IconButton } from '@wordpress/ui';
 import { useConnector } from '@/data/core';
-import { useAgenticFeatures } from '@/data/queries/use-agentic-features';
 import { useTrafficLightSpace } from '@/hooks/use-traffic-light-space';
 import { drawerIcon } from '@/lib/icons';
 import styles from './style.module.css';
@@ -18,7 +16,6 @@ export function SidebarHeader( { onToggleSidebar }: Props ) {
 	const reserveTrafficLightSpace = useTrafficLightSpace();
 	const navigate = useNavigate();
 	const connector = useConnector();
-	const { enabled: agenticEnabled } = useAgenticFeatures();
 	const handleOpenAppMenu = ( event: MouseEvent< HTMLButtonElement > ) => {
 		const rect = event.currentTarget.getBoundingClientRect();
 		void connector.popupAppMenu( { x: Math.round( rect.left ), y: Math.round( rect.bottom ) } );
@@ -37,33 +34,14 @@ export function SidebarHeader( { onToggleSidebar }: Props ) {
 				/>
 			) }
 			<div className={ styles.actions }>
-				<Menu.Root modal={ false }>
-					<Menu.Trigger
-						render={
-							<IconButton
-								variant="minimal"
-								tone="neutral"
-								size="small"
-								icon={ plus }
-								label={ __( 'Create new' ) }
-							/>
-						}
-					/>
-					<Menu.Popup side="bottom" align="end" className={ styles.popup }>
-						<Menu.Item disabled={ ! agenticEnabled } onClick={ () => void navigate( { to: '/' } ) }>
-							<Icon icon={ comment } />
-							<span>{ __( 'New chat' ) }</span>
-						</Menu.Item>
-						<Menu.Item onClick={ () => void navigate( { to: '/onboarding' } ) }>
-							<Icon icon={ globe } />
-							<span>{ __( 'New site' ) }</span>
-						</Menu.Item>
-						<Menu.Item onClick={ () => void navigate( { to: '/onboarding/import' } ) }>
-							<Icon icon={ download } />
-							<span>{ __( 'Import from…' ) }</span>
-						</Menu.Item>
-					</Menu.Popup>
-				</Menu.Root>
+				<IconButton
+					variant="minimal"
+					tone="neutral"
+					size="small"
+					icon={ plus }
+					label={ __( 'Add site' ) }
+					onClick={ () => void navigate( { to: '/onboarding' } ) }
+				/>
 				<IconButton
 					variant="minimal"
 					tone="neutral"

apps/ui/src/components/site-dropdown/main-view.test.tsx

@@ -32,6 +32,10 @@ vi.mock( '@/data/queries/use-agentic-features', () => ( {
 	useAgenticFeatures: vi.fn( () => ( { enabled: true, reason: null, isReady: true } ) ),
 } ) );
 
+vi.mock( '@/data/queries/use-auth-user', () => ( {
+	useLogin: () => ( { mutate: vi.fn(), isPending: false } ),
+} ) );
+
 vi.mock( '@/data/queries/use-preview-site', () => ( {
 	usePublishPreviewSite: () => ( { isPending: false, mutate: vi.fn() } ),
 } ) );

apps/ui/src/components/site-dropdown/main-view.tsx

@@ -7,6 +7,7 @@ import { useMemo } from 'react';
 import * as Menu from '@/components/menu';
 import { useConnector } from '@/data/core';
 import { useAgenticFeatures } from '@/data/queries/use-agentic-features';
+import { useLogin } from '@/data/queries/use-auth-user';
 import { useConnectedWpcomSites } from '@/data/queries/use-connected-wpcom-sites';
 import { usePublishPreviewSite } from '@/data/queries/use-preview-site';
 import {
@@ -74,6 +75,7 @@ function useIsSiteSyncing( siteId: string ): { push: boolean; pull: boolean } {
 export function MainView( { site, activity, onSetupClick, onDisconnectClick }: Props ) {
 	const connector = useConnector();
 	const { enabled: agenticEnabled } = useAgenticFeatures();
+	const login = useLogin();
 	const { data: snapshots } = useSnapshots();
 	const { data: connectedSites } = useConnectedWpcomSites( site.id );
 
@@ -242,7 +244,7 @@ export function MainView( { site, activity, onSetupClick, onDisconnectClick }: P
 								className={ styles.rowActionButton }
 								loading={ isPreviewPending }
 								loadingAnnouncement={ __( 'Updating preview' ) }
-								disabled={ isSyncing }
+								disabled={ isSyncing || ! agenticEnabled }
 								focusableWhenDisabled
 								onClick={ handlePreviewClick }
 							/>
@@ -284,7 +286,7 @@ export function MainView( { site, activity, onSetupClick, onDisconnectClick }: P
 								icon={ arrowDown }
 								label={ isPullPending ? __( 'Pulling from live' ) : __( 'Pull from live' ) }
 								className={ styles.rowActionButton }
-								disabled={ isSyncing }
+								disabled={ isSyncing || ! agenticEnabled }
 								focusableWhenDisabled
 								onClick={ handlePullClick }
 							/>
@@ -295,20 +297,23 @@ export function MainView( { site, activity, onSetupClick, onDisconnectClick }: P
 								icon={ arrowUp }
 								label={ isPushPending ? __( 'Pushing to live' ) : __( 'Push to live' ) }
 								className={ styles.rowActionButton }
-								disabled={ isSyncing }
+								disabled={ isSyncing || ! agenticEnabled }
 								focusableWhenDisabled
 								onClick={ handlePushClick }
 							/>
 							<Menu.SubmenuRoot>
 								<Menu.SubmenuTrigger
 									className={ styles.moreMenuTrigger }
-									disabled={ isSyncing }
+									disabled={ isSyncing || ! agenticEnabled }
 									aria-label={ __( 'More live site actions' ) }
 								>
 									<Icon icon={ moreHorizontal } size={ 16 } aria-hidden="true" />
 								</Menu.SubmenuTrigger>
 								<Menu.Popup side="right" align="start" className={ styles.moreMenuPopup }>
-									<Menu.Item disabled={ isSyncing } onClick={ onDisconnectClick }>
+									<Menu.Item
+										disabled={ isSyncing || ! agenticEnabled }
+										onClick={ onDisconnectClick }
+									>
 										{ __( 'Disconnect' ) }
 									</Menu.Item>
 								</Menu.Popup>
@@ -319,12 +324,14 @@ export function MainView( { site, activity, onSetupClick, onDisconnectClick }: P
 			) : (
 				<EnvironmentActionPanel
 					title={ __( 'Live' ) }
-					copy={ __( 'No connected site.' ) }
-					buttonLabel={ __( 'Publish' ) }
+					copy={
+						agenticEnabled ? __( 'No connected site.' ) : __( 'Sign in to publish your site.' )
+					}
+					buttonLabel={ agenticEnabled ? __( 'Publish' ) : __( 'Log in' ) }
 					variant="solid"
 					tone="brand"
 					disabled={ isSyncing }
-					onClick={ onSetupClick }
+					onClick={ agenticEnabled ? onSetupClick : () => login.mutate() }
 				/>
 			) }
 		</div>