@bobfrankston/rmfmail 1.0.467

package/client/components/address-book.js

@@ -0,0 +1,199 @@
+/**
+ * Address book modal — list / search / edit / delete contacts.
+ * Sources: 'sent' (added on outgoing), 'received' (seeded from message senders),
+ * 'manual' (added directly here), 'google' (Google Contacts sync).
+ */
+import { listContacts, upsertContact, deleteContact } from "../lib/api-client.js";
+let isOpen = false;
+export async function openAddressBook() {
+    if (isOpen)
+        return;
+    isOpen = true;
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal mailx-modal-wide";
+    panel.innerHTML = `
+        <div class="mailx-modal-title">
+            <span class="mailx-modal-title-text">Address Book</span>
+            <button type="button" class="mailx-modal-close" id="ab-close" title="Close (Esc)" aria-label="Close">&times;</button>
+        </div>
+        <div class="ab-toolbar">
+            <input type="search" id="ab-search" class="mailx-modal-input" placeholder="Search name or email…" autocomplete="off">
+            <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" id="ab-new">+ New contact</button>
+        </div>
+        <div class="ab-count" id="ab-count"></div>
+        <div class="ab-list" id="ab-list">Loading…</div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <button type="button" class="mailx-modal-btn" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+    const searchInput = panel.querySelector("#ab-search");
+    const listEl = panel.querySelector("#ab-list");
+    const countEl = panel.querySelector("#ab-count");
+    let editingEmail = null;
+    const render = (items, total) => {
+        countEl.textContent = total === items.length
+            ? `${total} contact${total === 1 ? "" : "s"}`
+            : `Showing ${items.length} of ${total}`;
+        if (items.length === 0) {
+            listEl.innerHTML = `<div class="ab-empty">No contacts match.</div>`;
+            return;
+        }
+        const fmtDate = (ms) => {
+            if (!ms)
+                return "";
+            const d = new Date(ms);
+            const now = new Date();
+            return d.getFullYear() === now.getFullYear()
+                ? d.toLocaleDateString(undefined, { month: "short", day: "numeric" })
+                : d.toLocaleDateString();
+        };
+        listEl.innerHTML = `
+            <div class="ab-row ab-header">
+                <span class="ab-name">Name</span>
+                <span class="ab-email">Email</span>
+                <span class="ab-source">Source</span>
+                <span class="ab-count-cell" title="Times sent to">×</span>
+                <span class="ab-last">Last</span>
+                <span class="ab-actions"></span>
+            </div>` + items.map(c => `
+            <div class="ab-row" data-email="${escapeAttr(c.email)}">
+                <span class="ab-name">${escapeHtml(c.name || "")}</span>
+                <span class="ab-email">${escapeHtml(c.email)}</span>
+                <span class="ab-source">${escapeHtml(c.source)}</span>
+                <span class="ab-count-cell">${c.useCount || 0}</span>
+                <span class="ab-last">${fmtDate(c.lastUsed)}</span>
+                <span class="ab-actions">
+                    <button type="button" class="ab-edit" title="Edit name">✎</button>
+                    <button type="button" class="ab-del" title="Delete">🗑</button>
+                    <button type="button" class="ab-mail" title="Compose to">✉</button>
+                </span>
+            </div>`).join("");
+        listEl.querySelectorAll(".ab-row[data-email]").forEach(row => {
+            const email = row.dataset.email;
+            const c = items.find(x => x.email === email);
+            row.querySelector(".ab-edit")?.addEventListener("click", () => beginEdit(row, c));
+            row.querySelector(".ab-del")?.addEventListener("click", () => doDelete(c));
+            row.querySelector(".ab-mail")?.addEventListener("click", () => composeTo(c));
+        });
+    };
+    const beginEdit = (row, c) => {
+        if (editingEmail === c.email)
+            return;
+        editingEmail = c.email;
+        const nameSpan = row.querySelector(".ab-name");
+        const original = c.name || "";
+        nameSpan.innerHTML = `<input type="text" value="${escapeAttr(original)}" class="ab-name-input">`;
+        const inp = nameSpan.querySelector("input");
+        inp.focus();
+        inp.select();
+        const commit = async () => {
+            const newName = inp.value.trim();
+            if (newName !== original) {
+                try {
+                    await upsertContact(newName, c.email);
+                    c.name = newName;
+                }
+                catch (e) {
+                    alert(`Update failed: ${e?.message || e}`);
+                }
+            }
+            nameSpan.textContent = c.name || "";
+            editingEmail = null;
+        };
+        inp.addEventListener("blur", commit);
+        inp.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                inp.blur();
+            }
+            else if (e.key === "Escape") {
+                e.preventDefault();
+                inp.value = original;
+                inp.blur();
+            }
+        });
+    };
+    const doDelete = async (c) => {
+        if (!confirm(`Delete contact "${c.name || c.email}"?`))
+            return;
+        try {
+            await deleteContact(c.email);
+            await reload();
+        }
+        catch (e) {
+            alert(`Delete failed: ${e?.message || e}`);
+        }
+    };
+    const composeTo = (c) => {
+        const init = {
+            mode: "new",
+            to: [{ name: c.name || "", address: c.email }],
+            cc: [], bcc: [], subject: "", bodyHtml: "",
+            inReplyTo: "", references: [], accounts: [],
+        };
+        try {
+            sessionStorage.setItem("composeInit", JSON.stringify(init));
+        }
+        catch { /* */ }
+        document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "new" } }));
+        close();
+    };
+    let reloadDebounce;
+    const reload = async () => {
+        try {
+            const r = await listContacts(searchInput.value, 1, 200);
+            render(r.items, r.total);
+        }
+        catch (e) {
+            listEl.innerHTML = `<div class="ab-empty">Load failed: ${escapeHtml(e?.message || String(e))}</div>`;
+        }
+    };
+    const scheduleReload = () => {
+        if (reloadDebounce)
+            window.clearTimeout(reloadDebounce);
+        reloadDebounce = window.setTimeout(reload, 200);
+    };
+    panel.querySelector("#ab-new")?.addEventListener("click", async () => {
+        const email = prompt("Email address:");
+        if (!email)
+            return;
+        const name = prompt("Display name (optional):") || "";
+        try {
+            await upsertContact(name, email.trim());
+            await reload();
+        }
+        catch (e) {
+            alert(`Add failed: ${e?.message || e}`);
+        }
+    });
+    searchInput.addEventListener("input", scheduleReload);
+    const close = () => {
+        if (reloadDebounce)
+            window.clearTimeout(reloadDebounce);
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+        isOpen = false;
+    };
+    const onKey = (e) => {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            e.preventDefault();
+            close();
+        }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector("#ab-close").addEventListener("click", close);
+    panel.querySelector('[data-action="close"]').addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+        close(); });
+    await reload();
+}
+function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c]));
+}
+function escapeAttr(s) { return escapeHtml(s); }
+//# sourceMappingURL=address-book.js.map

package/client/components/address-book.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"address-book.js","sourceRoot":"","sources":["address-book.ts"],"names":[],"mappings":"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"}

package/client/components/address-book.ts

@@ -0,0 +1,204 @@
+/**
+ * Address book modal — list / search / edit / delete contacts.
+ * Sources: 'sent' (added on outgoing), 'received' (seeded from message senders),
+ * 'manual' (added directly here), 'google' (Google Contacts sync).
+ */
+import { listContacts, upsertContact, deleteContact } from "../lib/api-client.js";
+
+interface Contact {
+    name: string;
+    email: string;
+    source: string;
+    useCount: number;
+    lastUsed: number;
+}
+
+let isOpen = false;
+
+export async function openAddressBook(): Promise<void> {
+    if (isOpen) return;
+    isOpen = true;
+
+    const backdrop = document.createElement("div");
+    backdrop.className = "mailx-modal-backdrop";
+    const panel = document.createElement("div");
+    panel.className = "mailx-modal mailx-modal-wide";
+    panel.innerHTML = `
+        <div class="mailx-modal-title">
+            <span class="mailx-modal-title-text">Address Book</span>
+            <button type="button" class="mailx-modal-close" id="ab-close" title="Close (Esc)" aria-label="Close">&times;</button>
+        </div>
+        <div class="ab-toolbar">
+            <input type="search" id="ab-search" class="mailx-modal-input" placeholder="Search name or email…" autocomplete="off">
+            <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" id="ab-new">+ New contact</button>
+        </div>
+        <div class="ab-count" id="ab-count"></div>
+        <div class="ab-list" id="ab-list">Loading…</div>
+        <div class="mailx-modal-buttons">
+            <span class="mailx-modal-spacer"></span>
+            <button type="button" class="mailx-modal-btn" data-action="close">Close</button>
+        </div>`;
+    backdrop.appendChild(panel);
+    document.body.appendChild(backdrop);
+
+    const searchInput = panel.querySelector<HTMLInputElement>("#ab-search")!;
+    const listEl = panel.querySelector<HTMLElement>("#ab-list")!;
+    const countEl = panel.querySelector<HTMLElement>("#ab-count")!;
+
+    let editingEmail: string | null = null;
+
+    const render = (items: Contact[], total: number) => {
+        countEl.textContent = total === items.length
+            ? `${total} contact${total === 1 ? "" : "s"}`
+            : `Showing ${items.length} of ${total}`;
+        if (items.length === 0) {
+            listEl.innerHTML = `<div class="ab-empty">No contacts match.</div>`;
+            return;
+        }
+        const fmtDate = (ms: number) => {
+            if (!ms) return "";
+            const d = new Date(ms);
+            const now = new Date();
+            return d.getFullYear() === now.getFullYear()
+                ? d.toLocaleDateString(undefined, { month: "short", day: "numeric" })
+                : d.toLocaleDateString();
+        };
+        listEl.innerHTML = `
+            <div class="ab-row ab-header">
+                <span class="ab-name">Name</span>
+                <span class="ab-email">Email</span>
+                <span class="ab-source">Source</span>
+                <span class="ab-count-cell" title="Times sent to">×</span>
+                <span class="ab-last">Last</span>
+                <span class="ab-actions"></span>
+            </div>` + items.map(c => `
+            <div class="ab-row" data-email="${escapeAttr(c.email)}">
+                <span class="ab-name">${escapeHtml(c.name || "")}</span>
+                <span class="ab-email">${escapeHtml(c.email)}</span>
+                <span class="ab-source">${escapeHtml(c.source)}</span>
+                <span class="ab-count-cell">${c.useCount || 0}</span>
+                <span class="ab-last">${fmtDate(c.lastUsed)}</span>
+                <span class="ab-actions">
+                    <button type="button" class="ab-edit" title="Edit name">✎</button>
+                    <button type="button" class="ab-del" title="Delete">🗑</button>
+                    <button type="button" class="ab-mail" title="Compose to">✉</button>
+                </span>
+            </div>`).join("");
+        listEl.querySelectorAll<HTMLElement>(".ab-row[data-email]").forEach(row => {
+            const email = row.dataset.email!;
+            const c = items.find(x => x.email === email)!;
+            row.querySelector(".ab-edit")?.addEventListener("click", () => beginEdit(row, c));
+            row.querySelector(".ab-del")?.addEventListener("click", () => doDelete(c));
+            row.querySelector(".ab-mail")?.addEventListener("click", () => composeTo(c));
+        });
+    };
+
+    const beginEdit = (row: HTMLElement, c: Contact) => {
+        if (editingEmail === c.email) return;
+        editingEmail = c.email;
+        const nameSpan = row.querySelector<HTMLElement>(".ab-name")!;
+        const original = c.name || "";
+        nameSpan.innerHTML = `<input type="text" value="${escapeAttr(original)}" class="ab-name-input">`;
+        const inp = nameSpan.querySelector<HTMLInputElement>("input")!;
+        inp.focus();
+        inp.select();
+        const commit = async () => {
+            const newName = inp.value.trim();
+            if (newName !== original) {
+                try {
+                    await upsertContact(newName, c.email);
+                    c.name = newName;
+                } catch (e: any) {
+                    alert(`Update failed: ${e?.message || e}`);
+                }
+            }
+            nameSpan.textContent = c.name || "";
+            editingEmail = null;
+        };
+        inp.addEventListener("blur", commit);
+        inp.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") { e.preventDefault(); inp.blur(); }
+            else if (e.key === "Escape") { e.preventDefault(); inp.value = original; inp.blur(); }
+        });
+    };
+
+    const doDelete = async (c: Contact) => {
+        if (!confirm(`Delete contact "${c.name || c.email}"?`)) return;
+        try {
+            await deleteContact(c.email);
+            await reload();
+        } catch (e: any) {
+            alert(`Delete failed: ${e?.message || e}`);
+        }
+    };
+
+    const composeTo = (c: Contact) => {
+        const init: {
+            mode: string;
+            to: { name: string; address: string }[];
+            cc: { name: string; address: string }[];
+            bcc: { name: string; address: string }[];
+            subject: string;
+            bodyHtml: string;
+            inReplyTo: string;
+            references: string[];
+            accounts: { id: string; name: string; email: string }[];
+        } = {
+            mode: "new",
+            to: [{ name: c.name || "", address: c.email }],
+            cc: [], bcc: [], subject: "", bodyHtml: "",
+            inReplyTo: "", references: [], accounts: [],
+        };
+        try { sessionStorage.setItem("composeInit", JSON.stringify(init)); } catch { /* */ }
+        document.dispatchEvent(new CustomEvent("mailx-compose", { detail: { mode: "new" } }));
+        close();
+    };
+
+    let reloadDebounce: number | undefined;
+    const reload = async () => {
+        try {
+            const r = await listContacts(searchInput.value, 1, 200);
+            render(r.items, r.total);
+        } catch (e: any) {
+            listEl.innerHTML = `<div class="ab-empty">Load failed: ${escapeHtml(e?.message || String(e))}</div>`;
+        }
+    };
+    const scheduleReload = () => {
+        if (reloadDebounce) window.clearTimeout(reloadDebounce);
+        reloadDebounce = window.setTimeout(reload, 200);
+    };
+
+    panel.querySelector<HTMLButtonElement>("#ab-new")?.addEventListener("click", async () => {
+        const email = prompt("Email address:");
+        if (!email) return;
+        const name = prompt("Display name (optional):") || "";
+        try {
+            await upsertContact(name, email.trim());
+            await reload();
+        } catch (e: any) {
+            alert(`Add failed: ${e?.message || e}`);
+        }
+    });
+    searchInput.addEventListener("input", scheduleReload);
+
+    const close = () => {
+        if (reloadDebounce) window.clearTimeout(reloadDebounce);
+        backdrop.remove();
+        document.removeEventListener("keydown", onKey, true);
+        isOpen = false;
+    };
+    const onKey = (e: KeyboardEvent) => {
+        if (e.key === "Escape") { e.stopPropagation(); e.preventDefault(); close(); }
+    };
+    document.addEventListener("keydown", onKey, true);
+    panel.querySelector<HTMLButtonElement>("#ab-close")!.addEventListener("click", close);
+    panel.querySelector<HTMLButtonElement>('[data-action="close"]')!.addEventListener("click", close);
+    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop) close(); });
+
+    await reload();
+}
+
+function escapeHtml(s: string): string {
+    return s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c]!));
+}
+function escapeAttr(s: string): string { return escapeHtml(s); }