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

ts_web/elements/tsview-mongo-browser.ts

@@ -1,5 +1,7 @@
 import * as plugins from '../plugins.js';
 import { apiService, type ICollectionStats } from '../services/index.js';
+import { formatSize, formatCount } from '../utilities/index.js';
+import { themeStyles } from '../styles/index.js';
 
 const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
 
@@ -24,6 +26,7 @@ export class TsviewMongoBrowser extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
+    themeStyles,
     css`
       :host {
         display: block;
@@ -92,8 +95,8 @@ export class TsviewMongoBrowser extends DeesElement {
       }
 
       .tab.active {
-        background: rgba(99, 102, 241, 0.2);
-        color: #818cf8;
+        background: rgba(255, 255, 255, 0.1);
+        color: #e0e0e0;
       }
 
       .content {
@@ -159,23 +162,6 @@ export class TsviewMongoBrowser extends DeesElement {
     this.selectedDocumentId = e.detail.documentId;
   }
 
-  private formatCount(num: number): string {
-    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
-    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
-    return num.toString();
-  }
-
-  private formatSize(bytes: number): string {
-    const units = ['B', 'KB', 'MB', 'GB'];
-    let size = bytes;
-    let unitIndex = 0;
-    while (size >= 1024 && unitIndex < units.length - 1) {
-      size /= 1024;
-      unitIndex++;
-    }
-    return `${size.toFixed(unitIndex > 0 ? 1 : 0)} ${units[unitIndex]}`;
-  }
-
   render() {
     return html`
       <div class="browser-container">
@@ -185,8 +171,8 @@ export class TsviewMongoBrowser extends DeesElement {
             ${this.stats
               ? html`
                   <div class="collection-stats">
-                    <span class="stat-item">${this.formatCount(this.stats.count)} docs</span>
-                    <span class="stat-item">${this.formatSize(this.stats.size)}</span>
+                    <span class="stat-item">${formatCount(this.stats.count)} docs</span>
+                    <span class="stat-item">${formatSize(this.stats.size)}</span>
                     <span class="stat-item">${this.stats.indexCount} indexes</span>
                   </div>
                 `