icon fix hopefully

admin-dashboard.html

@@ -194,6 +194,66 @@
             border-color: var(--secondary-color);
             transform: translateY(-2px);
         }
+        /* Icon Picker Styles */
+        #iconDropdown {
+            position: absolute;
+            width: 100%;
+            background: white;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.375rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            z-index: 50;
+            margin-top: 0.25rem;
+        }
+        
+        #iconSearch {
+            width: 100%;
+            padding: 0.5rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.25rem;
+            font-size: 0.875rem;
+            margin-bottom: 0.5rem;
+        }
+        
+        #iconSearch:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+        }
+        
+        #iconList {
+            display: grid;
+            grid-template-columns: repeat(6, minmax(0, 1fr));
+            gap: 0.5rem;
+            padding: 0.5rem;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        
+        .icon-option {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.5rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.25rem;
+            font-size: 1.25rem;
+            color: #4b5563;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        
+        .icon-option:hover {
+            background-color: #f3f4f6;
+            border-color: #d1d5db;
+            color: #1f2937;
+            transform: scale(1.1);
+        }
+        
+        .icon-option i {
+            pointer-events: none;
+        }
+        
         .banner-preview {
             margin: 2rem 0;
             padding: 0;
@@ -2048,6 +2108,23 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 // Reset form when modal is closed
+// Initialize icon picker when the modal is shown
+document.getElementById('appModal').addEventListener('show.bs.modal', function () {
+    initIconPicker();
+    
+    // Set focus to search input when dropdown is shown
+    const iconInput = document.getElementById('appIcon');
+    if (iconInput) {
+        iconInput.addEventListener('focus', function() {
+            const dropdown = document.getElementById('iconDropdown');
+            if (dropdown) dropdown.classList.remove('hidden');
+            const search = document.getElementById('iconSearch');
+            if (search) search.focus();
+        });
+    }
+});
+
+// Handle modal hidden event
 document.getElementById('appModal').addEventListener('hidden.bs.modal', function () {
     const form = document.getElementById('appForm');
     if (form) form.reset();
@@ -2062,6 +2139,10 @@ document.getElementById('appModal').addEventListener('hidden.bs.modal', function
     if (fileInput) {
         fileInput.value = '';
     }
+    
+    // Hide dropdown if it's still visible
+    const dropdown = document.getElementById('iconDropdown');
+    if (dropdown) dropdown.classList.add('hidden');
 });
 
 // Icon picker functionality