create Navigator panel and reuse it in tabs

apps/designer/app/designer/designer.tsx

@@ -36,6 +36,7 @@ import {
   useDragAndDropState,
 } from "~/shared/nano-states";
 import { useSubscribeClientSetting } from "./shared/client-settings";
+import { Navigator } from "./features/navigator";
 
 export const links = () => {
   return [
@@ -71,7 +72,7 @@ type SidePanelProps = {
   children: JSX.Element | Array<JSX.Element>;
   isPreviewMode: boolean;
   css?: CSS;
-  gridArea: "inspector" | "sidebar";
+  gridArea: "inspector" | "sidebar" | "navigator";
 };
 
 const SidePanel = ({
@@ -131,19 +132,19 @@ const ChromeWrapper = ({ children, isPreviewMode }: ChromeWrapperProps) => {
         gridTemplateColumns: "auto 1fr",
         gridTemplateRows: "auto 1fr auto",
         gridTemplateAreas: `
-                "header header"
-                "sidebar main"
-                "footer footer"
-              `,
+          "header header"
+          "sidebar main"
+          "footer footer"
+        `,
       }
     : {
-        gridTemplateColumns: "auto 1fr 240px",
+        gridTemplateColumns: "auto 240px 1fr 240px",
         gridTemplateRows: "auto 1fr auto",
         gridTemplateAreas: `
-                "header header header"
-                "sidebar main inspector"
-                "footer footer footer"
-              `,
+          "header header header header"
+          "sidebar navigator main inspector"
+          "footer footer footer footer"
+        `,
       };
   return (
     <Grid
@@ -217,6 +218,9 @@ export const Designer = ({ config, project, assets }: DesignerProps) => {
       <SidePanel gridArea="sidebar" isPreviewMode={isPreviewMode}>
         <SidebarLeft assets={assets} publish={publish} />
       </SidePanel>
+      <SidePanel gridArea="navigator" isPreviewMode={isPreviewMode}>
+        <Navigator publish={publish} />
+      </SidePanel>
       <SidePanel
         gridArea="inspector"
         isPreviewMode={isPreviewMode}

apps/designer/app/designer/features/navigator/index.ts

@@ -0,0 +1 @@
+export * from "./navigator";

apps/designer/app/designer/features/navigator/navigator.tsx

@@ -0,0 +1,32 @@
+import type { Instance, Publish } from "@webstudio-is/react-sdk";
+import { useSelectedInstancePath } from "~/designer/shared/instance/use-selected-instance-path";
+import { useSelectedInstanceData } from "~/designer/shared/nano-states";
+import { Tree } from "~/designer/shared/tree";
+import { useRootInstance } from "~/shared/nano-states";
+
+type NavigatorProps = {
+  publish: Publish;
+};
+
+export const Navigator = ({ publish }: NavigatorProps) => {
+  const [selectedInstanceData] = useSelectedInstanceData();
+  const [rootInstance] = useRootInstance();
+  const selectedInstancePath = useSelectedInstancePath(
+    selectedInstanceData?.id
+  );
+
+  if (rootInstance === undefined) return null;
+  return (
+    <Tree
+      instance={rootInstance}
+      selectedInstancePath={selectedInstancePath}
+      selectedInstanceId={selectedInstanceData?.id}
+      onSelect={(instance) => {
+        publish<"selectInstanceById", Instance["id"]>({
+          type: "selectInstanceById",
+          payload: instance.id,
+        });
+      }}
+    />
+  );
+};

apps/designer/app/designer/features/sidebar-left/panels/index.ts

@@ -1,5 +1,5 @@
 import * as components from "./components";
-import * as tree from "./tree";
+import * as navigator from "./navigator";
 import * as assetManager from "./asset-manager";
 
-export const panels = { components, tree, assetManager } as const;
+export const panels = { components, navigator, assetManager } as const;

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

@@ -0,0 +1,13 @@
+import { type Publish } from "@webstudio-is/react-sdk";
+import { ListNestedIcon } from "@webstudio-is/icons";
+import { Navigator } from "~/designer/features/navigator";
+
+type TabContentProps = {
+  publish: Publish;
+};
+
+export const TabContent = ({ publish }: TabContentProps) => {
+  return <Navigator publish={publish} />;
+};
+
+export const icon = <ListNestedIcon />;

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

@@ -1,42 +0,0 @@
-import { type Instance, type Publish } from "@webstudio-is/react-sdk";
-import { ListNestedIcon } from "@webstudio-is/icons";
-import { Flex } from "@webstudio-is/design-system";
-import { type SelectedInstanceData } from "~/shared/canvas-components";
-import { useSelectedInstancePath } from "~/designer/shared/instance/use-selected-instance-path";
-import { Tree } from "~/designer/shared/tree";
-import { useRootInstance } from "~/shared/nano-states";
-
-type TabContentProps = {
-  publish: Publish;
-  selectedInstanceData?: SelectedInstanceData;
-};
-
-export const TabContent = ({
-  publish,
-  selectedInstanceData,
-}: TabContentProps) => {
-  const [rootInstance] = useRootInstance();
-  const selectedInstancePath = useSelectedInstancePath(
-    selectedInstanceData?.id
-  );
-
-  if (rootInstance === undefined) return null;
-
-  return (
-    <Flex gap="3" direction="column" css={{ padding: "$1" }}>
-      <Tree
-        instance={rootInstance}
-        selectedInstancePath={selectedInstancePath}
-        selectedInstanceId={selectedInstanceData?.id}
-        onSelect={(instance) => {
-          publish<"selectInstanceById", Instance["id"]>({
-            type: "selectInstanceById",
-            payload: instance.id,
-          });
-        }}
-      />
-    </Flex>
-  );
-};
-
-export const icon = <ListNestedIcon />;

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

@@ -8,7 +8,6 @@ import {
   SidebarTabsList,
   SidebarTabsTrigger,
 } from "@webstudio-is/design-system";
-import { useSelectedInstanceData } from "../../shared/nano-states";
 import { useDragAndDropState } from "~/shared/nano-states";
 import { panels } from "./panels";
 import type { TabName } from "./types";
@@ -32,7 +31,6 @@ type SidebarLeftProps = {
 };
 
 export const SidebarLeft = ({ publish, assets }: SidebarLeftProps) => {
-  const [selectedInstanceData] = useSelectedInstanceData();
   const [dragAndDropState] = useDragAndDropState();
   const [activeTab, setActiveTab] = useState<TabName>("none");
   const { TabContent } = activeTab === "none" ? none : panels[activeTab];
@@ -82,7 +80,6 @@ export const SidebarLeft = ({ publish, assets }: SidebarLeftProps) => {
         >
           <TabContent
             assets={assets}
-            selectedInstanceData={selectedInstanceData}
             publish={publish}
             onSetActiveTab={setActiveTab}
           />