@bobfrankston/mailx 1.0.220 → 1.0.221

package/client/components/folder-tree.js

@@ -157,6 +157,7 @@ function renderNode(node, container, depth) {
         const badge = document.createElement("span");
         badge.className = "ft-badge";
         badge.textContent = String(node.unreadCount);
+        badge.title = `${node.unreadCount} unread`;
         folderEl.appendChild(badge);
     }
     // Total count (shown when View > Folder counts is checked)
@@ -164,6 +165,7 @@ function renderNode(node, container, depth) {
         const total = document.createElement("span");
         total.className = "ft-total-count";
         total.textContent = String(node.totalCount);
+        total.title = `${node.totalCount} total messages`;
         folderEl.appendChild(total);
     }
     folderEl.addEventListener("click", () => {
@@ -587,6 +589,7 @@ async function loadFolderTree(container) {
         if (accounts.length > 1) {
             const unifiedEl = document.createElement("div");
             unifiedEl.className = "ft-folder ft-unified";
+            unifiedEl.title = "Merged inbox view of all accounts — click to see messages from every account's INBOX sorted by date";
             unifiedEl.innerHTML = `<span class="ft-toggle"> </span><span class="ft-folder-name">All Inboxes</span>`;
             unifiedEl.addEventListener("click", () => {
                 if (selectedElement)

package/client/compose/compose.css

@@ -293,3 +293,93 @@ body {
     max-width: 60ch;
 }
 .ql-editor, .tt-content .tiptap { position: relative; }
+
+/* Link editor modal (Ctrl+K / toolbar link button) */
+.mailx-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+.mailx-modal {
+    background: var(--color-bg);
+    color: var(--color-text);
+    padding: var(--gap-lg);
+    border-radius: var(--radius-md);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    min-width: 420px;
+    max-width: 90vw;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-md);
+    font-family: var(--font-ui);
+}
+.mailx-modal-title {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+}
+.mailx-modal-label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+}
+.mailx-modal-input {
+    padding: 6px 8px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-bg-surface);
+    color: var(--color-text);
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+}
+.mailx-modal-input:focus {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -1px;
+}
+.mailx-modal-buttons {
+    display: flex;
+    gap: var(--gap-sm);
+    align-items: center;
+    margin-top: var(--gap-xs);
+}
+.mailx-modal-spacer { flex: 1; }
+.mailx-modal-btn {
+    padding: 6px 14px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-bg-surface);
+    color: var(--color-text);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+}
+.mailx-modal-btn:hover { background: var(--color-bg-hover); }
+.mailx-modal-btn-primary {
+    background: var(--color-accent);
+    color: #fff;
+    border-color: transparent;
+    font-weight: 500;
+}
+.mailx-modal-btn-primary:hover { filter: brightness(1.1); }
+
+/* Link hover preview: small floating URL below the anchor */
+.mailx-link-hover {
+    position: fixed;
+    padding: 4px 8px;
+    background: rgba(20, 20, 28, 0.92);
+    color: #e6e6f0;
+    font-size: 0.8rem;
+    font-family: var(--font-ui);
+    border-radius: var(--radius-sm);
+    max-width: 60ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 2100;
+    pointer-events: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}

package/client/compose/editor.js

@@ -2,24 +2,147 @@
  * Editor abstraction — wraps Quill or tiptap behind a common interface.
  * The compose window loads this module and calls createEditor() based on the user's setting.
  */
+/** URL-ish test: accepts http(s)://, mailto:, tel:, and bare domains with a dot. */
+function looksLikeUrl(s) {
+    const t = s.trim();
+    if (!t)
+        return false;
+    if (/^(https?|mailto|tel):/i.test(t))
+        return true;
+    // bare domain (e.g. "example.com/path") — require a dot and no internal whitespace
+    return /^[\w-]+(\.[\w-]+)+(\/\S*)?$/.test(t);
+}
+function normalizeUrl(s) {
+    const t = s.trim();
+    if (!t)
+        return t;
+    if (/^(https?|mailto|tel):/i.test(t))
+        return t;
+    if (/^[\w.+-]+@[\w-]+(\.[\w-]+)+$/.test(t))
+        return `mailto:${t}`;
+    return `https://${t}`;
+}
+/** Floating modal that edits both link text and URL. Returns null on Cancel,
+ *  { text, url } on OK, or { text: "", url: "" } on "Remove link". */
+function openLinkDialog(initialText, initialUrl) {
+    return new Promise(resolve => {
+        const backdrop = document.createElement("div");
+        backdrop.className = "mailx-modal-backdrop";
+        const panel = document.createElement("div");
+        panel.className = "mailx-modal";
+        panel.innerHTML = `
+            <div class="mailx-modal-title">Edit link</div>
+            <label class="mailx-modal-label">Text
+                <input type="text" class="mailx-modal-input" id="mailx-link-text">
+            </label>
+            <label class="mailx-modal-label">URL
+                <input type="text" class="mailx-modal-input" id="mailx-link-url" spellcheck="false" autocomplete="off">
+            </label>
+            <div class="mailx-modal-buttons">
+                <button type="button" class="mailx-modal-btn" data-action="remove">Remove link</button>
+                <span class="mailx-modal-spacer"></span>
+                <button type="button" class="mailx-modal-btn" data-action="cancel">Cancel</button>
+                <button type="button" class="mailx-modal-btn mailx-modal-btn-primary" data-action="ok">OK</button>
+            </div>`;
+        backdrop.appendChild(panel);
+        document.body.appendChild(backdrop);
+        const textInput = panel.querySelector("#mailx-link-text");
+        const urlInput = panel.querySelector("#mailx-link-url");
+        textInput.value = initialText;
+        urlInput.value = initialUrl;
+        const close = (result) => {
+            backdrop.remove();
+            document.removeEventListener("keydown", onKey, true);
+            resolve(result);
+        };
+        const commit = () => close({ text: textInput.value, url: normalizeUrl(urlInput.value) });
+        const onKey = (e) => {
+            if (e.key === "Escape") {
+                e.stopPropagation();
+                e.preventDefault();
+                close(null);
+            }
+            else if (e.key === "Enter") {
+                e.stopPropagation();
+                e.preventDefault();
+                commit();
+            }
+        };
+        document.addEventListener("keydown", onKey, true);
+        panel.querySelectorAll(".mailx-modal-btn").forEach(btn => {
+            btn.addEventListener("click", () => {
+                const action = btn.dataset.action;
+                if (action === "cancel")
+                    close(null);
+                else if (action === "remove")
+                    close({ text: textInput.value, url: "", remove: true });
+                else
+                    commit();
+            });
+        });
+        backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
+            close(null); });
+        // Focus URL if we have text, else text first
+        (initialText ? urlInput : textInput).focus();
+        (initialText ? urlInput : textInput).select();
+    });
+}
 function createQuillEditor(container) {
+    /** Open the link dialog for the current selection or cursor. If range has
+     *  a selection, prefill text from the selected text; if cursor is inside
+     *  a link, prefill both from the link's range. */
+    const openLinkForRange = async (quill, range) => {
+        if (!range)
+            return;
+        // Expand a bare cursor inside a link to the full link range
+        let linkRange = range;
+        const format = quill.getFormat(range);
+        if (range.length === 0 && format.link) {
+            // Walk left and right to find the link extent
+            const [leaf, offset] = quill.getLeaf(range.index);
+            if (leaf) {
+                // Build a range that spans the whole link
+                const text = quill.getText();
+                let start = range.index, end = range.index;
+                while (start > 0 && quill.getFormat(start - 1, 1).link === format.link)
+                    start--;
+                while (end < text.length - 1 && quill.getFormat(end, 1).link === format.link)
+                    end++;
+                linkRange = { index: start, length: end - start };
+            }
+        }
+        const currentText = linkRange.length ? quill.getText(linkRange.index, linkRange.length).replace(/\n$/, "") : "";
+        const currentUrl = format.link || "";
+        const result = await openLinkDialog(currentText, currentUrl);
+        if (!result)
+            return;
+        if (result.remove) {
+            if (linkRange.length)
+                quill.formatText(linkRange.index, linkRange.length, "link", false);
+            return;
+        }
+        if (!result.url)
+            return;
+        const newText = result.text || result.url;
+        if (linkRange.length) {
+            // Replace the existing text+link with new text+link
+            quill.deleteText(linkRange.index, linkRange.length);
+            quill.insertText(linkRange.index, newText, { link: result.url });
+            quill.setSelection(linkRange.index + newText.length, 0);
+        }
+        else {
+            quill.insertText(linkRange.index, newText, { link: result.url });
+            quill.setSelection(linkRange.index + newText.length, 0);
+        }
+    };
     // Extra keybindings for formatting that Quill doesn't wire up by default.
-    // Ctrl+K (insert link) is the one most users expect; we also add shortcuts
+    // Ctrl+K (insert/edit link) is the one most users expect; we also add shortcuts
     // for strikethrough, lists, indent, color, and clear-formatting.
     const extraBindings = {
         insertLink: {
             key: "K", shortKey: true,
             handler: function (range) {
-                if (!range)
-                    return true;
-                const current = this.quill.getFormat(range).link || "";
-                const url = prompt("URL (leave blank to remove link):", current);
-                if (url === null)
-                    return;
-                if (url === "")
-                    this.quill.format("link", false);
-                else
-                    this.quill.format("link", url);
+                openLinkForRange(this.quill, range);
             },
         },
         removeLink: {
@@ -95,6 +218,75 @@ function createQuillEditor(container) {
     });
     // Make toolbar buttons non-tabbable so Tab goes straight to editor body
     document.querySelectorAll(".ql-toolbar button, .ql-toolbar select, .ql-toolbar .ql-picker-label").forEach(el => el.setAttribute("tabindex", "-1"));
+    // Native spell-check: WebView2 / Chromium underlines misspellings and the
+    // right-click menu offers "Add to dictionary". Quill clears spellcheck on
+    // its root by default, so we turn it back on explicitly.
+    q.root.setAttribute("spellcheck", "true");
+    q.root.setAttribute("autocorrect", "on");
+    q.root.setAttribute("autocapitalize", "on");
+    // Toolbar link button: open our modal instead of Quill's built-in URL prompt.
+    const toolbar = q.getModule("toolbar");
+    toolbar?.addHandler("link", function () {
+        openLinkForRange(q, q.getSelection() || { index: q.getLength() - 1, length: 0 });
+    });
+    // Paste handling:
+    // - If clipboard has text/html, let Quill convert it (preserves anchors).
+    // - If only text/plain and it's a URL, insert as a link (honoring any text
+    //   currently selected — the URL becomes the href of that text).
+    // - Shift+Ctrl+V (handled via contextmenu "Paste as text") or any other
+    //   plain text is inserted verbatim.
+    q.root.addEventListener("paste", (e) => {
+        const cb = e.clipboardData;
+        if (!cb)
+            return;
+        const html = cb.getData("text/html");
+        const plain = cb.getData("text/plain");
+        if (html)
+            return; // Quill handles HTML clipboard natively
+        if (plain && looksLikeUrl(plain)) {
+            e.preventDefault();
+            const range = q.getSelection(true);
+            if (!range)
+                return;
+            const url = normalizeUrl(plain);
+            if (range.length > 0) {
+                // Preserve existing selection text, just format it as a link
+                q.formatText(range.index, range.length, "link", url);
+                q.setSelection(range.index + range.length, 0);
+            }
+            else {
+                q.insertText(range.index, plain.trim(), { link: url });
+                q.setSelection(range.index + plain.trim().length, 0);
+            }
+        }
+    });
+    // Hover preview: show the target URL in a floating tooltip when the
+    // pointer is over a link. Built on top of native mouseover/mouseout
+    // rather than Quill's ql-tooltip (which is keyboard-triggered).
+    let hoverTip = null;
+    q.root.addEventListener("mouseover", (e) => {
+        const a = e.target.closest("a[href]");
+        if (!a)
+            return;
+        if (hoverTip)
+            hoverTip.remove();
+        hoverTip = document.createElement("div");
+        hoverTip.className = "mailx-link-hover";
+        hoverTip.textContent = a.getAttribute("href") || "";
+        document.body.appendChild(hoverTip);
+        const rect = a.getBoundingClientRect();
+        hoverTip.style.left = `${Math.max(8, rect.left)}px`;
+        hoverTip.style.top = `${rect.bottom + 4}px`;
+    });
+    q.root.addEventListener("mouseout", (e) => {
+        const to = e.relatedTarget;
+        if (to && to.closest("a[href]"))
+            return;
+        if (hoverTip) {
+            hoverTip.remove();
+            hoverTip = null;
+        }
+    });
     return {
         setHtml(html) {
             q.clipboard.dangerouslyPasteHTML(html);

package/client/styles/components.css

@@ -166,11 +166,9 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     align-items: center;
     gap: var(--gap-xs);
     padding: var(--gap-xs) var(--gap-sm);
-    font-weight: 700;
+    font-weight: 600;
     font-size: var(--font-size-base);
     color: var(--color-brand-dark);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
     cursor: pointer;
     user-select: none;
 }
@@ -197,12 +195,12 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     padding: var(--gap-xs) var(--gap-sm) var(--gap-xs) var(--gap-lg);
     cursor: pointer;
     font-size: var(--font-size-base);
-    font-weight: 600;
+    font-weight: 500;
     color: var(--color-brand-dark);
     border-radius: 0;
 
     &:hover { background: var(--color-bg-hover); }
-    &.selected { background: var(--color-bg-selected); color: var(--color-accent); }
+    &.selected { background: var(--color-bg-selected); color: var(--color-accent); font-weight: 600; }
 }
 
 .ft-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -353,11 +351,13 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     border-bottom: 1px solid color-mix(in oklch, var(--color-border) 50%, transparent);
     cursor: pointer;
     font-size: var(--font-size-base);
+    font-weight: 400;
     color: var(--color-text);
     align-items: baseline;
+    line-height: 1.35;
 
     &:hover { background: var(--color-bg-hover); }
-    &.selected { background: var(--color-brand); color: var(--color-brand-dark); font-weight: 600; }
+    &.selected { background: var(--color-brand); color: var(--color-brand-dark); font-weight: 500; }
     &.unread {
         font-weight: 600;
         color: var(--color-unread);
@@ -411,7 +411,7 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     }
 }
 .no-snippets .ml-preview { display: none; }
-.ml-date { white-space: nowrap; text-align: right; color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-sm); }
+.ml-date { white-space: nowrap; text-align: right; color: var(--color-text-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
 /* Not-downloaded indicator: small dot before the date */
 .ml-row.not-downloaded .ml-date::before {
     content: "○ ";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.220",
+  "version": "1.0.221",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",
@@ -24,7 +24,7 @@
     "@bobfrankston/iflow-node": "^0.1.2",
     "@bobfrankston/miscinfo": "^1.0.8",
     "@bobfrankston/oauthsupport": "^1.0.22",
-    "@bobfrankston/msger": "^0.1.282",
+    "@bobfrankston/msger": "^0.1.283",
     "@capacitor/android": "^8.3.0",
     "@capacitor/cli": "^8.3.0",
     "@capacitor/core": "^8.3.0",
@@ -78,7 +78,7 @@
       "@bobfrankston/iflow-node": "^0.1.2",
       "@bobfrankston/miscinfo": "^1.0.8",
       "@bobfrankston/oauthsupport": "^1.0.22",
-      "@bobfrankston/msger": "^0.1.282",
+      "@bobfrankston/msger": "^0.1.283",
       "@capacitor/android": "^8.3.0",
       "@capacitor/cli": "^8.3.0",
       "@capacitor/core": "^8.3.0",