@bobfrankston/mailx 1.0.9 → 1.0.13

package/client/index.html

@@ -48,21 +48,29 @@
             <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 class="tb-btn" id="btn-sync" title="Sync all folders (F5)">
+                <span class="tb-icon">&#x21BB;</span> Sync
             </button>
-            <button class="tb-btn" id="btn-restart" title="Restart server + reload">
-                <span class="tb-icon">&#x26A1;</span>
+            <button class="tb-btn" id="btn-restart" title="Restart server and reload page">
+                <span class="tb-icon">&#x26A1;</span> Restart
             </button>
         </div>
     </header>
 
-    <nav class="folder-tree" id="folder-tree">
-        <div class="folder-loading">Loading accounts...</div>
-    </nav>
+    <div class="folder-panel">
+        <div class="ft-filter">
+            <input type="text" id="ft-filter-input" placeholder="Find folder..." autocomplete="off">
+        </div>
+        <nav class="folder-tree" id="folder-tree">
+            <div class="folder-loading">Loading accounts...</div>
+        </nav>
+    </div>
 
     <main class="main-area">
         <section class="message-list" id="message-list">
+            <div class="ml-filter">
+                <input type="text" id="ml-filter-input" placeholder="Filter..." autocomplete="off">
+            </div>
             <div class="ml-header">
                 <span class="ml-col ml-col-flag"></span>
                 <span class="ml-col ml-col-from" data-sort="from">From</span>
@@ -78,8 +86,17 @@
 
         <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-header-top">
+                    <div class="mv-header-info">
+                        <div class="mv-from"></div>
+                        <div class="mv-to"></div>
+                    </div>
+                    <div class="mv-header-actions">
+                        <button class="mv-action mv-action-primary" id="mv-edit-draft" hidden>Edit &amp; Send</button>
+                        <a class="mv-unsubscribe" id="mv-unsubscribe" hidden>Unsubscribe</a>
+                        <button class="mv-action" id="mv-view-source" title="View source (.eml)" hidden>Source</button>
+                    </div>
+                </div>
                 <div class="mv-subject"></div>
                 <div class="mv-date"></div>
             </div>
@@ -96,5 +113,12 @@
         <span id="status-pending"></span>
         <span id="status-queue">Queue: empty</span>
     </footer>
+
+    <div id="startup-overlay" class="startup-overlay">
+        <div class="startup-content">
+            <div class="startup-spinner"></div>
+            <div id="startup-status">Connecting to server...</div>
+        </div>
+    </div>
 </body>
 </html>

package/client/lib/api-client.js

@@ -1,8 +1,23 @@
 /**
- * REST + WebSocket client for communicating with mailx-server.
- * All server communication goes through here.
+ * API client — auto-detects IPC (WebView) vs HTTP (browser).
+ * When mailxapi is available (injected by launcher), calls go directly via IPC.
+ * Otherwise falls back to REST/WebSocket.
  */
-/** Generic fetch wrapper */
+const hasIPC = typeof mailxapi !== "undefined" && mailxapi?.isApp;
+// ── HTTP fallback ──
+// Abort controller for message-list requests — cancel stale fetches when folder changes
+let messageListAbort = null;
+export function abortMessageListRequests() {
+    if (messageListAbort) {
+        messageListAbort.abort();
+        messageListAbort = null;
+    }
+}
+function newMessageListSignal() {
+    abortMessageListRequests();
+    messageListAbort = new AbortController();
+    return messageListAbort.signal;
+}
 async function api(path, options) {
     const res = await fetch(`/api${path}`, {
         headers: { "Content-Type": "application/json" },
@@ -14,54 +29,111 @@ async function api(path, options) {
     }
     return res.json();
 }
-// ── REST Methods ──
+// ── API Methods (IPC or HTTP) ──
 export function getAccounts() {
+    if (hasIPC)
+        return mailxapi.getAccounts();
     return api("/accounts");
 }
 export function getFolders(accountId) {
+    if (hasIPC)
+        return mailxapi.getFolders(accountId);
     return api(`/folders/${accountId}`);
 }
 export function getMessages(accountId, folderId, page = 1, pageSize = 50) {
-    return api(`/messages/${accountId}/${folderId}?page=${page}&pageSize=${pageSize}`);
+    if (hasIPC)
+        return mailxapi.getMessages(accountId, folderId, page, pageSize);
+    const signal = newMessageListSignal();
+    return api(`/messages/${accountId}/${folderId}?page=${page}&pageSize=${pageSize}`, { signal });
+}
+export function getUnifiedInbox(page = 1, pageSize = 50) {
+    if (hasIPC)
+        return mailxapi.getUnifiedInbox(page, pageSize);
+    const signal = newMessageListSignal();
+    return api(`/messages/unified/inbox?page=${page}&pageSize=${pageSize}`, { signal });
 }
 export function searchMessages(query, page = 1, pageSize = 50) {
+    if (hasIPC)
+        return mailxapi.searchMessages(query, page, pageSize);
     return api(`/search?q=${encodeURIComponent(query)}&page=${page}&pageSize=${pageSize}`);
 }
-export function getUnifiedInbox(page = 1, pageSize = 50) {
-    return api(`/messages/unified/inbox?page=${page}&pageSize=${pageSize}`);
-}
-export function getMessage(accountId, uid, allowRemote = false) {
-    const q = allowRemote ? "?allowRemote=true" : "";
+export function getMessage(accountId, uid, allowRemote = false, folderId) {
+    if (hasIPC)
+        return mailxapi.getMessage(accountId, uid, allowRemote, folderId);
+    const params = new URLSearchParams();
+    if (allowRemote)
+        params.set("allowRemote", "true");
+    if (folderId != null)
+        params.set("folderId", String(folderId));
+    const q = params.toString() ? `?${params}` : "";
     return api(`/message/${accountId}/${uid}${q}`);
 }
 export function updateFlags(accountId, uid, flags) {
+    if (hasIPC)
+        return mailxapi.updateFlags(accountId, uid, flags);
     return api(`/message/${accountId}/${uid}/flags`, {
         method: "PATCH",
         body: JSON.stringify({ flags })
     });
 }
 export function triggerSync() {
+    if (hasIPC)
+        return mailxapi.syncAll();
     return api("/sync", { method: "POST" });
 }
-let ws;
-const handlers = [];
-export function connectWebSocket() {
-    const protocol = location.protocol === "https:" ? "wss:" : "ws:";
-    ws = new WebSocket(`${protocol}//${location.host}`);
-    ws.onmessage = (ev) => {
-        try {
-            const event = JSON.parse(ev.data);
-            for (const handler of handlers)
-                handler(event);
-        }
-        catch { /* ignore parse errors */ }
-    };
-    ws.onclose = () => {
-        // Reconnect after 3 seconds
-        setTimeout(connectWebSocket, 3000);
-    };
-}
-export function onWsEvent(handler) {
-    handlers.push(handler);
+export function getVersion() {
+    if (hasIPC)
+        return mailxapi.getVersion();
+    return api("/version");
+}
+export function getSyncPending() {
+    if (hasIPC)
+        return mailxapi.getSyncPending();
+    return api("/sync/pending");
+}
+export function searchContacts(query) {
+    if (hasIPC)
+        return mailxapi.searchContacts(query);
+    return api(`/contacts?q=${encodeURIComponent(query)}`);
+}
+export function allowRemoteContent(type, value) {
+    if (hasIPC)
+        return mailxapi.allowRemoteContent(type, value);
+    return api("/settings/allow-remote", {
+        method: "POST",
+        body: JSON.stringify({ type, value })
+    });
+}
+const eventHandlers = [];
+export function onEvent(handler) {
+    eventHandlers.push(handler);
+}
+export function connectEvents() {
+    if (hasIPC) {
+        // IPC events come via mailxapi.onEvent
+        mailxapi.onEvent((event) => {
+            for (const h of eventHandlers)
+                h(event);
+        });
+    }
+    else {
+        // WebSocket for HTTP mode
+        const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+        const ws = new WebSocket(`${protocol}//${location.host}`);
+        ws.onmessage = (ev) => {
+            try {
+                const event = JSON.parse(ev.data);
+                for (const h of eventHandlers)
+                    h(event);
+            }
+            catch { /* ignore */ }
+        };
+        ws.onclose = () => {
+            setTimeout(connectEvents, 3000);
+        };
+    }
 }
+// Legacy exports for backward compatibility
+export const connectWebSocket = connectEvents;
+export const onWsEvent = onEvent;
 //# sourceMappingURL=api-client.js.map

package/client/lib/mailxapi.js

@@ -0,0 +1,123 @@
+/**
+ * mailxapi — IPC bridge injected into WebView by the Rust launcher.
+ * Follows the msgapi pattern: callNode → Promise → _mailxapiResolve/Reject.
+ *
+ * When running in a browser (no IPC), this file is not loaded.
+ * api-client.ts auto-detects and falls back to HTTP fetch.
+ */
+
+(function() {
+    "use strict";
+
+    var _callbacks = {};
+    var _callbackId = 0;
+    var _eventHandlers = [];
+
+    function callNode(action, params) {
+        var id = String(++_callbackId);
+        return new Promise(function(resolve, reject) {
+            var timer = setTimeout(function() {
+                delete _callbacks[id];
+                reject(new Error("mailxapi timeout: " + action));
+            }, 30000);
+            _callbacks[id] = { resolve: resolve, reject: reject, timer: timer };
+            var msg = Object.assign({ _action: action, _cbid: id }, params || {});
+            if (window.ipc && window.ipc.postMessage) {
+                window.ipc.postMessage(JSON.stringify(msg));
+            } else {
+                // Fallback: should not happen in WebView
+                clearTimeout(timer);
+                delete _callbacks[id];
+                reject(new Error("No IPC channel available"));
+            }
+        });
+    }
+
+    // Called by Rust to resolve promises
+    window._mailxapiResolve = function(id, value) {
+        var cb = _callbacks[id];
+        if (!cb) return;
+        delete _callbacks[id];
+        clearTimeout(cb.timer);
+        cb.resolve(value);
+    };
+
+    // Called by Rust to reject promises
+    window._mailxapiReject = function(id, error) {
+        var cb = _callbacks[id];
+        if (!cb) return;
+        delete _callbacks[id];
+        clearTimeout(cb.timer);
+        cb.reject(new Error(error));
+    };
+
+    // Called by Rust to push events (new mail, sync progress, etc.)
+    window._mailxapiEvent = function(event) {
+        for (var i = 0; i < _eventHandlers.length; i++) {
+            try { _eventHandlers[i](event); } catch(e) { /* ignore */ }
+        }
+    };
+
+    window.mailxapi = {
+        isApp: true,
+        platform: "webview2",
+
+        // Accounts
+        getAccounts: function() { return callNode("getAccounts"); },
+        getFolders: function(accountId) { return callNode("getFolders", { accountId: accountId }); },
+
+        // Messages
+        getMessages: function(accountId, folderId, page, pageSize) {
+            return callNode("getMessages", { accountId: accountId, folderId: folderId, page: page, pageSize: pageSize });
+        },
+        getUnifiedInbox: function(page, pageSize) {
+            return callNode("getUnifiedInbox", { page: page, pageSize: pageSize });
+        },
+        getMessage: function(accountId, uid, allowRemote) {
+            return callNode("getMessage", { accountId: accountId, uid: uid, allowRemote: allowRemote });
+        },
+
+        // Actions
+        updateFlags: function(accountId, uid, flags) {
+            return callNode("updateFlags", { accountId: accountId, uid: uid, flags: flags });
+        },
+        deleteMessage: function(accountId, uid) {
+            return callNode("deleteMessage", { accountId: accountId, uid: uid });
+        },
+        undeleteMessage: function(accountId, uid, folderId) {
+            return callNode("undeleteMessage", { accountId: accountId, uid: uid, folderId: folderId });
+        },
+
+        // Compose
+        sendMessage: function(msg) { return callNode("sendMessage", msg); },
+        saveDraft: function(params) { return callNode("saveDraft", params); },
+        deleteDraft: function(accountId, draftUid) {
+            return callNode("deleteDraft", { accountId: accountId, draftUid: draftUid });
+        },
+
+        // Search
+        searchMessages: function(query, page, pageSize) {
+            return callNode("searchMessages", { query: query, page: page, pageSize: pageSize });
+        },
+        searchContacts: function(query) {
+            return callNode("searchContacts", { query: query });
+        },
+
+        // Sync
+        syncAll: function() { return callNode("syncAll"); },
+        getSyncPending: function() { return callNode("getSyncPending"); },
+
+        // Settings
+        allowRemoteContent: function(type, value) {
+            return callNode("allowRemoteContent", { type: type, value: value });
+        },
+        getSettings: function() { return callNode("getSettings"); },
+        saveSettings: function(data) { return callNode("saveSettingsData", data); },
+        getVersion: function() { return callNode("getVersion"); },
+
+        // Events
+        onEvent: function(handler) { _eventHandlers.push(handler); },
+    };
+
+    window.dispatchEvent(new CustomEvent("mailxapiready"));
+})();

package/client/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@bobfrankston/mailx-client",
-  "version": "1.0.1",
+  "version": "1.0.7",
   "private": true,
   "type": "module",
   "dependencies": {
     "quill": "^2.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BobFrankston/mailx-client.git"
   }
 }

package/client/styles/components.css

@@ -7,7 +7,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 var(--gap-sm);
-    background: oklch(0.82 0.06 240); /* DEBUG: light blue toolbar */
+    background: var(--color-brand);
     border-bottom: 1px solid var(--color-border);
     gap: var(--gap-sm);
 
@@ -26,9 +26,9 @@
     border: none;
     border-radius: var(--radius-sm);
     background: transparent;
-    color: var(--color-text);
+    color: var(--color-brand-dark);
     font-size: var(--font-size-sm);
-    font-weight: 600;
+    font-weight: 700;
     cursor: pointer;
     white-space: nowrap;
 
@@ -99,9 +99,9 @@
     align-items: center;
     gap: var(--gap-xs);
     padding: var(--gap-xs) var(--gap-sm);
-    font-weight: 600;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
+    font-weight: 700;
+    font-size: var(--font-size-base);
+    color: var(--color-brand-dark);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     cursor: pointer;
@@ -130,7 +130,8 @@
     padding: var(--gap-xs) var(--gap-sm) var(--gap-xs) var(--gap-lg);
     cursor: pointer;
     font-size: var(--font-size-base);
-    color: var(--color-text);
+    font-weight: 600;
+    color: var(--color-brand-dark);
     border-radius: 0;
 
     &:hover { background: var(--color-bg-hover); }
@@ -150,18 +151,57 @@
     text-align: center;
 }
 
+.ft-badge-outbox {
+    background: oklch(0.55 0.18 25);
+}
+
+.ft-filter {
+    padding: 2px var(--gap-xs);
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg-surface);
+    flex-shrink: 0;
+}
+
+.ft-filter input {
+    width: 100%;
+    padding: 2px 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-sm);
+    outline: none;
+}
+
+.ft-filter input:focus { border-color: var(--color-accent); }
+
+.ft-folder.ft-filter-hidden,
+.ft-account.ft-filter-hidden,
+.ft-account-header.ft-filter-hidden { display: none; }
+
 .folder-loading {
     padding: var(--gap-lg);
     color: var(--color-text-muted);
     font-size: var(--font-size-sm);
 }
 
+.ft-folder.drop-target {
+    background: var(--color-accent);
+    color: white;
+    outline: 2px solid var(--color-brand-dark);
+    outline-offset: -2px;
+}
+
+.ml-row.dragging {
+    opacity: 0.5;
+}
+
 /* ── Message List ── */
 
 .message-list {
     display: grid;
     grid-template-columns: 1.2em minmax(120px, 200px) auto 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto auto 1fr;
     column-gap: var(--gap-sm);
     overflow: hidden;
     border-right: 1px solid var(--color-border);
@@ -187,6 +227,30 @@
     font-size: var(--font-size-sm);
 }
 
+.ml-filter {
+    grid-column: 1 / -1;
+    padding: 2px var(--gap-xs);
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg-surface);
+}
+
+.ml-filter input {
+    width: 100%;
+    padding: 2px 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-sm);
+    outline: none;
+}
+
+.ml-filter input:focus {
+    border-color: var(--color-accent);
+}
+
+.ml-row.filter-hidden { display: none; }
+
 .ml-header {
     display: grid;
     grid-template-columns: subgrid;
@@ -195,8 +259,8 @@
     border-bottom: 1px solid var(--color-border);
     background: var(--color-bg-toolbar);
     font-size: var(--font-size-sm);
-    font-weight: 600;
-    color: var(--color-text-muted);
+    font-weight: 700;
+    color: var(--color-brand-dark);
     user-select: none;
 
     .ml-col { cursor: pointer; &:hover { color: var(--color-text); } }
@@ -219,10 +283,11 @@
     border-bottom: 1px solid color-mix(in oklch, var(--color-border) 50%, transparent);
     cursor: pointer;
     font-size: var(--font-size-base);
+    color: var(--color-text);
     align-items: baseline;
 
     &:hover { background: var(--color-bg-hover); }
-    &.selected { background: var(--color-bg-selected); color: var(--color-unread); }
+    &.selected { background: var(--color-brand); color: var(--color-brand-dark); font-weight: 600; }
     &.unread {
         font-weight: 600;
         color: var(--color-unread);
@@ -282,21 +347,91 @@
     font-size: var(--font-size-sm);
     line-height: 1.5;
 
+    .mv-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap-sm); }
+    .mv-header-info { flex: 1; min-width: 0; }
+    .mv-header-actions { display: flex; align-items: center; gap: var(--gap-xs); flex-shrink: 0; }
     .mv-from { font-weight: 600; }
     .mv-to { color: var(--color-text-muted); }
     .mv-subject { font-size: var(--font-size-lg); font-weight: 600; margin-top: var(--gap-xs); }
     .mv-date { color: var(--color-text-muted); font-size: var(--font-size-sm); }
+    .mv-unsubscribe {
+        font-size: var(--font-size-sm);
+        color: var(--color-danger);
+        cursor: pointer;
+        text-decoration: underline;
+        white-space: nowrap;
+    }
+    .mv-action {
+        font-size: var(--font-size-sm);
+        padding: 2px 6px;
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-sm);
+        background: transparent;
+        color: var(--color-text-muted);
+        cursor: pointer;
+        white-space: nowrap;
+    }
+    .mv-action:hover { background: var(--color-bg-hover); color: var(--color-text); }
+    .mv-action-primary {
+        background: var(--color-brand-dark) !important;
+        color: white !important;
+        border-color: var(--color-brand-dark) !important;
+    }
+    .mv-action-primary:hover { opacity: 0.85; }
 }
 
 .mv-remote-banner {
+    background: oklch(0.45 0.12 60);
+    color: white;
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+}
+
+.mv-rb-summary {
     display: flex;
     align-items: center;
     gap: var(--gap-sm);
     padding: var(--gap-xs) var(--gap-md);
-    background: oklch(0.45 0.12 60);
-    color: white;
-    font-size: var(--font-size-sm);
+    cursor: pointer;
+    flex-wrap: wrap;
+}
+
+.mv-rb-toggle {
+    font-size: 0.8em;
+    width: 1em;
+    display: inline-block;
+    flex-shrink: 0;
+}
+
+.mv-rb-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
+    margin-left: auto;
+}
+
+.mv-rb-details {
+    padding: var(--gap-xs) var(--gap-md) var(--gap-sm);
+    border-top: 1px solid rgba(255,255,255,0.2);
+}
+
+.mv-rb-info {
+    font-weight: 400;
+    line-height: 1.6;
+    margin-bottom: var(--gap-sm);
+}
+
+.mv-rb-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
+}
+
+.mv-rb-label {
+    color: rgba(255,255,255,0.7);
     font-weight: 600;
+    display: inline-block;
+    min-width: 6em;
 }
 
 .mv-remote-banner button {
@@ -307,6 +442,7 @@
     color: white;
     font-size: var(--font-size-sm);
     cursor: pointer;
+    font-weight: 600;
 }
 
 .mv-remote-banner button:hover {
@@ -315,7 +451,7 @@
 
 .mv-body {
     flex: 1;
-    overflow-y: auto;
+    overflow: hidden;
     background: var(--color-bg-surface);
 
     iframe {
@@ -359,3 +495,40 @@
     font-size: var(--font-size-sm);
     color: var(--color-text-muted);
 }
+
+/* ── Startup Overlay ── */
+
+.startup-overlay {
+    position: fixed;
+    inset: var(--toolbar-height) 0 var(--statusbar-height) 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg);
+    z-index: 100;
+    transition: opacity 0.3s ease;
+}
+
+.startup-overlay.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.startup-content {
+    text-align: center;
+    color: var(--color-text);
+}
+
+.startup-spinner {
+    width: 32px;
+    height: 32px;
+    margin: 0 auto var(--gap-md);
+    border: 3px solid var(--color-border);
+    border-top-color: var(--color-brand-dark);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+#startup-status {
+    font-size: var(--font-size-lg);
+}

package/client/styles/layout.css

@@ -24,7 +24,8 @@ body {
 }
 
 .toolbar { grid-area: toolbar; }
-.folder-tree { grid-area: folders; }
+.folder-panel { grid-area: folders; display: flex; flex-direction: column; overflow: hidden; }
+.folder-tree { flex: 1; overflow-y: auto; }
 .main-area { grid-area: main; }
 .status-bar { grid-area: status; }