feat(web): add database overview panel, collection overview and resizable panels; show/hide system databases; use code editor with change-tracking in document view; add getDatabaseStats API and typings; enable overwrite for S3 uploads

ts_web/elements/tsview-mongo-browser.ts

@@ -24,6 +24,12 @@ export class TsviewMongoBrowser extends DeesElement {
   @state()
   private accessor stats: ICollectionStats | null = null;
 
+  @state()
+  private accessor editorWidth: number = 400;
+
+  @state()
+  private accessor isResizingEditor: boolean = false;
+
   public static styles = [
     cssManager.defaultStyles,
     themeStyles,
@@ -102,11 +108,23 @@ export class TsviewMongoBrowser extends DeesElement {
       .content {
         flex: 1;
         display: grid;
-        grid-template-columns: 1fr 400px;
-        gap: 16px;
+        grid-template-columns: 1fr 4px var(--editor-width, 400px);
+        gap: 0;
         overflow: hidden;
       }
 
+      .resize-divider {
+        width: 4px;
+        background: transparent;
+        cursor: col-resize;
+        transition: background 0.2s;
+      }
+
+      .resize-divider:hover,
+      .resize-divider.active {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
       .main-panel {
         overflow: auto;
         background: rgba(0, 0, 0, 0.2);
@@ -117,6 +135,7 @@ export class TsviewMongoBrowser extends DeesElement {
         background: rgba(0, 0, 0, 0.2);
         border-radius: 8px;
         overflow: hidden;
+        margin-left: 12px;
       }
 
       @media (max-width: 1200px) {
@@ -124,7 +143,8 @@ export class TsviewMongoBrowser extends DeesElement {
           grid-template-columns: 1fr;
         }
 
-        .detail-panel {
+        .detail-panel,
+        .resize-divider {
           display: none;
         }
       }
@@ -162,6 +182,28 @@ export class TsviewMongoBrowser extends DeesElement {
     this.selectedDocumentId = e.detail.documentId;
   }
 
+  private startEditorResize = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isResizingEditor = true;
+    document.addEventListener('mousemove', this.handleEditorResize);
+    document.addEventListener('mouseup', this.endEditorResize);
+  };
+
+  private handleEditorResize = (e: MouseEvent) => {
+    if (!this.isResizingEditor) return;
+    const contentEl = this.shadowRoot?.querySelector('.content');
+    if (!contentEl) return;
+    const containerRect = contentEl.getBoundingClientRect();
+    const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 300), 700);
+    this.editorWidth = newWidth;
+  };
+
+  private endEditorResize = () => {
+    this.isResizingEditor = false;
+    document.removeEventListener('mousemove', this.handleEditorResize);
+    document.removeEventListener('mouseup', this.endEditorResize);
+  };
+
   render() {
     return html`
       <div class="browser-container">
@@ -201,7 +243,7 @@ export class TsviewMongoBrowser extends DeesElement {
           </div>
         </div>
 
-        <div class="content">
+        <div class="content" style="--editor-width: ${this.editorWidth}px">
           <div class="main-panel">
             ${this.activeTab === 'documents'
               ? html`
@@ -225,6 +267,11 @@ export class TsviewMongoBrowser extends DeesElement {
                   `}
           </div>
 
+          <div
+            class="resize-divider ${this.isResizingEditor ? 'active' : ''}"
+            @mousedown=${this.startEditorResize}
+          ></div>
+
           <div class="detail-panel">
             <tsview-mongo-document
               .databaseName=${this.databaseName}