feat(s3,web-ui): add S3 deletePrefix and getObjectUrl endpoints and add context menus in UI for S3 and Mongo views

ts_web/elements/tsview-s3-columns.ts

@@ -4,6 +4,7 @@ import { getFileName } from '../utilities/index.js';
 import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
+const { DeesContextmenu } = plugins.deesCatalog;
 
 interface IColumn {
   prefix: string;
@@ -318,6 +319,83 @@ export class TsviewS3Columns extends DeesElement {
     return iconMap[ext] || 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z';
   }
 
+  private handleFolderContextMenu(event: MouseEvent, columnIndex: number, prefix: string) {
+    event.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'Open',
+        iconName: 'lucide:folderOpen',
+        action: async () => {
+          this.selectFolder(columnIndex, prefix);
+        },
+      },
+      {
+        name: 'Copy Path',
+        iconName: 'lucide:copy',
+        action: async () => {
+          await navigator.clipboard.writeText(prefix);
+        },
+      },
+      { divider: true },
+      {
+        name: 'Delete Folder',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          if (confirm(`Delete folder "${getFileName(prefix)}" and all its contents?`)) {
+            const success = await apiService.deletePrefix(this.bucketName, prefix);
+            if (success) {
+              await this.loadInitialColumn();
+            }
+          }
+        },
+      },
+    ]);
+  }
+
+  private handleFileContextMenu(event: MouseEvent, columnIndex: number, key: string) {
+    event.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'Preview',
+        iconName: 'lucide:eye',
+        action: async () => {
+          this.selectFile(columnIndex, key);
+        },
+      },
+      {
+        name: 'Download',
+        iconName: 'lucide:download',
+        action: async () => {
+          const url = await apiService.getObjectUrl(this.bucketName, key);
+          const link = document.createElement('a');
+          link.href = url;
+          link.download = getFileName(key);
+          link.click();
+        },
+      },
+      {
+        name: 'Copy Path',
+        iconName: 'lucide:copy',
+        action: async () => {
+          await navigator.clipboard.writeText(key);
+        },
+      },
+      { divider: true },
+      {
+        name: 'Delete',
+        iconName: 'lucide:trash2',
+        action: async () => {
+          if (confirm(`Delete file "${getFileName(key)}"?`)) {
+            const success = await apiService.deleteObject(this.bucketName, key);
+            if (success) {
+              await this.loadInitialColumn();
+            }
+          }
+        },
+      },
+    ]);
+  }
+
   render() {
     if (this.loading && this.columns.length === 0) {
       return html`<div class="loading">Loading...</div>`;
@@ -361,6 +439,7 @@ export class TsviewS3Columns extends DeesElement {
               <div
                 class="column-item folder ${column.selectedItem === prefix ? 'selected' : ''}"
                 @click=${() => this.selectFolder(index, prefix)}
+                @contextmenu=${(e: MouseEvent) => this.handleFolderContextMenu(e, index, prefix)}
               >
                 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
@@ -377,6 +456,7 @@ export class TsviewS3Columns extends DeesElement {
               <div
                 class="column-item ${column.selectedItem === obj.key ? 'selected' : ''}"
                 @click=${() => this.selectFile(index, obj.key)}
+                @contextmenu=${(e: MouseEvent) => this.handleFileContextMenu(e, index, obj.key)}
               >
                 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path d="${this.getFileIcon(obj.key)}" />