refactor: move selected page into awareness state (#4371)

Ref #4364

We need to implement universal linking of current user view. For this I
added "awareness" state which reflects terminology from collaboration
libraries.

First migrated selected page id and fixed usages.

Author: TrySound

apps/builder/app/builder/features/address-bar.stories.tsx

@@ -7,10 +7,9 @@ import {
   $dataSourceVariables,
   $dataSources,
   $pages,
-  $selectedPage,
-  $selectedPageId,
 } from "~/shared/nano-states";
 import { registerContainers } from "~/shared/sync";
+import { $awareness, $selectedPage } from "~/shared/awareness";
 
 registerContainers();
 
@@ -98,7 +97,7 @@ export default {
 } satisfies Meta;
 
 export const AddressBar: StoryFn = () => {
-  $selectedPageId.set("dynamicId");
+  $awareness.set({ pageId: "dynamicId" });
   return (
     <>
       <Box

apps/builder/app/builder/features/address-bar.tsx

@@ -37,7 +37,6 @@ import {
   $dataSourceVariables,
   $pages,
   $publishedOrigin,
-  $selectedPage,
   $selectedPageDefaultSystem,
   updateSystem,
 } from "~/shared/nano-states";
@@ -48,6 +47,7 @@ import {
   tokenizePathnamePattern,
 } from "~/builder/shared/url-pattern";
 import { savePathInHistory } from "~/shared/pages";
+import { $selectedPage } from "~/shared/awareness";
 
 const $selectedPagePath = computed([$selectedPage, $pages], (page, pages) => {
   if (pages === undefined || page === undefined) {

apps/builder/app/builder/features/ai/ai-command-bar.tsx

@@ -30,7 +30,6 @@ import { useRef, useState, type ComponentPropsWithoutRef } from "react";
 import {
   $collaborativeInstanceSelector,
   $selectedInstanceSelector,
-  $selectedPage,
 } from "~/shared/nano-states";
 import { useMediaRecorder } from "./hooks/media-recorder";
 import { useLongPressToggle } from "./hooks/long-press-toggle";
@@ -41,6 +40,7 @@ import { useEffectEvent } from "~/shared/hook-utils/effect-event";
 import { AiApiException, RateLimitException } from "./api-exceptions";
 import { getSetting, setSetting } from "~/builder/shared/client-settings";
 import { flushSync } from "react-dom";
+import { $selectedPage } from "~/shared/awareness";
 
 type PartialButtonProps<T = ComponentPropsWithoutRef<typeof Button>> = {
   [key in keyof T]?: T[key];

apps/builder/app/builder/features/components/components.tsx

@@ -26,7 +26,7 @@ import {
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 import { dragItemAttribute, useDraggable } from "./use-draggable";
 import { MetaIcon } from "~/builder/shared/meta-icon";
-import { $registeredComponentMetas, $selectedPage } from "~/shared/nano-states";
+import { $registeredComponentMetas } from "~/shared/nano-states";
 import {
   getMetaMaps,
   type MetaByCategory,
@@ -38,6 +38,7 @@ import { insert } from "./insert";
 import { matchSorter } from "match-sorter";
 import { parseComponentName } from "@webstudio-is/sdk";
 import type { Publish } from "~/shared/pubsub";
+import { $selectedPage } from "~/shared/awareness";
 
 const matchComponents = (
   metas: Array<WsComponentMeta>,

apps/builder/app/builder/features/components/insert.ts

@@ -5,14 +5,14 @@ import {
   $instances,
   $registeredComponentMetas,
   $selectedInstanceSelector,
-  $selectedPage,
 } from "~/shared/nano-states";
 import {
   computeInstancesConstraints,
   findClosestDroppableTarget,
   getComponentTemplateData,
   insertTemplateData,
 } from "~/shared/instance-utils";
+import { $selectedPage } from "~/shared/awareness";
 
 const formatInsertionError = (component: string, meta: WsComponentMeta) => {
   const or = new Intl.ListFormat("en", {

apps/builder/app/builder/features/inspector/inspector.tsx

@@ -25,14 +25,14 @@ import {
   $selectedInstance,
   $registeredComponentMetas,
   $dragAndDropState,
-  $selectedPage,
 } from "~/shared/nano-states";
 import { NavigatorTree } from "~/builder/features/navigator";
 import type { Settings } from "~/builder/shared/client-settings";
 import { MetaIcon } from "~/builder/shared/meta-icon";
 import { getInstanceLabel } from "~/shared/instance-utils";
 import { BindingPopoverProvider } from "~/builder/shared/binding-popover";
 import { $activeInspectorPanel } from "~/builder/shared/nano-states";
+import { $selectedPage } from "~/shared/awareness";
 
 const InstanceInfo = ({ instance }: { instance: Instance }) => {
   const metas = useStore($registeredComponentMetas);

apps/builder/app/builder/features/navigator/navigator-tree.tsx

@@ -41,7 +41,6 @@ import {
   $propValuesByInstanceSelector,
   $registeredComponentMetas,
   $selectedInstanceSelector,
-  $selectedPage,
   getIndexedInstanceId,
   type ItemDropTarget,
 } from "~/shared/nano-states";
@@ -56,6 +55,7 @@ import {
 } from "~/shared/instance-utils";
 import { emitCommand } from "~/builder/shared/commands";
 import { useContentEditable } from "~/shared/dom-hooks";
+import { $selectedPage } from "~/shared/awareness";
 
 type TreeItem = {
   level: number;

apps/builder/app/builder/features/pages/page-utils.test.ts

@@ -23,9 +23,9 @@ import {
   $dataSources,
   $pages,
   $resourceValues,
-  $selectedPageId,
 } from "~/shared/nano-states";
 import { registerContainers } from "~/shared/sync";
+import { $awareness } from "~/shared/awareness";
 
 setEnv("*");
 registerContainers();
@@ -413,7 +413,7 @@ test("page root scope should rely on selected page", () => {
     systemDataSourceId: "system",
   });
   $pages.set(pages);
-  $selectedPageId.set("pageId");
+  $awareness.set({ pageId: "pageId" });
   $dataSources.set(
     toMap([
       {
@@ -447,7 +447,7 @@ test("page root scope should use variable and resource values", () => {
       systemDataSourceId: "system",
     })
   );
-  $selectedPageId.set("homePageId");
+  $awareness.set({ pageId: "homePageId" });
   $dataSources.set(
     toMap([
       {
@@ -494,7 +494,7 @@ test("page root scope should prefill default system variable value", () => {
       systemDataSourceId: "systemId",
     })
   );
-  $selectedPageId.set("homePageId");
+  $awareness.set({ pageId: "homePageId" });
   $dataSources.set(
     toMap([
       {

apps/builder/app/builder/features/pages/page-utils.ts

@@ -21,11 +21,10 @@ import {
   $dataSources,
   $pages,
   $selectedInstanceSelector,
-  $selectedPage,
-  $selectedPageId,
   $variableValuesByInstanceSelector,
 } from "~/shared/nano-states";
 import { insertPageCopyMutable } from "~/shared/page-utils";
+import { $awareness, $selectedPage } from "~/shared/awareness";
 
 /**
  * When page or folder needs to be deleted or moved to a different parent,
@@ -206,8 +205,8 @@ export const getAllChildrenAndSelf = (
 export const deletePageMutable = (pageId: Page["id"], data: WebstudioData) => {
   const { pages } = data;
   // deselect page before deleting to avoid flash of content
-  if ($selectedPageId.get() === pageId) {
-    $selectedPageId.set(pages.homePage.id);
+  if ($awareness.get()?.pageId === pageId) {
+    $awareness.set({ pageId: pages.homePage.id });
     $selectedInstanceSelector.set(undefined);
   }
   const rootInstanceId = findPageByIdOrPath(pageId, pages)?.rootInstanceId;

apps/builder/app/builder/features/pages/pages.tsx

@@ -27,7 +27,7 @@ import {
 } from "@webstudio-is/icons";
 import { ExtendedPanel } from "../../shared/extended-sidebar-panel";
 import { NewPageSettings, PageSettings } from "./page-settings";
-import { $editingPageId, $pages, $selectedPageId } from "~/shared/nano-states";
+import { $editingPageId, $pages } from "~/shared/nano-states";
 import { switchPage } from "~/shared/pages";
 import {
   getAllChildrenAndSelf,
@@ -50,6 +50,7 @@ import {
 import { atom, computed } from "nanostores";
 import { isPathnamePattern } from "~/builder/shared/url-pattern";
 import { updateWebstudioData } from "~/shared/instance-utils";
+import { $selectedPage } from "~/shared/awareness";
 
 const ItemSuffix = ({
   isParentSelected,
@@ -439,7 +440,7 @@ const PageEditor = ({
   editingPageId: string;
   onClose: () => void;
 }) => {
-  const currentPageId = useStore($selectedPageId);
+  const currentPage = useStore($selectedPage);
 
   if (editingPageId === newPageId) {
     return (
@@ -459,7 +460,7 @@ const PageEditor = ({
       onDelete={() => {
         onClose();
         // switch to home page when deleted currently selected page
-        if (editingPageId === currentPageId) {
+        if (editingPageId === currentPage?.id) {
           const pages = $pages.get();
           if (pages) {
             switchPage(pages.homePage.id);
@@ -504,11 +505,11 @@ const FolderEditor = ({
 };
 
 export const PagesPanel = ({ onClose }: { onClose: () => void }) => {
-  const currentPageId = useStore($selectedPageId);
+  const currentPage = useStore($selectedPage);
   const editingItemId = useStore($editingPageId);
   const pages = useStore($pages);
 
-  if (currentPageId === undefined || pages === undefined) {
+  if (currentPage === undefined || pages === undefined) {
     return;
   }
 
@@ -557,7 +558,7 @@ export const PagesPanel = ({ onClose }: { onClose: () => void }) => {
       <Separator />
 
       <PagesTree
-        selectedPageId={currentPageId}
+        selectedPageId={currentPage.id}
         onSelect={(itemId) => {
           switchPage(itemId);
           onClose();
@@ -566,7 +567,7 @@ export const PagesPanel = ({ onClose }: { onClose: () => void }) => {
         onEdit={(itemId) => {
           // always select page when edit its settings
           if (itemId && isFolder(itemId, pages.folders) === false) {
-            $selectedPageId.set(itemId);
+            switchPage(itemId);
           }
           $editingPageId.set(itemId);
         }}