diff --git a/admin-dashboard.html b/admin-dashboard.html
index 16d326c..67d7c02 100644
--- a/admin-dashboard.html
+++ b/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