Sync layout URL param when toggling list/grid view

[Varadraj75]

Closes #13327

Feature: when the user toggles the List/Grid layout control, the URL now updates to reflect the chosen layout (e.g. ?layout=grid), so the current view can be shared. Follows @RayBB's direction on the issue: get_remembered_layout() already resolves ?layout= server-side, this adds the client-side URL sync.

Technical

• Single change in ListBooks.updateLayout(): after toggling the class and setting the LBL cookie, the layout query param is written via URLSearchParams and history.replaceState, preserving existing params like sort.
• replaceState rather than pushState so toggling doesn't stack back-button entries (agreed on the issue).
• Because this handler is shared by the ol-segmented-control, the URL sync applies to lists, search, author, and reading log pages with no extra code.
• Adds tests/unit/js/listBooks.test.js (modeled on sortOptions.test.js): 6 cases covering the class toggle, URL param write with param preservation, no duplicate layout param, replaceState behavior, LBL cookie, and the analytics event. The two URL tests fail without this change. Test file drafted with AI assistance, then reviewed and verified locally, including a red/green check against the unpatched file.

Testing

1. Open /search?q=the&sort=old
2. Click Grid: URL gains layout=grid, q and sort preserved
3. Click List: URL shows layout=details
4. Back button leaves the page in one press, it does not replay toggles
5. To verify the URL wins over the saved preference, edit the layout value directly in the address bar and hit Enter
6. npx jest tests/unit/js/listBooks.test.js passes (6 tests)

Screenshot

pr_demo_13327.mp4

Stakeholders

@RayBB

[Copilot]

Pull request overview

This PR syncs the list/grid layout toggle state to the current page URL via a layout query parameter, so the chosen view can be shared and consistently restored alongside existing query params (e.g., sort, q). It builds on existing server-side support for ?layout= (via get_remembered_layout()), adding client-side URL updates when the segmented control is toggled.

Changes:

• Update ListBooks.updateLayout() to write layout into the query string and call history.replaceState (preserving existing params).
• Add Jest unit tests covering class toggling, URL param updates/preservation, cookie persistence, analytics tracking, and history behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
openlibrary/plugins/openlibrary/js/list_books.js	Syncs the selected layout to ?layout= in the URL using replaceState after toggling the view and persisting LBL.
tests/unit/js/listBooks.test.js	Adds unit tests validating layout toggling behavior, URL synchronization, cookie persistence, analytics tracking, and history behavior.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Varadraj75]

DONE

[RayBB]

I put it on testing and it's working excellently. Thanks for contributing!