@bobfrankston/mailx 1.0.1

package/client/lib/api-client.js

@@ -0,0 +1,67 @@
+/**
+ * REST + WebSocket client for communicating with mailx-server.
+ * All server communication goes through here.
+ */
+/** Generic fetch wrapper */
+async function api(path, options) {
+    const res = await fetch(`/api${path}`, {
+        headers: { "Content-Type": "application/json" },
+        ...options
+    });
+    if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: res.statusText }));
+        throw new Error(err.error || res.statusText);
+    }
+    return res.json();
+}
+// ── REST Methods ──
+export function getAccounts() {
+    return api("/accounts");
+}
+export function getFolders(accountId) {
+    return api(`/folders/${accountId}`);
+}
+export function getMessages(accountId, folderId, page = 1, pageSize = 50) {
+    return api(`/messages/${accountId}/${folderId}?page=${page}&pageSize=${pageSize}`);
+}
+export function searchMessages(query, page = 1, pageSize = 50) {
+    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" : "";
+    return api(`/message/${accountId}/${uid}${q}`);
+}
+export function updateFlags(accountId, uid, flags) {
+    return api(`/message/${accountId}/${uid}/flags`, {
+        method: "PATCH",
+        body: JSON.stringify({ flags })
+    });
+}
+export function triggerSync() {
+    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);
+}
+//# sourceMappingURL=api-client.js.map

package/client/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@bobfrankston/mailx-client",
+  "version": "1.0.1",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "quill": "^2.0.0"
+  }
+}

package/client/styles/components.css

@@ -0,0 +1,361 @@
+/* mailx component styles */
+
+/* ── Toolbar ── */
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--gap-sm);
+    background: oklch(0.82 0.06 240); /* DEBUG: light blue toolbar */
+    border-bottom: 1px solid var(--color-border);
+    gap: var(--gap-sm);
+
+    .toolbar-left, .toolbar-right {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-xs);
+    }
+}
+
+.tb-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-xs);
+    padding: var(--gap-xs) var(--gap-sm);
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover { background: var(--color-bg-hover); }
+    &:disabled { opacity: 0.4; cursor: default; }
+    &:disabled:hover { background: transparent; }
+}
+
+.tb-icon { font-size: 1.1em; }
+.tb-btn.syncing .tb-icon { animation: spin 1s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.app-version { font-size: var(--font-size-sm); color: var(--color-text-muted); }
+
+.tb-menu { position: relative; display: inline-block; }
+.tb-menu-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: var(--color-bg-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--gap-xs) 0;
+    z-index: 100;
+    min-width: 160px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+.tb-menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-sm);
+    padding: var(--gap-xs) var(--gap-md);
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+    white-space: nowrap;
+}
+.tb-menu-item:hover { background: var(--color-bg-hover); }
+.tb-menu-item input[type="checkbox"] { accent-color: var(--color-accent); }
+.tb-sep { width: 1px; height: 1.2rem; background: var(--color-border); margin: 0 var(--gap-xs); }
+
+#search-input {
+    padding: var(--gap-xs) var(--gap-sm);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-bg-surface);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    width: 200px;
+
+    &::placeholder { color: var(--color-text-muted); }
+    &:focus { outline: 1px solid var(--color-accent); border-color: var(--color-accent); }
+}
+
+/* ── Folder Tree ── */
+
+.folder-tree {
+    overflow-y: auto;
+    background: var(--color-bg-surface);
+    border-right: 1px solid var(--color-border);
+    padding: var(--gap-sm) 0;
+}
+
+.ft-account {
+    margin-bottom: var(--gap-sm);
+}
+
+.ft-account-header {
+    display: flex;
+    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);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    user-select: none;
+}
+
+.ft-toggle {
+    display: inline-block;
+    width: 1em;
+    text-align: center;
+    font-size: 0.8em;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.ft-unified {
+    font-weight: 600;
+    color: var(--color-accent);
+}
+
+.ft-folder {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    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);
+    border-radius: 0;
+
+    &:hover { background: var(--color-bg-hover); }
+    &.selected { background: var(--color-bg-selected); color: var(--color-accent); }
+}
+
+.ft-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.ft-badge {
+    font-size: 0.7rem;
+    padding: 0.1rem 0.4rem;
+    border-radius: 999px;
+    background: var(--color-badge);
+    color: white;
+    font-weight: 600;
+    min-width: 1.2rem;
+    text-align: center;
+}
+
+.folder-loading {
+    padding: var(--gap-lg);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+}
+
+/* ── Message List ── */
+
+.message-list {
+    display: grid;
+    grid-template-columns: 1.2em minmax(120px, 200px) auto 1fr;
+    grid-template-rows: auto 1fr;
+    column-gap: var(--gap-sm);
+    overflow: hidden;
+    border-right: 1px solid var(--color-border);
+}
+
+/* Two-line view */
+.message-list.two-line {
+    grid-template-columns: 1.2em 1fr auto;
+}
+
+.message-list.two-line .ml-row {
+    grid-template-columns: subgrid;
+    grid-template-rows: auto auto;
+}
+
+.message-list.two-line .ml-flag { grid-row: 1 / 3; align-self: center; }
+.message-list.two-line .ml-from { grid-column: 2; }
+.message-list.two-line .ml-date { grid-column: 3; grid-row: 1; padding-right: var(--gap-md); }
+.message-list.two-line .ml-subject {
+    grid-column: 2 / 4;
+    grid-row: 2;
+    color: oklch(0.55 0.10 250) !important;
+    font-size: var(--font-size-sm);
+}
+
+.ml-header {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    padding: var(--gap-xs) var(--gap-sm);
+    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);
+    user-select: none;
+
+    .ml-col { cursor: pointer; &:hover { color: var(--color-text); } }
+}
+
+.ml-body {
+    grid-column: 1 / -1;
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: subgrid;
+    align-content: start;
+    scrollbar-gutter: stable;
+}
+
+.ml-row {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    padding: var(--gap-sm) var(--gap-sm);
+    border-bottom: 1px solid color-mix(in oklch, var(--color-border) 50%, transparent);
+    cursor: pointer;
+    font-size: var(--font-size-base);
+    align-items: baseline;
+
+    &:hover { background: var(--color-bg-hover); }
+    &.selected { background: var(--color-bg-selected); color: var(--color-unread); }
+    &.unread {
+        font-weight: 600;
+        color: var(--color-unread);
+    }
+}
+
+.ml-flag { text-align: center; color: var(--color-text-muted); font-size: 0.9em; cursor: pointer; }
+.flagged-only .ml-row:not(.flagged) { display: none; }
+.ml-row.flagged .ml-flag { color: oklch(0.75 0.15 60); } /* orange/gold star */
+.ml-row.flagged { background: color-mix(in oklch, oklch(0.75 0.15 60) 8%, transparent); }
+
+.ml-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ml-subject {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .ml-preview {
+        color: var(--color-text-muted);
+        font-weight: 400;
+        margin-left: var(--gap-xs);
+    }
+}
+.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-empty {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--color-text-muted);
+    font-size: var(--font-size-base);
+}
+
+.mv-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--color-text-muted);
+    font-size: var(--font-size-base);
+}
+
+/* ── Message Viewer ── */
+
+.message-viewer {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.mv-header {
+    padding: var(--gap-sm) var(--gap-md);
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg-surface);
+    font-size: var(--font-size-sm);
+    line-height: 1.5;
+
+    .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-remote-banner {
+    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);
+    font-weight: 600;
+}
+
+.mv-remote-banner button {
+    padding: var(--gap-xs) var(--gap-sm);
+    border: 1px solid white;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: white;
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+}
+
+.mv-remote-banner button:hover {
+    background: rgba(255,255,255,0.2);
+}
+
+.mv-body {
+    flex: 1;
+    overflow-y: auto;
+    background: var(--color-bg-surface);
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+}
+
+.mv-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-xs);
+    padding: var(--gap-sm) var(--gap-md);
+    border-top: 1px solid var(--color-border);
+    background: var(--color-bg-toolbar);
+}
+
+.mv-att-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gap-xs);
+    padding: var(--gap-xs) var(--gap-sm);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+
+    &:hover { background: var(--color-bg-hover); }
+}
+
+/* ── Status Bar ── */
+
+.status-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--gap-lg);
+    padding: 0 var(--gap-sm);
+    background: var(--color-bg-toolbar);
+    border-top: 1px solid var(--color-border);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+}

package/client/styles/layout.css

@@ -0,0 +1,69 @@
+/* mailx layout -- CSS Grid adaptive structure */
+
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: grid;
+    grid-template-columns: var(--folder-width) 1fr;
+    grid-template-rows: var(--toolbar-height) 1fr var(--statusbar-height);
+    grid-template-areas:
+        "toolbar  toolbar"
+        "folders  main"
+        "status   status";
+    height: 100vh;
+    overflow: hidden;
+    font-family: var(--font-ui);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height);
+    color: var(--color-text);
+    background: var(--color-bg);
+}
+
+.toolbar { grid-area: toolbar; }
+.folder-tree { grid-area: folders; }
+.main-area { grid-area: main; }
+.status-bar { grid-area: status; }
+
+/* Main area: message list left, viewer right, vertical splitter */
+.main-area {
+    display: grid;
+    grid-template-columns: var(--list-viewer-split) var(--splitter-size) 1fr;
+    grid-template-rows: 1fr;
+    overflow: hidden;
+    container-type: inline-size;
+    container-name: main;
+}
+
+/* Preview pane hidden */
+.main-area.no-preview {
+    grid-template-columns: 1fr;
+}
+.main-area.no-preview .splitter,
+.main-area.no-preview .message-viewer { display: none; }
+.main-area.no-preview .message-list { border-right: none; }
+
+/* Splitter */
+.splitter {
+    background: var(--color-border);
+    cursor: col-resize;
+    transition: background 0.15s;
+
+    &:hover, &:active {
+        background: var(--color-accent);
+    }
+}
+
+/* Responsive: narrow viewport stacks everything */
+@container main (width <= 600px) {
+    .main-area {
+        grid-template-columns: 1fr;
+    }
+    .splitter { display: none; }
+    .message-viewer { display: none; }
+    .message-viewer.active { display: block; }
+    .message-list.hidden { display: none; }
+}

package/launch.ps1

@@ -0,0 +1,20 @@
+# Launch mailx email client
+#
+# Usage: launch.ps1 [-dev] [-prod] [-restart]
+#   -dev      (default) Start server with --watch for auto-restart on file changes
+#   -prod     Start server without --watch
+#   -restart  Kill existing server on port 9333 before starting
+#
+# The launcher starts the Node server (if not running) and opens a WebView2 window.
+# Server: http://localhost:9333
+# Log: mailx.log
+# Data: ~/.mailx/ (DB, store, settings pointer)
+
+$exe = "$PSScriptRoot\launcher\target\debug\mailx-app.exe"
+
+if (-not (Test-Path $exe)) {
+    Write-Host "Launcher not built. Run: launcher\build.cmd"
+    exit 1
+}
+
+Start-Process $exe -ArgumentList $args