feat(s3): add S3 create file/folder dialogs and in-place text editor; export mongodb plugin

ts_web/elements/tsview-s3-keys.ts

@@ -32,6 +32,18 @@ export class TsviewS3Keys extends DeesElement {
   @state()
   private accessor filterText: string = '';
 
+  @state()
+  private accessor showCreateDialog: boolean = false;
+
+  @state()
+  private accessor createDialogType: 'folder' | 'file' = 'folder';
+
+  @state()
+  private accessor createDialogPrefix: string = '';
+
+  @state()
+  private accessor createDialogName: string = '';
+
   public static styles = [
     cssManager.defaultStyles,
     themeStyles,
@@ -146,6 +158,104 @@ export class TsviewS3Keys extends DeesElement {
         text-align: center;
         color: #666;
       }
+
+      .dialog-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+      }
+
+      .dialog {
+        background: #1e1e1e;
+        border-radius: 12px;
+        padding: 24px;
+        min-width: 400px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+      }
+
+      .dialog-title {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: #fff;
+      }
+
+      .dialog-location {
+        font-size: 12px;
+        color: #888;
+        margin-bottom: 12px;
+        font-family: monospace;
+      }
+
+      .dialog-input {
+        width: 100%;
+        padding: 10px 12px;
+        background: #141414;
+        border: 1px solid #333;
+        border-radius: 6px;
+        color: #fff;
+        font-size: 14px;
+        margin-bottom: 8px;
+        box-sizing: border-box;
+      }
+
+      .dialog-input:focus {
+        outline: none;
+        border-color: #e0e0e0;
+      }
+
+      .dialog-hint {
+        font-size: 11px;
+        color: #666;
+        margin-bottom: 16px;
+      }
+
+      .dialog-actions {
+        display: flex;
+        gap: 12px;
+        justify-content: flex-end;
+      }
+
+      .dialog-btn {
+        padding: 8px 16px;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .dialog-btn-cancel {
+        background: transparent;
+        border: 1px solid #444;
+        color: #aaa;
+      }
+
+      .dialog-btn-cancel:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: #fff;
+      }
+
+      .dialog-btn-create {
+        background: #404040;
+        border: none;
+        color: #fff;
+      }
+
+      .dialog-btn-create:hover {
+        background: #505050;
+      }
+
+      .dialog-btn-create:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
     `,
   ];
 
@@ -231,6 +341,17 @@ export class TsviewS3Keys extends DeesElement {
           },
         },
         { divider: true },
+        {
+          name: 'New Folder Inside',
+          iconName: 'lucide:folderPlus',
+          action: async () => this.openCreateDialog('folder', key),
+        },
+        {
+          name: 'New File Inside',
+          iconName: 'lucide:filePlus',
+          action: async () => this.openCreateDialog('file', key),
+        },
+        { divider: true },
         {
           name: 'Delete Folder',
           iconName: 'lucide:trash2',
@@ -288,6 +409,130 @@ export class TsviewS3Keys extends DeesElement {
     }
   }
 
+  private handleEmptySpaceContextMenu(event: MouseEvent) {
+    // Only trigger if clicking on the container itself, not on items
+    if ((event.target as HTMLElement).closest('tr')) return;
+    event.preventDefault();
+
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'New Folder',
+        iconName: 'lucide:folderPlus',
+        action: async () => this.openCreateDialog('folder', this.currentPrefix),
+      },
+      {
+        name: 'New File',
+        iconName: 'lucide:filePlus',
+        action: async () => this.openCreateDialog('file', this.currentPrefix),
+      },
+    ]);
+  }
+
+  private openCreateDialog(type: 'folder' | 'file', prefix: string) {
+    this.createDialogType = type;
+    this.createDialogPrefix = prefix;
+    this.createDialogName = '';
+    this.showCreateDialog = true;
+  }
+
+  private getContentType(ext: string): string {
+    const contentTypes: Record<string, string> = {
+      json: 'application/json',
+      txt: 'text/plain',
+      html: 'text/html',
+      css: 'text/css',
+      js: 'application/javascript',
+      ts: 'text/typescript',
+      md: 'text/markdown',
+      xml: 'application/xml',
+      yaml: 'text/yaml',
+      yml: 'text/yaml',
+      csv: 'text/csv',
+    };
+    return contentTypes[ext] || 'application/octet-stream';
+  }
+
+  private getDefaultContent(ext: string): string {
+    const defaults: Record<string, string> = {
+      json: '{\n  \n}',
+      html: '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
+      md: '# Title\n\n',
+      txt: '',
+    };
+    return defaults[ext] || '';
+  }
+
+  private async handleCreate() {
+    if (!this.createDialogName.trim()) return;
+
+    const name = this.createDialogName.trim();
+    let path: string;
+
+    if (this.createDialogType === 'folder') {
+      path = this.createDialogPrefix + name + '/.keep';
+    } else {
+      path = this.createDialogPrefix + name;
+    }
+
+    const ext = name.split('.').pop()?.toLowerCase() || '';
+    const contentType = this.createDialogType === 'file' ? this.getContentType(ext) : 'application/octet-stream';
+    const content = this.createDialogType === 'file' ? this.getDefaultContent(ext) : '';
+
+    const success = await apiService.putObject(
+      this.bucketName,
+      path,
+      btoa(content),
+      contentType
+    );
+
+    if (success) {
+      this.showCreateDialog = false;
+      await this.loadObjects();
+    }
+  }
+
+  private renderCreateDialog() {
+    if (!this.showCreateDialog) return '';
+
+    const isFolder = this.createDialogType === 'folder';
+    const title = isFolder ? 'Create New Folder' : 'Create New File';
+    const placeholder = isFolder ? 'folder-name or path/to/folder' : 'filename.txt or path/to/file.txt';
+
+    return html`
+      <div class="dialog-overlay" @click=${() => this.showCreateDialog = false}>
+        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">${title}</div>
+          <div class="dialog-location">
+            Location: ${this.bucketName}/${this.createDialogPrefix}
+          </div>
+          <input
+            type="text"
+            class="dialog-input"
+            placeholder=${placeholder}
+            .value=${this.createDialogName}
+            @input=${(e: InputEvent) => this.createDialogName = (e.target as HTMLInputElement).value}
+            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleCreate()}
+          />
+          <div class="dialog-hint">
+            Use "/" to create nested ${isFolder ? 'folders' : 'path'} (e.g., ${isFolder ? 'parent/child' : 'folder/file.txt'})
+          </div>
+          <div class="dialog-actions">
+            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.showCreateDialog = false}>
+              Cancel
+            </button>
+            <button
+              class="dialog-btn dialog-btn-create"
+              ?disabled=${!this.createDialogName.trim()}
+              @click=${() => this.handleCreate()}
+            >
+              Create
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
   render() {
     return html`
       <div class="keys-container">
@@ -301,7 +546,7 @@ export class TsviewS3Keys extends DeesElement {
           />
         </div>
 
-        <div class="keys-list">
+        <div class="keys-list" @contextmenu=${(e: MouseEvent) => this.handleEmptySpaceContextMenu(e)}>
           ${this.loading
             ? html`<div class="empty-state">Loading...</div>`
             : this.filteredItems.length === 0
@@ -349,6 +594,7 @@ export class TsviewS3Keys extends DeesElement {
                 `}
         </div>
       </div>
+      ${this.renderCreateDialog()}
     `;
   }
 }