feat: Resizable left-side panels like navigator (#5503)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/builder/builder.tsx

@@ -4,15 +4,21 @@ import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { usePublish, $publisher } from "~/shared/pubsub";
 import type { Build } from "@webstudio-is/project-build";
 import type { Project } from "@webstudio-is/project";
-import { theme, Box, type CSS, Flex, Grid } from "@webstudio-is/design-system";
+import {
+  theme,
+  Box,
+  type CSS,
+  Flex,
+  Grid,
+  rawTheme,
+} from "@webstudio-is/design-system";
 import type { AuthPermit } from "@webstudio-is/trpc-interface/index.server";
 import { registerContainers, createObjectPool } from "~/shared/sync";
 import {
   ServerSyncStorage,
   startProjectSync,
   useSyncServer,
 } from "./shared/sync/sync-server";
-import { SidebarLeft } from "./sidebar-left";
 import { Inspector } from "./inspector";
 import { Topbar } from "./features/topbar";
 import { Footer } from "./features/footer";
@@ -48,7 +54,6 @@ import {
   $dataLoadingState,
   $isCloneDialogOpen,
   $loadingState,
-  type SidebarPanelName,
 } from "./shared/nano-states";
 import { CloneProjectDialog } from "~/shared/clone-project";
 import type { TokenPermissions } from "@webstudio-is/authorization-token";
@@ -72,6 +77,8 @@ import { useInertHandlers } from "./shared/inert-handlers";
 import { TextToolbar } from "./features/workspace/canvas-tools/text-toolbar";
 import { SyncClient } from "~/shared/sync-client";
 import { RemoteDialog } from "./features/help/remote-dialog";
+import type { SidebarPanelName } from "./sidebar-left/types";
+import { SidebarLeft } from "./sidebar-left/sidebar-left";
 
 registerContainers();
 
@@ -143,10 +150,12 @@ const getChromeLayout = ({
   isPreviewMode,
   navigatorLayout,
   activeSidebarPanel,
+  leftSidebarWidth,
 }: {
   isPreviewMode: boolean;
   navigatorLayout: Settings["navigatorLayout"];
   activeSidebarPanel?: SidebarPanelName;
+  leftSidebarWidth: number;
 }) => {
   if (isPreviewMode) {
     return {
@@ -161,7 +170,7 @@ const getChromeLayout = ({
 
   if (navigatorLayout === "undocked" && activeSidebarPanel !== "none") {
     return {
-      gridTemplateColumns: `auto ${theme.sizes.sidebarWidth} 1fr ${theme.sizes.sidebarWidth}`,
+      gridTemplateColumns: `auto ${leftSidebarWidth}px 1fr ${theme.sizes.sidebarWidth}`,
       gridTemplateAreas: `
             "header header header header"
             "sidebar navigator main inspector"
@@ -180,16 +189,26 @@ const getChromeLayout = ({
   };
 };
 
+const defaultSidebarWidth = Number.parseFloat(rawTheme.spacing[30]);
+
 const ChromeWrapper = ({
   children,
   isPreviewMode,
   navigatorLayout,
 }: ChromeWrapperProps) => {
   const activeSidebarPanel = useStore($activeSidebarPanel);
+  const settings = useStore($settings);
+  const leftSidebarWidth =
+    activeSidebarPanel === "none"
+      ? defaultSidebarWidth
+      : (settings.sidebarPanelWidths[activeSidebarPanel] ??
+        defaultSidebarWidth);
+
   const gridLayout = getChromeLayout({
     isPreviewMode,
     navigatorLayout,
     activeSidebarPanel,
+    leftSidebarWidth,
   });
 
   return (
@@ -366,6 +385,13 @@ export const Builder = ({
           isPreviewMode={isPreviewMode}
           navigatorLayout={navigatorLayout}
         >
+          <Box
+            data-dialog-boundary
+            css={{
+              gridArea: "sidebar / sidebar / main / inspector",
+              pointerEvents: "none",
+            }}
+          />
           <ProjectSettings />
           <Main>
             <Workspace>
@@ -378,15 +404,10 @@ export const Builder = ({
               )}
             </Workspace>
           </Main>
+          <Main css={{ pointerEvents: "none" }}>
+            <CanvasToolsContainer />
+          </Main>
 
-          <SidePanel
-            gridArea="sidebar"
-            css={{
-              order: navigatorLayout === "docked" ? 1 : undefined,
-            }}
-          >
-            <SidebarLeft publish={publish} />
-          </SidePanel>
           <SidePanel
             gridArea="inspector"
             isPreviewMode={isPreviewMode}
@@ -406,9 +427,14 @@ export const Builder = ({
           >
             <Inspector navigatorLayout={navigatorLayout} />
           </SidePanel>
-          <Main css={{ pointerEvents: "none" }}>
-            <CanvasToolsContainer />
-          </Main>
+          <SidePanel
+            gridArea="sidebar"
+            css={{
+              order: navigatorLayout === "docked" ? 1 : undefined,
+            }}
+          >
+            <SidebarLeft publish={publish} />
+          </SidePanel>
           <Topbar
             project={project}
             hasProPlan={userPlanFeatures.hasProPlan}

apps/builder/app/builder/features/assets/assets.tsx

@@ -1,29 +1,10 @@
-import {
-  Button,
-  PanelTitle,
-  Separator,
-  Tooltip,
-} from "@webstudio-is/design-system";
-import { XIcon } from "@webstudio-is/icons";
+import { PanelTitle, Separator } from "@webstudio-is/design-system";
 import { ImageManager } from "~/builder/shared/image-manager";
 
-export const AssetsPanel = ({ onClose }: { onClose: () => void }) => {
+export const AssetsPanel = (_props: { onClose: () => void }) => {
   return (
     <>
-      <PanelTitle
-        suffix={
-          <Tooltip content="Close panel" side="bottom">
-            <Button
-              color="ghost"
-              prefix={<XIcon />}
-              aria-label="Close panel"
-              onClick={onClose}
-            />
-          </Tooltip>
-        }
-      >
-        Assets
-      </PanelTitle>
+      <PanelTitle>Assets</PanelTitle>
       <Separator />
       <ImageManager />
     </>

apps/builder/app/builder/features/breakpoints/breakpoints-popover.tsx

@@ -38,8 +38,8 @@ import {
   minCanvasWidth,
 } from "~/shared/breakpoints";
 import { $scale } from "~/builder/shared/nano-states";
-import { setCanvasWidth } from "./use-set-initial-canvas-width";
 import { serverSyncStore } from "~/shared/sync";
+import { setCanvasWidth } from "~/builder/shared/calc-canvas-width";
 
 export const BreakpointsPopover = () => {
   const view = useStore($breakpointsMenuView);

apps/builder/app/builder/features/breakpoints/breakpoints-selector.tsx

@@ -16,7 +16,7 @@ import {
   $selectedBreakpointId,
 } from "~/shared/nano-states";
 import { groupBreakpoints, isBaseBreakpoint } from "~/shared/breakpoints";
-import { setCanvasWidth } from "./use-set-initial-canvas-width";
+import { setCanvasWidth } from "../../shared/calc-canvas-width";
 import { $canvasWidth } from "~/builder/shared/nano-states";
 import { useDebouncedCallback } from "use-debounce";
 

apps/builder/app/builder/features/breakpoints/index.ts

@@ -1,3 +1,2 @@
 export * from "./breakpoints-popover";
 export * from "./breakpoints-selector-container";
-export * from "./use-set-initial-canvas-width";

apps/builder/app/builder/features/breakpoints/use-set-initial-canvas-width.ts

@@ -13,9 +13,9 @@ import {
   $selectedBreakpoint,
   $selectedBreakpointId,
 } from "~/shared/nano-states";
-import { setCanvasWidth } from "~/builder/features/breakpoints";
 import { closeCommandPanel } from "../command-state";
 import type { BaseOption } from "../shared/types";
+import { setCanvasWidth } from "~/builder/shared/calc-canvas-width";
 
 export type BreakpointOption = BaseOption & {
   type: "breakpoint";

apps/builder/app/builder/features/command-panel/groups/breakpoints-group.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { matchSorter } from "match-sorter";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
-import { XIcon } from "@webstudio-is/icons";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import {
   type WsComponentMeta,
@@ -23,10 +22,7 @@ import {
   findNextListItemIndex,
   Text,
   Box,
-  Grid,
   PanelTitle,
-  Tooltip,
-  Button,
 } from "@webstudio-is/design-system";
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 import { dragItemAttribute, useDraggable } from "./use-draggable";
@@ -240,7 +236,7 @@ export const ComponentsPanel = ({
 
   const { metasByCategory, availableComponents } = useStore($metas);
 
-  const { dragCard, draggableContainerRef } = useDraggable({
+  const { dragCard, draggableContainerRef, isDragging } = useDraggable({
     publish,
     availableComponents,
   });
@@ -253,20 +249,7 @@ export const ComponentsPanel = ({
 
   return (
     <>
-      <PanelTitle
-        suffix={
-          <Tooltip content="Close panel" side="bottom">
-            <Button
-              color="ghost"
-              prefix={<XIcon />}
-              aria-label="Close panel"
-              onClick={onClose}
-            />
-          </Tooltip>
-        }
-      >
-        Components
-      </PanelTitle>
+      <PanelTitle>Components</PanelTitle>
       <Separator />
 
       <Box css={{ padding: theme.panel.padding }}>
@@ -286,9 +269,9 @@ export const ComponentsPanel = ({
             fullWidth
           >
             <List asChild>
-              <Grid
+              <Flex
                 gap="1"
-                columns="3"
+                wrap="wrap"
                 css={{
                   paddingInline: theme.panel.paddingInline,
                   overflow: "auto",
@@ -309,8 +292,11 @@ export const ComponentsPanel = ({
                   >
                     <ComponentCard
                       {...{ [dragItemAttribute]: meta.name }}
+                      // Too hard to calculate, goal was to have 3 cards in one row on the smallest width and to fill it at the same ime
+                      css={{ width: 69 }}
                       label={meta.label}
                       description={meta.description}
+                      disableTooltip={isDragging}
                       icon={
                         <InstanceIcon
                           size="auto"
@@ -328,7 +314,7 @@ export const ComponentsPanel = ({
                     <Text>No matching component</Text>
                   </Flex>
                 )}
-              </Grid>
+              </Flex>
             </List>
           </CollapsibleSection>
         ))}

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

@@ -90,6 +90,7 @@ export const useDraggable = ({
   availableComponents: Set<string>;
 }) => {
   const [dragComponent, setDragComponent] = useState<Instance["component"]>();
+  const [isDragging, setIsDragging] = useState(false);
   const [point, setPoint] = useState<Point>({ x: 0, y: 0 });
   const canvasRect = useStore($canvasRect);
   const scale = useStore($scale);
@@ -102,6 +103,7 @@ export const useDraggable = ({
     },
     onStart({ data: componentName }) {
       setDragComponent(componentName);
+      setIsDragging(true);
       publish({
         type: "dragStart",
         payload: {
@@ -123,6 +125,7 @@ export const useDraggable = ({
     },
     onEnd({ isCanceled }) {
       setDragComponent(undefined);
+      setIsDragging(false);
       publish({
         type: "dragEnd",
         payload: { isCanceled },
@@ -143,5 +146,6 @@ export const useDraggable = ({
   return {
     dragCard,
     draggableContainerRef: dragHandlers.rootRef,
+    isDragging,
   };
 };