Make the site switcher work again (#1698)

## Motivation for the change, related issues

The site switcher was broken by #1669. This PR is a fix for that.

Related to #1687

## Implementation details

The site that is booted depends on the redux store, so the current
loaded site now depends on redux state.

## Testing Instructions (or ideally a Blueprint)

- CI
- Use `npm run dev` and manually test switching between sites

packages/playground/website/src/components/playground-configuration-group/index.tsx

@@ -160,7 +160,6 @@ export default function PlaygroundConfigurationGroup({
 			type: 'local-fs',
 			handle: dirHandle,
 		};
-		dispatch(setOpfsMountDescriptor({ device, mountpoint }));
 		if (idb) {
 			await saveDirectoryHandle(idb, dirHandle);
 		}
@@ -200,15 +199,15 @@ export default function PlaygroundConfigurationGroup({
 				...currentConfiguration,
 				storage: 'device',
 			});
-			await playground.goTo('/');
 
 			// Read current querystring and replace storage=browser with
 			// storage=device.
 			const url = new URL(window.location.href);
 			url.searchParams.set('storage', 'device');
 			window.history.pushState({}, '', url.toString());
 
-			alert('You are now using WordPress from your local directory.');
+			dispatch(setOpfsMountDescriptor({ device, mountpoint }));
+			alert('You are now loading WordPress from your local directory.');
 		} finally {
 			setMounting(false);
 		}

packages/playground/website/src/components/site-manager/index.tsx

@@ -1,5 +1,6 @@
 import { SiteManagerSidebar } from './site-manager-sidebar';
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
+import store, { selectSite } from '../../lib/redux-store';
 
 import css from './style.module.css';
 
@@ -26,7 +27,7 @@ export function SiteManager({
 		);
 	};
 
-	const onSiteClick = (siteSlug?: string) => {
+	const onSiteClick = async (siteSlug: string) => {
 		onSiteChange(siteSlug);
 		const url = new URL(window.location.href);
 		if (siteSlug) {
@@ -36,6 +37,8 @@ export function SiteManager({
 		}
 		window.history.pushState({}, '', url.toString());
 
+		await store.dispatch(selectSite(siteSlug));
+
 		/**
 		 * On mobile, the site editor and site preview are hidden.
 		 * This doesn't give users any way to go back to the site view.

packages/playground/website/src/components/site-manager/site-manager-sidebar/index.tsx

@@ -38,7 +38,7 @@ export function SiteManagerSidebar({
 }: {
 	className?: string;
 	siteSlug?: string;
-	onSiteClick: (siteSlug?: string) => void;
+	onSiteClick: (siteSlug: string) => void;
 }) {
 	const [sites, setSites] = useState<Site[]>([]);
 

packages/playground/website/src/lib/redux-store.ts

@@ -75,6 +75,27 @@ const slice = createSlice({
 // Export actions
 export const { setActiveModal, setOpfsMountDescriptor } = slice.actions;
 
+export function selectSite(siteSlug: string) {
+	return async (dispatch: typeof store.dispatch) => {
+		const opfsRoot = await navigator.storage.getDirectory();
+		const opfsDir = await opfsRoot.getDirectoryHandle(
+			siteSlug === 'wordpress' ? siteSlug : 'site-' + siteSlug,
+			{
+				create: true,
+			}
+		);
+		dispatch(
+			setOpfsMountDescriptor({
+				device: {
+					type: 'opfs',
+					path: await directoryHandleToOpfsPath(opfsDir),
+				},
+				mountpoint: '/wordpress',
+			})
+		);
+	};
+}
+
 // Configure store
 const store = configureStore({
 	reducer: slice.reducer,

packages/playground/website/src/lib/use-boot-playground.ts

@@ -29,9 +29,6 @@ export function useBootPlayground({ blueprint }: UsePlaygroundOptions) {
 
 	useEffect(() => {
 		const remoteUrl = getRemoteUrl();
-		if (started.current === remoteUrl.toString()) {
-			return;
-		}
 		if (!iframe) {
 			// Iframe ref is likely not set on the initial render.
 			// Re-render the current component to start the playground.