feat(tsview): add database and S3 handlers, tswatch/watch scripts, web utilities, assets and release config

ts_web/elements/tsview-mongo-collections.ts

@@ -1,8 +1,16 @@
 import * as plugins from '../plugins.js';
 import { apiService, type IMongoCollection } from '../services/index.js';
+import { formatCount } from '../utilities/index.js';
+import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
 
+declare global {
+  interface HTMLElementEventMap {
+    'collection-deleted': CustomEvent<{ databaseName: string; collectionName: string }>;
+  }
+}
+
 @customElement('tsview-mongo-collections')
 export class TsviewMongoCollections extends DeesElement {
   @property({ type: String })
@@ -19,6 +27,7 @@ export class TsviewMongoCollections extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
+    themeStyles,
     css`
       :host {
         display: block;
@@ -44,8 +53,8 @@ export class TsviewMongoCollections extends DeesElement {
       }
 
       .collection-item.selected {
-        background: rgba(99, 102, 241, 0.15);
-        color: #818cf8;
+        background: rgba(255, 255, 255, 0.08);
+        color: #e0e0e0;
       }
 
       .collection-name {
@@ -80,6 +89,29 @@ export class TsviewMongoCollections extends DeesElement {
         font-size: 12px;
         font-style: italic;
       }
+
+      .delete-btn {
+        opacity: 0;
+        padding: 4px;
+        background: transparent;
+        border: none;
+        color: #888;
+        cursor: pointer;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.15s;
+      }
+
+      .collection-item:hover .delete-btn {
+        opacity: 1;
+      }
+
+      .delete-btn:hover {
+        background: rgba(239, 68, 68, 0.2);
+        color: #f87171;
+      }
     `,
   ];
 
@@ -117,11 +149,25 @@ export class TsviewMongoCollections extends DeesElement {
     );
   }
 
-  private formatCount(count?: number): string {
-    if (count === undefined) return '';
-    if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
-    if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
-    return count.toString();
+  private async deleteCollection(name: string, e: Event) {
+    e.stopPropagation();
+    if (!confirm(`Delete collection "${name}"? This will delete all documents.`)) return;
+
+    const success = await apiService.dropCollection(this.databaseName, name);
+    if (success) {
+      this.collections = this.collections.filter(c => c.name !== name);
+      this.dispatchEvent(
+        new CustomEvent('collection-deleted', {
+          detail: { databaseName: this.databaseName, collectionName: name },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  public async refresh() {
+    await this.loadCollections();
   }
 
   render() {
@@ -147,9 +193,17 @@ export class TsviewMongoCollections extends DeesElement {
                 </svg>
                 ${coll.name}
               </span>
-              ${coll.count !== undefined
-                ? html`<span class="collection-count">${this.formatCount(coll.count)}</span>`
-                : ''}
+              <span style="display: flex; align-items: center; gap: 4px;">
+                ${coll.count !== undefined
+                  ? html`<span class="collection-count">${formatCount(coll.count)}</span>`
+                  : ''}
+                <button class="delete-btn" @click=${(e: Event) => this.deleteCollection(coll.name, e)} title="Delete collection">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="3 6 5 6 21 6"></polyline>
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                  </svg>
+                </button>
+              </span>
             </div>
           `
         )}