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

@@ -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");
       },
     },
     {

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) => {

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(() => {