Fix: Preserve route param in URL, default sidebar open on desktop

Author: adamziel

packages/playground/website/src/lib/state/redux/slice-sites.ts

@@ -251,14 +251,19 @@ export function setTemporarySiteSpec(
 		getState: () => PlaygroundReduxState
 	) => {
 		const siteSlug = deriveSlugFromSiteName(siteName);
-		// Filter out UI-only params so they don't cause unnecessary site recreation.
-		// This ensures existing temporary sites are reused when only route/modal changed.
-		const newSiteUrlParams = {
-			searchParams: filterUIOnlyParams(
-				parseSearchParams(playgroundUrlWithQueryApiArgs.searchParams)
+		// Store the full URL params including UI params like route/modal.
+		const fullUrlParams = {
+			searchParams: parseSearchParams(
+				playgroundUrlWithQueryApiArgs.searchParams
 			),
 			hash: playgroundUrlWithQueryApiArgs.hash,
 		};
+		// For comparison, filter out UI-only params so we don't recreate
+		// the site when only route/modal changed.
+		const paramsForComparison = {
+			searchParams: filterUIOnlyParams(fullUrlParams.searchParams),
+			hash: fullUrlParams.hash,
+		};
 
 		const showTemporarySiteError = (params: {
 			error: SiteError;
@@ -267,7 +272,7 @@ export function setTemporarySiteSpec(
 			// Create a mock temporary site to associate the error with.
 			const errorSite: SiteInfo = {
 				slug: siteSlug,
-				originalUrlParams: newSiteUrlParams,
+				originalUrlParams: fullUrlParams,
 				metadata: {
 					name: siteName,
 					id: crypto.randomUUID(),
@@ -318,11 +323,17 @@ export function setTemporarySiteSpec(
 
 		const currentTemporarySite = selectTemporarySite(getState());
 		if (currentTemporarySite) {
-			// If the current temporary site is the same as the site we're setting,
-			// then we don't need to create a new site.
+			// If the current temporary site has the same non-UI params,
+			// we don't need to create a new site.
+			const currentParamsForComparison = {
+				searchParams: filterUIOnlyParams(
+					currentTemporarySite.originalUrlParams?.searchParams || {}
+				),
+				hash: currentTemporarySite.originalUrlParams?.hash || '',
+			};
 			if (
-				JSON.stringify(currentTemporarySite.originalUrlParams) ===
-				JSON.stringify(newSiteUrlParams)
+				JSON.stringify(currentParamsForComparison) ===
+				JSON.stringify(paramsForComparison)
 			) {
 				return currentTemporarySite;
 			}
@@ -373,7 +384,7 @@ export function setTemporarySiteSpec(
 			// Compute the runtime configuration based on the resolved Blueprint:
 			const newSiteInfo: SiteInfo = {
 				slug: siteSlug,
-				originalUrlParams: newSiteUrlParams,
+				originalUrlParams: fullUrlParams,
 				metadata: {
 					name: siteName,
 					id: crypto.randomUUID(),

packages/playground/website/src/lib/state/redux/slice-ui.ts

@@ -128,17 +128,20 @@ export interface UIState {
 const query = new URL(document.location.href).searchParams;
 const isEmbeddedInAnIframe = window.self !== window.top;
 // @TODO: Centralize these breakpoint sizes.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const isMobile = window.innerWidth < 875;
 
 // Parse the route parameter for sidebar/tab state
 const routeState = parseRouteParam(query.get('route'));
-
-// Check if there's an explicit route param requesting the sidebar to be open.
-// If so, respect it regardless of viewport size (but not in seamless mode or iframes).
-const hasExplicitRouteParam = query.has('route') && routeState.sidebarOpen;
 const isSeamlessMode = query.get('mode') === 'seamless';
 
+// Determine initial sidebar open state:
+// - If route param exists, use it (route=closed → closed, otherwise → open)
+// - If no route param, default to open on desktop, closed on mobile
+const hasExplicitRouteParam = query.has('route');
+const shouldSidebarBeOpen = hasExplicitRouteParam
+	? routeState.sidebarOpen
+	: !isMobile;
+
 const initialState: UIState = {
 	/**
 	 * Don't show certain modals after a page refresh.
@@ -165,9 +168,8 @@ const initialState: UIState = {
 		!isSeamlessMode &&
 		// We do not expect to render the Playground app UI in an iframe.
 		!isEmbeddedInAnIframe &&
-		// If there's an explicit route param requesting sidebar open, respect it.
-		// Otherwise default to closed on all viewport sizes.
-		hasExplicitRouteParam,
+		// Use explicit route param if provided, otherwise default based on viewport.
+		shouldSidebarBeOpen,
 	siteManagerSection: routeState.section,
 };