feat: add download button

backend/server/src/Sandbox.ts

@@ -15,7 +15,7 @@ import { SecureGitClient } from "./SecureGitClient"
 import { TerminalManager } from "./TerminalManager"
 import { TFile, TFolder } from "./types"
 import { LockManager } from "./utils"
-
+import { TFileData } from "./types"
 const lockManager = new LockManager()
 
 // Define a type for SocketHandler functions
@@ -218,9 +218,23 @@ export class Sandbox {
             return this.aiWorker.generateCode(connection.userId, fileName, code, line, instructions)
         }
 
+        // Handle downloading files by download button
+        const handleDownloadFiles: SocketHandler = async () => {
+            if (!this.fileManager) throw Error("No file manager")
+
+            // Get all files with their data through fileManager
+            const files = this.fileManager.fileData.map((file: TFileData) => ({
+                path: file.id.startsWith('/') ? file.id.slice(1) : file.id,
+                content: file.data
+            }))
+
+            return { files }
+        }
+
         return {
             "heartbeat": handleHeartbeat,
             "getFile": handleGetFile,
+            "downloadFiles": handleDownloadFiles,
             "getFolder": handleGetFolder,
             "saveFile": handleSaveFile,
             "moveFile": handleMoveFile,

frontend/components/editor/navbar/downloadButton.tsx

@@ -0,0 +1,33 @@
+import JSZip from 'jszip'
+import { useSocket } from "@/context/SocketContext"
+import { Button } from "@/components/ui/button"
+import { Download } from "lucide-react"
+
+export default function DownloadButton() {
+  const { socket } = useSocket()
+
+  const handleDownload = async () => {
+    socket?.emit("downloadFiles", {}, async (response: {files: {path: string, content: string}[]}) => {
+      const zip = new JSZip()
+      
+      response.files.forEach(file => {
+        zip.file(file.path, file.content)
+      })
+      
+      const blob = await zip.generateAsync({type: "blob"})
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'sandbox-files.zip'
+      a.click()
+      window.URL.revokeObjectURL(url)
+    })
+  }
+
+  return (
+    <Button variant="outline" onClick={handleDownload}>
+      <Download className="w-4 h-4 mr-2" />
+      Download
+    </Button>
+  )
+}

frontend/components/editor/navbar/index.tsx

@@ -14,6 +14,7 @@ import DeployButtonModal from "./deploy"
 import EditSandboxModal from "./edit"
 import RunButtonModal from "./run"
 import ShareSandboxModal from "./share"
+import DownloadButton from "./downloadButton"
 
 export default function Navbar({
   userData,
@@ -78,6 +79,7 @@ export default function Navbar({
                 <Users className="w-4 h-4 mr-2" />
                 Share
               </Button>
+              <DownloadButton />
             </>
           ) : null}
           <ThemeSwitcher />