diff --git a/admin-dashboard.html b/admin-dashboard.html
index b56feeb..16d326c 100644
--- a/admin-dashboard.html
+++ b/admin-dashboard.html
@@ -2077,8 +2077,8 @@ const iconCategories = {
// Initialize icon picker
function initIconPicker() {
- const iconPicker = document.getElementById('iconPicker');
- if (!iconPicker) return;
+ const iconList = document.getElementById('iconList');
+ if (!iconList) return;
let iconsHtml = '';
@@ -2087,29 +2087,50 @@ function initIconPicker() {
iconsHtml += `
${category}
`;
icons.forEach(icon => {
+ const iconClass = `fa-${icon}`;
iconsHtml += `
-
+ data-icon="${iconClass}"
+ onclick="selectIcon('${iconClass}')">
+
`;
});
}
- iconPicker.innerHTML = iconsHtml;
+ iconList.innerHTML = iconsHtml;
+
+ // Add event listener for icon search
+ const iconSearch = document.getElementById('iconSearch');
+ if (iconSearch) {
+ iconSearch.addEventListener('input', filterIcons);
+ }
}
// Filter icons based on search input
function filterIcons() {
- const searchTerm = document.getElementById('iconSearch').value.toLowerCase();
+ const searchTerm = document.getElementById('iconSearch')?.value.toLowerCase() || '';
const iconOptions = document.querySelectorAll('.icon-option');
iconOptions.forEach(option => {
- const iconName = option.getAttribute('data-icon').toLowerCase();
- if (iconName.includes(searchTerm)) {
+ const iconName = option.getAttribute('data-icon')?.toLowerCase() || '';
+ const categoryHeader = option.previousElementSibling;
+
+ if (searchTerm === '' || iconName.includes(searchTerm)) {
option.style.display = 'flex';
+ // Show the category header if at least one icon in the category is visible
+ if (categoryHeader && categoryHeader.classList.contains('col-span-6')) {
+ categoryHeader.style.display = 'block';
+ }
} else {
option.style.display = 'none';
+ // Hide the category header if no icons in the category are visible
+ if (categoryHeader && categoryHeader.classList.contains('col-span-6')) {
+ const categoryIcons = Array.from(option.parentElement.children)
+ .filter(el => el !== categoryHeader && el.style.display !== 'none');
+ if (categoryIcons.length === 0) {
+ categoryHeader.style.display = 'none';
+ }
+ }
}
});
}
@@ -2152,9 +2173,23 @@ document.addEventListener('DOMContentLoaded', function() {
bannerVisible = document.getElementById('bannerVisibility');
// Initialize icon picker
- const iconPicker = document.getElementById('iconPicker');
- if (iconPicker) {
- initIconPicker();
+ initIconPicker();
+
+ // Toggle icon dropdown when clicking the icon input
+ const iconInput = document.getElementById('appIcon');
+ const iconDropdown = document.getElementById('iconDropdown');
+
+ if (iconInput && iconDropdown) {
+ iconInput.addEventListener('focus', function() {
+ iconDropdown.classList.remove('hidden');
+ });
+
+ // Close dropdown when clicking outside
+ document.addEventListener('click', function(event) {
+ if (!iconInput.contains(event.target) && !iconDropdown.contains(event.target)) {
+ iconDropdown.classList.add('hidden');
+ }
+ });
}
// Update icon preview when editing an existing app