klappbare Räume 3

apps/ui/templates/dashboard.html

@@ -58,6 +58,9 @@
             transition: all 0.2s;
             white-space: nowrap;
             min-height: 44px;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
         }
         
         .collapse-all-btn:hover {
@@ -70,6 +73,16 @@
             transform: translateY(0);
         }
         
+        .collapse-all-icon {
+            font-size: 1rem;
+            transition: transform 0.3s;
+            line-height: 1;
+        }
+        
+        .collapse-all-icon.collapsed {
+            transform: rotate(-90deg);
+        }
+        
         .status {
             display: inline-block;
             padding: 0.25rem 0.75rem;
@@ -473,6 +486,7 @@
                 <p>Realtime Status: <span class="status disconnected" id="connection-status">Verbinde...</span></p>
             </div>
             <button class="collapse-all-btn" onclick="toggleAllRooms()">
+                <span class="collapse-all-icon" id="collapse-all-icon">▼</span>
                 <span id="collapse-all-text">Alle einklappen</span>
             </button>
         </header>
@@ -634,6 +648,7 @@
             const allContents = document.querySelectorAll('.room-content');
             const allToggles = document.querySelectorAll('.room-toggle');
             const buttonText = document.getElementById('collapse-all-text');
+            const buttonIcon = document.getElementById('collapse-all-icon');
             
             // Check if any room is expanded
             const anyExpanded = Array.from(allContents).some(content => !content.classList.contains('collapsed'));
@@ -643,11 +658,13 @@
                 allContents.forEach(content => content.classList.add('collapsed'));
                 allToggles.forEach(toggle => toggle.classList.add('collapsed'));
                 buttonText.textContent = 'Alle ausklappen';
+                buttonIcon.classList.add('collapsed');
             } else {
                 // Expand all
                 allContents.forEach(content => content.classList.remove('collapsed'));
                 allToggles.forEach(toggle => toggle.classList.remove('collapsed'));
                 buttonText.textContent = 'Alle einklappen';
+                buttonIcon.classList.remove('collapsed');
             }
         }