Hosting Dashboard v2: view transitions (part 1)

client/dashboard/app/router.tsx

@@ -337,6 +337,11 @@ export const getRouter = ( config: AppConfig ) => {
 		basepath: config.basePath,
 		defaultErrorComponent: UnknownError,
 		defaultNotFoundComponent: NotFound,
+		// Calling document.startViewTransition() ourselves is really tricky,
+		// Tanstack Router knows how to do it best. Even though it says
+		// "default", we can still customize it in CSS and add more transition
+		// areas.
+		defaultViewTransition: true,
 	} );
 };
 

client/dashboard/app/secondary-menu/index.tsx

@@ -57,7 +57,9 @@ function UserProfile() {
 						<Text variant="muted">@{ user.username }</Text>
 					</VStack>
 					<MenuGroup>
-						<RouterLinkMenuItem to="/me/profile">{ __( 'Account' ) }</RouterLinkMenuItem>
+						<RouterLinkMenuItem to="/me/profile" onClick={ onClose }>
+							{ __( 'Account' ) }
+						</RouterLinkMenuItem>
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem

client/dashboard/app/style.scss

@@ -5,6 +5,8 @@
 // I'm tempted to even just replace all this with a display:none on the logo
 @import './loading-screen';
 
+@import './view-transitions';
+
 // Hacks that shouldn't be necessary.
 .environment-badge {
 	display: none;

client/dashboard/app/view-transitions.scss

@@ -0,0 +1,66 @@
+::view-transition-old(root),
+::view-transition-new(root) {
+	animation-duration: 250ms;
+}
+
+// The main and sub headers must be separate view transitions, othervise the sub
+// header won't slide in!
+header.dashboard-header-bar {
+	view-transition-name: main-header;
+}
+main div.dashboard-header-bar {
+	view-transition-name: sub-header;
+}
+
+// Headers should show on top of the rest of the page (important for sticky).
+::view-transition-group(main-header),
+::view-transition-group(sub-header) {
+    z-index: 1;
+}
+
+// Do not let the browser transform (slide in) the main hear. This is important
+// for sticy positioning (when the page is scrolled down) and gently switching
+// between the main and sub headers.
+::view-transition-group(main-header) {
+    transform: none !important;
+}
+
+::view-transition-image-pair(main-header),
+::view-transition-image-pair(sub-header) {
+	height: auto;
+}
+
+// Large and small must be separate so they don't cross-animate.
+.dashboard-page-layout.is-large > .dashboard-page-layout__header {
+	view-transition-name: page-layout-header-large;
+}
+.dashboard-page-layout.is-small > .dashboard-page-layout__header {
+	view-transition-name: page-layout-header-small;
+}
+
+.dashboard-page-layout.is-large > .dashboard-page-layout__header .components-button.is-primary {
+	view-transition-name: page-layout-header-large--button;
+}
+
+::view-transition-old(page-layout-header-large--button),
+::view-transition-new(page-layout-header-large--button) {
+	height: 100%;
+}
+
+.dashboard-page-layout__content {
+	view-transition-name: page-layout-content;
+}
+
+::view-transition-old(page-layout-content),
+::view-transition-new(page-layout-content) {
+	// Never expand the main content horizontally, but allow it to shrink.
+	width: auto;
+    // Also disable shrinking. Leaving it commented out to test.
+	// max-width: 100%;
+	height: auto;
+}
+
+::view-transition-image-pair(page-layout-content) {
+    display: flex;
+    justify-content: center;
+}

client/dashboard/components/page-layout/index.tsx

@@ -19,18 +19,24 @@ function PageLayout( {
 	title,
 	description,
 	actions,
+	notices,
 	children,
 	size = 'large',
 }: {
 	title: string;
 	description?: React.ReactNode;
 	actions?: React.ReactNode;
+	notices?: React.ReactNode;
 	children?: React.ReactNode;
 	size?: 'large' | 'small';
 } ) {
 	return (
-		<VStack spacing={ 8 } className="dashboard-page-layout" style={ sizes[ size ] }>
-			<VStack spacing={ 4 }>
+		<VStack
+			spacing={ 8 }
+			className={ `dashboard-page-layout is-${ size }` }
+			style={ sizes[ size ] }
+		>
+			<VStack className="dashboard-page-layout__header" spacing={ 4 }>
 				<HStack justify="space-between" alignment="center">
 					<Heading level={ 1 } style={ { flexShrink: 0 } }>
 						{ title }
@@ -45,7 +51,12 @@ function PageLayout( {
 					<Text className="dasboard-page-layout__description">{ description } </Text>
 				) }
 			</VStack>
-			{ !! children && <VStack spacing={ 8 }>{ children }</VStack> }
+			{ notices }
+			{ !! children && (
+				<VStack className="dashboard-page-layout__content" spacing={ 8 }>
+					{ children }
+				</VStack>
+			) }
 		</VStack>
 	);
 }

client/dashboard/emails/index.tsx

@@ -129,10 +129,12 @@ function Emails() {
 					</Button>
 				</div>
 			}
+			notices={
+				<Notice status="warning" isDismissible={ false }>
+					{ __( 'This is using fake data for the moment' ) }
+				</Notice>
+			}
 		>
-			<Notice status="warning" isDismissible={ false }>
-				{ __( 'This is using fake data for the moment' ) }
-			</Notice>
 			<DataViewsCard>
 				<DataViews
 					data={ filteredData }

client/dashboard/me/notifications/index.tsx

@@ -1,13 +1,15 @@
+import { __experimentalVStack as VStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import PageLayout from '../../components/page-layout';
+import RouterLinkSummaryButton from '../../components/router-link-summary-button';
 
 function Notifications() {
 	return (
-		<PageLayout
-			title={ __( 'Notifications' ) }
-			description={ __( 'Manage your notification settings.' ) }
-			size="small"
-		/>
+		<PageLayout title={ __( 'Notifications' ) } size="small">
+			<VStack spacing={ 4 }>
+				<RouterLinkSummaryButton title={ __( 'Details' ) } to="/me/notifications" />
+			</VStack>
+		</PageLayout>
 	);
 }
 

client/dashboard/me/privacy/index.tsx

@@ -1,13 +1,15 @@
+import { __experimentalVStack as VStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import PageLayout from '../../components/page-layout';
+import RouterLinkSummaryButton from '../../components/router-link-summary-button';
 
 function Privacy() {
 	return (
-		<PageLayout
-			title={ __( 'Privacy' ) }
-			description={ __( 'Manage your privacy settings.' ) }
-			size="small"
-		/>
+		<PageLayout title={ __( 'Privacy' ) } size="small">
+			<VStack spacing={ 4 }>
+				<RouterLinkSummaryButton title={ __( 'Details' ) } to="/me/privacy" />
+			</VStack>
+		</PageLayout>
 	);
 }
 

client/dashboard/me/security/index.tsx

@@ -1,13 +1,15 @@
+import { __experimentalVStack as VStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import PageLayout from '../../components/page-layout';
+import RouterLinkSummaryButton from '../../components/router-link-summary-button';
 
 function Security() {
 	return (
-		<PageLayout
-			title={ __( 'Security' ) }
-			description={ __( 'Manage your security settings.' ) }
-			size="small"
-		/>
+		<PageLayout title={ __( 'Security' ) } size="small">
+			<VStack spacing={ 4 }>
+				<RouterLinkSummaryButton title={ __( 'Details' ) } to="/me/security" />
+			</VStack>
+		</PageLayout>
 	);
 }
 

client/dashboard/sites/deployments/index.tsx

@@ -1,8 +1,15 @@
 import { __ } from '@wordpress/i18n';
+import DataViewsCard from '../../components/dataviews-card';
 import PageLayout from '../../components/page-layout';
 
 function SiteDeployments() {
-	return <PageLayout title={ __( 'Deployments' ) } />;
+	return (
+		<PageLayout title={ __( 'Deployments' ) }>
+			<DataViewsCard>
+				<></>
+			</DataViewsCard>
+		</PageLayout>
+	);
 }
 
 export default SiteDeployments;

client/dashboard/sites/performance/index.tsx

@@ -1,8 +1,17 @@
+import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import PageLayout from '../../components/page-layout';
 
 function SitePerformance() {
-	return <PageLayout title={ __( 'Performance' ) } />;
+	return (
+		<PageLayout title={ __( 'Performance' ) }>
+			<Card>
+				<CardBody>
+					<></>
+				</CardBody>
+			</Card>
+		</PageLayout>
+	);
 }
 
 export default SitePerformance;