[Website] Preserve UI navigation state in URL with ?route parameter #2965
+350
−27
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adds URL-based persistence for sidebar and tab state so users can bookmark or refresh without losing their place in the UI. The ?route parameter encodes: - Sidebar open/closed state - Active section (site-details, blueprints, sidebar list) - Active tab in site details (settings, files, blueprint, database, logs) Examples: ?route=details.files, ?route=blueprints, ?route=closed Key changes: - Add route parsing/building utilities in router.ts - Add activeTab to Redux UI state with URL sync - Filter UI-only params (route, modal) when comparing URLs to prevent unnecessary playground reloads when only navigation state changes - Reset to Settings tab when clicking a site in the sidebar - Add E2E tests for route persistence across page reloads
adamziel
added
[Type] Enhancement
adamziel
force-pushed
the
query-routing
branch
from
bfa708f to
ab812f7
Compare
adamziel
force-pushed
the
query-routing
branch
from
6ce727d to
0237b94
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds URL-based routing to preserve the sidebar and nested tab navigation state. I've got very annoyed by losing the navigation state on every page refresh.
CleanShot.2025-11-28.at.20.05.11.mp4
There's one downside – if you copy the current URL from the address bar and share it with someone, they'll see the sidebar and squished Playground instead of a full-page Playground. This is not good or bad, but it's different than it was before and may surprise some folks. I wonder if we should use a localized route param name, e.g.
?xIya-route=details, to prevent opening the sidebar when that URL is opened on another machine.Implementatino details
The
?routequery param is handled viareplaceState, thus opening and closing the sidebar multiple times won't pollute the history. Our redux store stores the current route and sidebar state.Route parameter format:
?route=closedor no param → Sidebar closed (full Playground view)?route=details→ Sidebar open, site-details section, Settings tab?route=details.files→ Sidebar open, site-details section, Files tab?route=details.blueprint→ Sidebar open, Blueprint tab?route=details.database→ Sidebar open, Database tab?route=details.logs→ Sidebar open, Logs tab?route=blueprints→ Sidebar open, Blueprints Gallery section?route=sidebar→ Sidebar open, sidebar list sectionTest plan
?route=details.files, refresh → Files tab is selected?route=blueprints, refresh → Blueprints Gallery is shownnpx playwright test -g "Route persistence"