Create static/js/editor.js

static/js/editor.js

@@ -0,0 +1,168 @@
+// static/js/editor.js
+
+let editor;
+
+function initEditor() {
+    if (!document.getElementById("ace-editor")) return;
+    
+    // Initialize Ace
+    editor = ace.edit("ace-editor");
+    editor.setTheme("ace/theme/tomorrow_night_eighties"); // Deep dark theme matching mockups
+    editor.session.setMode("ace/mode/python");
+    editor.setOptions({
+        fontSize: "14px",
+        fontFamily: "var(--font-mono)",
+        showPrintMargin: false,
+        enableBasicAutocompletion: true
+    });
+
+    // Load files immediately after init
+    loadFiles();
+}
+
+async function loadFiles() {
+    if (!currentToken) return;
+    
+    try {
+        const res = await fetch('/api/files', { 
+            method: 'POST', 
+            headers: {'Content-Type': 'application/json'}, 
+            body: JSON.stringify({token: currentToken}) 
+        });
+        const data = await res.json();
+        
+        const list = document.getElementById('file-list');
+        if(!list) return;
+        
+        list.innerHTML = '';
+        
+        if (data.files && data.files.length > 0) {
+            data.files.forEach(f => {
+                const div = document.createElement('div');
+                div.className = 'file-item';
+                div.innerHTML = `📄 ${f}`;
+                div.onclick = () => openFile(f);
+                list.appendChild(div);
+            });
+        } else {
+            list.innerHTML = `<div style="color: var(--text-muted); font-size: 12px; text-align: center; margin-top: 20px;">No files yet. Click + New</div>`;
+        }
+    } catch(e) {
+        console.error("Failed to load files", e);
+    }
+}
+
+function newFile() {
+    document.getElementById('current-filename').value = "untitled.txt";
+    if(editor) {
+        editor.setValue("", -1);
+        editor.session.setMode("ace/mode/text");
+        editor.focus();
+    }
+}
+
+async function openFile(filename) {
+    document.getElementById('current-filename').value = filename;
+    try {
+        const res = await fetch('/api/file/read', { 
+            method: 'POST', 
+            headers: {'Content-Type': 'application/json'}, 
+            body: JSON.stringify({token: currentToken, filename: filename}) 
+        });
+        const data = await res.json();
+        
+        if(!data.error && editor) {
+            editor.setValue(data.content, -1);
+            
+            // Set Syntax Highlighting
+            if(filename.endsWith('.py')) editor.session.setMode("ace/mode/python");
+            else if(filename.endsWith('.js')) editor.session.setMode("ace/mode/javascript");
+            else if(filename.endsWith('.html')) editor.session.setMode("ace/mode/html");
+            else if(filename.endsWith('.css')) editor.session.setMode("ace/mode/css");
+            else if(filename.endsWith('.json')) editor.session.setMode("ace/mode/json");
+            else editor.session.setMode("ace/mode/text");
+        }
+    } catch (e) {
+        alert("Network error reading file.");
+    }
+}
+
+async function saveFile() {
+    const filename = document.getElementById('current-filename').value;
+    const content = editor ? editor.getValue() : "";
+    
+    if(!filename) { 
+        alert("Please enter a filename"); 
+        return; 
+    }
+    
+    const saveBtn = document.querySelector('.editor-btn.primary');
+    saveBtn.innerText = "Saving...";
+    
+    try {
+        const res = await fetch('/api/file/save', { 
+            method: 'POST', 
+            headers: {'Content-Type': 'application/json'}, 
+            body: JSON.stringify({token: currentToken, filename: filename, content: content}) 
+        });
+        const data = await res.json();
+        
+        if(data.success) {
+            saveBtn.innerText = "✓ Saved";
+            setTimeout(() => saveBtn.innerText = "💾 Save", 2000);
+            loadFiles(); // Refresh list just in case it's a new file
+        } else {
+            alert("Error saving: " + data.error);
+            saveBtn.innerText = "💾 Save";
+        }
+    } catch(e) {
+        alert("Network error while saving.");
+        saveBtn.innerText = "💾 Save";
+    }
+}
+
+async function renameFile() {
+    const newName = prompt("Enter new filename:");
+    if(!newName) return;
+    
+    const oldName = document.getElementById('current-filename').value;
+    
+    try {
+        await fetch('/api/file/rename', { 
+            method: 'POST', 
+            headers: {'Content-Type': 'application/json'}, 
+            body: JSON.stringify({token: currentToken, filename: oldName, new_name: newName}) 
+        });
+        document.getElementById('current-filename').value = newName;
+        loadFiles();
+    } catch (e) {
+        alert("Error renaming file.");
+    }
+}
+
+async function aiEdit() {
+    const promptStr = prompt("✨ AI Edit: What should the AI do to this code? (e.g., 'Fix the loop bug', 'Add comments')");
+    if(!promptStr || !editor) return;
+    
+    const originalCode = editor.getValue();
+    editor.setValue("✨ AI is analyzing and rewriting your code... please wait.", -1);
+    
+    try {
+        const res = await fetch('/api/ai_edit', { 
+            method: 'POST', 
+            headers: {'Content-Type': 'application/json'}, 
+            body: JSON.stringify({prompt: promptStr, content: originalCode}) 
+        });
+        const data = await res.json();
+        
+        if(data.code && !data.code.includes("NETWORK_ERROR")) {
+            editor.setValue(data.code, -1);
+        } else {
+            editor.setValue(originalCode, -1);
+            alert("AI Edit failed: \n" + (data.code || "Unknown error"));
+        }
+    } catch(e) {
+        editor.setValue(originalCode, -1);
+        alert("Network error during AI edit.");
+    }
+}