Feat/update iframe preview

web/app/providers.tsx

@@ -1,14 +1,14 @@
 "use client"
 
-import { QueryClientProvider } from "@/lib/get-query-client"
 import { Toaster } from "@/components/ui/sonner"
 import { ThemeProvider } from "@/components/ui/theme-provider"
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { QueryClientProvider } from "@/lib/get-query-client"
 import { AppProgressProvider as ProgressProvider } from "@bprogress/next"
 import { ClerkProvider } from "@clerk/nextjs"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import { Analytics } from "@vercel/analytics/react"
 import * as React from "react"
-
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <QueryClientProvider>
@@ -18,17 +18,19 @@ export function Providers({ children }: { children: React.ReactNode }) {
           defaultTheme="system"
           disableTransitionOnChange
         >
-          <ProgressProvider
-            height="4px"
-            delay={500}
-            color="hsl(var(--foreground))"
-            options={{ showSpinner: false }}
-            shallowRouting
-          >
-            {children}
-            <Analytics />
-            <Toaster position="bottom-left" richColors />
-          </ProgressProvider>
+          <TooltipProvider>
+            <ProgressProvider
+              height="4px"
+              delay={500}
+              color="hsl(var(--foreground))"
+              options={{ showSpinner: false }}
+              shallowRouting
+            >
+              {children}
+              <Analytics />
+              <Toaster position="bottom-left" richColors />
+            </ProgressProvider>
+          </TooltipProvider>
         </ThemeProvider>
       </ClerkProvider>
       <ReactQueryDevtools />

web/components/dashboard/navbar/index.tsx

@@ -10,7 +10,7 @@ export default function DashboardNavbar({ userData }: { userData: User }) {
     <div className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-2">
         <Link
-          href="/"
+          href="/dashboard"
           className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
         >
           <Logo />

web/components/profile/index.tsx

@@ -27,7 +27,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { deleteSandbox, updateSandbox, updateUser } from "@/lib/api/actions"
@@ -185,37 +184,35 @@ function ProfileCard({
     <Card className="mb-6 md:mb-0 sticky top-6">
       {isOwnProfile && (
         <div className="absolute top-2 right-2 flex flex-col gap-2">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  onClick={toggleEdit}
-                  aria-label={isEditing ? "close edit form" : "open edit form"}
-                  size="smIcon"
-                  variant="secondary"
-                  className="rounded-full relative"
-                >
-                  {isEditing ? (
-                    <X className="size-4" />
-                  ) : showAddMoreInfoBanner ? (
-                    <>
-                      <Sparkles className="size-4 text-yellow-400 z-[2]" />
-                      <div className="z-[1] absolute inset-0 rounded-full bg-secondary animate-ping" />
-                    </>
-                  ) : (
-                    <Edit className="size-4" />
-                  )}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>
-                  {showAddMoreInfoBanner
-                    ? "Add more information to your profile"
-                    : "Edit your profile"}
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                onClick={toggleEdit}
+                aria-label={isEditing ? "close edit form" : "open edit form"}
+                size="smIcon"
+                variant="secondary"
+                className="rounded-full relative"
+              >
+                {isEditing ? (
+                  <X className="size-4" />
+                ) : showAddMoreInfoBanner ? (
+                  <>
+                    <Sparkles className="size-4 text-yellow-400 z-[2]" />
+                    <div className="z-[1] absolute inset-0 rounded-full bg-secondary animate-ping" />
+                  </>
+                ) : (
+                  <Edit className="size-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                {showAddMoreInfoBanner
+                  ? "Add more information to your profile"
+                  : "Edit your profile"}
+              </p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       )}
       <CardContent className="flex flex-col gap-4 pt-6">

web/components/profile/navbar.tsx

@@ -11,7 +11,7 @@ export default function ProfileNavbar({ userData }: { userData?: User }) {
     <nav className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-2">
         <Link
-          href="/"
+          href="/dashboard"
           className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
         >
           <Logo />

web/components/project/navbar/index.tsx

@@ -25,7 +25,6 @@ export default function Navbar({
 }) {
   const [isEditOpen, setIsEditOpen] = useState(false)
   const [isShareOpen, setIsShareOpen] = useState(false)
-  const [isRunning, setIsRunning] = useState(false)
 
   const isOwner = sandboxData.userId === userData.id
 
@@ -45,7 +44,7 @@ export default function Navbar({
       <div className="h-14 shrink-0 px-2 w-full flex items-center justify-between border-b border-border">
         <div className="flex items-center space-x-4">
           <Link
-            href="/"
+            href="/dashboard"
             className="ring-offset-2 transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md"
           >
             <Logo />
@@ -62,11 +61,7 @@ export default function Navbar({
             ) : null}
           </div>
         </div>
-        <RunButtonModal
-          isRunning={isRunning}
-          setIsRunning={setIsRunning}
-          sandboxData={sandboxData}
-        />
+        <RunButtonModal sandboxData={sandboxData} />
         <div className="flex items-center h-full space-x-4">
           {/* <Avatars /> */}
 

web/components/project/navbar/run.tsx

@@ -2,47 +2,30 @@
 
 import { Button } from "@/components/ui/button"
 import { useEditorLayout } from "@/context/EditorLayoutContext"
+import { useSocket } from "@/context/SocketContext"
 import { useTerminal } from "@/context/TerminalContext"
 import { Sandbox } from "@/lib/types"
 import { templateConfigs } from "@gitwit/templates"
 import { Play, StopCircle } from "lucide-react"
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 import { toast } from "sonner"
 
-export default function RunButtonModal({
-  isRunning,
-  setIsRunning,
-  sandboxData,
-}: {
-  isRunning: boolean
-  setIsRunning: (running: boolean) => void
-  sandboxData: Sandbox
-}) {
+const MAX_TERMINALS = 4
+export default function RunButton({ sandboxData }: { sandboxData: Sandbox }) {
+  const [isRunning, setIsRunning] = useState(false)
+  const { isSocketReady } = useSocket()
   const { createNewTerminal, closeTerminal, terminals } = useTerminal()
   const { setIsPreviewCollapsed, previewPanelRef } = useEditorLayout()
   // Ref to keep track of the last created terminal's ID
   const lastCreatedTerminalRef = useRef<string | null>(null)
-
-  // Effect to update the lastCreatedTerminalRef when a new terminal is added
-  useEffect(() => {
-    if (terminals.length > 0 && !isRunning) {
-      const latestTerminal = terminals[terminals.length - 1]
-      if (
-        latestTerminal &&
-        latestTerminal.id !== lastCreatedTerminalRef.current
-      ) {
-        lastCreatedTerminalRef.current = latestTerminal.id
-      }
-    }
-  }, [terminals, isRunning])
   // commands to run in the terminal
   const handleRun = async () => {
     if (isRunning && lastCreatedTerminalRef.current) {
       await closeTerminal(lastCreatedTerminalRef.current)
       lastCreatedTerminalRef.current = null
       setIsPreviewCollapsed(true)
       previewPanelRef.current?.collapse()
-    } else if (!isRunning && terminals.length < 4) {
+    } else if (!isRunning && terminals.length < MAX_TERMINALS) {
       const command =
         templateConfigs[sandboxData.type]?.runCommand || "npm run dev"
 
@@ -67,8 +50,21 @@ export default function RunButtonModal({
     setIsRunning(!isRunning)
   }
 
+  // Effect to update the lastCreatedTerminalRef when a new terminal is added
+  useEffect(() => {
+    if (terminals.length > 0 && !isRunning) {
+      const latestTerminal = terminals[terminals.length - 1]
+      if (
+        latestTerminal &&
+        latestTerminal.id !== lastCreatedTerminalRef.current
+      ) {
+        lastCreatedTerminalRef.current = latestTerminal.id
+      }
+    }
+  }, [terminals, isRunning])
+
   return (
-    <Button variant="outline" onClick={handleRun}>
+    <Button variant="outline" onClick={handleRun} disabled={!isSocketReady}>
       {isRunning ? (
         <StopCircle className="w-4 h-4 mr-2" />
       ) : (