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

ts_web/elements/tsview-s3-columns.ts

@@ -1,5 +1,7 @@
 import * as plugins from '../plugins.js';
 import { apiService, type IS3Object } from '../services/index.js';
+import { getFileName } from '../utilities/index.js';
+import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
 
@@ -19,6 +21,9 @@ export class TsviewS3Columns extends DeesElement {
   @property({ type: String })
   public accessor currentPrefix: string = '';
 
+  @property({ type: Number })
+  public accessor refreshKey: number = 0;
+
   @state()
   private accessor columns: IColumn[] = [];
 
@@ -32,6 +37,7 @@ export class TsviewS3Columns extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
+    themeStyles,
     css`
       :host {
         display: block;
@@ -81,7 +87,7 @@ export class TsviewS3Columns extends DeesElement {
 
       .resize-handle:hover::after,
       .resize-handle.active::after {
-        background: #6366f1;
+        background: #404040;
         width: 2px;
         left: 1px;
       }
@@ -124,8 +130,8 @@ export class TsviewS3Columns extends DeesElement {
       }
 
       .column-item.selected {
-        background: rgba(99, 102, 241, 0.2);
-        color: #818cf8;
+        background: rgba(255, 255, 255, 0.1);
+        color: #e0e0e0;
       }
 
       .column-item.folder {
@@ -172,9 +178,9 @@ export class TsviewS3Columns extends DeesElement {
   }
 
   updated(changedProperties: Map<string, unknown>) {
-    // Only reset columns when bucket changes
+    // Only reset columns when bucket changes or refresh is triggered
     // Internal folder navigation is handled by selectFolder() which appends columns
-    if (changedProperties.has('bucketName')) {
+    if (changedProperties.has('bucketName') || changedProperties.has('refreshKey')) {
       this.loadInitialColumn();
     }
   }
@@ -298,11 +304,6 @@ export class TsviewS3Columns extends DeesElement {
     );
   }
 
-  private getFileName(path: string): string {
-    const parts = path.replace(/\/$/, '').split('/');
-    return parts[parts.length - 1] || path;
-  }
-
   private getFileIcon(key: string): string {
     const ext = key.split('.').pop()?.toLowerCase() || '';
     const iconMap: Record<string, string> = {
@@ -343,7 +344,7 @@ export class TsviewS3Columns extends DeesElement {
 
   private renderColumn(column: IColumn, index: number) {
     const headerName = column.prefix
-      ? this.getFileName(column.prefix)
+      ? getFileName(column.prefix)
       : this.bucketName;
 
     return html`
@@ -364,7 +365,7 @@ export class TsviewS3Columns extends DeesElement {
                 <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" />
                 </svg>
-                <span class="name">${this.getFileName(prefix)}</span>
+                <span class="name">${getFileName(prefix)}</span>
                 <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <polyline points="9 18 15 12 9 6"></polyline>
                 </svg>
@@ -380,7 +381,7 @@ export class TsviewS3Columns extends DeesElement {
                 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path d="${this.getFileIcon(obj.key)}" />
                 </svg>
-                <span class="name">${this.getFileName(obj.key)}</span>
+                <span class="name">${getFileName(obj.key)}</span>
               </div>
             `
           )}