From b76710b79e477357e50b8fb4eed9ff8db10b3bad Mon Sep 17 00:00:00 2001
From: Tomas Dvorak <contact.dvorak@gmail.com>
Date: Fri, 30 May 2025 12:30:01 +0200
Subject: [PATCH] test

---
 admin-dashboard.html | 117 +++++++++++++++++++++++--------------------
 1 file changed, 64 insertions(+), 53 deletions(-)

diff --git a/admin-dashboard.html b/admin-dashboard.html
index 1aa3f06..03b8bbb 100644
--- a/admin-dashboard.html
+++ b/admin-dashboard.html
@@ -1214,29 +1214,21 @@
         </div>
     </div>
 
-    <!-- Icon Picker Modal -->
-    <div id="iconPickerModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
-        <div class="fixed inset-0 flex items-center justify-center p-4">
-            <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
-                <div class="flex flex-col h-full">
-                    <div class="border-b border-gray-200">
-                        <div class="flex justify-between items-center p-6">
-                            <h3 class="text-xl font-semibold text-gray-900">Vyberte ikonu</h3>
-                            <button id="closeIconPicker" class="text-gray-400 hover:text-gray-500 p-2">
-                                <i class="fas fa-times"></i>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="border-b border-gray-200">
-                        <div class="p-6">
-                            <input type="text" id="iconSearch" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Hledat ikony..." autocomplete="off">
-                        </div>
-                    </div>
-                    <div class="flex-1 overflow-y-auto">
-                        <div id="iconList" class="p-6 grid grid-cols-6 gap-4">
-                            <!-- Icons will be populated by JavaScript -->
-                        </div>
-                    </div>
+    <!-- Icon Picker Dropdown -->
+    <div id="iconPickerDropdown" class="hidden absolute z-50 bg-white rounded-lg shadow-lg border border-gray-200 w-full max-w-[400px]">
+        <div class="p-4">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-sm font-medium text-gray-700">Vyberte ikonu</h3>
+                <button id="closeIconPicker" class="text-gray-400 hover:text-gray-500 p-1">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="mb-4">
+                <input type="text" id="iconSearch" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Hledat ikony..." autocomplete="off">
+            </div>
+            <div class="max-h-[400px] overflow-y-auto">
+                <div id="iconList" class="grid grid-cols-4 gap-3">
+                    <!-- Icons will be populated by JavaScript -->
                 </div>
             </div>
         </div>
@@ -2444,23 +2436,30 @@ const iconCategories = {
 // Initialize icon picker with simplified modal
 function initIconPicker() {
     const iconInput = document.getElementById('appIcon');
-    const iconPickerModal = document.getElementById('iconPickerModal');
+    const iconDropdown = document.getElementById('iconPickerDropdown');
     const closeButton = document.getElementById('closeIconPicker');
     const iconSearch = document.getElementById('iconSearch');
     const iconList = document.getElementById('iconList');
     
-    if (!iconInput || !iconPickerModal) return;
+    if (!iconInput || !iconDropdown) return;
     
-    let isModalOpen = false;
+    let isDropdownOpen = false;
     
-    // Improved modal toggle with cleanup
-    const toggleModal = () => {
-        isModalOpen = !isModalOpen;
-        document.body.style.overflow = isModalOpen ? 'hidden' : '';
-        iconPickerModal.style.display = isModalOpen ? 'flex' : 'none';
+    // Position dropdown relative to input
+    function positionDropdown() {
+        const rect = iconInput.getBoundingClientRect();
+        iconDropdown.style.top = `${rect.bottom + window.scrollY}px`;
+        iconDropdown.style.left = `${rect.left + window.scrollX}px`;
+        iconDropdown.style.width = `${rect.width}px`;
+    }
+
+    // Toggle dropdown
+    function toggleDropdown() {
+        isDropdownOpen = !isDropdownOpen;
+        iconDropdown.classList.toggle('hidden', !isDropdownOpen);
         
-        if (isModalOpen) {
-            // Focus search input only after modal is visible
+        if (isDropdownOpen) {
+            positionDropdown();
             requestAnimationFrame(() => {
                 if (iconSearch) {
                     iconSearch.value = '';
@@ -2469,36 +2468,42 @@ function initIconPicker() {
                 }
             });
         }
-    };
+    }
 
-    // Toggle modal on icon input click
+    // Handle click outside
+    function handleClickOutside(e) {
+        if (isDropdownOpen && !iconDropdown.contains(e.target) && e.target !== iconInput) {
+            toggleDropdown();
+        }
+    }
+
+    // Handle icon input click
     iconInput.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
-        toggleModal();
+        toggleDropdown();
     });
 
-    // Close modal handlers
+    // Close dropdown handlers
     if (closeButton) {
-        closeButton.addEventListener('click', toggleModal);
+        closeButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            toggleDropdown();
+        });
     }
 
-    // Close when clicking outside the modal content
-    iconPickerModal.addEventListener('click', (e) => {
-        if (e.target === iconPickerModal && isModalOpen) {
-            toggleModal();
-        }
-    });
+    // Close when clicking outside
+    document.addEventListener('click', handleClickOutside);
 
     // Handle icon selection
     if (iconList) {
         iconList.addEventListener('click', (e) => {
             const iconOption = e.target.closest('.icon-option');
-            if (iconOption && isModalOpen) {
+            if (iconOption && isDropdownOpen) {
                 const iconClass = iconOption.getAttribute('data-icon');
                 if (iconClass) {
                     selectIcon(iconClass);
-                    toggleModal(); // Close modal after selection
+                    toggleDropdown(); // Close dropdown after selection
                 }
             }
         });
@@ -2521,16 +2526,22 @@ function initIconPicker() {
 
     // Close on Escape
     document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && isModalOpen) {
-            toggleModal();
+        if (e.key === 'Escape' && isDropdownOpen) {
+            toggleDropdown();
         }
     });
 
-    // Prevent scrolling when modal is open
-    document.addEventListener('scroll', (e) => {
-        if (isModalOpen) {
-            e.preventDefault();
-            e.stopPropagation();
+    // Update position on scroll
+    window.addEventListener('scroll', () => {
+        if (isDropdownOpen) {
+            positionDropdown();
+        }
+    });
+
+    // Update position on window resize
+    window.addEventListener('resize', () => {
+        if (isDropdownOpen) {
+            positionDropdown();
         }
     });
 }