From 5509d593b3ffb72fab5fcef790cfddd04ac93eec Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Sat, 9 Nov 2024 18:09:08 +0400
Subject: [PATCH] fix: prevent closing navigator when drag and drop on canvas
 (#4393)

Fixes https://github.com/webstudio-is/webstudio/issues/4158

none is confused with undefined value, replaced it with more explicit
"auto".
---
 apps/builder/app/builder/shared/commands.ts            | 4 ++--
 apps/builder/app/builder/shared/nano-states/index.ts   | 7 +++++--
 apps/builder/app/builder/sidebar-left/sidebar-left.tsx | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/builder/app/builder/shared/commands.ts b/apps/builder/app/builder/shared/commands.ts
index 108c257a6c08..380fa31bb1ef 100644
--- a/apps/builder/app/builder/shared/commands.ts
+++ b/apps/builder/app/builder/shared/commands.ts
@@ -113,7 +113,7 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       name: "clickCanvas",
       handler: () => {
         $breakpointsMenuView.set(undefined);
-        setActiveSidebarPanel(undefined);
+        setActiveSidebarPanel("auto");
       },
     },
 
@@ -124,7 +124,7 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       defaultHotkeys: ["meta+shift+p", "ctrl+shift+p"],
       handler: () => {
         $isPreviewMode.set($isPreviewMode.get() === false);
-        setActiveSidebarPanel(undefined);
+        setActiveSidebarPanel("auto");
       },
     },
     {
diff --git a/apps/builder/app/builder/shared/nano-states/index.ts b/apps/builder/app/builder/shared/nano-states/index.ts
index 809d6b10d5ce..2b05addd994c 100644
--- a/apps/builder/app/builder/shared/nano-states/index.ts
+++ b/apps/builder/app/builder/shared/nano-states/index.ts
@@ -100,7 +100,10 @@ export const $activeSidebarPanel = computed(
   }
 );
 
-export const setActiveSidebarPanel = (nextPanel?: SidebarPanelName) => {
+/**
+ * auto shows default panel when sidepanel is undocked and hides when docked
+ */
+export const setActiveSidebarPanel = (nextPanel: "auto" | SidebarPanelName) => {
   const currentPanel = $activeSidebarPanel.get();
   // - When navigator is open, user is trying to close the navigator.
   // - Navigator is closed, user is trying to close some other panel, and if navigator is undocked, it needs to be opened.
@@ -114,7 +117,7 @@ export const setActiveSidebarPanel = (nextPanel?: SidebarPanelName) => {
       return;
     }
   }
-  $activeSidebarPanel_.set(nextPanel);
+  $activeSidebarPanel_.set(nextPanel === "auto" ? undefined : nextPanel);
 };
 
 export const toggleActiveSidebarPanel = (panel: SidebarPanelName) => {
diff --git a/apps/builder/app/builder/sidebar-left/sidebar-left.tsx b/apps/builder/app/builder/sidebar-left/sidebar-left.tsx
index 9b2ce24c0bec..789a3fb84b56 100644
--- a/apps/builder/app/builder/sidebar-left/sidebar-left.tsx
+++ b/apps/builder/app/builder/sidebar-left/sidebar-left.tsx
@@ -141,7 +141,7 @@ export const SidebarLeft = ({ publish }: SidebarLeftProps) => {
   const returnTabRef = useRef<SidebarPanelName | undefined>(undefined);
 
   useSubscribe("dragEnd", () => {
-    setActiveSidebarPanel("none");
+    setActiveSidebarPanel("auto");
   });
 
   useOnDropEffect(() => {