feat(editor): add file explorer toolbar, empty-space context menu, editor auto-save, save-all, and keyboard save shortcuts

ts_web/elements/00group-editor/dees-editor-filetree/dees-editor-filetree.ts

@@ -203,6 +203,48 @@ export class DeesEditorFiletree extends DeesElement {
         color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
         font-style: italic;
       }
+
+      .filetree-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 36px;
+        padding: 0 12px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 8%)')};
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+
+      .toolbar-title {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .toolbar-actions {
+        display: flex;
+        gap: 4px;
+      }
+
+      .toolbar-button {
+        padding: 4px;
+        border-radius: 4px;
+        cursor: pointer;
+        opacity: 0.7;
+        transition: opacity 0.15s, background 0.15s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .toolbar-button:hover {
+        opacity: 1;
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.1)')};
+      }
     `,
   ];
 
@@ -231,18 +273,25 @@ export class DeesEditorFiletree extends DeesElement {
       `;
     }
 
-    if (this.treeData.length === 0) {
-      return html`
-        <div class="empty">
-          No files found.
-        </div>
-      `;
-    }
-
     return html`
-      <div class="tree-container">
-        ${this.renderTree(this.treeData)}
+      <div class="filetree-toolbar">
+        <span class="toolbar-title">Explorer</span>
+        <div class="toolbar-actions">
+          <div class="toolbar-button" @click=${() => this.createNewFile('/')} title="New File">
+            <dees-icon .icon=${'lucide:filePlus'} iconSize="16"></dees-icon>
+          </div>
+          <div class="toolbar-button" @click=${() => this.createNewFolder('/')} title="New Folder">
+            <dees-icon .icon=${'lucide:folderPlus'} iconSize="16"></dees-icon>
+          </div>
+        </div>
       </div>
+      ${this.treeData.length === 0
+        ? html`<div class="empty">No files found.</div>`
+        : html`
+            <div class="tree-container" @contextmenu=${this.handleEmptySpaceContextMenu}>
+              ${this.renderTree(this.treeData)}
+            </div>
+          `}
     `;
   }
 
@@ -414,6 +463,30 @@ export class DeesEditorFiletree extends DeesElement {
     await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
   }
 
+  private async handleEmptySpaceContextMenu(e: MouseEvent) {
+    // Only trigger if clicking on the container itself, not a tree item
+    const target = e.target as HTMLElement;
+    if (target.closest('.tree-item')) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const menuItems = [
+      {
+        name: 'New File',
+        iconName: 'lucide:filePlus',
+        action: async () => this.createNewFile('/'),
+      },
+      {
+        name: 'New Folder',
+        iconName: 'lucide:folderPlus',
+        action: async () => this.createNewFolder('/'),
+      },
+    ];
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
   private async showInputModal(options: {
     heading: string;
     label: string;