Agentic UI: Add app menu button

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

@@ -1,11 +1,13 @@
 import { useNavigate } from '@tanstack/react-router';
 import { __ } from '@wordpress/i18n';
-import { comment, download, globe, plus } from '@wordpress/icons';
+import { comment, download, globe, menu, plus } from '@wordpress/icons';
 import { Icon, IconButton } from '@wordpress/ui';
 import * as Menu from '@/components/menu';
+import { useConnector } from '@/data/core';
 import { useTrafficLightSpace } from '@/hooks/use-traffic-light-space';
 import { drawerIcon } from '@/lib/icons';
 import styles from './style.module.css';
+import type { MouseEvent } from 'react';
 
 type Props = {
 	onToggleSidebar: () => void;
@@ -14,8 +16,22 @@ type Props = {
 export function SidebarHeader( { onToggleSidebar }: Props ) {
 	const reserveTrafficLightSpace = useTrafficLightSpace();
 	const navigate = useNavigate();
+	const connector = useConnector();
+	const handleOpenAppMenu = ( event: MouseEvent< HTMLButtonElement > ) => {
+		const rect = event.currentTarget.getBoundingClientRect();
+		void connector.popupAppMenu( { x: Math.round( rect.left ), y: Math.round( rect.bottom ) } );
+	};
 	return (
 		<div className={ `${ styles.root } ${ reserveTrafficLightSpace ? '' : styles.flush }` }>
+			<IconButton
+				variant="minimal"
+				tone="neutral"
+				size="small"
+				className={ styles.menuButton }
+				icon={ menu }
+				label={ __( 'Menu' ) }
+				onClick={ handleOpenAppMenu }
+			/>
 			<span className={ styles.title }>{ __( 'Studio' ) }</span>
 			<div className={ styles.actions }>
 				<Menu.Root modal={ false }>

apps/ui/src/components/sidebar-header/style.module.css

@@ -31,6 +31,11 @@
 	padding-left: var(--wpds-dimension-padding-2xl);
 }
 
+.menuButton {
+	margin-inline-start: calc(-1 * var(--wpds-dimension-padding-sm));
+	cursor: var(--wpds-cursor-control);
+}
+
 .title {
 	flex: 1;
 	min-width: 0;

apps/ui/src/data/core/connectors/hosted/index.ts

@@ -336,6 +336,7 @@ export function createHostedConnector( { apiBaseUrl }: HostedConnectorOptions ):
 		async openExternalUrl( url ) {
 			window.open( url, '_blank', 'noopener,noreferrer' );
 		},
+		async popupAppMenu() {},
 		async copyText( text ) {
 			await navigator.clipboard.writeText( text );
 		},

apps/ui/src/data/core/connectors/ipc/index.ts

@@ -676,6 +676,10 @@ export function createIpcConnector(): Connector {
 			ipcApi.openURL( url );
 		},
 
+		async popupAppMenu( position: { x: number; y: number } ): Promise< void > {
+			ipcApi.popupAppMenu( position );
+		},
+
 		async copyText( text: string ): Promise< void > {
 			await ipcApi.copyText( text );
 		},

apps/ui/src/data/core/connectors/local/index.ts

@@ -651,6 +651,7 @@ export function createLocalConnector( { apiBaseUrl }: LocalConnectorOptions ): C
 		async openExternalUrl( url ) {
 			window.open( url, '_blank', 'noopener,noreferrer' );
 		},
+		async popupAppMenu() {},
 		async openSiteUrl( siteId, relativeUrl = '' ) {
 			const sites = lastSites ?? ( await api< SiteDetails[] >( '/sites' ) );
 			const target = new URL( relativeUrl || '/', findSiteUrl( sites, siteId ) ).toString();

apps/ui/src/data/core/types.ts

@@ -316,6 +316,8 @@ export interface Connector {
 	// External links
 	openExternalUrl( url: string ): Promise< void >;
 
+	popupAppMenu( position: { x: number; y: number } ): Promise< void >;
+
 	// Clipboard — routed to the host so it works where the renderer's
 	// `navigator.clipboard` is unavailable (e.g. Electron permission denial).
 	copyText( text: string ): Promise< void >;