collapse

Signed-off-by: ale <ale@manalejandro.com>

public/js/main.js

@@ -47,6 +47,8 @@ class LogTailMonitor {
             // Sidebar
             fileList: document.getElementById('file-list'),
             refreshFilesBtn: document.getElementById('refresh-files'),
+            collapseSidebarBtn: document.getElementById('collapse-sidebar'),
+            sidebar: document.getElementById('sidebar'),
             
             // Controls
             autoScrollToggle: document.getElementById('auto-scroll'),
@@ -74,8 +76,9 @@ class LogTailMonitor {
      * Bind event listeners
      */
     bindEvents() {
-        // File refresh
+        // File refresh and sidebar collapse
         this.elements.refreshFilesBtn.addEventListener('click', () => this.loadFiles());
+        this.elements.collapseSidebarBtn.addEventListener('click', () => this.toggleSidebar());
         
         // Controls
         this.elements.autoScrollToggle.addEventListener('change', (e) => {
@@ -148,6 +151,23 @@ class LogTailMonitor {
         }
     }
     
+    /**
+     * Toggle sidebar visibility
+     */
+    toggleSidebar() {
+        this.elements.sidebar.classList.toggle('collapsed');
+        const isCollapsed = this.elements.sidebar.classList.contains('collapsed');
+        const icon = this.elements.collapseSidebarBtn.querySelector('i');
+        
+        if (isCollapsed) {
+            icon.className = 'fas fa-chevron-right';
+            this.elements.collapseSidebarBtn.title = 'Expand sidebar';
+        } else {
+            icon.className = 'fas fa-chevron-left';
+            this.elements.collapseSidebarBtn.title = 'Collapse sidebar';
+        }
+    }
+    
     /**
      * Load available files from the server
      */
@@ -391,18 +411,37 @@ class LogTailMonitor {
         // Classify log level
         this.classifyLogLine(logLine, content);
         
+        // Store timeout reference for cleanup
+        let collapseTimeout = null;
+        
         // Add click handler for expansion
         logLine.addEventListener('click', () => {
-            logLine.classList.toggle('expanded');
-            this.elements.autoScrollToggle.checked = false;
-            this.autoScroll = false;
+            const wasExpanded = logLine.classList.contains('expanded');
             
-            // Auto-collapse after 20 seconds
-            setTimeout(() => {
-                logLine.classList.remove('expanded');
-                this.elements.autoScrollToggle.checked = true;
-                this.autoScroll = true;
-            }, 20000);
+            if (wasExpanded) {
+                // Collapse manually
+                logLine.classList.remove('expanded', 'auto-collapse');
+                if (collapseTimeout) {
+                    clearTimeout(collapseTimeout);
+                    collapseTimeout = null;
+                }
+            } else {
+                // Expand
+                logLine.classList.add('expanded');
+                this.elements.autoScrollToggle.checked = false;
+                this.autoScroll = false;
+                
+                // Add visual countdown indicator
+                logLine.classList.add('auto-collapse');
+                
+                // Auto-collapse after 30 seconds
+                collapseTimeout = setTimeout(() => {
+                    logLine.classList.remove('expanded', 'auto-collapse');
+                    this.elements.autoScrollToggle.checked = true;
+                    this.autoScroll = true;
+                    collapseTimeout = null;
+                }, 30000);
+            }
         });
         
         return logLine;