feature: add terminal/preview layout button

frontend/components/editor/index.tsx

@@ -18,7 +18,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable"
-import { FileJson, Loader2, Sparkles, TerminalSquare } from "lucide-react"
+import { FileJson, Loader2, Sparkles, TerminalSquare, ArrowDownToLine, ArrowRightToLine } from "lucide-react"
 import Tab from "../ui/tab"
 import Sidebar from "./sidebar"
 import GenerateInput from "./generate"
@@ -837,6 +837,12 @@ export default function CodeEditor({
     }
   };
 
+  const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
+
+  const toggleLayout = () => {
+    setIsHorizontalLayout(prev => !prev);
+  };
+
   // On disabled access for shared users, show un-interactable loading placeholder + info modal
   if (disableAccess.isDisabled)
     return (
@@ -972,12 +978,12 @@ export default function CodeEditor({
         />
 
         {/* Shadcn resizeable panels: https://ui.shadcn.com/docs/components/resizable */}
-        <ResizablePanelGroup direction="horizontal">
+        <ResizablePanelGroup direction={isHorizontalLayout ? "vertical" : "horizontal"}>
           <ResizablePanel
             className="p-2 flex flex-col"
             maxSize={80}
             minSize={30}
-            defaultSize={60}
+            defaultSize={isHorizontalLayout ? 70 : 60}
             ref={editorPanelRef}
           >
             <div className="h-10 w-full flex gap-2 overflow-auto tab-scroll">
@@ -1068,24 +1074,38 @@ export default function CodeEditor({
             </div>
           </ResizablePanel>
           <ResizableHandle />
-          <ResizablePanel defaultSize={40}>
-            <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={isHorizontalLayout ? 30 : 40}>
+            <ResizablePanelGroup direction={isHorizontalLayout ? "horizontal" : "vertical"}>
               <ResizablePanel
                 ref={previewPanelRef}
                 defaultSize={4}
-                collapsedSize={4}
+                collapsedSize={isHorizontalLayout ? 20 : 4}
                 minSize={25}
                 collapsible
                 className="p-2 flex flex-col"
                 onCollapse={() => setIsPreviewCollapsed(true)}
                 onExpand={() => setIsPreviewCollapsed(false)}
               >
+                <div className="flex items-center justify-between">
+                  <Button onClick={toggleLayout} size="sm" variant="ghost" className="mr-2 border">
+                    {isHorizontalLayout ? <ArrowRightToLine className="w-4 h-4" /> : <ArrowDownToLine className="w-4 h-4" />}
+                  </Button>
                   <PreviewWindow
                     open={togglePreviewPanel}
                     collapsed={isPreviewCollapsed}
                     src={previewURL}
                     ref={previewWindowRef}
                   />
+                </div>
+                {!isPreviewCollapsed && (
+                  <div className="w-full grow rounded-md overflow-hidden bg-foreground mt-2">
+                    <iframe
+                      width={"100%"}
+                      height={"100%"}
+                      src={previewURL}
+                  />
+                </div>
+                )}
               </ResizablePanel>
               <ResizableHandle />
               <ResizablePanel

frontend/components/editor/preview/index.tsx

@@ -33,10 +33,6 @@ ref: React.Ref<{
 
   return (
     <>
-      <div
-        className={`${collapsed ? "h-full" : "h-10"
-          } select-none w-full flex gap-2`}
-      >
         <div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
           <div className="text-xs">Preview</div>
           <div className="flex space-x-1 translate-x-1">
@@ -65,18 +61,6 @@ ref: React.Ref<{
             )}
           </div>
         </div>
-      </div>
-      {collapsed ? null : (
-        <div className="w-full grow rounded-md overflow-hidden bg-foreground">
-          <iframe
-            key={iframeKey}
-            ref={frameRef}
-            width={"100%"}
-            height={"100%"}
-            src={src}
-          />
-        </div>
-      )}
     </>
   )
 })