@bobfrankston/mailx 1.0.1

package/client/compose/compose.css

@@ -0,0 +1,197 @@
+/* Compose window styles */
+
+body {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+    color: var(--color-text);
+    background: var(--color-bg);
+    margin: 0;
+}
+
+.compose-header {
+    padding: var(--gap-sm) var(--gap-md);
+    background: var(--color-bg-surface);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.compose-field {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: var(--gap-xs) 0;
+}
+
+.compose-field label {
+    flex: 0 0 60px;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    text-align: right;
+}
+
+.compose-field input,
+.compose-field select {
+    flex: 1;
+    padding: var(--gap-xs) var(--gap-sm);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-size: var(--font-size-base);
+    font-family: var(--font-ui);
+}
+
+.compose-field input:focus,
+.compose-field select:focus {
+    outline: 1px solid var(--color-accent);
+    border-color: var(--color-accent);
+}
+
+.compose-toolbar {
+    display: flex;
+    gap: var(--gap-xs);
+    padding: var(--gap-xs) var(--gap-md);
+    background: var(--color-bg-toolbar);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.compose-toolbar .tb-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-xs);
+    padding: var(--gap-xs) var(--gap-md);
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+}
+
+.compose-toolbar .tb-btn:hover {
+    background: var(--color-bg-hover);
+}
+
+#btn-send {
+    background: var(--color-accent);
+    color: white;
+    font-weight: 600;
+}
+
+#btn-send:hover {
+    filter: brightness(1.1);
+}
+
+#btn-discard {
+    margin-left: auto;
+    color: var(--color-danger);
+}
+
+/* Quill editor fills remaining space */
+#compose-editor {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Override Quill theme to match mailx tokens */
+.ql-toolbar.ql-snow {
+    border: none !important;
+    border-bottom: 1px solid var(--color-border) !important;
+    background: var(--color-bg-toolbar);
+}
+
+.ql-container.ql-snow {
+    border: none !important;
+    flex: 1;
+    overflow-y: auto;
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+}
+
+.ql-editor {
+    color: var(--color-text);
+    padding: var(--gap-md);
+    min-height: 100%;
+}
+
+.ql-editor.ql-blank::before {
+    color: var(--color-text-muted);
+    font-style: normal;
+}
+
+/* Quill toolbar icon colors */
+.ql-snow .ql-stroke {
+    stroke: var(--color-text-muted) !important;
+}
+
+.ql-snow .ql-fill {
+    fill: var(--color-text-muted) !important;
+}
+
+.ql-snow .ql-picker-label {
+    color: var(--color-text-muted) !important;
+}
+
+.ql-snow .ql-active .ql-stroke {
+    stroke: var(--color-accent) !important;
+}
+
+.ql-snow .ql-active .ql-fill {
+    fill: var(--color-accent) !important;
+}
+
+.ql-snow .ql-picker-options {
+    background: var(--color-bg-surface) !important;
+    border-color: var(--color-border) !important;
+}
+
+/* Autocomplete dropdown */
+.compose-field { position: relative; }
+
+.ac-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 68px;
+    right: 0;
+    background: var(--color-bg-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    z-index: 200;
+    max-height: 200px;
+    overflow-y: auto;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.ac-item {
+    display: flex;
+    flex-direction: column;
+    padding: var(--gap-xs) var(--gap-sm);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+}
+
+.ac-item:hover, .ac-item.ac-active {
+    background: var(--color-bg-hover);
+}
+
+.ac-item-name {
+    font-weight: 600;
+}
+
+.ac-item-email {
+    color: var(--color-text-muted);
+    font-size: 0.8em;
+}
+
+/* Quoted original message in reply/forward */
+.reply {
+    border-left: 3px solid var(--color-border);
+    padding-left: var(--gap-md);
+    margin-top: var(--gap-md);
+    color: var(--color-text-muted);
+}

package/client/compose/compose.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Compose - mailx</title>
+    <link rel="icon" type="image/svg+xml" href="../favicon.svg">
+    <link rel="stylesheet" href="../styles/tokens.css">
+    <link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet">
+    <link rel="stylesheet" href="compose.css">
+    <script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
+    <script type="module" src="compose.js"></script>
+</head>
+<body>
+    <div class="compose-header">
+        <div class="compose-field">
+            <label for="compose-from">From</label>
+            <input type="text" id="compose-from" list="compose-from-list" autocomplete="off">
+            <datalist id="compose-from-list"></datalist>
+        </div>
+        <div class="compose-field">
+            <label for="compose-to">To</label>
+            <input type="text" id="compose-to" autocomplete="off">
+        </div>
+        <div class="compose-field">
+            <label for="compose-cc">Cc</label>
+            <input type="text" id="compose-cc" autocomplete="off">
+        </div>
+        <div class="compose-field">
+            <label for="compose-bcc">Bcc</label>
+            <input type="text" id="compose-bcc" autocomplete="off">
+        </div>
+        <div class="compose-field">
+            <label for="compose-subject">Subject</label>
+            <input type="text" id="compose-subject" autocomplete="off">
+        </div>
+    </div>
+    <div class="compose-toolbar">
+        <button class="tb-btn" id="btn-send">Send</button>
+        <button class="tb-btn" id="btn-attach">Attach</button>
+        <button class="tb-btn" id="btn-discard">Discard</button>
+    </div>
+    <div id="compose-editor"></div>
+</body>
+</html>

package/client/compose/compose.js

@@ -0,0 +1,335 @@
+/**
+ * Compose window entry point.
+ * Opened as a popup from the main mailx window.
+ * Receives init data via window.opener.postMessage or URL params.
+ */
+// ── Quill Editor ──
+const editor = new Quill("#compose-editor", {
+    theme: "snow",
+    placeholder: "Write your message...",
+    modules: {
+        toolbar: [
+            [{ header: [1, 2, 3, false] }],
+            ["bold", "italic", "underline", "strike"],
+            [{ list: "ordered" }, { list: "bullet" }],
+            ["blockquote", "link", "image"],
+            ["clean"]
+        ]
+    }
+});
+// ── Populate from init data ──
+const fromInput = document.getElementById("compose-from");
+const fromDatalist = document.getElementById("compose-from-list");
+const toInput = document.getElementById("compose-to");
+const ccInput = document.getElementById("compose-cc");
+const bccInput = document.getElementById("compose-bcc");
+const subjectInput = document.getElementById("compose-subject");
+/** Extract account ID from the From field value, or return the raw value for custom addresses */
+function getFromAccountId() {
+    const val = fromInput.value;
+    // Check datalist options for a matching account
+    for (const opt of fromDatalist.options) {
+        if (opt.value === val && opt.dataset.accountId)
+            return opt.dataset.accountId;
+    }
+    // No match — return first account ID as the sending account (custom From address)
+    const first = fromDatalist.options[0];
+    return first?.dataset.accountId || val;
+}
+/** Get the From address string for the message headers */
+function getFromAddress() {
+    return fromInput.value;
+}
+/** Smart tab — skip to next empty field, ending at body */
+function smartTab(current) {
+    const fields = [toInput, ccInput, bccInput, subjectInput];
+    const currentIdx = fields.indexOf(current);
+    // Look for next empty field after current
+    for (let i = currentIdx + 1; i < fields.length; i++) {
+        if (!fields[i].value.trim()) {
+            fields[i].focus();
+            return;
+        }
+    }
+    // All fields filled or past the end — go to editor body
+    editor.focus();
+}
+// ── Autocomplete ──
+function setupAutocomplete(input) {
+    let dropdown = null;
+    let activeIndex = -1;
+    let debounce;
+    function closeDropdown() {
+        if (dropdown) {
+            dropdown.remove();
+            dropdown = null;
+        }
+        activeIndex = -1;
+    }
+    function getLastToken() {
+        const val = input.value;
+        const lastComma = val.lastIndexOf(",");
+        return val.substring(lastComma + 1).trim();
+    }
+    function replaceLastToken(replacement) {
+        const val = input.value;
+        const lastComma = val.lastIndexOf(",");
+        const prefix = lastComma >= 0 ? val.substring(0, lastComma + 1) + " " : "";
+        input.value = prefix + replacement + ", ";
+        closeDropdown();
+        input.focus();
+    }
+    input.addEventListener("input", () => {
+        clearTimeout(debounce);
+        const token = getLastToken();
+        if (token.length < 1) {
+            closeDropdown();
+            return;
+        }
+        debounce = setTimeout(async () => {
+            try {
+                const res = await fetch(`/api/contacts?q=${encodeURIComponent(token)}`);
+                if (!res.ok)
+                    return;
+                const results = await res.json();
+                if (results.length === 0) {
+                    closeDropdown();
+                    return;
+                }
+                closeDropdown();
+                dropdown = document.createElement("div");
+                dropdown.className = "ac-dropdown";
+                activeIndex = 0; // first item highlighted by default
+                for (let i = 0; i < results.length; i++) {
+                    const item = document.createElement("div");
+                    item.className = `ac-item${i === 0 ? " ac-active" : ""}`;
+                    const nameEl = document.createElement("span");
+                    nameEl.className = "ac-item-name";
+                    nameEl.textContent = results[i].name || results[i].email;
+                    const emailEl = document.createElement("span");
+                    emailEl.className = "ac-item-email";
+                    emailEl.textContent = results[i].email;
+                    item.appendChild(nameEl);
+                    if (results[i].name)
+                        item.appendChild(emailEl);
+                    item.addEventListener("mousedown", (e) => {
+                        e.preventDefault();
+                        const display = results[i].name
+                            ? `${results[i].name} <${results[i].email}>`
+                            : results[i].email;
+                        replaceLastToken(display);
+                    });
+                    dropdown.appendChild(item);
+                }
+                input.parentElement.appendChild(dropdown);
+            }
+            catch { /* ignore */ }
+        }, 200);
+    });
+    input.addEventListener("keydown", (e) => {
+        if (!dropdown)
+            return;
+        const items = dropdown.querySelectorAll(".ac-item");
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            activeIndex = Math.min(activeIndex + 1, items.length - 1);
+            items.forEach((el, i) => el.classList.toggle("ac-active", i === activeIndex));
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            activeIndex = Math.max(activeIndex - 1, 0);
+            items.forEach((el, i) => el.classList.toggle("ac-active", i === activeIndex));
+        }
+        else if (e.key === "Tab" || e.key === "Enter") {
+            if (items.length > 0) {
+                e.preventDefault();
+                const idx = activeIndex >= 0 ? activeIndex : 0;
+                items[idx].dispatchEvent(new MouseEvent("mousedown"));
+                // After selecting, smart-tab to next empty field
+                setTimeout(() => smartTab(input), 50);
+                return;
+            }
+        }
+        else if (e.key === "Escape") {
+            closeDropdown();
+        }
+    });
+    input.addEventListener("blur", () => {
+        setTimeout(closeDropdown, 150);
+    });
+}
+setupAutocomplete(toInput);
+setupAutocomplete(ccInput);
+setupAutocomplete(bccInput);
+function formatAddrs(addrs) {
+    return addrs.map(a => a.name ? `${a.name} <${a.address}>` : a.address).join(", ");
+}
+function parseAddrs(s) {
+    if (!s.trim())
+        return [];
+    return s.split(",").map(part => {
+        const match = part.trim().match(/^(.+?)\s*<(.+?)>$/);
+        if (match)
+            return { name: match[1].trim(), address: match[2].trim() };
+        return { name: "", address: part.trim() };
+    });
+}
+function applyInit(init) {
+    // Populate From dropdown
+    fromDatalist.innerHTML = "";
+    for (const acct of init.accounts) {
+        const opt = document.createElement("option");
+        opt.value = `${acct.name} <${acct.email}>`;
+        opt.dataset.accountId = acct.id;
+        fromDatalist.appendChild(opt);
+    }
+    const selectedAcct = init.accounts.find((a) => a.id === init.accountId) || init.accounts[0];
+    if (selectedAcct)
+        fromInput.value = `${selectedAcct.name} <${selectedAcct.email}>`;
+    toInput.value = formatAddrs(init.to);
+    ccInput.value = formatAddrs(init.cc);
+    subjectInput.value = init.subject;
+    if (init.bodyHtml) {
+        editor.clipboard.dangerouslyPasteHTML(init.bodyHtml);
+        editor.setSelection(0, 0);
+    }
+    document.title = init.subject ? `${init.subject} - Compose` : "Compose - mailx";
+    // Focus first empty field: To → Subject → body
+    if (!toInput.value)
+        toInput.focus();
+    else if (!subjectInput.value)
+        subjectInput.focus();
+    else
+        editor.focus();
+}
+// ── Load init data from sessionStorage, then ensure From is populated ──
+const stored = sessionStorage.getItem("composeInit");
+if (stored) {
+    sessionStorage.removeItem("composeInit");
+    applyInit(JSON.parse(stored));
+}
+else {
+    // New compose — focus To
+    toInput.focus();
+}
+// If From dropdown is empty (new compose without init, or init had no accounts), fetch from API
+if (fromDatalist.children.length === 0) {
+    fetch("/api/accounts")
+        .then(r => r.json())
+        .then((accounts) => {
+        for (const acct of accounts) {
+            const opt = document.createElement("option");
+            opt.value = `${acct.name} <${acct.email}>`;
+            opt.dataset.accountId = acct.id;
+            fromDatalist.appendChild(opt);
+        }
+        if (!fromInput.value && accounts.length > 0) {
+            fromInput.value = `${accounts[0].name} <${accounts[0].email}>`;
+        }
+    })
+        .catch(e => console.error("Failed to load accounts:", e));
+}
+// ── Auto-save drafts every 5 seconds ──
+let draftUid = null;
+let draftTimer;
+let lastDraftContent = "";
+async function saveDraft() {
+    const content = editor.root.innerHTML + subjectInput.value + toInput.value;
+    if (content === lastDraftContent)
+        return; // no changes
+    if (!editor.getText().trim() && !subjectInput.value && !toInput.value)
+        return; // empty
+    lastDraftContent = content;
+    try {
+        const res = await fetch("/api/draft", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                accountId: getFromAccountId(),
+                subject: subjectInput.value,
+                bodyHtml: editor.root.innerHTML,
+                bodyText: editor.getText(),
+                to: toInput.value,
+                cc: ccInput.value,
+                previousDraftUid: draftUid,
+            }),
+        });
+        if (res.ok) {
+            const data = await res.json();
+            if (data.draftUid)
+                draftUid = data.draftUid;
+        }
+    }
+    catch { /* ignore draft save errors */ }
+}
+draftTimer = setInterval(saveDraft, 5000);
+// ── Send ──
+document.getElementById("btn-send")?.addEventListener("click", async () => {
+    const btn = document.getElementById("btn-send");
+    btn.disabled = true;
+    btn.textContent = "Sending...";
+    const body = {
+        from: getFromAccountId(),
+        to: parseAddrs(toInput.value),
+        cc: parseAddrs(ccInput.value),
+        bcc: parseAddrs(bccInput.value),
+        subject: subjectInput.value,
+        bodyHtml: editor.root.innerHTML,
+        bodyText: editor.getText(),
+    };
+    try {
+        const res = await fetch("/api/send", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body),
+        });
+        if (!res.ok) {
+            const err = await res.json();
+            throw new Error(err.error || res.statusText);
+        }
+        // Delete draft after successful send
+        clearInterval(draftTimer);
+        if (draftUid) {
+            fetch("/api/draft", {
+                method: "DELETE",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ accountId: getFromAccountId(), draftUid }),
+            }).catch(() => { });
+        }
+        window.close();
+    }
+    catch (e) {
+        btn.disabled = false;
+        btn.textContent = "Send";
+        alert(`Send failed: ${e.message}`);
+    }
+});
+// ── Discard ──
+document.getElementById("btn-discard")?.addEventListener("click", () => {
+    if (editor.getText().trim() || toInput.value) {
+        if (!confirm("Discard this message?"))
+            return;
+    }
+    window.close();
+});
+// ── Keyboard shortcuts ──
+document.addEventListener("keydown", (e) => {
+    if (e.ctrlKey && e.key === "Enter") {
+        document.getElementById("btn-send")?.click();
+    }
+    if (e.key === "Escape") {
+        document.getElementById("btn-discard")?.click();
+    }
+    // Ctrl+K = trigger address completion
+    if (e.ctrlKey && e.key === "k") {
+        e.preventDefault();
+        const active = document.activeElement;
+        const addressFields = [toInput, ccInput, bccInput];
+        const target = addressFields.includes(active) ? active : toInput;
+        target.focus();
+        // Force trigger autocomplete by dispatching input event
+        target.dispatchEvent(new Event("input"));
+    }
+});
+export {};
+//# sourceMappingURL=compose.js.map

package/client/favicon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- Envelope body -->
+  <rect x="4" y="16" width="56" height="34" rx="3" fill="#2563eb" stroke="#1e40af" stroke-width="1.5"/>
+  <!-- Envelope flap -->
+  <path d="M4 16 L32 36 L60 16" fill="#3b82f6" stroke="#1e40af" stroke-width="1.5" stroke-linejoin="round"/>
+  <!-- Fold lines -->
+  <path d="M4 50 L22 34" fill="none" stroke="#1e40af" stroke-width="1"/>
+  <path d="M60 50 L42 34" fill="none" stroke="#1e40af" stroke-width="1"/>
+  <!-- "mx" text -->
+  <text x="32" y="48" text-anchor="middle" font-family="system-ui,sans-serif" font-weight="800" font-size="16" fill="#e0e7ff" letter-spacing="-0.5">mx</text>
+</svg>

package/client/index.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>mailx</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <link rel="stylesheet" href="styles/tokens.css">
+    <link rel="stylesheet" href="styles/layout.css">
+    <link rel="stylesheet" href="styles/components.css">
+    <script type="module" src="app.js"></script>
+</head>
+<body>
+    <header class="toolbar">
+        <div class="toolbar-left">
+            <button class="tb-btn" id="btn-compose" title="Compose">
+                <span class="tb-icon">&#x270F;</span> Compose
+            </button>
+            <button class="tb-btn" id="btn-reply" title="Reply" disabled>
+                <span class="tb-icon">&#x21A9;</span>
+            </button>
+            <button class="tb-btn" id="btn-reply-all" title="Reply All" disabled>
+                <span class="tb-icon">&#x21A9;&#x21A9;</span>
+            </button>
+            <button class="tb-btn" id="btn-forward" title="Forward" disabled>
+                <span class="tb-icon">&#x2192;</span>
+            </button>
+            <span class="tb-sep"></span>
+            <button class="tb-btn" id="btn-delete" title="Delete" disabled>
+                <span class="tb-icon">&#x1F5D1;</span>
+            </button>
+            <button class="tb-btn" id="btn-flag" title="Flag" disabled>
+                <span class="tb-icon">&#x2691;</span>
+            </button>
+        </div>
+        <div class="toolbar-center">
+            <div class="tb-menu" id="view-menu">
+                <button class="tb-btn" id="btn-view">View</button>
+                <div class="tb-menu-dropdown" id="view-dropdown" hidden>
+                    <label class="tb-menu-item"><input type="checkbox" id="opt-two-line"> Two-line view</label>
+                    <label class="tb-menu-item"><input type="checkbox" id="opt-preview" checked> Preview pane</label>
+                    <label class="tb-menu-item"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
+                </div>
+            </div>
+            <span id="app-version" class="app-version"></span>
+        </div>
+        <div class="toolbar-right">
+            <search>
+                <input type="search" id="search-input" placeholder="Search..." autocomplete="off">
+            </search>
+            <button class="tb-btn" id="btn-sync" title="Sync">
+                <span class="tb-icon">&#x21BB;</span>
+            </button>
+            <button class="tb-btn" id="btn-restart" title="Restart server + reload">
+                <span class="tb-icon">&#x26A1;</span>
+            </button>
+        </div>
+    </header>
+
+    <nav class="folder-tree" id="folder-tree">
+        <div class="folder-loading">Loading accounts...</div>
+    </nav>
+
+    <main class="main-area">
+        <section class="message-list" id="message-list">
+            <div class="ml-header">
+                <span class="ml-col ml-col-flag"></span>
+                <span class="ml-col ml-col-from" data-sort="from">From</span>
+                <span class="ml-col ml-col-date" data-sort="date">Date</span>
+                <span class="ml-col ml-col-subject">Subject</span>
+            </div>
+            <div class="ml-body" id="ml-body">
+                <div class="ml-empty">Select a folder to view messages</div>
+            </div>
+        </section>
+
+        <div class="splitter" id="splitter-h"></div>
+
+        <section class="message-viewer" id="message-viewer">
+            <div class="mv-header" id="mv-header" hidden>
+                <div class="mv-from"></div>
+                <div class="mv-to"></div>
+                <div class="mv-subject"></div>
+                <div class="mv-date"></div>
+            </div>
+            <div class="mv-body" id="mv-body">
+                <div class="mv-empty">Select a message to read</div>
+            </div>
+            <div class="mv-attachments" id="mv-attachments" hidden></div>
+        </section>
+    </main>
+
+    <footer class="status-bar" id="status-bar">
+        <span id="status-accounts"></span>
+        <span id="status-sync"></span>
+        <span id="status-pending"></span>
+        <span id="status-queue">Queue: empty</span>
+    </footer>
+</body>
+</html>