Show LogBoxForScrips if js file active

pages/develop/[[...slug]].tsx

@@ -8,7 +8,9 @@ import { useSnapshot } from "valtio";
 import { ButtonGroup, Flex } from "../../components";
 import Box from "../../components/Box";
 import Button from "../../components/Button";
+import LogBoxForScripts from "../../components/LogBoxForScripts";
 import Popover from "../../components/Popover";
+import RunScript from "../../components/RunScript";
 import state from "../../state";
 import { compileCode } from "../../state/actions";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
@@ -196,12 +198,37 @@ const Home: NextPage = () => {
             </Flex>
           </Hotkeys>
         )}
-      </main>
-      <Box
+        {snap.files[snap.active]?.name?.split(".")?.[1]?.toLowerCase() ===
+          "js" && (
+          <Hotkeys
+            keyName="command+b,ctrl+b"
+            onKeyDown={() =>
+              !snap.compiling && snap.files.length && compileCode(snap.active)
+            }
+          >
+            <Flex
               css={{
+                position: "absolute",
+                bottom: "$4",
+                left: "$4",
+                alignItems: "center",
                 display: "flex",
+                cursor: "pointer",
+                gap: "$2",
+              }}
+            >
+              <RunScript file={snap.files[snap.active]} />
+            </Flex>
+          </Hotkeys>
+        )}
+      </main>
+      <Flex css={{ width: "100%" }}>
+        <Flex
+          css={{
+            flex: 1,
             background: "$mauve1",
             position: "relative",
+            borderRight: "1px solid $mauve8",
           }}
         >
           <LogBox
@@ -209,7 +236,23 @@ const Home: NextPage = () => {
             clearLog={() => (state.logs = [])}
             logs={snap.logs}
           />
-      </Box>
+        </Flex>
+        {snap.files[snap.active]?.name?.split(".")?.[1]?.toLowerCase() ===
+          "js" && (
+          <Flex
+            css={{
+              flex: 1,
+            }}
+          >
+            <LogBoxForScripts
+              showButtons={false}
+              title="Script Log"
+              logs={snap.scriptLogs}
+              clearLog={() => (state.scriptLogs = [])}
+            />
+          </Flex>
+        )}
+      </Flex>
     </Split>
   );
 };