upload new files

app/lib/stores/files.ts

@@ -80,6 +80,10 @@ export class FilesStore {
     this.#modifiedFiles.clear();
   }
 
+  markFileAsNew(filePath: string) {
+    this.#modifiedFiles.set(filePath, '');
+  }
+
   async saveFile(filePath: string, content: string) {
     const webcontainer = await this.#webcontainer;
 

app/lib/stores/workbench.ts

@@ -32,6 +32,7 @@ export type WorkbenchViewType = 'code' | 'preview';
 export class WorkbenchStore {
   #previewsStore = new PreviewsStore(webcontainer);
   #filesStore = new FilesStore(webcontainer);
+
   #editorStore = new EditorStore(this.#filesStore);
   #terminalStore = new TerminalStore(webcontainer);
 
@@ -43,7 +44,7 @@ export class WorkbenchStore {
   modifiedFiles = new Set<string>();
   artifactIdList: string[] = [];
   #boltTerminal: { terminal: ITerminal; process: WebContainerProcess } | undefined;
-  #globalExecutionQueue=Promise.resolve();
+  #globalExecutionQueue = Promise.resolve();
   constructor() {
     if (import.meta.hot) {
       import.meta.hot.data.artifacts = this.artifacts;
@@ -54,7 +55,7 @@ export class WorkbenchStore {
   }
 
   addToExecutionQueue(callback: () => Promise<void>) {
-    this.#globalExecutionQueue=this.#globalExecutionQueue.then(()=>callback())
+    this.#globalExecutionQueue = this.#globalExecutionQueue.then(() => callback())
   }
 
   get previews() {
@@ -277,11 +278,11 @@ export class WorkbenchStore {
   }
 
   runAction(data: ActionCallbackData, isStreaming: boolean = false) {
-    if(isStreaming) {
+    if (isStreaming) {
       this._runAction(data, isStreaming)
     }
-    else{
-      this.addToExecutionQueue(()=>this._runAction(data, isStreaming))
+    else {
+      this.addToExecutionQueue(() => this._runAction(data, isStreaming))
     }
   }
   async _runAction(data: ActionCallbackData, isStreaming: boolean = false) {
@@ -381,6 +382,61 @@ export class WorkbenchStore {
     return syncedFiles;
   }
 
+  async uploadFilesFromDisk(sourceHandle: FileSystemDirectoryHandle) {
+    const loadedFiles = [];
+    const wc = await webcontainer;
+    const newFiles = {};
+
+    const processDirectory = async (handle: FileSystemDirectoryHandle, currentPath: string = '') => {
+      const entries = await Array.fromAsync(handle.values());
+
+      for (const entry of entries) {
+        const entryPath = currentPath ? `${currentPath}/${entry.name}` : entry.name;
+        const fullPath = `/${entryPath}`;
+
+        if (entry.kind === 'directory') {
+          await wc.fs.mkdir(fullPath, { recursive: true });
+          const subDirHandle = await handle.getDirectoryHandle(entry.name);
+          await processDirectory(subDirHandle, entryPath);
+        } else {
+          const file = await entry.getFile();
+          const content = await file.text();
+
+          // Write to WebContainer
+          await wc.fs.writeFile(fullPath, content);
+
+          // Mark file as new
+          this.#filesStore.markFileAsNew(fullPath);
+
+          // Update the files store with the current content
+          this.files.setKey(fullPath, { type: 'file', content, isBinary: false });
+
+          // Collect for editor store with actual content
+          newFiles[fullPath] = { type: 'file', content, isBinary: false };
+          loadedFiles.push(entryPath);
+        }
+      }
+    }
+
+    await processDirectory(sourceHandle);
+
+    return loadedFiles;
+  }
+
+  async refreshFiles() {
+    // Clear old state
+    this.modifiedFiles = new Set<string>();
+    this.artifactIdList = [];
+
+    // Reset stores
+    this.#filesStore = new FilesStore(webcontainer);
+    this.#editorStore = new EditorStore(this.#filesStore);
+
+    // Update UI state
+    this.currentView.set('code');
+    this.unsavedFiles.set(new Set<string>());
+  }
+
   async pushToGitHub(repoName: string, githubUsername: string, ghToken: string) {
 
     try {
@@ -486,6 +542,21 @@ export class WorkbenchStore {
       console.error('Error pushing to GitHub:', error instanceof Error ? error.message : String(error));
     }
   }
+
+  async markFileAsModified(filePath: string) {
+    const file = this.#filesStore.getFile(filePath);
+    if (file?.type === 'file') {
+      // First collect all original content
+      const originalContent = file.content;
+      console.log(`Processing ${filePath}:`, originalContent);
+
+      // Then save modifications
+      await this.saveFile(filePath, originalContent);
+    }
+  }
+
+
+
 }
 
 export const workbenchStore = new WorkbenchStore();