A4A: Add backup-now action and route prefetching to agency backups

* Add the "Back up now" button (with useBackupState and the
  BackupNotices progress banner) to the agency backups list page.
* Forward searchParams to BackupsBrowser so the DataView hydrates
  page/search state from the URL, matching dotcom.
* Add a loader on the backups route to prefetch site settings and
  backups in parallel, removing the site → settings suspense waterfall.
* Fix stale $siteId route comments to $siteSlug.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: yashwin

client/dashboard/agency/sites/site/backups-list-page.tsx

@@ -9,14 +9,18 @@ import { useDateRange } from '../../../app/hooks/use-date-range';
 import { useLocale } from '../../../app/locale';
 import {
 	agencySiteRoute,
+	agencySiteBackupsRoute,
 	agencySiteBackupsIndexRoute,
 	agencySiteBackupDetailRoute,
 	agencySiteBackupRestoreRoute,
 	agencySiteBackupDownloadRoute,
 } from '../../../app/router/agency';
 import { PageHeader } from '../../../components/page-header';
 import PageLayout from '../../../components/page-layout';
+import { BackupNotices } from '../../../sites/backups/backup-notices';
+import { BackupNowButton } from '../../../sites/backups/backup-now-button';
 import { BackupsBrowser, useIsBackupsSmallViewport } from '../../../sites/backups/backups-browser';
+import { useBackupState } from '../../../sites/backups/use-backup-state';
 import type { ActivityLogEntry } from '@automattic/api-core';
 
 export default function AgencySiteBackupsListPage() {
@@ -28,6 +32,7 @@ export default function AgencySiteBackupsListPage() {
 		| { rewindId?: string }
 		| undefined;
 	const rewindId = routeParams?.rewindId;
+	const searchParams = agencySiteBackupsRoute.useSearch();
 
 	const { data: site } = useSuspenseQuery( siteBySlugQuery( siteSlug ) );
 
@@ -40,6 +45,8 @@ export default function AgencySiteBackupsListPage() {
 	} );
 	const { gmtOffset, timezoneString } = siteSettings;
 
+	const backupState = useBackupState( site.ID );
+
 	const { dateRange, handleDateRangeChange } = useDateRange( {
 		timezoneString,
 		gmtOffset,
@@ -95,15 +102,21 @@ export default function AgencySiteBackupsListPage() {
 	const isMobileDetailsView = useIsBackupsSmallViewport() && !! rewindId;
 
 	const actions = (
-		<DateRangePicker
-			start={ dateRange.start }
-			end={ dateRange.end }
-			gmtOffset={ gmtOffset }
-			timezoneString={ timezoneString }
-			locale={ locale }
-			defaultFallbackPreset="last-30-days"
-			onChange={ handleDateRangeChangeWrapper }
-		/>
+		<>
+			{ /* This div is required to fix a layout width issue when the DateRangePicker is placed together with the BackupNowButton. */ }
+			<div>
+				<DateRangePicker
+					start={ dateRange.start }
+					end={ dateRange.end }
+					gmtOffset={ gmtOffset }
+					timezoneString={ timezoneString }
+					locale={ locale }
+					defaultFallbackPreset="last-30-days"
+					onChange={ handleDateRangeChangeWrapper }
+				/>
+			</div>
+			<BackupNowButton site={ site } backupState={ backupState } />
+		</>
 	);
 
 	return (
@@ -118,13 +131,24 @@ export default function AgencySiteBackupsListPage() {
 					actions={ isMobileDetailsView ? undefined : actions }
 				/>
 			}
+			notices={
+				! isMobileDetailsView && backupState.status !== 'idle' ? (
+					<BackupNotices
+						backupState={ backupState }
+						site={ site }
+						timezoneString={ timezoneString }
+						gmtOffset={ gmtOffset }
+					/>
+				) : undefined
+			}
 		>
 			<BackupsBrowser
 				site={ site }
 				rewindId={ rewindId }
 				dateRange={ dateRange }
 				timezoneString={ timezoneString }
 				gmtOffset={ gmtOffset }
+				searchParams={ searchParams }
 				onSelectBackup={ navigateToBackup }
 				onRequestRestore={ handleRequestRestore }
 				onRequestDownload={ handleRequestDownload }

client/dashboard/app/router/agency.tsx

@@ -6,6 +6,9 @@ import {
 	mcpSettingsQuery,
 	queryClient,
 	rawUserPreferencesQuery,
+	siteBackupsQuery,
+	siteBySlugQuery,
+	siteSettingsQuery,
 } from '@automattic/api-queries';
 import { createRoute, createLazyRoute, notFound } from '@tanstack/react-router';
 import { __ } from '@wordpress/i18n';
@@ -266,11 +269,26 @@ const agencySiteOverviewRoute = createRoute( {
 	)
 );
 
-// `/sites/$siteId/backups` – layout that hosts the backups list/detail views
-const agencySiteBackupsRoute = createRoute( {
+// `/sites/$siteSlug/backups` – layout that hosts the backups list/detail views
+export const agencySiteBackupsRoute = createRoute( {
 	head: () => ( { meta: [ { title: __( 'Backups' ) } ] } ),
 	getParentRoute: () => agencySiteRoute,
 	path: 'backups',
+	loader: async ( { params: { siteSlug } } ) => {
+		const [ agencySite, site ] = await Promise.all( [
+			queryClient.ensureQueryData( agencySiteQuery( siteSlug ) ),
+			queryClient.ensureQueryData( siteBySlugQuery( siteSlug ) ),
+		] );
+
+		if ( ! agencySite?.has_backup ) {
+			return;
+		}
+
+		await Promise.all( [
+			queryClient.ensureQueryData( siteSettingsQuery( site.ID ) ),
+			queryClient.ensureQueryData( siteBackupsQuery( site.ID ) ),
+		] );
+	},
 } ).lazy( () =>
 	import( '../../agency/sites/site/backups' ).then( ( d ) =>
 		createLazyRoute( 'agency-site-backups' )( {
@@ -290,7 +308,7 @@ export const agencySiteBackupsIndexRoute = createRoute( {
 	)
 );
 
-// `/sites/$siteId/backups/$rewindId` – layout hosting the detail view + restore/download flows
+// `/sites/$siteSlug/backups/$rewindId` – layout hosting the detail view + restore/download flows
 export const agencySiteBackupDetailRoute = createRoute( {
 	head: () => ( { meta: [ { title: __( 'Backups' ) } ] } ),
 	getParentRoute: () => agencySiteBackupsRoute,