refactor: store selected instance in awareness state (#4378)

For now sync awareness with selected instance selector. Added selectPage
and selectInstance utilities to update awareness properly.

Author: TrySound

apps/builder/app/builder/features/footer/breadcrumbs.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import { useStore } from "@nanostores/react";
 import { ChevronRightIcon } from "@webstudio-is/icons";
 import { theme, Button, Flex, Text } from "@webstudio-is/design-system";
@@ -9,7 +10,7 @@ import {
 import { getAncestorInstanceSelector } from "~/shared/tree-utils";
 import { $textEditingInstanceSelector } from "~/shared/nano-states";
 import { getInstanceLabel } from "~/shared/instance-utils";
-import { Fragment } from "react";
+import { selectInstance } from "~/shared/awareness";
 
 export const Breadcrumbs = () => {
   const instances = useStore($instances);
@@ -41,7 +42,7 @@ export const Breadcrumbs = () => {
                   css={{ color: "inherit" }}
                   key={instance.id}
                   onClick={() => {
-                    $selectedInstanceSelector.set(
+                    selectInstance(
                       getAncestorInstanceSelector(
                         selectedInstanceSelector,
                         instance.id

apps/builder/app/builder/features/marketplace/templates.tsx

@@ -27,9 +27,9 @@ import {
   updateWebstudioData,
 } from "~/shared/instance-utils";
 import { insertPageCopyMutable } from "~/shared/page-utils";
-import { switchPage } from "~/shared/pages";
 import { Card } from "./card";
 import type { MarketplaceOverviewItem } from "~/shared/marketplace/types";
+import { selectPage } from "~/shared/awareness";
 
 /**
  * Insert page as a template.
@@ -65,7 +65,7 @@ const insertPage = ({
     });
   });
   if (newPageId) {
-    switchPage(newPageId);
+    selectPage(newPageId);
   }
 };
 

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

@@ -55,7 +55,7 @@ import {
 } from "~/shared/instance-utils";
 import { emitCommand } from "~/builder/shared/commands";
 import { useContentEditable } from "~/shared/dom-hooks";
-import { $selectedPage } from "~/shared/awareness";
+import { $selectedPage, selectInstance } from "~/shared/awareness";
 
 type TreeItem = {
   level: number;
@@ -485,8 +485,8 @@ export const NavigatorTree = () => {
             level={0}
             isSelected={selectedKey === ROOT_INSTANCE_ID}
             buttonProps={{
-              onClick: () => $selectedInstanceSelector.set([ROOT_INSTANCE_ID]),
-              onFocus: () => $selectedInstanceSelector.set([ROOT_INSTANCE_ID]),
+              onClick: () => selectInstance([ROOT_INSTANCE_ID]),
+              onFocus: () => selectInstance([ROOT_INSTANCE_ID]),
             }}
             action={
               <Tooltip
@@ -588,8 +588,8 @@ export const NavigatorTree = () => {
                   onMouseEnter: () =>
                     $hoveredInstanceSelector.set(item.selector),
                   onMouseLeave: () => $hoveredInstanceSelector.set(undefined),
-                  onClick: () => $selectedInstanceSelector.set(item.selector),
-                  onFocus: () => $selectedInstanceSelector.set(item.selector),
+                  onClick: () => selectInstance(item.selector),
+                  onFocus: () => selectInstance(item.selector),
                   onKeyDown: (event) => {
                     if (event.key === "Enter") {
                       emitCommand("editInstanceText");

apps/builder/app/builder/features/pages/page-settings.tsx

@@ -70,7 +70,6 @@ import {
   $assets,
   $instances,
   $pages,
-  $selectedInstanceSelector,
   $dataSources,
   computeExpression,
   $dataSourceVariables,
@@ -108,6 +107,7 @@ import { $userPlanFeatures } from "~/builder/shared/nano-states";
 import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
 import { useUnmount } from "~/shared/hook-utils/use-mount";
 import { Card } from "../marketplace/card";
+import { selectInstance } from "~/shared/awareness";
 
 const fieldDefaultValues = {
   name: "Untitled",
@@ -1390,7 +1390,7 @@ const createPage = (pageId: Page["id"], values: Values) => {
       });
 
       registerFolderChildMutable(pages.folders, pageId, values.parentFolderId);
-      $selectedInstanceSelector.set(undefined);
+      selectInstance(undefined);
     }
   );
 };

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

@@ -20,11 +20,10 @@ import {
 import {
   $dataSources,
   $pages,
-  $selectedInstanceSelector,
   $variableValuesByInstanceSelector,
 } from "~/shared/nano-states";
 import { insertPageCopyMutable } from "~/shared/page-utils";
-import { $awareness, $selectedPage } from "~/shared/awareness";
+import { $selectedPage, selectPage } from "~/shared/awareness";
 
 /**
  * When page or folder needs to be deleted or moved to a different parent,
@@ -205,9 +204,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 ($awareness.get()?.pageId === pageId) {
-    $awareness.set({ pageId: pages.homePage.id });
-    $selectedInstanceSelector.set(undefined);
+  if ($selectedPage.get()?.id === pageId) {
+    selectPage(pages.homePage.id);
   }
   const rootInstanceId = findPageByIdOrPath(pageId, pages)?.rootInstanceId;
   if (rootInstanceId !== undefined) {

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

@@ -28,7 +28,6 @@ import {
 import { ExtendedPanel } from "../../shared/extended-sidebar-panel";
 import { NewPageSettings, PageSettings } from "./page-settings";
 import { $editingPageId, $pages } from "~/shared/nano-states";
-import { switchPage } from "~/shared/pages";
 import {
   getAllChildrenAndSelf,
   reparentOrphansMutable,
@@ -50,7 +49,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";
+import { $selectedPage, selectPage } from "~/shared/awareness";
 
 const ItemSuffix = ({
   isParentSelected,
@@ -448,7 +447,7 @@ const PageEditor = ({
         onClose={onClose}
         onSuccess={(pageId) => {
           onClose();
-          switchPage(pageId);
+          selectPage(pageId);
         }}
       />
     );
@@ -463,13 +462,13 @@ const PageEditor = ({
         if (editingPageId === currentPage?.id) {
           const pages = $pages.get();
           if (pages) {
-            switchPage(pages.homePage.id);
+            selectPage(pages.homePage.id);
           }
         }
       }}
       onDuplicate={(newPageId) => {
         onClose();
-        switchPage(newPageId);
+        selectPage(newPageId);
       }}
       pageId={editingPageId}
       key={editingPageId}
@@ -560,14 +559,14 @@ export const PagesPanel = ({ onClose }: { onClose: () => void }) => {
       <PagesTree
         selectedPageId={currentPage.id}
         onSelect={(itemId) => {
-          switchPage(itemId);
+          selectPage(itemId);
           onClose();
         }}
         editingItemId={editingItemId}
         onEdit={(itemId) => {
           // always select page when edit its settings
           if (itemId && isFolder(itemId, pages.folders) === false) {
-            switchPage(itemId);
+            selectPage(itemId);
           }
           $editingPageId.set(itemId);
         }}

apps/builder/app/builder/features/settings-panel/variables-section.stories.tsx

@@ -1,15 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Box } from "@webstudio-is/design-system";
-import { VariablesSection as VariablesSectionComponent } from "./variables-section";
-import {
-  $pages,
-  $selectedInstanceSelector,
-  $instances,
-} from "~/shared/nano-states";
-import { registerContainers } from "~/shared/sync";
 import { createDefaultPages } from "@webstudio-is/project-build";
+import { $pages, $instances } from "~/shared/nano-states";
+import { registerContainers } from "~/shared/sync";
 import { $userPlanFeatures } from "~/builder/shared/nano-states";
 import { $awareness } from "~/shared/awareness";
+import { VariablesSection as VariablesSectionComponent } from "./variables-section";
 
 $userPlanFeatures.set({
   ...$userPlanFeatures.get(),
@@ -22,16 +18,15 @@ export default {
 } satisfies Meta;
 
 registerContainers();
-$selectedInstanceSelector.set(["root"]);
 $instances.set(
   new Map([
-    ["root", { id: "root", type: "instance", component: "Box", children: [] }],
+    ["box", { id: "box", type: "instance", component: "Box", children: [] }],
   ])
 );
-$awareness.set({ pageId: "home" });
 $pages.set(
-  createDefaultPages({ rootInstanceId: "root", systemDataSourceId: "system" })
+  createDefaultPages({ rootInstanceId: "box", systemDataSourceId: "system" })
 );
+$awareness.set({ pageId: "home", instanceSelector: ["box"] });
 
 export const VariablesSection: StoryObj = {
   render: () => (

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.stories.tsx

@@ -4,11 +4,11 @@ import { Section } from "./advanced";
 import {
   $breakpoints,
   $selectedBreakpointId,
-  $selectedInstanceSelector,
   $styles,
   $styleSourceSelections,
 } from "~/shared/nano-states";
 import { setProperty } from "../../shared/use-style-data";
+import { $awareness } from "~/shared/awareness";
 
 const backgroundImage: StyleDecl = {
   breakpointId: "base",
@@ -27,7 +27,10 @@ $styles.set(new Map([[getStyleDeclKey(backgroundImage), backgroundImage]]));
 $styleSourceSelections.set(
   new Map([["box", { instanceId: "box", values: ["local"] }]])
 );
-$selectedInstanceSelector.set(["box"]);
+$awareness.set({
+  pageId: "",
+  instanceSelector: ["box"],
+});
 
 setProperty("accentColor")({ type: "keyword", value: "red" });
 setProperty("alignContent")({ type: "keyword", value: "normal" });

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.stories.tsx

@@ -7,12 +7,12 @@ import {
 import {
   $breakpoints,
   $selectedBreakpointId,
-  $selectedInstanceSelector,
   $styles,
   $styleSourceSelections,
 } from "~/shared/nano-states";
 import { registerContainers } from "~/shared/sync";
 import { BackgroundContent } from "./background-content";
+import { $awareness } from "~/shared/awareness";
 
 const backgroundImage: StyleDecl = {
   breakpointId: "base",
@@ -31,7 +31,10 @@ $styles.set(new Map([[getStyleDeclKey(backgroundImage), backgroundImage]]));
 $styleSourceSelections.set(
   new Map([["box", { instanceId: "box", values: ["local"] }]])
 );
-$selectedInstanceSelector.set(["box"]);
+$awareness.set({
+  pageId: "",
+  instanceSelector: ["box"],
+});
 
 export const BackgroundContentStory = () => {
   const elementRef = useRef<HTMLDivElement>(null);

apps/builder/app/builder/features/style-panel/sections/backgrounds/backgrounds.stories.tsx

@@ -4,11 +4,11 @@ import { registerContainers } from "~/shared/sync";
 import {
   $breakpoints,
   $selectedBreakpointId,
-  $selectedInstanceSelector,
   $styles,
   $styleSourceSelections,
 } from "~/shared/nano-states";
 import { Section } from "./backgrounds";
+import { $awareness } from "~/shared/awareness";
 
 const backgroundImage: StyleDecl = {
   breakpointId: "base",
@@ -40,7 +40,10 @@ $styles.set(new Map([[getStyleDeclKey(backgroundImage), backgroundImage]]));
 $styleSourceSelections.set(
   new Map([["box", { instanceId: "box", values: ["local"] }]])
 );
-$selectedInstanceSelector.set(["box"]);
+$awareness.set({
+  pageId: "",
+  instanceSelector: ["box"],
+});
 
 const Panel = styled("div", {
   width: theme.spacing[30],