modify preview ui

frontend/components/editor/index.tsx

@@ -715,7 +715,7 @@ export default function CodeEditor({
           <ResizablePanelGroup direction="vertical">
             <ResizablePanel
               ref={previewPanelRef}
-              defaultSize={50}
+              defaultSize={4}
               collapsedSize={4}
               minSize={25}
               collapsible

frontend/components/editor/preview/index.tsx

@@ -3,6 +3,7 @@
 import {
   ChevronLeft,
   ChevronRight,
+  Globe,
   RotateCw,
   TerminalSquare,
   UnfoldVertical,
@@ -22,8 +23,13 @@ export default function PreviewWindow({
           collapsed ? "h-full" : "h-10"
         } select-none w-full flex gap-2`}
       >
-        <div className="h-8 rounded-md px-3 text-xs bg-secondary flex items-center w-full justify-between">
+        <div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
+          <div className="text-xs">
             Preview
+            <span className="inline-block ml-2 items-center font-mono text-muted-foreground">
+              localhost:3000
+            </span>
+          </div>
           <div className="flex space-x-1 translate-x-1">
             {collapsed ? (
               <PreviewButton onClick={open}>

frontend/components/editor/sidebar/index.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import { FilePlus, FolderPlus, Loader2, Search, Sparkles } from "lucide-react";
+import {
+  FilePlus,
+  FolderPlus,
+  Loader2,
+  MonitorPlay,
+  Search,
+  Sparkles,
+} from "lucide-react";
 import SidebarFile from "./file";
 import SidebarFolder from "./folder";
 import { Sandbox, TFile, TFolder, TTab } from "@/lib/types";
@@ -13,6 +20,7 @@ import {
   dropTargetForElements,
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import Button from "@/components/ui/customButton";
 
 export default function Sidebar({
   sandboxData,
@@ -177,6 +185,7 @@ export default function Sidebar({
           )}
         </div>
       </div>
+      <div className="w-full space-y-4">
         <div className="flex items-center justify-between w-full">
           <div className="flex items-center">
             <Sparkles
@@ -191,6 +200,10 @@ export default function Sidebar({
           </div>
           <Switch checked={ai} onCheckedChange={setAi} />
         </div>
+        <Button className="w-full">
+          <MonitorPlay className="w-4 h-4 mr-2" /> Run
+        </Button>
+      </div>
     </div>
   );
 }