collapse

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

public/css/main.css

@@ -226,6 +226,38 @@ body {
     border-right: 1px solid var(--border-light);
     display: flex;
     flex-direction: column;
+    transition: all var(--transition-normal);
+    overflow: hidden;
+}
+
+.sidebar.collapsed {
+    width: 60px;
+}
+
+.sidebar.collapsed .sidebar-header h3 {
+    opacity: 0;
+    width: 0;
+    overflow: hidden;
+}
+
+.sidebar.collapsed .sidebar-header {
+    justify-content: center;
+}
+
+.sidebar.collapsed .sidebar-controls {
+    flex-direction: column;
+}
+
+.sidebar.collapsed #refresh-files {
+    display: none;
+}
+
+.sidebar.collapsed .file-list {
+    display: none;
+}
+
+.sidebar.collapsed #collapse-sidebar i {
+    transform: rotate(180deg);
 }
 
 .sidebar-header {
@@ -236,6 +268,12 @@ body {
     border-bottom: 1px solid var(--border-light);
 }
 
+.sidebar-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
 .sidebar-header h3 {
     display: flex;
     align-items: center;
@@ -549,10 +587,58 @@ input:checked+.slider:before {
     border-radius: var(--radius-sm);
     transition: all var(--transition-fast);
     cursor: pointer;
-    white-space: pre-wrap;
+    white-space: nowrap;
     word-break: break-all;
     background: rgba(255, 255, 255, 0.02);
     border-left: 3px solid transparent;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+}
+
+.log-line::after {
+    content: " ...";
+    opacity: 0.5;
+    font-style: italic;
+}
+
+.log-line.expanded::after {
+    display: none;
+}
+
+.log-line:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.log-line.expanded {
+    background: rgba(37, 99, 235, 0.1);
+    border-left-color: var(--primary-color);
+    white-space: pre-wrap;
+    overflow: visible;
+    text-overflow: unset;
+    animation: expandLine var(--transition-normal) ease-out;
+}
+
+@keyframes expandLine {
+    from {
+        max-height: 1.5em;
+    }
+    to {
+        max-height: 1000px;
+    }
+}
+
+.log-line.auto-collapse {
+    animation: collapseCountdown 30s linear;
+}
+
+@keyframes collapseCountdown {
+    0% {
+        box-shadow: inset 0 -3px 0 var(--primary-color);
+    }
+    100% {
+        box-shadow: inset 0 -3px 0 transparent;
+    }
 }
 
 .log-line:hover {
@@ -722,6 +808,10 @@ input:checked+.slider:before {
     .sidebar {
         width: 250px;
     }
+    
+    .sidebar.collapsed {
+        width: 50px;
+    }
 
     .nav-content {
         padding: var(--spacing-md);
@@ -754,6 +844,20 @@ input:checked+.slider:before {
         border-right: none;
         border-bottom: 1px solid var(--border-light);
     }
+    
+    .sidebar.collapsed {
+        height: 60px;
+        width: 100%;
+    }
+    
+    .sidebar.collapsed .sidebar-header {
+        justify-content: flex-start;
+        padding: var(--spacing-md);
+    }
+    
+    .sidebar.collapsed .sidebar-controls {
+        flex-direction: row;
+    }
 
     .nav-info {
         flex-direction: column;