fix: typescript support fix, add some params to editor, etc

pages/project/@slug/components/api-manager.tsx

@@ -86,6 +86,7 @@ const APIManager = () => {
 
 const Actions = ({ stats }: any) => {
   const { project } = useProjectContext();
+
   const restart = useMutation({
     mutationFn: () => {
       return api(`/sandbox/${project.slug}/restart`, { method: "POST" });

pages/project/@slug/components/editor.tsx

@@ -73,10 +73,10 @@ const Editor = () => {
     }
   }, [openedFilesData.data]);
 
-  useEffect(() => {
-    // start API sandbox
-    api(`/sandbox/${project.slug}/start`, { method: "POST" }).catch(() => {});
-  }, [project]);
+  // useEffect(() => {
+  //   // start API sandbox
+  //   api(`/sandbox/${project.slug}/start`, { method: "POST" }).catch(() => {});
+  // }, [project]);
 
   const onOpenFile = useCallback(
     (fileId: number, autoSwitchTab = true) => {
@@ -154,17 +154,18 @@ const Editor = () => {
       });
     }
 
-    tabs.push({
-      title: "API",
-      icon: <FiServer />,
-      render: () => <APIManager />,
-      locked: true,
-    });
+    // tabs.push({
+    //   title: "API",
+    //   icon: <FiServer />,
+    //   render: () => <APIManager />,
+    //   locked: true,
+    // });
 
     return tabs;
   }, [curOpenFiles, openedFiles, breakpoint]);
 
-  const PanelComponent = !projectCtx.isCompact ? Panel : "div";
+  const PanelComponent =
+    !projectCtx.isCompact || !projectCtx.isEmbed ? Panel : "div";
 
   return (
     <EditorContext.Provider
@@ -181,8 +182,8 @@ const Editor = () => {
           className="flex-1 order-2 md:order-1"
         >
           <Sidebar
-            defaultSize={{ sm: 50, md: 25 }}
-            defaultCollapsed={{ sm: true, md: false }}
+            defaultSize={{ md: 50, lg: 25 }}
+            defaultCollapsed={{ md: true, lg: false }}
             minSize={10}
             collapsible
             collapsedSize={0}
@@ -190,7 +191,7 @@ const Editor = () => {
 
           <ResizableHandle className="w-0" />
 
-          <ResizablePanel defaultSize={{ sm: 100, md: 75 }}>
+          <ResizablePanel defaultSize={{ md: 100, lg: 75 }}>
             <ResizablePanelGroup autoSaveId="code-editor" direction="vertical">
               <ResizablePanel defaultSize={{ sm: 100, md: 80 }} minSize={20}>
                 <Tabs

pages/project/@slug/components/web-preview.tsx

@@ -56,7 +56,7 @@ const WebPreview = ({ url, ...props }: WebPreviewProps) => {
     refresh();
   }, [refresh, togglePanel]);
 
-  const PanelComponent = !project.isCompact ? Panel : "div";
+  const PanelComponent = !project.isCompact || !project.isEmbed ? Panel : "div";
 
   return (
     <ResizablePanel
@@ -89,7 +89,7 @@ const WebPreview = ({ url, ...props }: WebPreviewProps) => {
             id="web-preview"
             ref={frameRef}
             className="border-none w-full flex-1 overflow-hidden bg-white"
-            sandbox="allow-scripts"
+            sandbox="allow-scripts allow-forms"
           />
         ) : null}
       </PanelComponent>