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

pages/project/@slug/+Page.tsx

@@ -15,20 +15,23 @@ import { Data } from "./+data";
 const ViewProjectPage = () => {
   const { project } = useData<Data>();
   const searchParams = useSearchParams();
-  const isCompact = !!(
-    searchParams.get("compact") || searchParams.get("embed")
-  );
+  const isCompact = Boolean(searchParams.get("compact"));
+  const isEmbed = Boolean(searchParams.get("embed"));
+  const hidePreview = searchParams.get("preview") === "0";
   const previewUrl = getPreviewUrl(project, "index.html");
 
   return (
-    <ProjectContext.Provider value={{ project, isCompact }}>
+    <ProjectContext.Provider value={{ project, isCompact, isEmbed }}>
       <ResizablePanelGroup
         autoSaveId="main-panel"
         direction={{ sm: "vertical", md: "horizontal" }}
-        className={cn("w-full !h-dvh bg-slate-600", !isCompact ? "md:p-4" : "")}
+        className={cn(
+          "w-full !h-dvh bg-slate-600",
+          !isCompact && !isEmbed ? "md:p-4" : ""
+        )}
       >
         <ResizablePanel
-          defaultSize={60}
+          defaultSize={hidePreview ? 100 : 60}
           collapsible
           collapsedSize={0}
           minSize={30}
@@ -38,13 +41,14 @@ const ViewProjectPage = () => {
         <ResizableHandle
           withHandle
           className={
-            !isCompact
+            !isCompact && !isEmbed
               ? "bg-slate-800 md:bg-transparent hover:bg-slate-500 transition-colors md:mx-1 w-2 md:data-[panel-group-direction=vertical]:h-2 md:rounded-lg"
               : "bg-slate-800"
           }
         />
         <WebPreview
           defaultSize={40}
+          defaultCollapsed={hidePreview}
           collapsible
           collapsedSize={0}
           minSize={10}

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>

pages/project/@slug/context/project.tsx

@@ -4,6 +4,7 @@ import type { ProjectSchema } from "~/server/db/schema/project";
 type TProjectContext = {
   project: ProjectSchema;
   isCompact?: boolean;
+  isEmbed?: boolean;
 };
 
 const ProjectContext = createContext<TProjectContext | null>(null);