domma-cms 0.55.1 → 0.69.3

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

@@ -1,710 +0,0 @@
-/**
- * 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>` : '-'
-                    },
-                    {
-                        key: 'phone',
-                        title: 'Phone',
-                        sortable: false,
-                        render: (v) => esc(v) || '-'
-                    },
-                    {
-                        key: 'groups',
-                        title: 'Groups',
-                        sortable: false,
-                        render: (v) => {
-                            if (!Array.isArray(v) || v.length === 0) return '-';
-                            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();
-    }
-};