revert: restore original modal-based playground implementation

Revert to original PlaygroundButton and IOModal implementation.
Remove sliding container code and restore original behavior.

src/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx

@@ -1,7 +1,7 @@
 import type { Dispatch, SetStateAction } from "react";
-import { PlaygroundButtonSliding } from "@/customization/components/custom-playground-button-sliding";
 import useFlowStore from "@/stores/flowStore";
 import PublishDropdown from "./deploy-dropdown";
+import PlaygroundButton from "./playground-button";
 
 type FlowToolbarOptionsProps = {
   open: boolean;
@@ -20,7 +20,12 @@ const FlowToolbarOptions = ({
   return (
     <div className="flex items-center gap-1.5">
       <div className="flex h-full w-full gap-1.5 rounded-sm transition-all">
-        <PlaygroundButtonSliding hasIO={hasIO} />
+        <PlaygroundButton
+          hasIO={hasIO}
+          open={open}
+          setOpen={setOpen}
+          canvasOpen
+        />
       </div>
       <PublishDropdown
         openApiModal={openApiModal}

src/frontend/src/components/core/flowToolbarComponent/index.tsx

@@ -1,7 +1,6 @@
 import { Panel } from "@xyflow/react";
 import { memo, useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { useSlidingContainerStore } from "@/customization/stores/sliding-container-store";
 import { track } from "@/customization/utils/analytics";
 import ExportModal from "@/modals/exportModal";
 import useFlowStore from "../../../stores/flowStore";
@@ -19,14 +18,10 @@ const FlowToolbar = memo(function FlowToolbar(): JSX.Element {
     setOpenApiModal((oldOpen) => !oldOpen);
   };
 
-  const toggleSlidingContainer = useSlidingContainerStore(
-    (state) => state.toggle,
-  );
-
   const handleChatWShortcut = (e: KeyboardEvent) => {
-    if (isThereModal()) return;
+    if (isThereModal() && !open) return;
     if (useFlowStore.getState().hasIO) {
-      toggleSlidingContainer();
+      setOpen((oldState) => !oldState);
     }
   };
 

src/frontend/src/pages/FlowPage/index.tsx

@@ -3,11 +3,8 @@ import { useBlocker, useParams } from "react-router-dom";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { useGetFlow } from "@/controllers/API/queries/flows/use-get-flow";
 import { useGetTypes } from "@/controllers/API/queries/flows/use-get-types";
-import { FlowPageSlidingContainerContent } from "@/customization/components/custom-flow-page-sliding-container";
-import { SlidingContainer } from "@/customization/components/custom-sliding-container";
 import { ENABLE_NEW_SIDEBAR } from "@/customization/feature-flags";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
-import { useSlidingContainerStore } from "@/customization/stores/sliding-container-store";
 import useSaveFlow from "@/hooks/flows/use-save-flow";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { SaveChangesModal } from "@/modals/saveChangesModal";
@@ -162,19 +159,6 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
 
   const isMobile = useIsMobile();
 
-  // Sliding container state
-  const isSlidingContainerOpen = useSlidingContainerStore(
-    (state) => state.isOpen,
-  );
-  const slidingContainerWidth = useSlidingContainerStore(
-    (state) => state.width,
-  );
-  const setSlidingContainerWidth = useSlidingContainerStore(
-    (state) => state.setWidth,
-  );
-  const isFullscreen = useSlidingContainerStore((state) => state.isFullscreen);
-  const hasIO = useFlowStore((state) => state.hasIO);
-
   return (
     <>
       <div className="flow-page-positioning">
@@ -188,21 +172,8 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
               <FlowSearchProvider>
                 {!view && <FlowSidebarComponent isLoading={isLoading} />}
                 <main className="flex w-full overflow-hidden">
-                  <div className="h-full w-full flex">
-                    <div className="flex-1 overflow-hidden">
-                      <Page setIsLoading={setIsLoading} />
-                    </div>
-                    {hasIO && (
-                      <SlidingContainer
-                        isOpen={isSlidingContainerOpen}
-                        width={slidingContainerWidth}
-                        onWidthChange={setSlidingContainerWidth}
-                        resizable={true}
-                        isFullscreen={isFullscreen}
-                      >
-                        <FlowPageSlidingContainerContent />
-                      </SlidingContainer>
-                    )}
+                  <div className="h-full w-full">
+                    <Page setIsLoading={setIsLoading} />
                   </div>
                 </main>
               </FlowSearchProvider>