domma-cms 0.66.0 → 0.69.3

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

@@ -1,943 +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) : {};
-}
-
-/**
- * The billing fields, as a map of contact key to the input that edits it.
- *
- * One list rather than a load/save pair spelled out twice - the way a field
- * gets added to the form and quietly never saved.
- */
-const BILLING_FIELDS = {
-    company:       '#contact-company',
-    jobTitle:      '#contact-job-title',
-    website:       '#contact-website',
-    billingEmail:  '#contact-billing-email',
-    vatNumber:     '#contact-vat-number',
-    companyNumber: '#contact-company-number',
-    reference:     '#contact-reference',
-    paymentTerms:  '#contact-payment-terms',
-    currency:      '#contact-currency',
-    accountName:   '#contact-account-name',
-    bankName:      '#contact-bank-name',
-    sortCode:      '#contact-sort-code',
-    accountNumber: '#contact-account-number',
-    iban:          '#contact-iban',
-    bic:           '#contact-bic'
-};
-
-/**
- * The repeatable lists, and the columns each row is made of.
- *
- * `wide` gets a full-width input; `check` is the single radio-ish flag that
- * says which address an invoice should use.
- */
-const REPEATERS = {
-    addresses: {
-        listId: 'addresses-list',
-        emptyId: 'addresses-empty',
-        columns: [
-            {key: 'label',    placeholder: 'Label (Office, Home…)'},
-            {key: 'line1',    placeholder: 'Address line 1', wide: true},
-            {key: 'line2',    placeholder: 'Address line 2', wide: true},
-            {key: 'city',     placeholder: 'City'},
-            {key: 'region',   placeholder: 'County / Region'},
-            {key: 'postcode', placeholder: 'Postcode'},
-            {key: 'country',  placeholder: 'Country'},
-            {key: 'isBilling', label: 'Use for invoices', check: true}
-        ]
-    },
-    emails: {
-        listId: 'emails-list',
-        emptyId: 'emails-empty',
-        columns: [
-            {key: 'label',   placeholder: 'Label (Accounts, Personal…)'},
-            {key: 'address', placeholder: 'name@example.com', wide: true}
-        ]
-    },
-    phones: {
-        listId: 'phones-list',
-        emptyId: 'phones-empty',
-        columns: [
-            {key: 'label',  placeholder: 'Label (Mobile, Office…)'},
-            {key: 'number', placeholder: '+44 …', wide: true}
-        ]
-    }
-};
-
-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
-        // ---------------------------------------------------------------
-
-        /**
-         * Draw one repeatable list.
-         *
-         * Built with DOM APIs rather than innerHTML because these rows carry
-         * inputs, and Domma's .html() sanitises interactive elements away.
-         *
-         * @param {string}   field  addresses | emails | phones
-         * @param {object[]} rows
-         */
-        function renderRepeater(field, rows) {
-            const spec = REPEATERS[field];
-            const listEl = $container.find('#' + spec.listId).get(0);
-            const emptyEl = $container.find('#' + spec.emptyId).get(0);
-            if (!listEl) return;
-
-            while (listEl.firstChild) listEl.removeChild(listEl.firstChild);
-            if (emptyEl) emptyEl.style.display = rows.length ? 'none' : '';
-
-            rows.forEach((row, index) => {
-                const rowEl = document.createElement('div');
-                rowEl.className = 'contacts-row';
-                rowEl.dataset.index = String(index);
-
-                for (const col of spec.columns) {
-                    if (col.check) {
-                        const wrap = document.createElement('label');
-                        wrap.className = 'form-check contacts-row-check';
-                        const box = document.createElement('input');
-                        box.type = 'checkbox';
-                        box.className = 'form-check-input';
-                        box.dataset.key = col.key;
-                        box.checked = row[col.key] === true;
-                        // Only one address can be the billing one.
-                        box.addEventListener('change', () => {
-                            if (!box.checked) return;
-                            listEl.querySelectorAll(`input[data-key="${col.key}"]`).forEach((other) => {
-                                if (other !== box) other.checked = false;
-                            });
-                        });
-                        const text = document.createElement('span');
-                        text.className = 'form-check-label';
-                        text.textContent = col.label;
-                        wrap.appendChild(box);
-                        wrap.appendChild(text);
-                        rowEl.appendChild(wrap);
-                        continue;
-                    }
-
-                    const input = document.createElement('input');
-                    input.type = 'text';
-                    input.className = 'form-input' + (col.wide ? ' contacts-row-wide' : '');
-                    input.dataset.key = col.key;
-                    input.placeholder = col.placeholder ?? '';
-                    input.value = row[col.key] ?? '';
-                    rowEl.appendChild(input);
-                }
-
-                const remove = document.createElement('button');
-                remove.type = 'button';
-                remove.className = 'btn btn-sm btn-ghost contacts-row-remove';
-                remove.title = 'Remove';
-                remove.textContent = '\u00d7';
-                remove.addEventListener('click', () => {
-                    const next = readRepeater(field);
-                    next.splice(index, 1);
-                    renderRepeater(field, next);
-                    updateBillingSummary();
-                });
-                rowEl.appendChild(remove);
-
-                listEl.appendChild(rowEl);
-            });
-        }
-
-        /**
-         * Read a repeatable list back out of the DOM.
-         *
-         * @param   {string} field
-         * @returns {object[]}
-         */
-        function readRepeater(field) {
-            const spec = REPEATERS[field];
-            const listEl = $container.find('#' + spec.listId).get(0);
-            if (!listEl) return [];
-
-            return [...listEl.querySelectorAll('.contacts-row')].map((rowEl) => {
-                const row = {};
-                for (const col of spec.columns) {
-                    const el = rowEl.querySelector(`[data-key="${col.key}"]`);
-                    row[col.key] = col.check ? el?.checked === true : (el?.value ?? '').trim();
-                }
-                return row;
-            }).filter((row) => Object.entries(row).some(([k, v]) => k !== 'label' && v !== '' && v !== false));
-        }
-
-        /** A one-line "what is in here" for the folded billing section. */
-        function updateBillingSummary() {
-            const el = $container.find('#billing-summary').get(0);
-            if (!el) return;
-            const bits = [];
-            const company = $container.find('#contact-company').get(0)?.value?.trim();
-            if (company) bits.push(company);
-            const addresses = readRepeater('addresses').length;
-            if (addresses) bits.push(`${addresses} address${addresses === 1 ? '' : 'es'}`);
-            const extras = readRepeater('emails').length + readRepeater('phones').length;
-            if (extras) bits.push(`${extras} more contact${extras === 1 ? '' : 's'}`);
-            if ($container.find('#contact-sort-code').get(0)?.value?.trim()
-                || $container.find('#contact-iban').get(0)?.value?.trim()) bits.push('bank details');
-            el.textContent = bits.length ? bits.join(' \u00b7 ') : '';
-        }
-
-        /** Fill the billing inputs from a contact, or clear them for a new one. */
-        function loadBilling(contact) {
-            for (const [key, sel] of Object.entries(BILLING_FIELDS)) {
-                const el = $container.find(sel).get(0);
-                if (!el) continue;
-                const value = contact?.[key];
-                el.value = value === null || value === undefined ? '' : String(value);
-            }
-            for (const field of Object.keys(REPEATERS)) {
-                renderRepeater(field, Array.isArray(contact?.[field]) ? contact[field] : []);
-            }
-            updateBillingSummary();
-        }
-
-        /** Read the billing inputs back into the body a save posts. */
-        function readBilling() {
-            const body = {};
-            for (const [key, sel] of Object.entries(BILLING_FIELDS)) {
-                body[key] = ($container.find(sel).get(0)?.value ?? '').trim();
-            }
-            for (const field of Object.keys(REPEATERS)) body[field] = readRepeater(field);
-            return body;
-        }
-
-        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] : [];
-                loadBilling(c);
-            } 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 = [];
-                loadBilling(null);
-            }
-
-            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,
-                ...readBilling()
-            };
-
-            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));
-
-        // Billing section: fold, unfold, and the three Add buttons.
-        const billingToggle = $container.find('#billing-toggle').get(0);
-        const billingBody = $container.find('#billing-body').get(0);
-        if (billingToggle && billingBody) {
-            billingToggle.addEventListener('click', () => {
-                const open = billingBody.classList.toggle('is-open');
-                // The chevron is ROTATED rather than swapped for a different
-                // icon: I.scan replaces the span with a fresh <svg>, so the
-                // element you held a reference to is gone and setting
-                // data-icon on it changes nothing. A CSS transform needs no
-                // element identity at all, and animates for free.
-                billingToggle.classList.toggle('is-open', open);
-            });
-        }
-
-        for (const [field, btnId] of [['addresses', '#add-address-btn'], ['emails', '#add-email-btn'], ['phones', '#add-phone-btn']]) {
-            const btn = $container.find(btnId).get(0);
-            if (!btn) continue;
-            btn.addEventListener('click', () => {
-                renderRepeater(field, [...readRepeater(field), {}]);
-                updateBillingSummary();
-            });
-        }
-
-        // The folded summary should follow what is typed above it.
-        for (const sel of ['#contact-company', '#contact-sort-code', '#contact-iban']) {
-            const el = $container.find(sel).get(0);
-            if (el) el.addEventListener('input', updateBillingSummary);
-        }
-
-        // 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);
-        if (panelToggle && panelBody) {
-            panelToggle.addEventListener('click', () => {
-                const open = panelBody.style.display !== 'none';
-                panelBody.style.display = open ? 'none' : '';
-                // Rotated, not swapped: I.scan replaces the icon span with a
-                // fresh <svg> and does not carry the id across, so the
-                // reference this held was stale after the first scan and the
-                // chevron never turned.
-                panelToggle.classList.toggle('is-open', !open);
-            });
-        }
-
-        // 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();
-    }
-};