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

ts_web/elements/tsview-s3-browser.ts

@@ -1,5 +1,6 @@
 import * as plugins from '../plugins.js';
 import { apiService } from '../services/index.js';
+import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
 
@@ -19,8 +20,12 @@ export class TsviewS3Browser extends DeesElement {
   @state()
   private accessor selectedKey: string = '';
 
+  @state()
+  private accessor refreshKey: number = 0;
+
   public static styles = [
     cssManager.defaultStyles,
+    themeStyles,
     css`
       :host {
         display: block;
@@ -90,19 +95,23 @@ export class TsviewS3Browser extends DeesElement {
       }
 
       .view-btn.active {
-        background: rgba(99, 102, 241, 0.2);
-        border-color: #6366f1;
-        color: #818cf8;
+        background: rgba(255, 255, 255, 0.1);
+        border-color: #404040;
+        color: #e0e0e0;
       }
 
       .content {
         flex: 1;
         display: grid;
-        grid-template-columns: 1fr 350px;
+        grid-template-columns: 1fr;
         gap: 16px;
         overflow: hidden;
       }
 
+      .content.has-preview {
+        grid-template-columns: 1fr 350px;
+      }
+
       .main-view {
         overflow: auto;
         background: rgba(0, 0, 0, 0.2);
@@ -116,7 +125,8 @@ export class TsviewS3Browser extends DeesElement {
       }
 
       @media (max-width: 1024px) {
-        .content {
+        .content,
+        .content.has-preview {
           grid-template-columns: 1fr;
         }
 
@@ -144,6 +154,20 @@ export class TsviewS3Browser extends DeesElement {
     this.navigateToPrefix(e.detail.prefix);
   }
 
+  private handleObjectDeleted(e: CustomEvent) {
+    this.selectedKey = '';
+    // Increment refresh key to trigger re-render of child components
+    this.refreshKey++;
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('bucketName')) {
+      // Clear selection when bucket changes
+      this.selectedKey = '';
+      this.currentPrefix = '';
+    }
+  }
+
   render() {
     const breadcrumbParts = this.currentPrefix
       ? this.currentPrefix.split('/').filter(Boolean)
@@ -189,13 +213,14 @@ export class TsviewS3Browser extends DeesElement {
           </div>
         </div>
 
-        <div class="content">
+        <div class="content ${this.selectedKey ? 'has-preview' : ''}">
           <div class="main-view">
             ${this.viewType === 'columns'
               ? html`
                   <tsview-s3-columns
                     .bucketName=${this.bucketName}
                     .currentPrefix=${this.currentPrefix}
+                    .refreshKey=${this.refreshKey}
                     @key-selected=${this.handleKeySelected}
                     @navigate=${this.handleNavigate}
                   ></tsview-s3-columns>
@@ -204,18 +229,24 @@ export class TsviewS3Browser extends DeesElement {
                   <tsview-s3-keys
                     .bucketName=${this.bucketName}
                     .currentPrefix=${this.currentPrefix}
+                    .refreshKey=${this.refreshKey}
                     @key-selected=${this.handleKeySelected}
                     @navigate=${this.handleNavigate}
                   ></tsview-s3-keys>
                 `}
           </div>
 
-          <div class="preview-panel">
-            <tsview-s3-preview
-              .bucketName=${this.bucketName}
-              .objectKey=${this.selectedKey}
-            ></tsview-s3-preview>
-          </div>
+          ${this.selectedKey
+            ? html`
+                <div class="preview-panel">
+                  <tsview-s3-preview
+                    .bucketName=${this.bucketName}
+                    .objectKey=${this.selectedKey}
+                    @object-deleted=${this.handleObjectDeleted}
+                  ></tsview-s3-preview>
+                </div>
+              `
+            : ''}
         </div>
       </div>
     `;