domma-cms 0.6.16 → 0.6.21

package/plugins/contacts/admin/views/contacts.js

@@ -0,0 +1,710 @@
+/**
+ * Contacts plugin admin view.
+ *
+ * @module contacts/admin/views/contacts
+ */
+
+const BASE = '/api/plugins/contacts';
+
+async function api(url, method = 'GET', body) {
+    const opts = {method, headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}};
+    if (body !== undefined) {
+        opts.headers['Content-Type'] = 'application/json';
+        opts.body = JSON.stringify(body);
+    }
+    const res = await fetch(url, opts);
+    if (!res.ok) {
+        const err = await res.json().catch(() => ({error: res.statusText}));
+        throw new Error(err.error || res.statusText);
+    }
+    const text = await res.text();
+    return text ? JSON.parse(text) : {};
+}
+
+export const contactsView = {
+    templateUrl: '/plugins/contacts/admin/templates/contacts.html',
+
+    /**
+     * Mount the contacts view.
+     *
+     * @param {object} $container - Domma-wrapped container element
+     * @returns {Promise<void>}
+     */
+    async onMount($container) {
+        // ---------------------------------------------------------------
+        // State
+        // ---------------------------------------------------------------
+        let allContacts = [];
+        let groups = [];
+        let currentEditId = null;
+        let selectedGroups = [];
+        let showFavsOnly = false;
+        let currentGroupFilter = '';
+        let contactsTable = null;
+        let selectedIds = new Set();
+
+        // ---------------------------------------------------------------
+        // Helpers
+        // ---------------------------------------------------------------
+
+        /**
+         * Escape HTML special characters to prevent XSS.
+         *
+         * @param {string} str
+         * @returns {string}
+         */
+        function esc(str) {
+            return String(str ?? '')
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;');
+        }
+
+        // ---------------------------------------------------------------
+        // Data loading
+        // ---------------------------------------------------------------
+
+        async function loadGroups() {
+            try {
+                groups = await api(`${BASE}/groups`);
+            } catch {
+                groups = [];
+            }
+        }
+
+        async function loadContacts() {
+            try {
+                const params = new URLSearchParams();
+                if (currentGroupFilter) params.set('group', currentGroupFilter);
+                if (showFavsOnly) params.set('favourites', 'true');
+                const qs = params.toString();
+                allContacts = await api(`${BASE}/contacts${qs ? '?' + qs : ''}`);
+            } catch {
+                allContacts = [];
+            }
+        }
+
+        // ---------------------------------------------------------------
+        // Stats
+        // ---------------------------------------------------------------
+
+        function updateStats() {
+            const totalEl = $container.find('#stat-total').get(0);
+            const groupsEl = $container.find('#stat-groups').get(0);
+            const favsEl = $container.find('#stat-favs').get(0);
+            if (totalEl) totalEl.textContent = allContacts.length;
+            if (groupsEl) groupsEl.textContent = groups.length;
+            if (favsEl) favsEl.textContent = allContacts.filter((c) => c.favourite).length;
+        }
+
+        // ---------------------------------------------------------------
+        // Group filter dropdown (select)
+        // ---------------------------------------------------------------
+
+        function populateGroupFilter() {
+            const sel = $container.find('#group-filter').get(0);
+            if (!sel) return;
+            const current = sel.value;
+            while (sel.options.length > 1) sel.remove(1);
+            groups.forEach((g) => {
+                const opt = document.createElement('option');
+                opt.value = g;
+                opt.textContent = g;
+                if (g === current) opt.selected = true;
+                sel.appendChild(opt);
+            });
+        }
+
+        // ---------------------------------------------------------------
+        // Table
+        // ---------------------------------------------------------------
+
+        function buildTable() {
+            const tableEl = $container.find('#contacts-table').get(0);
+            const emptyEl = $container.find('#contacts-empty').get(0);
+
+            if (!allContacts.length) {
+                if (tableEl) tableEl.style.display = 'none';
+                if (emptyEl) emptyEl.style.display = 'block';
+                return;
+            }
+
+            if (emptyEl) emptyEl.style.display = 'none';
+            if (tableEl) tableEl.style.display = '';
+
+            if (contactsTable) {
+                contactsTable.setData(allContacts);
+                return;
+            }
+
+            // Render functions return HTML strings — values are escaped via esc()
+            // T.create passes these through Domma's DOMPurify sanitiser
+            contactsTable = T.create('#contacts-table', {
+                data: allContacts,
+                selectable: true,
+                columns: [
+                    {
+                        key: 'name',
+                        title: 'Name',
+                        sortable: true,
+                        render: (v) => `<strong>${esc(v)}</strong>`
+                    },
+                    {
+                        key: 'email',
+                        title: 'Email',
+                        sortable: true,
+                        render: (v) => v ? `<a href="mailto:${esc(v)}">${esc(v)}</a>` : '\u2014'
+                    },
+                    {
+                        key: 'phone',
+                        title: 'Phone',
+                        sortable: false,
+                        render: (v) => esc(v) || '\u2014'
+                    },
+                    {
+                        key: 'groups',
+                        title: 'Groups',
+                        sortable: false,
+                        render: (v) => {
+                            if (!Array.isArray(v) || v.length === 0) return '\u2014';
+                            return v.map((g) => `<span class="badge badge-primary" style="margin-right:2px;">${esc(g)}</span>`).join('');
+                        }
+                    },
+                    {
+                        key: 'favourite',
+                        title: '',
+                        sortable: false,
+                        render: (v) => v
+                            ? '<span data-icon="star" style="color:var(--dm-warning);"></span>'
+                            : '<span data-icon="star" style="opacity:0.2;"></span>'
+                    },
+                    {
+                        key: 'id',
+                        title: 'Actions',
+                        sortable: false,
+                        render: (id) =>
+                            `<button class="btn btn-sm btn-outline contact-edit-btn" data-id="${esc(id)}" style="margin-right:4px;">` +
+                            `<span data-icon="edit" data-icon-size="14"></span> Edit</button>` +
+                            `<button class="btn btn-sm btn-danger contact-delete-btn" data-id="${esc(id)}">` +
+                            `<span data-icon="trash" data-icon-size="14"></span> Delete</button>`
+                    }
+                ],
+                emptyMessage: 'No contacts match your filters.'
+            });
+
+            // Selection change handler
+            if (contactsTable && typeof contactsTable.on === 'function') {
+                contactsTable.on('selectionChange', (rows) => {
+                    selectedIds = new Set(rows.map((r) => r.id));
+                    const bulkEl = $container.find('#bulk-actions').get(0);
+                    const countEl = $container.find('#selected-count').get(0);
+                    if (bulkEl) bulkEl.style.display = selectedIds.size > 0 ? 'inline-flex' : 'none';
+                    if (countEl) countEl.textContent = selectedIds.size;
+                });
+            }
+
+            // Event delegation on table container — avoids namespaced delegation issues
+            const tableContainer = $container.find('#contacts-table').get(0);
+            if (tableContainer) {
+                tableContainer.addEventListener('click', async (e) => {
+                    const editBtn = e.target.closest('.contact-edit-btn');
+                    const deleteBtn = e.target.closest('.contact-delete-btn');
+
+                    if (editBtn) {
+                        openEditor(editBtn.dataset.id);
+                    }
+
+                    if (deleteBtn) {
+                        const id = deleteBtn.dataset.id;
+                        const contact = allContacts.find((c) => c.id === id);
+                        if (!contact) return;
+                        const ok = await E.confirm(`Delete "${contact.name}"?`);
+                        if (!ok) return;
+                        try {
+                            await api(`${BASE}/contacts/${id}`, 'DELETE');
+                            E.toast('Contact deleted.', { type: 'success' });
+                            await refresh();
+                        } catch {
+                            E.toast('Failed to delete contact.', { type: 'error' });
+                        }
+                    }
+                });
+            }
+
+            Domma.icons.scan();
+        }
+
+        // ---------------------------------------------------------------
+        // Editor
+        // ---------------------------------------------------------------
+
+        function openEditor(id) {
+            currentEditId = id ?? null;
+            selectedGroups = [];
+
+            const editorEl = $container.find('#contact-editor').get(0);
+            if (!editorEl) return;
+
+            const titleEl = $container.find('#editor-title').get(0);
+            const saveLbl = $container.find('#editor-save-label').get(0);
+            const deleteBtn = $container.find('#editor-delete-btn').get(0);
+
+            if (id) {
+                const c = allContacts.find((x) => x.id === id);
+                if (!c) return;
+                if (titleEl) titleEl.textContent = 'Edit Contact';
+                if (saveLbl) saveLbl.textContent = 'Update Contact';
+                if (deleteBtn) deleteBtn.style.display = 'inline-flex';
+
+                const nameEl = $container.find('#contact-name').get(0);
+                const emailEl = $container.find('#contact-email').get(0);
+                const phoneEl = $container.find('#contact-phone').get(0);
+                const notesEl = $container.find('#contact-notes').get(0);
+                const favEl = $container.find('#contact-favourite').get(0);
+
+                if (nameEl) nameEl.value = c.name ?? '';
+                if (emailEl) emailEl.value = c.email ?? '';
+                if (phoneEl) phoneEl.value = c.phone ?? '';
+                if (notesEl) notesEl.value = c.notes ?? '';
+                if (favEl) favEl.checked = c.favourite === true;
+                selectedGroups = Array.isArray(c.groups) ? [...c.groups] : [];
+            } else {
+                if (titleEl) titleEl.textContent = 'Add Contact';
+                if (saveLbl) saveLbl.textContent = 'Save Contact';
+                if (deleteBtn) deleteBtn.style.display = 'none';
+
+                const fields = ['#contact-name', '#contact-email', '#contact-phone'];
+                fields.forEach((sel) => {
+                    const el = $container.find(sel).get(0);
+                    if (el) el.value = '';
+                });
+                const notesEl = $container.find('#contact-notes').get(0);
+                const favEl = $container.find('#contact-favourite').get(0);
+                if (notesEl) notesEl.value = '';
+                if (favEl) favEl.checked = false;
+                selectedGroups = [];
+            }
+
+            updateGroupsDisplay();
+            editorEl.style.display = '';
+            editorEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+
+        function closeEditor() {
+            const editorEl = $container.find('#contact-editor').get(0);
+            if (editorEl) editorEl.style.display = 'none';
+            currentEditId = null;
+            selectedGroups = [];
+        }
+
+        /**
+         * Render selected group tags inside the groups display area using DOM APIs.
+         */
+        function updateGroupsDisplay() {
+            const display = $container.find('#contact-groups-display').get(0);
+            const placeholder = $container.find('#groups-placeholder').get(0);
+            if (!display) return;
+
+            // Remove existing tag badges
+            Array.from(display.querySelectorAll('.group-tag-badge')).forEach((el) => el.remove());
+
+            if (selectedGroups.length === 0) {
+                if (placeholder) placeholder.style.display = '';
+            } else {
+                if (placeholder) placeholder.style.display = 'none';
+                selectedGroups.forEach((g) => {
+                    const span = document.createElement('span');
+                    span.className = 'badge badge-primary group-tag-badge';
+                    span.style.marginRight = '2px';
+                    span.textContent = g; // textContent — safe, no XSS
+                    display.appendChild(span);
+                });
+            }
+        }
+
+        async function saveContact() {
+            const nameEl = $container.find('#contact-name').get(0);
+            const name = (nameEl?.value ?? '').trim();
+            if (!name) {
+                E.toast('Name is required.', { type: 'error' });
+                return;
+            }
+
+            const body = {
+                name,
+                email: ($container.find('#contact-email').get(0)?.value ?? '').trim(),
+                phone: ($container.find('#contact-phone').get(0)?.value ?? '').trim(),
+                notes: ($container.find('#contact-notes').get(0)?.value ?? '').trim(),
+                favourite: $container.find('#contact-favourite').get(0)?.checked === true,
+                groups: selectedGroups
+            };
+
+            try {
+                if (currentEditId) {
+                    await api(`${BASE}/contacts/${currentEditId}`, 'PUT', body);
+                    E.toast('Contact updated.', { type: 'success' });
+                } else {
+                    await api(`${BASE}/contacts`, 'POST', body);
+                    E.toast('Contact created.', { type: 'success' });
+                }
+                closeEditor();
+                await refresh();
+            } catch {
+                E.toast('Failed to save contact.', { type: 'error' });
+            }
+        }
+
+        // ---------------------------------------------------------------
+        // Groups panel
+        // ---------------------------------------------------------------
+
+        /**
+         * Render the groups management list using DOM APIs (no innerHTML for interactive elements).
+         */
+        function renderGroupsList() {
+            const listEl = $container.find('#groups-list').get(0);
+            if (!listEl) return;
+
+            // Clear existing content safely
+            while (listEl.firstChild) listEl.removeChild(listEl.firstChild);
+
+            if (groups.length === 0) {
+                const p = document.createElement('p');
+                p.className = 'text-muted';
+                p.textContent = 'No groups yet. Add one above.';
+                listEl.appendChild(p);
+                return;
+            }
+
+            groups.forEach((group) => {
+                const row = document.createElement('div');
+                row.style.cssText = 'display:flex;justify-content:space-between;align-items:center;' +
+                    'padding:0.6rem 0.75rem;border:1px solid var(--dm-border);' +
+                    'border-radius:var(--dm-radius);margin-bottom:0.4rem;';
+
+                const label = document.createElement('span');
+                label.className = 'badge badge-primary';
+                label.textContent = group; // textContent — safe
+                row.appendChild(label);
+
+                const actions = document.createElement('div');
+                actions.style.display = 'flex';
+                actions.style.gap = '0.4rem';
+
+                const editBtn = document.createElement('button');
+                editBtn.className = 'btn btn-sm btn-outline';
+                editBtn.textContent = ' Edit';
+                const editIcon = document.createElement('span');
+                editIcon.setAttribute('data-icon', 'edit');
+                editIcon.setAttribute('data-icon-size', '14');
+                editBtn.prepend(editIcon);
+                editBtn.addEventListener('click', async () => {
+                    const newName = await E.prompt(`Rename group "${group}":`, { inputValue: group });
+                    if (!newName || newName.trim() === group) return;
+                    try {
+                        await api(`${BASE}/groups/${encodeURIComponent(group)}`, 'PUT', {newName: newName.trim()});
+                        E.toast('Group renamed.', { type: 'success' });
+                        await refresh();
+                    } catch (err) {
+                        E.toast(err?.message ?? 'Failed to rename group.', { type: 'error' });
+                    }
+                });
+
+                const delBtn = document.createElement('button');
+                delBtn.className = 'btn btn-sm btn-danger';
+                delBtn.textContent = ' Delete';
+                const delIcon = document.createElement('span');
+                delIcon.setAttribute('data-icon', 'trash');
+                delIcon.setAttribute('data-icon-size', '14');
+                delBtn.prepend(delIcon);
+                delBtn.addEventListener('click', async () => {
+                    const ok = await E.confirm(`Delete group "${group}"? It will be removed from all contacts.`);
+                    if (!ok) return;
+                    try {
+                        await api(`${BASE}/groups/${encodeURIComponent(group)}`, 'DELETE');
+                        E.toast('Group deleted.', { type: 'success' });
+                        await refresh();
+                    } catch {
+                        E.toast('Failed to delete group.', { type: 'error' });
+                    }
+                });
+
+                actions.appendChild(editBtn);
+                actions.appendChild(delBtn);
+                row.appendChild(actions);
+                listEl.appendChild(row);
+            });
+
+            Domma.icons.scan();
+        }
+
+        // ---------------------------------------------------------------
+        // Groups dropdown inside the editor (inline custom dropdown)
+        // ---------------------------------------------------------------
+
+        function renderGroupsDropdown() {
+            const itemsEl = $container.find('#groups-dropdown-items').get(0);
+            if (!itemsEl) return;
+            while (itemsEl.firstChild) itemsEl.removeChild(itemsEl.firstChild);
+            groups.forEach((g) => {
+                const item = document.createElement('div');
+                item.style.cssText = 'padding:0.4rem 0.6rem;cursor:pointer;border-radius:var(--dm-radius);';
+                if (selectedGroups.includes(g)) {
+                    item.style.background = 'var(--dm-primary-light, rgba(99,102,241,0.1))';
+                    item.style.fontWeight = '600';
+                }
+                item.textContent = g; // textContent — safe
+                item.addEventListener('click', () => {
+                    const idx = selectedGroups.indexOf(g);
+                    if (idx === -1) {
+                        selectedGroups.push(g);
+                    } else {
+                        selectedGroups.splice(idx, 1);
+                    }
+                    updateGroupsDisplay();
+                    renderGroupsDropdown();
+                });
+                itemsEl.appendChild(item);
+            });
+        }
+
+        // ---------------------------------------------------------------
+        // Client-side search filter
+        // ---------------------------------------------------------------
+
+        function applySearch(query) {
+            if (!contactsTable) return;
+            if (!query) {
+                contactsTable.setData(allContacts);
+                return;
+            }
+            const q = query.toLowerCase();
+            const filtered = allContacts.filter((c) =>
+                (c.name && c.name.toLowerCase().includes(q)) ||
+                (c.email && c.email.toLowerCase().includes(q)) ||
+                (c.phone && c.phone.includes(q))
+            );
+            contactsTable.setData(filtered);
+        }
+
+        // ---------------------------------------------------------------
+        // Import / Export
+        // ---------------------------------------------------------------
+
+        async function exportContacts() {
+            try {
+                const data = await api(`${BASE}/export`);
+                const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'contacts.json';
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+                E.toast('Contacts exported.', { type: 'success' });
+            } catch {
+                E.toast('Export failed.', { type: 'error' });
+            }
+        }
+
+        async function importContacts(file) {
+            try {
+                const text = await file.text();
+                const parsed = JSON.parse(text);
+                const contacts = Array.isArray(parsed) ? parsed : parsed.contacts;
+                if (!Array.isArray(contacts)) throw new Error('Invalid format');
+                const result = await api(`${BASE}/import`, 'POST', {contacts});
+                E.toast(`Imported ${result.imported} contact(s).`, { type: 'success' });
+                await refresh();
+            } catch {
+                E.toast('Import failed. Ensure the file is valid JSON.', { type: 'error' });
+            }
+        }
+
+        // ---------------------------------------------------------------
+        // Bulk delete
+        // ---------------------------------------------------------------
+
+        async function bulkDelete() {
+            if (selectedIds.size === 0) return;
+            const ok = await E.confirm(`Delete ${selectedIds.size} selected contact(s)?`);
+            if (!ok) return;
+            try {
+                await api(`${BASE}/contacts/bulk`, 'DELETE', {ids: [...selectedIds]});
+                E.toast(`${selectedIds.size} contact(s) deleted.`, { type: 'success' });
+                selectedIds.clear();
+                await refresh();
+            } catch {
+                E.toast('Bulk delete failed.', { type: 'error' });
+            }
+        }
+
+        // ---------------------------------------------------------------
+        // Full refresh
+        // ---------------------------------------------------------------
+
+        async function refresh() {
+            await Promise.all([loadGroups(), loadContacts()]);
+            updateStats();
+            populateGroupFilter();
+            renderGroupsList();
+            buildTable();
+        }
+
+        // ---------------------------------------------------------------
+        // Wire up events
+        // ---------------------------------------------------------------
+
+        // Add contact button
+        const addBtn = $container.find('#add-contact-btn').get(0);
+        if (addBtn) addBtn.addEventListener('click', () => openEditor(null));
+
+        // Editor save
+        const editorSaveBtn = $container.find('#editor-save-btn').get(0);
+        if (editorSaveBtn) editorSaveBtn.addEventListener('click', saveContact);
+
+        // Editor cancel (two cancel buttons)
+        [$container.find('#editor-cancel-btn').get(0), $container.find('#editor-cancel-btn2').get(0)]
+            .filter(Boolean)
+            .forEach((btn) => btn.addEventListener('click', closeEditor));
+
+        // Editor delete
+        const editorDeleteBtn = $container.find('#editor-delete-btn').get(0);
+        if (editorDeleteBtn) {
+            editorDeleteBtn.addEventListener('click', async () => {
+                if (!currentEditId) return;
+                const contact = allContacts.find((c) => c.id === currentEditId);
+                const ok = await E.confirm(`Delete "${contact?.name ?? 'this contact'}"?`);
+                if (!ok) return;
+                try {
+                    await api(`${BASE}/contacts/${currentEditId}`, 'DELETE');
+                    E.toast('Contact deleted.', { type: 'success' });
+                    closeEditor();
+                    await refresh();
+                } catch {
+                    E.toast('Failed to delete contact.', { type: 'error' });
+                }
+            });
+        }
+
+        // Favourites toggle
+        const favToggle = $container.find('#fav-toggle').get(0);
+        if (favToggle) {
+            favToggle.addEventListener('click', async () => {
+                showFavsOnly = !showFavsOnly;
+                favToggle.classList.toggle('btn-warning', showFavsOnly);
+                favToggle.classList.toggle('btn-outline', !showFavsOnly);
+                await loadContacts();
+                updateStats();
+                buildTable();
+            });
+        }
+
+        // Group filter
+        const groupFilterSel = $container.find('#group-filter').get(0);
+        if (groupFilterSel) {
+            groupFilterSel.addEventListener('change', async () => {
+                currentGroupFilter = groupFilterSel.value;
+                await loadContacts();
+                updateStats();
+                buildTable();
+            });
+        }
+
+        // Search
+        const searchInput = $container.find('#contacts-search').get(0);
+        if (searchInput) {
+            let searchTimer = null;
+            searchInput.addEventListener('input', () => {
+                clearTimeout(searchTimer);
+                searchTimer = setTimeout(() => applySearch(searchInput.value.trim()), 250);
+            });
+        }
+
+        // Export
+        const exportBtn = $container.find('#export-btn').get(0);
+        if (exportBtn) exportBtn.addEventListener('click', exportContacts);
+
+        // Import
+        const importBtn = $container.find('#import-btn').get(0);
+        const importFile = $container.find('#import-file').get(0);
+        if (importBtn && importFile) {
+            importBtn.addEventListener('click', () => importFile.click());
+            importFile.addEventListener('change', async () => {
+                const file = importFile.files?.[0];
+                if (file) {
+                    await importContacts(file);
+                    importFile.value = '';
+                }
+            });
+        }
+
+        // Bulk delete
+        const bulkDeleteBtn = $container.find('#bulk-delete-btn').get(0);
+        if (bulkDeleteBtn) bulkDeleteBtn.addEventListener('click', bulkDelete);
+
+        // Add group
+        const addGroupBtn = $container.find('#add-group-btn').get(0);
+        const newGroupInput = $container.find('#new-group-input').get(0);
+        if (addGroupBtn) {
+            addGroupBtn.addEventListener('click', async () => {
+                const name = newGroupInput?.value?.trim();
+                if (!name) return;
+                try {
+                    await api(`${BASE}/groups`, 'POST', {name});
+                    if (newGroupInput) newGroupInput.value = '';
+                    E.toast('Group added.', { type: 'success' });
+                    await refresh();
+                } catch (err) {
+                    E.toast(err?.message ?? 'Failed to add group.', { type: 'error' });
+                }
+            });
+        }
+
+        if (newGroupInput) {
+            newGroupInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') addGroupBtn?.click();
+            });
+        }
+
+        // Groups panel collapse toggle
+        const panelToggle = $container.find('#groups-panel-toggle').get(0);
+        const panelBody = $container.find('#groups-panel-body').get(0);
+        const chevron = $container.find('#groups-chevron').get(0);
+        if (panelToggle && panelBody) {
+            panelToggle.addEventListener('click', () => {
+                const open = panelBody.style.display !== 'none';
+                panelBody.style.display = open ? 'none' : '';
+                if (chevron) chevron.setAttribute('data-icon', open ? 'chevron-down' : 'chevron-up');
+                Domma.icons.scan();
+            });
+        }
+
+        // Groups picker toggle inside editor
+        const groupsDisplay = $container.find('#contact-groups-display').get(0);
+        const groupsDropdownList = $container.find('#groups-dropdown-list').get(0);
+        if (groupsDisplay && groupsDropdownList) {
+            groupsDisplay.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const open = groupsDropdownList.style.display !== 'none';
+                if (!open) renderGroupsDropdown();
+                groupsDropdownList.style.display = open ? 'none' : '';
+            });
+
+            document.addEventListener('click', (e) => {
+                if (!groupsDisplay.contains(e.target) && !groupsDropdownList.contains(e.target)) {
+                    groupsDropdownList.style.display = 'none';
+                }
+            });
+        }
+
+        // ---------------------------------------------------------------
+        // Initial load
+        // ---------------------------------------------------------------
+        await refresh();
+        Domma.icons.scan();
+    }
+};