обновил дизайн, добавил дашборд

frontend/admin/js/dropdown.js

@@ -99,6 +99,35 @@ export class CustomSelect {
         this.menu.innerHTML = '';
         const options = Array.from(this.originalSelect.options);
         
+        // Show search input if more than 6 options exist
+        if (options.length > 6) {
+            const searchLi = document.createElement('li');
+            searchLi.className = 'custom-select-search-container';
+            const searchInput = document.createElement('input');
+            searchInput.type = 'text';
+            searchInput.placeholder = 'Поиск...';
+            searchInput.className = 'custom-select-search-input';
+            searchInput.addEventListener('click', (e) => e.stopPropagation());
+            searchInput.addEventListener('input', (e) => {
+                const query = e.target.value.toLowerCase();
+                const items = this.menu.querySelectorAll('.custom-select-item');
+                items.forEach(item => {
+                    if (item.classList.contains('placeholder-item')) return;
+                    const text = item.textContent.toLowerCase();
+                    if (text.includes(query)) {
+                        item.style.display = '';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+            });
+            searchLi.appendChild(searchInput);
+            this.menu.appendChild(searchLi);
+            this.searchInput = searchInput;
+        } else {
+            this.searchInput = null;
+        }
+
         if (options.length === 0) {
             const li = document.createElement('li');
             li.className = 'custom-select-item disabled';
@@ -171,7 +200,22 @@ export class CustomSelect {
 
         if (!isOpen) {
             this.layerParent?.classList.add('select-layer-active');
+            this.originalSelect.closest('.form-group, .form-field')?.classList.add('select-layer-active');
             this.wrapper.classList.add('open');
+            
+            if (this.searchInput) {
+                this.searchInput.value = '';
+                const items = this.menu.querySelectorAll('.custom-select-item');
+                items.forEach(item => {
+                    if (!item.classList.contains('placeholder-item')) {
+                        item.style.display = '';
+                    }
+                });
+                setTimeout(() => {
+                    this.searchInput.focus();
+                }, 50);
+            }
+
             // Scroll selected item into view
             const selectedItem = this.menu.querySelector('.selected');
             if (selectedItem) {
@@ -194,6 +238,7 @@ export class CustomSelect {
     close() {
         this.wrapper.classList.remove('open');
         this.layerParent?.classList.remove('select-layer-active');
+        this.originalSelect.closest('.form-group, .form-field')?.classList.remove('select-layer-active');
     }
 
     handleItemClick(e, index) {