Hosting Dashboard: Add Snackbar to the Site Settings backport (#103620)

Author: taipeicoder

client/sites/settings/v2/index.tsx

@@ -4,7 +4,6 @@ import { useEffect, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { persistPromise, queryClient } from 'calypso/dashboard/app/query-client';
 import { getRouter } from './router';
-import './style.scss';
 
 export default function DashboardBackportSiteSettingsRenderer() {
 	const rootInstanceRef = useRef< ReturnType< typeof createRoot > | null >( null );

client/sites/settings/v2/root.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from '@tanstack/react-router';
+import Snackbars from 'calypso/dashboard/app/snackbars';
+import './style.scss';
+
+export default function Root() {
+	return (
+		<>
+			<Outlet />
+			<Snackbars />
+		</>
+	);
+}

client/sites/settings/v2/router.tsx

@@ -10,8 +10,9 @@ import {
 } from '@tanstack/react-router';
 import { siteSettingsQuery } from 'calypso/dashboard/app/queries';
 import { queryClient } from 'calypso/dashboard/app/query-client';
+import Root from './root';
 
-const rootRoute = createRootRoute( { component: () => <Outlet /> } );
+const rootRoute = createRootRoute( { component: Root } );
 
 const dashboardSiteSettingsCompatibilityRouteRoot = createRoute( {
 	getParentRoute: () => rootRoute,
@@ -137,6 +138,7 @@ export const getRouter = () => {
 		defaultPreload: 'intent',
 		defaultPreloadStaleTime: 0,
 		defaultNotFoundComponent: () => null,
+		defaultViewTransition: true,
 
 		// Use memory history to compartmentalize TanStack Router's history management.
 		// This way, we separate TanStack Router's history implementation from the browser history used by page.js.

client/sites/settings/v2/style.scss

@@ -1,19 +1,25 @@
 @import 'calypso/dashboard/app-dotcom/style.scss';
 
-.dashboard-backport-site-settings-root .dashboard-page-layout {
-	align-self: center;
-	margin: 0;
-	padding: 0;
+.dashboard-backport-site-settings-root {
+	.dashboard-page-layout {
+	    align-self: center;
+	    margin: 0;
+	    padding: 0;
 
-	h1 {
-		font-family: var( --dashboard-h1__font-family );
-		font-weight: var( --dashboard-h1__font-weight ) !important;
+	    h1 {
+	    	font-family: var( --dashboard-h1__font-family );
+	    	font-weight: var( --dashboard-h1__font-weight ) !important;
+	    }
+
+	    h2 {
+	    	font-size: 1.25rem;
+	    	font-weight: 500;
+	    	line-height: 1.5;
+	    	margin-bottom: 0;
+		}
 	}
 
-	h2 {
-		font-size: 1.25rem;
-		font-weight: 500;
-		line-height: 1.5;
-		margin-bottom: 0;
+	.site-preview-pane:has( & .dashboard-snackbars ) {
+		z-index: 176;
 	}
-}
+}