Remove the ?storage query arg. Use ?site-manager as a feature flag.

packages/playground/website/src/components/browser-chrome/index.tsx

@@ -20,7 +20,7 @@ interface BrowserChromeProps {
  * TODO: Remove this once the site manager supports all storage options.
  */
 const query = new URLSearchParams(window.location.search);
-const showSiteManager = query.get('storage') === 'opfs';
+const showSiteManager = query.has('site-manager');
 
 export default function BrowserChrome({
 	children,

packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx

@@ -7,11 +7,7 @@ import {
 	useAppDispatch,
 	useAppSelector,
 } from '../../lib/redux-store';
-import {
-	createNewSiteInfo,
-	getSiteInfoBySlug,
-	SiteStorageType,
-} from '../../lib/site-storage';
+import { createNewSiteInfo, getSiteInfoBySlug } from '../../lib/site-storage';
 
 /**
  * Ensures the redux store always has an activeSite value.
@@ -28,38 +24,28 @@ export function EnsurePlaygroundSiteIsSelected({
 	const [query] = useSearchParams();
 	const urlString = useCurrentUrl();
 	const requestedSiteSlug = query.get('site-slug');
-	const storage = query.get('storage')! as SiteStorageType;
 
 	useEffect(() => {
 		async function ensureSiteIsSelected() {
-			if (activeSite && activeSite.slug === requestedSiteSlug) {
-				if (activeSite.storage !== 'opfs') {
-					alert(
-						'Site slugs only work with browser storage. The site slug will be ignored.'
-					);
-				}
-				return;
-			}
-
-			if (requestedSiteSlug !== 'create') {
+			if (requestedSiteSlug) {
 				const siteInfo = await getSiteInfoBySlug(requestedSiteSlug!);
 				dispatch(setActiveSite(siteInfo!));
-				return;
+				// @TODO: Handle the case where site is not found
+			} else {
+				// Create a new temporary site using the config passed in the current URL
+				const url = new URL(urlString);
+				const blueprint = await resolveBlueprint(url);
+				const newSiteInfo = createNewSiteInfo({
+					originalBlueprint: blueprint,
+				});
+				await dispatch(createSite(newSiteInfo));
+				dispatch(setActiveSite(newSiteInfo!));
 			}
-
-			const url = new URL(urlString);
-			const blueprint = await resolveBlueprint(url);
-			const newSiteInfo = createNewSiteInfo({
-				originalBlueprint: blueprint,
-				storage: storage,
-			});
-			await dispatch(createSite(newSiteInfo));
-			dispatch(setActiveSite(newSiteInfo!));
 		}
 
 		ensureSiteIsSelected();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [urlString, requestedSiteSlug, dispatch]);
+	}, [requestedSiteSlug]);
 
 	if (!activeSite) {
 		return null;

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

@@ -1,16 +1,13 @@
 import { EnsurePlaygroundSiteIsSelected } from './ensure-playground-site-is-selected';
-import { EnsurePlaygroundSiteSlug } from './ensure-playground-site-slug';
 
 export function EnsurePlaygroundSite({
 	children,
 }: {
 	children: React.ReactNode;
 }) {
 	return (
-		<EnsurePlaygroundSiteSlug>
-			<EnsurePlaygroundSiteIsSelected>
-				{children}
-			</EnsurePlaygroundSiteIsSelected>
-		</EnsurePlaygroundSiteSlug>
+		<EnsurePlaygroundSiteIsSelected>
+			{children}
+		</EnsurePlaygroundSiteIsSelected>
 	);
 }

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

@@ -204,12 +204,6 @@ export default function PlaygroundConfigurationGroup({
 				storage: 'local-fs',
 			});
 
-			// 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());
-
 			dispatch(
 				setClientInfo({
 					siteSlug: activeSite!.slug,

packages/playground/website/src/components/playground-configuration-group/reload-with-new-configuration.ts

@@ -18,7 +18,6 @@ export async function reloadWithNewConfiguration(
 	const url = new URL(window.location.toString());
 	url.searchParams.set('php', config.php);
 	url.searchParams.set('wp', config.wp);
-	url.searchParams.set('storage', config.storage);
 	url.searchParams.delete('php-extension-bundle');
 	if (!config.withExtensions) {
 		url.searchParams.append('php-extension-bundle', 'light');

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

@@ -23,13 +23,9 @@ import {
 	chevronLeft,
 } from '@wordpress/icons';
 import { SiteLogs } from '../../log-modal';
-import { useSelector } from 'react-redux';
-import {
-	PlaygroundReduxState,
-	useAppDispatch,
-	setSiteManagerIsOpen,
-} from '../../../lib/redux-store';
+import { useAppDispatch, setSiteManagerIsOpen } from '../../../lib/redux-store';
 import { StorageType } from '../storage-type';
+import { usePlaygroundClient } from '../../../lib/use-playground-client';
 
 function SiteInfoRow({
 	label,
@@ -69,9 +65,7 @@ export function SiteInfoPanel({
 			onClose();
 		}
 	};
-	const playground = useSelector(
-		(state: PlaygroundReduxState) => state.playgroundClient
-	);
+	const playground = usePlaygroundClient();
 	const dispatch = useAppDispatch();
 
 	const [showNotice, setShowNotice] = useState(site.storage === 'none');
@@ -305,9 +299,7 @@ function SiteSettingsTab({ site }: { site: SiteInfo }) {
 	const username = 'admin';
 	const password = 'password';
 
-	const playground = useSelector(
-		(state: PlaygroundReduxState) => state.playgroundClient
-	);
+	const playground = usePlaygroundClient();
 
 	return (
 		<Flex

packages/playground/website/src/lib/resolve-blueprint.ts

@@ -1,18 +1,6 @@
 import { Blueprint } from '@wp-playground/client';
 import { makeBlueprint } from './make-blueprint';
 
-export function urlContainsSiteConfiguration(url: URL) {
-	const query = url.searchParams;
-	const fragment = decodeURI(url.hash || '#').substring(1);
-
-	const queryKeys = new Set(Array.from(query.keys()));
-	const ignoredQueryKeys = new Set(['storage', 'site-slug']);
-	const differentKeys = new Set(
-		[...queryKeys].filter((key) => !ignoredQueryKeys.has(key))
-	);
-	return fragment.length > 0 || differentKeys.size > 0;
-}
-
 export async function resolveBlueprint(url: URL) {
 	const query = url.searchParams;
 	const fragment = decodeURI(url.hash || '#').substring(1);