@bobfrankston/rmfmail 1.2.222 → 1.2.224

package/client/app.bundle.js

@@ -306,8 +306,8 @@ function hasBccHistoryTo(email) {
 function listContacts(query, page = 1, pageSize = 100) {
   return ipc().listContacts(query, page, pageSize);
 }
-function upsertContact(name, email) {
-  return ipc().upsertContact(name, email);
+function upsertContact(name, email, fields) {
+  return ipc().upsertContact(name, email, fields);
 }
 function deleteContact(email) {
   return ipc().deleteContact(email);
@@ -723,7 +723,14 @@ __export(context_menu_exports, {
   closeContextMenu: () => closeContextMenu,
   showContextMenu: () => showContextMenu
 });
+function closeSubmenu() {
+  if (activeSubmenu) {
+    activeSubmenu.remove();
+    activeSubmenu = null;
+  }
+}
 function closeContextMenu() {
+  closeSubmenu();
   if (activeMenu) {
     activeMenu.remove();
     activeMenu = null;
@@ -737,6 +744,45 @@ function closeContextMenu() {
     escapeListener = null;
   }
 }
+function openSubmenu(parentRow, items) {
+  closeSubmenu();
+  const sub = document.createElement("div");
+  sub.className = "ctx-menu";
+  for (const item of items) {
+    if (item.separator) {
+      const sep = document.createElement("div");
+      sep.className = "ctx-sep";
+      sub.appendChild(sep);
+      continue;
+    }
+    const el = document.createElement("div");
+    el.className = "ctx-item" + (item.disabled ? " ctx-disabled" : "");
+    el.textContent = item.label;
+    if (item.tooltip)
+      el.title = item.tooltip;
+    if (!item.disabled) {
+      el.addEventListener("click", () => {
+        closeContextMenu();
+        item.action();
+      });
+    }
+    sub.appendChild(el);
+  }
+  document.body.appendChild(sub);
+  const anchor = parentRow.getBoundingClientRect();
+  const vw = window.visualViewport?.width ?? window.innerWidth;
+  const vh = window.visualViewport?.height ?? window.innerHeight;
+  const rect = sub.getBoundingClientRect();
+  let left = anchor.right - 2;
+  if (left + rect.width > vw)
+    left = anchor.left - rect.width + 2;
+  let top = anchor.top;
+  if (top + rect.height > vh)
+    top = vh - rect.height - 4;
+  sub.style.left = `${Math.max(4, left)}px`;
+  sub.style.top = `${Math.max(4, top)}px`;
+  activeSubmenu = sub;
+}
 function showContextMenu(x, y, items) {
   closeContextMenu();
   const menu = document.createElement("div");
@@ -755,6 +801,24 @@ function showContextMenu(x, y, items) {
     el.textContent = item.label;
     if (item.tooltip)
       el.title = item.tooltip;
+    if (item.submenu && item.submenu.length > 0 && !item.disabled) {
+      el.style.display = "flex";
+      el.style.justifyContent = "space-between";
+      el.style.gap = "12px";
+      const caret = document.createElement("span");
+      caret.textContent = "\u25B8";
+      caret.style.opacity = "0.6";
+      el.appendChild(caret);
+      const open = () => openSubmenu(el, item.submenu);
+      el.addEventListener("mouseenter", open);
+      el.addEventListener("click", (e) => {
+        e.stopPropagation();
+        open();
+      });
+      menu.appendChild(el);
+      continue;
+    }
+    el.addEventListener("mouseenter", closeSubmenu);
     if (!item.disabled) {
       el.addEventListener("click", () => {
         closeContextMenu();
@@ -786,6 +850,8 @@ function showContextMenu(x, y, items) {
   activeMenu = menu;
   requestAnimationFrame(() => {
     dismissListener = (e) => {
+      if (activeSubmenu?.contains(e.target))
+        return;
       if (activeMenu && !activeMenu.contains(e.target)) {
         closeContextMenu();
       }
@@ -801,13 +867,14 @@ function showContextMenu(x, y, items) {
     document.addEventListener("keydown", escapeListener, true);
   });
 }
-var activeMenu, dismissListener, escapeListener;
+var activeMenu, dismissListener, escapeListener, activeSubmenu;
 var init_context_menu = __esm({
   "client/components/context-menu.js"() {
     "use strict";
     activeMenu = null;
     dismissListener = null;
     escapeListener = null;
+    activeSubmenu = null;
     document.addEventListener("scroll", closeContextMenu, true);
     document.addEventListener("contextmenu", () => {
     });
@@ -1060,13 +1127,13 @@ async function openAddressBook(prefillSearch) {
                 <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-name" title="${escapeAttr(cardSummary(c))}">${escapeHtml(c.name || "")}${cardSummary(c) ? ' <span class="ab-hascard" aria-hidden="true">\u2022</span>' : ""}</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">\u270E</button>
+                    <button type="button" class="ab-edit" title="Edit contact">\u270E</button>
                     <button type="button" class="ab-del" title="Delete">\u{1F5D1}</button>
                     <button type="button" class="ab-mail" title="Compose to">\u2709</button>
                 </span>
@@ -1079,38 +1146,76 @@ async function openAddressBook(prefillSearch) {
       row.querySelector(".ab-mail")?.addEventListener("click", () => composeTo(c));
     });
   };
-  const beginEdit = (row, 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 || "";
+    const back = document.createElement("div");
+    back.className = "mailx-modal-backdrop";
+    const card = document.createElement("div");
+    card.className = "mailx-modal";
+    card.innerHTML = `
+            <div class="mailx-modal-title">
+                <span class="mailx-modal-title-text">Edit contact</span>
+                <button type="button" class="mailx-modal-close" data-role="x" title="Close (Esc)" aria-label="Close">&times;</button>
+            </div>
+            <div class="ab-card">
+                <label class="ab-field"><span>Name</span>
+                    <input type="text" class="mailx-modal-input" data-field="name" value="${escapeAttr(c.name || "")}"></label>
+                <label class="ab-field"><span>Email</span>
+                    <input type="email" class="mailx-modal-input" value="${escapeAttr(c.email)}" disabled
+                           title="The address identifies the contact \u2014 delete and re-add to change it"></label>
+                ${CONTACT_FIELDS.map((f) => `
+                <label class="ab-field"><span>${escapeHtml(f.label)}</span>
+                    ${f.multiline ? `<textarea class="mailx-modal-input" rows="2" data-field="${f.key}">${escapeHtml(c[f.key] || "")}</textarea>` : `<input type="${f.type || "text"}" class="mailx-modal-input" data-field="${f.key}"
+                                  value="${escapeAttr(c[f.key] || "")}"
+                                  ${f.placeholder ? `placeholder="${escapeAttr(f.placeholder)}"` : ""}>`}
+                </label>`).join("")}
+            </div>
+            <div class="mailx-modal-buttons">
+                <span class="mailx-modal-spacer"></span>
+                <button type="button" class="mailx-modal-btn" data-role="cancel">Cancel</button>
+                <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" data-role="save">Save</button>
+            </div>`;
+    back.appendChild(card);
+    document.body.appendChild(back);
+    card.querySelector('[data-field="name"]')?.focus();
+    const shut = () => {
+      back.remove();
+      document.removeEventListener("keydown", onCardKey, true);
       editingEmail = null;
     };
-    inp.addEventListener("blur", commit);
-    inp.addEventListener("keydown", (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        inp.blur();
-      } else if (e.key === "Escape") {
+    const onCardKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
         e.preventDefault();
-        inp.value = original;
-        inp.blur();
+        shut();
+      }
+    };
+    document.addEventListener("keydown", onCardKey, true);
+    card.querySelector('[data-role="x"]')?.addEventListener("click", shut);
+    card.querySelector('[data-role="cancel"]')?.addEventListener("click", shut);
+    back.addEventListener("mousedown", (e) => {
+      if (e.target === back)
+        shut();
+    });
+    card.querySelector('[data-role="save"]')?.addEventListener("click", async () => {
+      const val = (k) => card.querySelector(`[data-field="${k}"]`)?.value.trim() ?? "";
+      const fields = {};
+      for (const f of CONTACT_FIELDS)
+        fields[f.key] = val(f.key);
+      const newName = val("name");
+      const bd = fields.birthday;
+      if (bd && !/^(\d{4}|-)-\d{2}-\d{2}$/.test(bd)) {
+        alert(`Birthday must be YYYY-MM-DD, or --MM-DD when the year is unknown. Got "${bd}".`);
+        return;
+      }
+      try {
+        await upsertContact(newName, c.email, fields);
+        shut();
+        await reload();
+      } catch (e) {
+        alert(`Update failed: ${e?.message || e}`);
       }
     });
   };
@@ -1195,17 +1300,29 @@ async function openAddressBook(prefillSearch) {
   });
   await reload();
 }
+function cardSummary(c) {
+  return CONTACT_FIELDS.map((f) => ({ label: f.label, value: (c[f.key] || "").trim() })).filter((x) => x.value).map((x) => `${x.label}: ${x.value.replace(/\s+/g, " ")}`).join("\n");
+}
 function escapeHtml(s) {
   return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 }
 function escapeAttr(s) {
   return escapeHtml(s);
 }
-var isOpen;
+var CONTACT_FIELDS, isOpen;
 var init_address_book = __esm({
   "client/components/address-book.js"() {
     "use strict";
     init_api_client();
+    CONTACT_FIELDS = [
+      { key: "organization", label: "Company" },
+      { key: "title", label: "Job title" },
+      { key: "phone", label: "Phone", type: "tel" },
+      { key: "website", label: "Website", type: "url", placeholder: "https://" },
+      { key: "birthday", label: "Birthday", placeholder: "YYYY-MM-DD or --MM-DD" },
+      { key: "address", label: "Address", multiline: true },
+      { key: "notes", label: "Notes", multiline: true }
+    ];
     isOpen = false;
   }
 });