UPdate.

static/css/code-editor-view.css

@@ -1,25 +1,13 @@
 .code-editor-overlay {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.code-editor-container {
-    width: 90%;
-    height: 90%;
-    max-width: 1400px;
-    background: white;
-    border-radius: 8px;
     display: flex;
     flex-direction: column;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    background: white;
+    z-index: 100;
 }
 
 .code-editor-header {
@@ -37,7 +25,7 @@
     gap: 16px;
 }
 
-.code-editor-header .header-right {
+.code-editor-header .preview-actions {
     display: flex;
     gap: 8px;
 }

static/css/style.css

@@ -761,6 +761,15 @@ body.dark-mode {
     text-align: center;
     padding: calc(var(--spacing-unit) * 4);
     color: var(--text-color-light);
+    font-size: 1.1rem;
+}
+
+.empty-state::before {
+    content: "📁";
+    display: block;
+    font-size: 3rem;
+    margin-bottom: var(--spacing-unit);
+    opacity: 0.5;
 }
 
 .file-preview-overlay {

static/js/components/code-editor-view.js

@@ -50,28 +50,32 @@ class CodeEditorView extends HTMLElement {
     createUI(content) {
         this.innerHTML = `
             <div class="code-editor-overlay">
-                <div class="code-editor-container">
-                    <div class="code-editor-header">
-                        <div class="header-left">
-                            <button class="button" id="back-btn">Back</button>
-                            <h2 class="editor-filename">${this.escapeHtml(this.file.name)}</h2>
-                        </div>
-                        <div class="header-right">
-                            <button class="button button-primary" id="save-btn">Save & Close</button>
+                <div class="code-editor-header">
+                    <div class="header-left">
+                        <button class="button" id="back-btn">Back</button>
+                        <div class="preview-info">
+                            <h2 class="preview-file-name">${this.escapeHtml(this.file.name)}</h2>
+                            <p class="preview-file-info">${this.formatFileSize(this.file.size)} • ${new Date(this.file.created_at).toLocaleDateString()}</p>
                         </div>
                     </div>
-                    <div class="code-editor-body">
-                        <textarea id="editor-textarea"></textarea>
+                    <div class="preview-actions">
+                        <button class="button" id="download-btn">Download</button>
+                        <button class="button button-primary" id="save-btn">Save & Close</button>
                     </div>
                 </div>
+                <div class="code-editor-body">
+                    <textarea id="editor-textarea"></textarea>
+                </div>
             </div>
         `;
 
         const backBtn = this.querySelector('#back-btn');
         const saveBtn = this.querySelector('#save-btn');
+        const downloadBtn = this.querySelector('#download-btn');
 
         backBtn.addEventListener('click', () => this.close());
         saveBtn.addEventListener('click', () => this.save());
+        downloadBtn.addEventListener('click', () => this.downloadFile());
 
         document.addEventListener('keydown', this.handleKeydown.bind(this));
     }
@@ -140,6 +144,33 @@ class CodeEditorView extends HTMLElement {
         return div.innerHTML;
     }
 
+    async downloadFile() {
+        try {
+            const blob = await api.downloadFile(this.file.id);
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = this.file.name;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+        } catch (error) {
+            console.error('Failed to download file:', error);
+        }
+    }
+
+    formatFileSize(bytes) {
+        const units = ['B', 'KB', 'MB', 'GB'];
+        let size = bytes;
+        let unitIndex = 0;
+        while (size >= 1024 && unitIndex < units.length - 1) {
+            size /= 1024;
+            unitIndex++;
+        }
+        return `${size.toFixed(1)} ${units[unitIndex]}`;
+    }
+
     handleKeydown(e) {
         if (e.key === 'Escape' && !this.editor.getOption('readOnly')) {
             this.close();