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

2026-01-25 12:56:56 +00:00
parent 07010376cb
commit 349b43612e
12 changed files with 860 additions and 20 deletions
--- a/ts_web/elements/tsview-app.ts
+++ b/ts_web/elements/tsview-app.ts
@@ -45,6 +45,18 @@ export class TsviewApp extends DeesElement {
  @state()
  private accessor newDatabaseName: string = '';

+  @state()
+  private accessor showS3CreateDialog: boolean = false;
+
+  @state()
+  private accessor s3CreateDialogType: 'folder' | 'file' = 'folder';
+
+  @state()
+  private accessor s3CreateDialogBucket: string = '';
+
+  @state()
+  private accessor s3CreateDialogName: string = '';
+
  public static styles = [
    cssManager.defaultStyles,
    themeStyles,
@@ -297,6 +309,20 @@ export class TsviewApp extends DeesElement {
        border-color: #e0e0e0;
      }

+      .dialog-location {
+        font-size: 12px;
+        color: #888;
+        margin-bottom: 12px;
+        font-family: monospace;
+      }
+
+      .dialog-hint {
+        font-size: 11px;
+        color: #666;
+        margin-bottom: 16px;
+        margin-top: -8px;
+      }
+
      .dialog-actions {
        display: flex;
        gap: 12px;
@@ -483,6 +509,17 @@ export class TsviewApp extends DeesElement {
        },
      },
      { divider: true },
+      {
+        name: 'New Folder',
+        iconName: 'lucide:folderPlus',
+        action: async () => this.openS3CreateDialog(bucket, 'folder'),
+      },
+      {
+        name: 'New File',
+        iconName: 'lucide:filePlus',
+        action: async () => this.openS3CreateDialog(bucket, 'file'),
+      },
+      { divider: true },
      {
        name: 'Delete Bucket',
        iconName: 'lucide:trash2',
@@ -501,6 +538,72 @@ export class TsviewApp extends DeesElement {
    ]);
  }

+  private openS3CreateDialog(bucket: string, type: 'folder' | 'file') {
+    this.s3CreateDialogBucket = bucket;
+    this.s3CreateDialogType = type;
+    this.s3CreateDialogName = '';
+    this.showS3CreateDialog = 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 handleS3Create() {
+    if (!this.s3CreateDialogName.trim()) return;
+
+    const name = this.s3CreateDialogName.trim();
+    let path: string;
+
+    if (this.s3CreateDialogType === 'folder') {
+      path = name + '/.keep';
+    } else {
+      path = name;
+    }
+
+    const ext = name.split('.').pop()?.toLowerCase() || '';
+    const contentType = this.s3CreateDialogType === 'file' ? this.getContentType(ext) : 'application/octet-stream';
+    const content = this.s3CreateDialogType === 'file' ? this.getDefaultContent(ext) : '';
+
+    const success = await apiService.putObject(
+      this.s3CreateDialogBucket,
+      path,
+      btoa(content),
+      contentType
+    );
+
+    if (success) {
+      this.showS3CreateDialog = false;
+      // Select the bucket to show the new content
+      this.selectedBucket = this.s3CreateDialogBucket;
+      // Trigger a refresh by dispatching an event
+      this.requestUpdate();
+    }
+  }
+
  private handleDatabaseContextMenu(event: MouseEvent, dbName: string) {
    event.preventDefault();
    DeesContextmenu.openContextMenuWithOptions(event, [
@@ -574,6 +677,7 @@ export class TsviewApp extends DeesElement {
      ${this.renderCreateBucketDialog()}
      ${this.renderCreateCollectionDialog()}
      ${this.renderCreateDatabaseDialog()}
+      ${this.renderS3CreateDialog()}
    `;
  }

@@ -670,6 +774,48 @@ export class TsviewApp extends DeesElement {
    `;
  }

+  private renderS3CreateDialog() {
+    if (!this.showS3CreateDialog) return '';
+
+    const isFolder = this.s3CreateDialogType === '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.showS3CreateDialog = false}>
+        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="dialog-title">${title}</div>
+          <div class="dialog-location">
+            Location: ${this.s3CreateDialogBucket}/
+          </div>
+          <input
+            type="text"
+            class="dialog-input"
+            placeholder=${placeholder}
+            .value=${this.s3CreateDialogName}
+            @input=${(e: InputEvent) => this.s3CreateDialogName = (e.target as HTMLInputElement).value}
+            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleS3Create()}
+          />
+          <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.showS3CreateDialog = false}>
+              Cancel
+            </button>
+            <button
+              class="dialog-btn dialog-btn-create"
+              ?disabled=${!this.s3CreateDialogName.trim()}
+              @click=${() => this.handleS3Create()}
+            >
+              Create
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
  private renderSidebar() {
    if (this.viewMode === 's3') {
      return html`