feat: add run button

frontend/components/editor/index.tsx

@@ -829,11 +829,7 @@ type ProviderData = {
               className="p-2 flex flex-col"
             >
               {isOwner ? (
-                <Terminals
-                  terminals={terminals}
-                  setTerminals={setTerminals}
-                  socket={socketRef.current}
-                />
+                <Terminals/>
               ) : (
                 <div className="w-full h-full flex items-center justify-center text-lg font-medium text-muted-foreground/50 select-none">
                   <TerminalSquare className="w-4 h-4 mr-2" />

frontend/components/editor/navbar/index.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import Logo from "@/assets/logo.svg";
-import { Pencil, Users } from "lucide-react";
+import { Pencil, Users, Play, StopCircle } from "lucide-react";
 import Link from "next/link";
 import { Sandbox, User } from "@/lib/types";
 import UserButton from "@/components/ui/userButton";
@@ -11,23 +11,30 @@ import { useState } from "react";
 import EditSandboxModal from "./edit";
 import ShareSandboxModal from "./share";
 import { Avatars } from "../live/avatars";
+import RunButtonModal from "./run";
+import { Terminal } from "@xterm/xterm";
+import { Socket } from "socket.io-client";
+import Terminals from "../terminals";
 
 export default function Navbar({
   userData,
   sandboxData,
   shared,
+  socket,
 }: {
   userData: User;
   sandboxData: Sandbox;
-  shared: {
-    id: string;
-    name: string;
-  }[];
+  shared: { id: string; name: string }[];
+  socket: Socket;
 }) {
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isShareOpen, setIsShareOpen] = useState(false);
+  const [isRunning, setIsRunning] = useState(false);
+  const [terminals, setTerminals] = useState<{ id: string; terminal: Terminal | null }[]>([]);
+  const [activeTerminalId, setActiveTerminalId] = useState("");
+  const [creatingTerminal, setCreatingTerminal] = useState(false);
 
-  const isOwner = sandboxData.userId === userData.id;
+  const isOwner = sandboxData.userId === userData.id;;
 
   return (
     <>
@@ -62,6 +69,10 @@ export default function Navbar({
             ) : null}
           </div>
         </div>
+        <RunButtonModal
+          isRunning={isRunning}
+          setIsRunning={setIsRunning}
+        />
         <div className="flex items-center h-full space-x-4">
           <Avatars />
 

frontend/components/editor/navbar/run.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Play, StopCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTerminal } from "@/context/TerminalContext";
+import { closeTerminal } from "@/lib/terminal";
+
+export default function RunButtonModal({
+  isRunning,
+  setIsRunning,
+}: {
+  isRunning: boolean;
+  setIsRunning: (running: boolean) => void;
+}) {
+  const { createNewTerminal, terminals, setTerminals, socket, setActiveTerminalId } = useTerminal();
+
+  const handleRun = () => {
+    if (isRunning) {
+      console.log('Stopping sandbox...');
+      console.log('Closing Terminal');
+      console.log('Closing Preview Window');
+
+      // Close all terminals if needed
+      terminals.forEach(term => {
+        if (term.terminal) {
+          // Assuming you have a closeTerminal function similar to createTerminal
+          closeTerminal({
+            term,
+            terminals,
+            setTerminals,
+            setActiveTerminalId,
+            setClosingTerminal: () => { },
+            socket: socket!,
+            activeTerminalId: term.id,
+          });
+        }
+      });
+    } else {
+      console.log('Running sandbox...');
+      console.log('Opening Terminal');
+      console.log('Opening Preview Window');
+
+      if (terminals.length < 4) {
+        createNewTerminal();
+      } else {
+        console.error('Maximum number of terminals reached.');
+      }
+    }
+    setIsRunning(!isRunning);
+  };
+
+  return (
+    <>
+      <Button variant="outline" onClick={handleRun}>
+        {isRunning ? <StopCircle className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
+        {isRunning ? 'Stop' : 'Run'}
+      </Button>
+    </>
+  );
+}

frontend/components/editor/terminals/index.tsx

@@ -2,30 +2,16 @@
 
 import { Button } from "@/components/ui/button";
 import Tab from "@/components/ui/tab";
-import { closeTerminal, createTerminal } from "@/lib/terminal";
+import { closeTerminal } from "@/lib/terminal";
 import { Terminal } from "@xterm/xterm";
 import { Loader2, Plus, SquareTerminal, TerminalSquare } from "lucide-react";
-import { Socket } from "socket.io-client";
 import { toast } from "sonner";
 import EditorTerminal from "./terminal";
 import { useState } from "react";
+import { useTerminal } from "@/context/TerminalContext";
 
-export default function Terminals({
-  terminals,
-  setTerminals,
-  socket,
-}: {
-  terminals: { id: string; terminal: Terminal | null }[];
-  setTerminals: React.Dispatch<
-    React.SetStateAction<
-      {
-        id: string;
-        terminal: Terminal | null;
-      }[]
-    >
-  >;
-  socket: Socket;
-}) {
+export default function Terminals() {
+  const { terminals, setTerminals, socket, createNewTerminal } = useTerminal();
   const [activeTerminalId, setActiveTerminalId] = useState("");
   const [creatingTerminal, setCreatingTerminal] = useState(false);
   const [closingTerminal, setClosingTerminal] = useState("");
@@ -46,7 +32,7 @@ export default function Terminals({
                 setTerminals,
                 setActiveTerminalId,
                 setClosingTerminal,
-                socket,
+                socket: socket!, 
                 activeTerminalId,
               })
             }
@@ -64,12 +50,7 @@ export default function Terminals({
               toast.error("You reached the maximum # of terminals.");
               return;
             }
-            createTerminal({
-              setTerminals,
-              setActiveTerminalId,
-              setCreatingTerminal,
-              socket,
-            });
+            createNewTerminal();
           }}
           size="smIcon"
           variant={"secondary"}