Added galery

public/js/dbmanager.js

@@ -11,27 +11,40 @@ const DBManager = {
 
     initTree() {
         document.querySelectorAll('.tree-header').forEach(header => {
+            // Skip if already initialized
+            if (header.dataset.treeInit) return;
+            header.dataset.treeInit = 'true';
+
             header.addEventListener('click', (e) => {
                 const item = header.closest('.tree-item');
                 const children = item.querySelector('.tree-children');
                 const href = header.dataset.href;
                 const toggle = e.target.closest('.tree-toggle');
 
-                // If clicking on toggle icon, just expand/collapse
+                // If clicking on toggle icon, just expand/collapse (don't navigate)
                 if (toggle) {
                     e.preventDefault();
                     e.stopPropagation();
 
+                    // Lazy-load tables for databases if needed
                     if (item.dataset.db && children && !children.dataset.loaded) {
                         this.loadTables(item.dataset.db, children);
                     }
+                    // Lazy-load columns for tables if needed
+                    else if (item.dataset.table && children && !children.dataset.loaded) {
+                        // Find the parent database name
+                        const dbItem = item.closest('.tree-item[data-db]');
+                        if (dbItem) {
+                            this.loadColumns(dbItem.dataset.db, item.dataset.table, children);
+                        }
+                    }
                     this.toggleTreeItem(item);
                     return;
                 }
 
-                // If it's a table or database item with href, navigate directly
+                // If it's a database or table item with href, navigate
                 if (href) {
-                    // For databases, also load tables if not loaded
+                    // For databases, also expand and load tables
                     if (item.dataset.db && children && !children.dataset.loaded) {
                         this.loadTables(item.dataset.db, children);
                     }
@@ -68,6 +81,37 @@ const DBManager = {
         }
     },
 
+    async loadColumns(dbName, tableName, container) {
+        container.innerHTML = '<div class="tree-loading">Loading...</div>';
+        container.dataset.loaded = 'true';
+
+        try {
+            const response = await fetch(`${this.baseUrl}database/getColumns/${encodeURIComponent(dbName)}/${encodeURIComponent(tableName)}`);
+            const data = await response.json();
+
+            if (data.success && data.columns) {
+                let html = '';
+                data.columns.forEach(col => {
+                    html += `
+                        <div class="tree-item">
+                            <div class="tree-header">
+                                <span class="tree-icon ${col.Key === 'PRI' ? 'key' : 'column'}">
+                                    ${col.Key === 'PRI' ? this.icons.key : this.icons.column}
+                                </span>
+                                <span class="tree-label">${this.escapeHtml(col.Field)}</span>
+                                <span class="tree-badge">${this.escapeHtml(col.Type)}</span>
+                            </div>
+                        </div>
+                    `;
+                });
+                container.innerHTML = html || '<div class="tree-empty">No columns</div>';
+                this.refreshIcons();
+            }
+        } catch (error) {
+            container.innerHTML = '<div class="tree-error">Failed to load</div>';
+        }
+    },
+
     renderTableTreeItem(dbName, tableName, columns) {
         const columnsHtml = columns.map(col => `
             <div class="tree-item">