fix: Jump links don't work in preview after first click (#4714)

## Description

closes #4691

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/canvas/interceptor.ts

@@ -59,7 +59,7 @@ const switchPageAndUpdateSystem = (href: string, formData?: FormData) => {
         }
       }
       const search = Object.fromEntries(pageHref.searchParams);
-      $selectedPageHash.set(pageHref.hash);
+      $selectedPageHash.set({ hash: pageHref.hash });
       selectPage(page.id);
       updateSystem(page, { params, search });
       savePathInHistory(page.id, pageHref.pathname);

apps/builder/app/shared/nano-states/pages.ts

@@ -3,6 +3,6 @@ import type { Page, Pages } from "@webstudio-is/sdk";
 
 export const $pages = atom<undefined | Pages>(undefined);
 
-export const $selectedPageHash = atom<string>("");
+export const $selectedPageHash = atom<{ hash: string }>({ hash: "" });
 
 export const $editingPageId = atom<undefined | Page["id"]>();

apps/builder/app/shared/pages/use-switch-page.ts

@@ -36,7 +36,7 @@ const setPageStateFromUrl = () => {
     findPageByIdOrPath(searchParams.get("pageId") ?? "", pages)?.id ??
     pages.homePage.id;
 
-  $selectedPageHash.set(searchParams.get("pageHash") ?? "");
+  $selectedPageHash.set({ hash: searchParams.get("pageHash") ?? "" });
   selectPage(pageId);
 };
 
@@ -94,7 +94,7 @@ export const useSyncPageUrl = () => {
     // Do not navigate on popstate change
     if (
       searchParamsPageId === page.id &&
-      searchParamsPageHash === pageHash &&
+      searchParamsPageHash === pageHash.hash &&
       searParamsMode === builderMode
     ) {
       return;
@@ -104,7 +104,7 @@ export const useSyncPageUrl = () => {
       builderPath({
         pageId: page.id === pages.homePage.id ? undefined : page.id,
         authToken: $authToken.get(),
-        pageHash: pageHash === "" ? undefined : pageHash,
+        pageHash: pageHash.hash === "" ? undefined : pageHash.hash,
         mode: builderMode === "design" ? undefined : builderMode,
       })
     );
@@ -118,13 +118,13 @@ export const useHashLinkSync = () => {
   const pageHash = useStore($selectedPageHash);
 
   useEffect(() => {
-    if (pageHash === "") {
+    if (pageHash.hash === "") {
       // native browser behavior is to do nothing if hash is empty
       // remix scroll to top, we emulate native
       return;
     }
 
-    let elementId = decodeURIComponent(pageHash);
+    let elementId = decodeURIComponent(pageHash.hash);
     if (elementId.startsWith("#")) {
       elementId = elementId.slice(1);
     }
@@ -134,6 +134,7 @@ export const useHashLinkSync = () => {
     if (element !== null) {
       element.scrollIntoView();
     }
+
     // Remix scroll to top if element not found
     // browser do nothing
   }, [pageHash]);