Merge branch 'main' of https://github.com/Code-Victor/sandbox into feat/light-theme

frontend/components/editor/index.tsx

@@ -91,6 +91,7 @@ export default function CodeEditor({
 
   // Layout state
   const [isHorizontalLayout, setIsHorizontalLayout] = useState(false)
+  const [previousLayout, setPreviousLayout] = useState(false)
 
   // AI Chat state
   const [isAIChatOpen, setIsAIChatOpen] = useState(false)
@@ -548,12 +549,18 @@ export default function CodeEditor({
         setIsAIChatOpen((prev) => !prev)
       }
     }
+
     document.addEventListener("keydown", down)
 
+    // Added this line to prevent Monaco editor from handling Cmd/Ctrl+L
+    editorRef?.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyL, () => {
+      setIsAIChatOpen((prev) => !prev)
+    })
+
     return () => {
       document.removeEventListener("keydown", down)
     }
-  }, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen])
+  }, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen, editorRef])
 
   // Liveblocks live collaboration setup effect
   useEffect(() => {
@@ -868,7 +875,24 @@ export default function CodeEditor({
   }
 
   const toggleLayout = () => {
-    setIsHorizontalLayout((prev) => !prev)
+    if (!isAIChatOpen) {
+      setIsHorizontalLayout((prev) => !prev)
+    }
+  }
+
+  // Add an effect to handle layout changes when AI chat is opened/closed
+  useEffect(() => {
+    if (isAIChatOpen) {
+      setPreviousLayout(isHorizontalLayout)
+      setIsHorizontalLayout(true)
+    } else {
+      setIsHorizontalLayout(previousLayout)
+    }
+  }, [isAIChatOpen])
+
+  // Modify the toggleAIChat function
+  const toggleAIChat = () => {
+    setIsAIChatOpen((prev) => !prev)
   }
 
   // On disabled access for shared users, show un-interactable loading placeholder + info modal
@@ -1007,7 +1031,9 @@ export default function CodeEditor({
           deletingFolderId={deletingFolderId}
         />
         {/* Outer ResizablePanelGroup for main layout */}
-        <ResizablePanelGroup direction="horizontal">
+        <ResizablePanelGroup
+          direction={isHorizontalLayout ? "horizontal" : "vertical"}
+        >
           {/* Left side: Editor and Preview/Terminal */}
           <ResizablePanel defaultSize={isAIChatOpen ? 80 : 100} minSize={50}>
             <ResizablePanelGroup
@@ -1136,6 +1162,7 @@ export default function CodeEditor({
                         size="sm"
                         variant="ghost"
                         className="mr-2 border"
+                        disabled={isAIChatOpen}
                       >
                         {isHorizontalLayout ? (
                           <ArrowRightToLine className="w-4 h-4" />
@@ -1190,6 +1217,7 @@ export default function CodeEditor({
                     tabs.find((tab) => tab.id === activeFileId)?.name ||
                     "No file selected"
                   }
+                  onClose={toggleAIChat}
                 />
               </ResizablePanel>
             </>