feat: реализовать полную минимизацию секций до полоски

- Кнопка 'свернуть все' теперь минимизирует секции до минимальной высоты
- Добавлено состояние 'minimized' для полного сворачивания
- Секции становятся тонкими полосками с заголовками
- Максимальное освобождение места для списка контейнеров
- Сохранение состояния минимизации в localStorage
- Улучшенная логика переключения между состояниями
- Оптимизированный CSS для минималистичного отображения

Автор: Сергей Антропов
Сайт: https://devops.org.ru

templates/index.html

@@ -174,6 +174,26 @@ a{color:var(--link)}
   opacity: 0;
 }
 
+/* Полностью свернутое состояние - только заголовки */
+.control-group.minimized {
+  margin-bottom: 4px;
+}
+
+.control-group.minimized .control-header {
+  padding: 8px 12px;
+  font-size: 10px;
+}
+
+.control-group.minimized .control-header label {
+  font-size: 10px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.control-group.minimized .control-content {
+  display: none;
+}
+
 .control-group label {
   display: block;
   font-size: 11px;
@@ -1382,11 +1402,21 @@ document.addEventListener('DOMContentLoaded', () => {
       if (e.target.closest('.collapse-btn')) return; // Не сворачиваем при клике на кнопку
       
       const group = header.closest('.control-group');
-      group.classList.toggle('collapsed');
       
-      // Сохраняем состояние в localStorage
+      // Если секция минимизирована, сначала разворачиваем
-      const section = group.dataset.section;
+      if (group.classList.contains('minimized')) {
-      localStorage.setItem(`lb_collapsed_${section}`, group.classList.contains('collapsed'));
+        group.classList.remove('minimized');
+        group.classList.add('collapsed');
+        const section = group.dataset.section;
+        localStorage.setItem(`lb_minimized_${section}`, 'false');
+        localStorage.setItem(`lb_collapsed_${section}`, 'true');
+      } else {
+        // Обычное сворачивание/разворачивание
+        group.classList.toggle('collapsed');
+        const section = group.dataset.section;
+        localStorage.setItem(`lb_collapsed_${section}`, group.classList.contains('collapsed'));
+        localStorage.setItem(`lb_minimized_${section}`, 'false');
+      }
     });
   });
   
@@ -1395,49 +1425,69 @@ document.addEventListener('DOMContentLoaded', () => {
     btn.addEventListener('click', (e) => {
       e.stopPropagation();
       const group = btn.closest('.control-group');
-      group.classList.toggle('collapsed');
       
-      // Сохраняем состояние в localStorage
+      // Если секция минимизирована, сначала разворачиваем
-      const section = group.dataset.section;
+      if (group.classList.contains('minimized')) {
-      localStorage.setItem(`lb_collapsed_${section}`, group.classList.contains('collapsed'));
+        group.classList.remove('minimized');
+        group.classList.add('collapsed');
+        const section = group.dataset.section;
+        localStorage.setItem(`lb_minimized_${section}`, 'false');
+        localStorage.setItem(`lb_collapsed_${section}`, 'true');
+      } else {
+        // Обычное сворачивание/разворачивание
+        group.classList.toggle('collapsed');
+        const section = group.dataset.section;
+        localStorage.setItem(`lb_collapsed_${section}`, group.classList.contains('collapsed'));
+        localStorage.setItem(`lb_minimized_${section}`, 'false');
+      }
     });
   });
   
   // Восстанавливаем состояние секций из localStorage или сворачиваем по умолчанию
   document.querySelectorAll('.control-group.collapsible').forEach(group => {
     const section = group.dataset.section;
-    const savedState = localStorage.getItem(`lb_collapsed_${section}`);
+    const savedCollapsed = localStorage.getItem(`lb_collapsed_${section}`);
+    const savedMinimized = localStorage.getItem(`lb_minimized_${section}`);
     
     // Если состояние не сохранено, сворачиваем по умолчанию
-    if (savedState === null) {
+    if (savedCollapsed === null && savedMinimized === null) {
       group.classList.add('collapsed');
       localStorage.setItem(`lb_collapsed_${section}`, 'true');
-    } else if (savedState === 'true') {
+      localStorage.setItem(`lb_minimized_${section}`, 'false');
+    } else if (savedMinimized === 'true') {
+      group.classList.add('minimized');
+      group.classList.remove('collapsed');
+    } else if (savedCollapsed === 'true') {
       group.classList.add('collapsed');
+      group.classList.remove('minimized');
     }
   });
   
   // Обработчик для кнопки минимизации всех секций
   if (els.minimizeAllBtn) {
     els.minimizeAllBtn.addEventListener('click', () => {
-      const allCollapsed = document.querySelectorAll('.control-group.collapsible').length === 
+      const allMinimized = document.querySelectorAll('.control-group.collapsible').length === 
-                          document.querySelectorAll('.control-group.collapsible.collapsed').length;
+                          document.querySelectorAll('.control-group.collapsible.minimized').length;
       
-      // Если все секции свернуты, разворачиваем их
+      // Если все секции минимизированы, разворачиваем их
-      if (allCollapsed) {
+      if (allMinimized) {
         document.querySelectorAll('.control-group.collapsible').forEach(group => {
+          group.classList.remove('minimized');
+          group.classList.add('collapsed'); // Возвращаем к обычному свернутому состоянию
+          const section = group.dataset.section;
+          localStorage.setItem(`lb_collapsed_${section}`, 'true');
+          localStorage.setItem(`lb_minimized_${section}`, 'false');
+        });
+        els.minimizeAllBtn.innerHTML = '<i class="fas fa-compress-alt"></i>';
+        els.minimizeAllBtn.title = 'Минимизировать все секции';
+      } else {
+        // Иначе минимизируем все секции до полоски
+        document.querySelectorAll('.control-group.collapsible').forEach(group => {
+          group.classList.add('minimized');
           group.classList.remove('collapsed');
           const section = group.dataset.section;
           localStorage.setItem(`lb_collapsed_${section}`, 'false');
-        });
+          localStorage.setItem(`lb_minimized_${section}`, 'true');
-        els.minimizeAllBtn.innerHTML = '<i class="fas fa-compress-alt"></i>';
-        els.minimizeAllBtn.title = 'Свернуть все секции';
-      } else {
-        // Иначе сворачиваем все секции
-        document.querySelectorAll('.control-group.collapsible').forEach(group => {
-          group.classList.add('collapsed');
-          const section = group.dataset.section;
-          localStorage.setItem(`lb_collapsed_${section}`, 'true');
         });
         els.minimizeAllBtn.innerHTML = '<i class="fas fa-expand-alt"></i>';
         els.minimizeAllBtn.title = 'Развернуть все секции';