make clicking on page work & refactor

apps/designer/app/designer/designer.tsx

@@ -13,7 +13,6 @@ import { Inspector } from "./features/inspector";
 import {
   useAssets,
   useHoveredInstanceData,
-  usePages,
   useSelectedInstanceData,
   useSyncStatus,
 } from "./shared/nano-states";
@@ -78,13 +77,6 @@ const useSetAssets = (assets?: Array<Asset>) => {
   }, [assets, setAssets]);
 };
 
-const useSetPages = (pages: Pages, currentPageId: string) => {
-  const [, setPages] = usePages();
-  useEffect(() => {
-    setPages({ pages, currentPageId });
-  }, [pages, setPages, currentPageId]);
-};
-
 const useNavigatorLayout = () => {
   // We need to render the detached state only once the setting was actually loaded from local storage.
   // Otherwise we may show the detached state because its the default and then hide it immediately.
@@ -264,7 +256,6 @@ export const Designer = ({ config, project, pages, pageId }: DesignerProps) => {
   useSubscribeHoveredInstanceData();
   useSubscribeBreakpoints();
   useSetAssets(project.assets);
-  useSetPages(pages, pageId);
   const [publish, publishRef] = usePublish();
   const [isPreviewMode] = useIsPreviewMode();
   usePublishShortcuts(publish);
@@ -318,7 +309,13 @@ export const Designer = ({ config, project, pages, pageId }: DesignerProps) => {
         </Workspace>
       </Main>
       <SidePanel gridArea="sidebar" isPreviewMode={isPreviewMode}>
-        <SidebarLeft publish={publish} />
+        <SidebarLeft
+          publish={publish}
+          project={project}
+          pages={pages}
+          currentPageId={pageId}
+          config={config}
+        />
       </SidePanel>
       <NavigatorPanel publish={publish} isPreviewMode={isPreviewMode} />
       <SidePanel

apps/designer/app/designer/features/sidebar-left/panels/pages/index.tsx

@@ -5,14 +5,18 @@ import { type Publish } from "~/shared/pubsub";
 import { StackIcon } from "@webstudio-is/icons";
 import type { TabName } from "../../types";
 import { Header } from "../../lib/header";
-import { usePages } from "~/designer/shared/nano-states";
-import { type Page, type Pages } from "@webstudio-is/project";
+import { type Page, type Pages, type Project } from "@webstudio-is/project";
 import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
+import { type Config } from "~/config";
 
 type TabContentProps = {
   onSetActiveTab: (tabName: TabName) => void;
   publish: Publish;
+  project: Project;
+  pages: Pages;
+  currentPageId: string;
+  config: Config;
 };
 
 type PagesTreeNode =
@@ -64,22 +68,23 @@ const staticTreeProps = {
   },
 };
 
-const TabBody = ({
+export const TabContent = ({
+  onSetActiveTab,
+  project,
   pages,
   currentPageId,
-}: {
-  pages: Pages;
-  currentPageId: string;
-}) => {
+  config,
+}: TabContentProps) => {
   const pagesTree = useMemo(() => pages && toTreeData(pages), [pages]);
 
   const navigate = useNavigate();
   const handleSelect = (pageId: string) => {
-    navigate(`/todo/${pageId}`);
+    navigate(`${config.designerPath}/${project.id}?pageId=${pageId}`);
   };
 
   return (
     <>
+      <Header title="Pages" onClose={() => onSetActiveTab("none")} />
       <TreeNode
         hideRoot
         selectedItemId={currentPageId}
@@ -91,21 +96,6 @@ const TabBody = ({
   );
 };
 
-export const TabContent = ({ onSetActiveTab }: TabContentProps) => {
-  const [pagesData] = usePages();
-  return (
-    <>
-      <Header title="Pages" onClose={() => onSetActiveTab("none")} />
-      {pagesData && (
-        <TabBody
-          pages={pagesData.pages}
-          currentPageId={pagesData.currentPageId}
-        />
-      )}
-    </>
-  );
-};
-
 // @todo: proper icon
 export const icon = <StackIcon />;
 

apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx

@@ -13,14 +13,26 @@ import { isFeatureEnabled } from "~/shared/feature-flags";
 import { useClientSettings } from "~/designer/shared/client-settings";
 import { PANEL_WIDTH } from "~/designer/shared/constants";
 import { Flex } from "@webstudio-is/design-system";
+import { type Project, type Pages } from "@webstudio-is/project";
+import { Config } from "~/config";
 
 const none = { TabContent: () => null };
 
 type SidebarLeftProps = {
   publish: Publish;
+  project: Project;
+  pages: Pages;
+  currentPageId: string;
+  config: Config;
 };
 
-export const SidebarLeft = ({ publish }: SidebarLeftProps) => {
+export const SidebarLeft = ({
+  publish,
+  project,
+  pages,
+  currentPageId,
+  config,
+}: SidebarLeftProps) => {
   const [dragAndDropState] = useDragAndDropState();
   const [activeTab, setActiveTab] = useState<TabName>("none");
   const { TabContent } = activeTab === "none" ? none : panels[activeTab];
@@ -78,7 +90,14 @@ export const SidebarLeft = ({ publish }: SidebarLeftProps) => {
             overflow: "auto",
           }}
         >
-          <TabContent publish={publish} onSetActiveTab={setActiveTab} />
+          <TabContent
+            publish={publish}
+            onSetActiveTab={setActiveTab}
+            project={project}
+            pages={pages}
+            currentPageId={currentPageId}
+            config={config}
+          />
         </SidebarTabsContent>
       </SidebarTabs>
     </Flex>

apps/designer/app/designer/shared/nano-states/index.ts

@@ -6,7 +6,6 @@ import {
 } from "~/shared/canvas-components";
 import { type SyncStatus } from "~/shared/sync";
 import { Asset } from "@webstudio-is/asset-uploader";
-import { type Pages } from "@webstudio-is/project";
 
 const selectedInstanceDataContainer = createValueContainer<
   SelectedInstanceData | undefined
@@ -50,8 +49,3 @@ export const useSelectionRect = () => useValue(selectionRectContainer);
 
 const assetsContainer = createValueContainer<Array<Asset>>([]);
 export const useAssets = () => useValue(assetsContainer);
-
-const pagesContainer = createValueContainer<
-  { pages: Pages; currentPageId: string } | undefined
->();
-export const usePages = () => useValue(pagesContainer);