refactor: move sidebar panels into features (#4332)

This removes 2 levels of nested folders for 5 features. Will simplify fs
navigating a lot.

apps/builder/app/builder/builder.tsx

@@ -9,7 +9,7 @@ import type { AuthPermit } from "@webstudio-is/trpc-interface/index.server";
 import { createImageLoader } from "@webstudio-is/image";
 import { registerContainers, useBuilderStore } from "~/shared/sync";
 import { startProjectSync, useSyncServer } from "./shared/sync/sync-server";
-import { SidebarLeft } from "./features/sidebar-left";
+import { SidebarLeft } from "./sidebar-left";
 import { Inspector } from "./features/inspector";
 import { Topbar } from "./features/topbar";
 import { Footer } from "./features/footer";

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

@@ -27,7 +27,7 @@ import {
   $dragAndDropState,
   $selectedPage,
 } from "~/shared/nano-states";
-import { NavigatorTree } from "~/builder/features/sidebar-left/panels/navigator";
+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";

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

@@ -13,7 +13,7 @@ import { useEffect, useState } from "react";
 import { toWebstudioData } from "./utils";
 import type { MarketplaceOverviewItem } from "~/shared/marketplace/types";
 import type { Project } from "@webstudio-is/project";
-import { ExtendedPanel } from "../../shared/extended-panel";
+import { ExtendedPanel } from "~/builder/shared/extended-sidebar-panel";
 import { About } from "./about";
 import { trpcClient } from "~/shared/trpc/trpc-client";
 

apps/builder/app/builder/features/navigator/css-preview.tsx

@@ -4,10 +4,11 @@ import {
   textVariants,
   theme,
 } from "@webstudio-is/design-system";
+// @todo feature should not import another feature
 import {
   type StyleInfo,
   useStyleInfo,
-} from "../../../style-panel/shared/style-info";
+} from "~/builder/features/style-panel/shared/style-info";
 import {
   generateStyleMap,
   hyphenateProperty,

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

@@ -14,7 +14,6 @@ import {
   registerFolderChildMutable,
   reparentOrphansMutable,
   filterSelfAndChildren,
-  getExistingRoutePaths,
   $pageRootScope,
   isPathAvailable,
 } from "./page-utils";
@@ -382,35 +381,6 @@ describe("filterSelfAndChildren", () => {
   });
 });
 
-describe("getExistingRoutePaths", () => {
-  const { pages } = createPages();
-
-  test("gets all the route paths that exists in the project", () => {
-    pages.pages.push({
-      id: "pageId",
-      meta: {},
-      name: "Page",
-      path: "/page",
-      rootInstanceId: "rootInstanceId",
-      systemDataSourceId: "systemDataSourceId",
-      title: `"Page"`,
-    });
-
-    pages.pages.push({
-      id: "blogId",
-      meta: {},
-      name: "Blog",
-      path: "/blog/:id",
-      rootInstanceId: "rootInstanceId",
-      systemDataSourceId: "systemDataSourceId",
-      title: `"Blog"`,
-    });
-
-    const result = getExistingRoutePaths(pages);
-    expect(Array.from(result)).toEqual(["/page", "/blog/:id"]);
-  });
-});
-
 test("page root scope should rely on editing page", () => {
   const pages = createDefaultPages({
     rootInstanceId: "homeRootId",

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

@@ -236,22 +236,6 @@ export const filterSelfAndChildren = (
   });
 };
 
-export const getExistingRoutePaths = (pages?: Pages): Set<string> => {
-  const paths: Set<string> = new Set();
-  if (pages === undefined) {
-    return paths;
-  }
-
-  for (const page of pages.pages) {
-    const pagePath = getPagePath(page.id, pages);
-    if (pagePath === undefined) {
-      continue;
-    }
-    paths.add(pagePath);
-  }
-  return paths;
-};
-
 const $editingPage = computed(
   [$editingPageId, $pages],
   (editingPageId, pages) => {

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

@@ -22,7 +22,7 @@ import {
   DynamicPageIcon,
   CrossIcon,
 } from "@webstudio-is/icons";
-import { ExtendedPanel } from "../../shared/extended-panel";
+import { ExtendedPanel } from "../../shared/extended-sidebar-panel";
 import { NewPageSettings, PageSettings } from "./page-settings";
 import { $editingPageId, $pages, $selectedPageId } from "~/shared/nano-states";
 import { switchPage } from "~/shared/pages";

apps/builder/app/builder/features/project-settings/section-redirects.tsx

@@ -22,11 +22,10 @@ import {
   ProjectNewRedirectPath,
 } from "@webstudio-is/sdk";
 import { useStore } from "@nanostores/react";
-import { getExistingRoutePaths } from "../sidebar-left/panels/pages/page-utils";
 import { $pages, $publishedOrigin } from "~/shared/nano-states";
 import { serverSyncStore } from "~/shared/sync";
 import { flushSync } from "react-dom";
-import { sectionSpacing } from "./utils";
+import { getExistingRoutePaths, sectionSpacing } from "./utils";
 
 export const SectionRedirects = () => {
   const publishedOrigin = useStore($publishedOrigin);

apps/builder/app/builder/features/project-settings/utils.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from "@jest/globals";
+import { createDefaultPages } from "@webstudio-is/project-build";
+import { getExistingRoutePaths } from "./utils";
+
+describe("getExistingRoutePaths", () => {
+  test("gets all the route paths that exists in the project", () => {
+    const pages = createDefaultPages({
+      rootInstanceId: "rootInstanceId",
+      systemDataSourceId: "systemDataSourceId",
+      homePageId: "homePageId",
+    });
+
+    pages.pages.push({
+      id: "pageId",
+      meta: {},
+      name: "Page",
+      path: "/page",
+      rootInstanceId: "rootInstanceId",
+      systemDataSourceId: "systemDataSourceId",
+      title: `"Page"`,
+    });
+
+    pages.pages.push({
+      id: "blogId",
+      meta: {},
+      name: "Blog",
+      path: "/blog/:id",
+      rootInstanceId: "rootInstanceId",
+      systemDataSourceId: "systemDataSourceId",
+      title: `"Blog"`,
+    });
+
+    const result = getExistingRoutePaths(pages);
+    expect(Array.from(result)).toEqual(["/page", "/blog/:id"]);
+  });
+});

apps/builder/app/builder/features/project-settings/utils.ts

@@ -1,7 +1,24 @@
 import { theme, type CSS } from "@webstudio-is/design-system";
+import { getPagePath, type Pages } from "@webstudio-is/sdk";
 
 export const leftPanelWidth = theme.spacing[26];
 export const rightPanelWidth = theme.spacing[35];
 export const sectionSpacing: CSS = {
   paddingInline: theme.panel.paddingInline,
 };
+
+export const getExistingRoutePaths = (pages?: Pages): Set<string> => {
+  const paths: Set<string> = new Set();
+  if (pages === undefined) {
+    return paths;
+  }
+
+  for (const page of pages.pages) {
+    const pagePath = getPagePath(page.id, pages);
+    if (pagePath === undefined) {
+      continue;
+    }
+    paths.add(pagePath);
+  }
+  return paths;
+};

apps/builder/app/builder/sidebar-left/sidebar-left.tsx

@@ -37,11 +37,11 @@ import {
   useExternalDragStateEffect,
 } from "~/builder/shared/assets/drag-monitor";
 import { getSetting, setSetting } from "~/builder/shared/client-settings";
-import { ComponentsPanel } from "./panels/components";
-import { PagesPanel } from "./panels/pages";
-import { NavigatorPanel } from "./panels/navigator";
-import { AssetsPanel } from "./panels/assets";
-import { MarketplacePanel } from "./panels/marketplace";
+import { ComponentsPanel } from "~/builder/features/components";
+import { PagesPanel } from "~/builder/features/pages";
+import { NavigatorPanel } from "~/builder/features/navigator";
+import { AssetsPanel } from "~/builder/features/assets";
+import { MarketplacePanel } from "~/builder/features/marketplace";
 
 const none = { Panel: () => null };