Agentic UI: Simplify Sidebar with new Site-Centric Focus

apps/ui/src/components/delete-site-dialog/index.tsx

@@ -0,0 +1,84 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Dialog } from '@wordpress/ui';
+import { useState } from 'react';
+import { useDeleteSite } from '@/data/queries/use-sites';
+import styles from './style.module.css';
+import type { SiteDetails } from '@/data/core';
+
+interface DeleteSiteDialogProps {
+	site: SiteDetails;
+	open: boolean;
+	onOpenChange: ( open: boolean ) => void;
+	onDeleted?: () => void;
+}
+
+export function DeleteSiteDialog( { site, open, onOpenChange, onDeleted }: DeleteSiteDialogProps ) {
+	const deleteSite = useDeleteSite();
+	const [ deleteFiles, setDeleteFiles ] = useState( true );
+	const [ error, setError ] = useState< string | null >( null );
+
+	const handleConfirm = () => {
+		setError( null );
+		deleteSite.mutate(
+			{ id: site.id, deleteFiles },
+			{
+				onSuccess: () => {
+					onOpenChange( false );
+					onDeleted?.();
+				},
+				onError: ( err: Error ) => {
+					setError( err.message ?? __( 'Unable to delete the site. Please try again.' ) );
+				},
+			}
+		);
+	};
+
+	return (
+		<Dialog.Root
+			open={ open }
+			onOpenChange={ ( next ) => {
+				if ( deleteSite.isPending ) {
+					return;
+				}
+				onOpenChange( next );
+				if ( ! next ) {
+					setError( null );
+				}
+			} }
+		>
+			<Dialog.Popup size="small">
+				<Dialog.Header>
+					<Dialog.Title>{ sprintf( __( 'Delete %s' ), site.name ) }</Dialog.Title>
+				</Dialog.Header>
+				<p className={ styles.dialogText }>
+					{ __(
+						"The site's database will be lost, including all posts, pages, comments, and media."
+					) }
+				</p>
+				<label className={ styles.dialogCheckbox }>
+					<input
+						type="checkbox"
+						checked={ deleteFiles }
+						onChange={ ( event ) => setDeleteFiles( event.target.checked ) }
+					/>
+					<span>{ __( 'Delete site files from my computer' ) }</span>
+				</label>
+				{ error ? <div className={ styles.dialogError }>{ error }</div> : null }
+				<Dialog.Footer>
+					<Dialog.Action variant="minimal" tone="neutral" disabled={ deleteSite.isPending }>
+						{ __( 'Cancel' ) }
+					</Dialog.Action>
+					<Button
+						variant="solid"
+						tone="brand"
+						loading={ deleteSite.isPending }
+						loadingAnnouncement={ __( 'Deleting site' ) }
+						onClick={ handleConfirm }
+					>
+						{ __( 'Delete site' ) }
+					</Button>
+				</Dialog.Footer>
+			</Dialog.Popup>
+		</Dialog.Root>
+	);
+}

apps/ui/src/components/delete-site-dialog/style.module.css

@@ -0,0 +1,24 @@
+.dialogText {
+	margin: 0;
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+	color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.dialogCheckbox {
+	display: flex;
+	align-items: center;
+	gap: var(--wpds-dimension-padding-sm);
+	margin-top: var(--wpds-dimension-padding-sm);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+	color: var(--wpds-color-fg-content-neutral);
+	cursor: var(--wpds-cursor-control);
+}
+
+.dialogError {
+	margin-top: var(--wpds-dimension-padding-sm);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+	color: var(--wpds-color-fg-content-error, var(--wpds-color-fg-content-neutral));
+}

apps/ui/src/components/menu/index.tsx

@@ -4,7 +4,13 @@ import { forwardRef } from 'react';
 import motionStyles from '@/components/floating-surface-motion/style.module.css';
 import { unlock } from '@/lock-unlock';
 import styles from './style.module.css';
-import type { ComponentPropsWithoutRef, ElementRef, ReactNode } from 'react';
+import type {
+	ComponentPropsWithoutRef,
+	ElementRef,
+	MouseEventHandler,
+	PointerEventHandler,
+	ReactNode,
+} from 'react';
 
 const { ThemeProvider } = unlock( privateApis );
 
@@ -21,6 +27,8 @@ type PopupProps = {
 	sideOffset?: number;
 	alignOffset?: number;
 	className?: string;
+	onClick?: MouseEventHandler< HTMLElement >;
+	onPointerDown?: PointerEventHandler< HTMLElement >;
 };
 
 /**
@@ -35,6 +43,8 @@ export function Popup( {
 	sideOffset = 4,
 	alignOffset,
 	className,
+	onClick,
+	onPointerDown,
 }: PopupProps ) {
 	return (
 		<BaseMenu.Portal>
@@ -53,6 +63,8 @@ export function Popup( {
 				<ThemeProvider density="compact">
 					<BaseMenu.Popup
 						className={ `${ styles.popup } ${ motionStyles.motion } ${ className ?? '' }` }
+						onClick={ onClick }
+						onPointerDown={ onPointerDown }
 					>
 						{ children }
 					</BaseMenu.Popup>

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

@@ -0,0 +1,72 @@
+import '@testing-library/jest-dom/vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { SidebarHeader } from './index';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+const navigate = vi.fn();
+
+vi.mock( '@tanstack/react-router', () => ( {
+	useNavigate: () => navigate,
+} ) );
+
+vi.mock( '@wordpress/ui', () => ( {
+	Icon: ( { children }: { children?: ReactNode } ) => <span>{ children }</span>,
+	IconButton: ( {
+		label,
+		icon,
+		tone,
+		variant,
+		size,
+		...props
+	}: ButtonHTMLAttributes< HTMLButtonElement > & {
+		label: string;
+		icon?: unknown;
+		tone?: string;
+		variant?: string;
+		size?: string;
+	} ) => {
+		void icon;
+		void tone;
+		void variant;
+		void size;
+		return (
+			<button type="button" aria-label={ label } { ...props }>
+				{ label }
+			</button>
+		);
+	},
+} ) );
+
+vi.mock( '@/components/menu', () => ( {
+	Root: ( { children }: { children: ReactNode } ) => <div>{ children }</div>,
+	Trigger: ( { render }: { render: ReactNode } ) => <>{ render }</>,
+	Popup: ( { children }: { children: ReactNode } ) => <div role="menu">{ children }</div>,
+	Item: ( { children, onClick }: { children: ReactNode; onClick?: () => void } ) => (
+		<button type="button" onClick={ onClick }>
+			{ children }
+		</button>
+	),
+} ) );
+
+vi.mock( '@/hooks/use-fullscreen', () => ( {
+	useFullscreen: () => false,
+} ) );
+
+describe( 'SidebarHeader', () => {
+	beforeEach( () => {
+		vi.clearAllMocks();
+	} );
+
+	it( 'opens site creation routes from the top-right create menu', () => {
+		render( <SidebarHeader /> );
+
+		expect( screen.getByRole( 'button', { name: 'Create new' } ) ).toBeInTheDocument();
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'New site' } ) );
+		expect( navigate ).toHaveBeenCalledWith( { to: '/onboarding' } );
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'Import from…' } ) );
+		expect( navigate ).toHaveBeenCalledWith( { to: '/onboarding/import' } );
+	} );
+} );

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

@@ -1,19 +1,15 @@
 import { useNavigate } from '@tanstack/react-router';
 import { __ } from '@wordpress/i18n';
-import { comment, download, globe, plus } from '@wordpress/icons';
+import { download, globe, plus } from '@wordpress/icons';
 import { Icon, IconButton } from '@wordpress/ui';
 import * as Menu from '@/components/menu';
 import { useFullscreen } from '@/hooks/use-fullscreen';
-import { drawerIcon } from '@/lib/icons';
 import styles from './style.module.css';
 
-type Props = {
-	onToggleSidebar: () => void;
-};
-
-export function SidebarHeader( { onToggleSidebar }: Props ) {
+export function SidebarHeader() {
 	const isFullscreen = useFullscreen();
 	const navigate = useNavigate();
+
 	return (
 		<div className={ `${ styles.root } ${ isFullscreen ? styles.fullscreen : '' }` }>
 			<div className={ styles.actions }>
@@ -30,10 +26,6 @@ export function SidebarHeader( { onToggleSidebar }: Props ) {
 						}
 					/>
 					<Menu.Popup side="bottom" align="end" className={ styles.popup }>
-						<Menu.Item>
-							<Icon icon={ comment } />
-							<span>{ __( 'New chat' ) }</span>
-						</Menu.Item>
 						<Menu.Item onClick={ () => void navigate( { to: '/onboarding' } ) }>
 							<Icon icon={ globe } />
 							<span>{ __( 'New site' ) }</span>
@@ -44,14 +36,6 @@ export function SidebarHeader( { onToggleSidebar }: Props ) {
 						</Menu.Item>
 					</Menu.Popup>
 				</Menu.Root>
-				<IconButton
-					variant="minimal"
-					tone="neutral"
-					size="small"
-					icon={ drawerIcon }
-					label={ __( 'Hide sidebar' ) }
-					onClick={ onToggleSidebar }
-				/>
 			</div>
 		</div>
 	);

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

@@ -31,13 +31,11 @@
 	display: flex;
 	align-items: center;
 	margin-inline-start: auto;
-	/* Match the site-row action buttons (`.siteActions` in site-list), which
-	   sit flush with no gap. */
-	gap: 0;
 	/* The site rows have their action rail tucked into the row padding. Pull
-	   the header buttons over by the row's inner padding so the create/toggle
-	   controls share those same trailing columns. */
+	   the header button over by the row's inner padding so it shares the same
+	   trailing column. */
 	margin-inline-end: calc(-1 * var(--wpds-dimension-padding-sm));
+	-webkit-app-region: no-drag;
 }
 
 .popup {

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

@@ -5,27 +5,23 @@ import { SidebarLayout } from './index';
 import type { ReactNode } from 'react';
 
 vi.mock( '@/components/sidebar-header', () => ( {
-	SidebarHeader: ( { onToggleSidebar }: { onToggleSidebar: () => void } ) => (
-		<button onClick={ onToggleSidebar }>Hide sidebar</button>
-	),
+	SidebarHeader: () => null,
 } ) );
 
 vi.mock( '@/components/site-list', () => ( {
 	SiteList: () => <nav aria-label="Sites" />,
 } ) );
 
 vi.mock( '@/components/user-menu', () => ( {
-	UserMenu: () => null,
+	UserMenu: ( { onToggleSidebar }: { onToggleSidebar: () => void } ) => (
+		<button onClick={ onToggleSidebar }>Hide sidebar</button>
+	),
 } ) );
 
 vi.mock( '@/data/core', () => ( {
 	useConnector: vi.fn(),
 } ) );
 
-vi.mock( '@/hooks/use-fullscreen', () => ( {
-	useFullscreen: () => false,
-} ) );
-
 vi.mock( '@wordpress/ui', async () => {
 	const actual = await vi.importActual< typeof import('@wordpress/ui') >( '@wordpress/ui' );
 	return {

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

@@ -7,7 +7,6 @@ import { SidebarHeader } from '@/components/sidebar-header';
 import { SiteList } from '@/components/site-list';
 import { UserMenu } from '@/components/user-menu';
 import { useConnector } from '@/data/core';
-import { useFullscreen } from '@/hooks/use-fullscreen';
 import { useResizablePanel } from '@/hooks/use-resizable-panel';
 import { SidebarCollapsedContext } from '@/hooks/use-sidebar-collapsed';
 import { drawerIcon } from '@/lib/icons';
@@ -18,7 +17,6 @@ import type { CSSProperties, ReactNode } from 'react';
 export function SidebarLayout( { children }: { children: ReactNode } ) {
 	const [ collapsed, setCollapsed ] = useState( false );
 	const connector = useConnector();
-	const isFullscreen = useFullscreen();
 	const sidebarResize = useResizablePanel( {
 		config: SIDEBAR_PANEL_CONFIG,
 		edge: 'right',
@@ -44,10 +42,10 @@ export function SidebarLayout( { children }: { children: ReactNode } ) {
 					) }
 					style={ sidebarStyle }
 				>
-					<SidebarHeader onToggleSidebar={ toggleSidebar } />
+					<SidebarHeader />
 					<SiteList />
 					<div className={ styles.sidebarFooter }>
-						<UserMenu />
+						<UserMenu onToggleSidebar={ toggleSidebar } />
 					</div>
 				</aside>
 				{ ! collapsed ? (
@@ -63,13 +61,9 @@ export function SidebarLayout( { children }: { children: ReactNode } ) {
 					/>
 				) : null }
 				<main className={ styles.main }>
+					{ children }
 					{ collapsed ? (
-						<div
-							className={ clsx(
-								styles.floatingToggle,
-								isFullscreen && styles.floatingToggleFullscreen
-							) }
-						>
+						<div className={ styles.floatingToggle }>
 							<IconButton
 								variant="minimal"
 								tone="neutral"
@@ -80,7 +74,6 @@ export function SidebarLayout( { children }: { children: ReactNode } ) {
 							/>
 						</div>
 					) : null }
-					{ children }
 				</main>
 				{ sidebarResize.isResizing ? <ResizeOverlay /> : null }
 			</div>