feat: add preview panel button

frontend/components/editor/index.tsx

@@ -145,7 +145,7 @@ export default function CodeEditor({
   const generateRef = useRef<HTMLDivElement>(null)
   const suggestionRef = useRef<HTMLDivElement>(null)
   const generateWidgetRef = useRef<HTMLDivElement>(null)
-  const previewPanelRef = useRef<ImperativePanelHandle>(null)
+  const { previewPanelRef } = usePreview();  
   const editorPanelRef = useRef<ImperativePanelHandle>(null)
   const previewWindowRef = useRef<{ refreshIframe: () => void }>(null)
 
@@ -827,6 +827,16 @@ export default function CodeEditor({
     })
   }
 
+  const togglePreviewPanel = () => {
+    if (isPreviewCollapsed) {
+      previewPanelRef.current?.expand();
+      setIsPreviewCollapsed(false);
+    } else {
+      previewPanelRef.current?.collapse();
+      setIsPreviewCollapsed(true);
+    }
+  };
+
   // On disabled access for shared users, show un-interactable loading placeholder + info modal
   if (disableAccess.isDisabled)
     return (
@@ -1061,7 +1071,7 @@ export default function CodeEditor({
           <ResizablePanel defaultSize={40}>
             <ResizablePanelGroup direction="vertical">
               <ResizablePanel
-                ref={usePreview().previewPanelRef}
+                ref={previewPanelRef}
                 defaultSize={4}
                 collapsedSize={4}
                 minSize={25}
@@ -1071,10 +1081,7 @@ export default function CodeEditor({
                 onExpand={() => setIsPreviewCollapsed(false)}
               >
                 <PreviewWindow
-                  open={() => {
+                  open={togglePreviewPanel}
-                    usePreview().previewPanelRef.current?.expand()
-                    setIsPreviewCollapsed(false)
-                  }}
                   collapsed={isPreviewCollapsed}
                   src={previewURL}
                   ref={previewWindowRef}
@@ -1116,4 +1123,4 @@ const defaultCompilerOptions: monaco.languages.typescript.CompilerOptions = {
   module: monaco.languages.typescript.ModuleKind.ESNext,
   moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
   target: monaco.languages.typescript.ScriptTarget.ESNext,
-}
+}

frontend/components/editor/preview/index.tsx

@@ -4,6 +4,7 @@ import {
   Link,
   RotateCw,
   TerminalSquare,
+  UnfoldVertical,
 } from "lucide-react"
 import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from "react"
 import { toast } from "sonner"
@@ -40,16 +41,14 @@ ref: React.Ref<{
           <div className="text-xs">Preview</div>
           <div className="flex space-x-1 translate-x-1">
             {collapsed ? (
-              <PreviewButton disabled onClick={() => { }}>
+              <PreviewButton onClick={open}>
-                <TerminalSquare className="w-4 h-4" />
+                <UnfoldVertical className="w-4 h-4" />
               </PreviewButton>
             ) : (
               <>
-                {/* Removed the unfoldvertical button since we have the same thing via the run button.
-                
                 <PreviewButton onClick={open}>
                   <UnfoldVertical className="w-4 h-4" />
-                </PreviewButton> */}
+                </PreviewButton>
 
                 <PreviewButton
                   onClick={() => {