npm - @bobfrankston/mailx - Versions diffs - 1.0.394 → 1.0.395 - Mend

@bobfrankston/mailx 1.0.394 → 1.0.395

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/client/android.html +23 -6
package/client/app.js +13 -1
package/client/components/message-list.js +70 -6
package/client/index.html +10 -9
package/client/styles/components.css +17 -0
package/client/styles/layout.css +40 -14
package/package.json +1 -1

package/client/android.html CHANGED Viewed

@@ -59,7 +59,8 @@
 <body>
     <header class="toolbar">
         <div class="toolbar-left">
-            <button class="tb-btn" id="btn-menu" title="Folders" hidden>☰</button>
+            <button class="tb-btn" id="btn-menu" title="Menu / rail" hidden>☰</button>
+            <button class="tb-btn" id="btn-folder-toggle" title="Show / hide folders" hidden>📁</button>
             <button class="tb-btn" id="btn-compose" title="Compose (Ctrl+N)">
                 <span class="tb-icon">✏</span> Compose
             </button>
@@ -68,11 +69,11 @@
             <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-snippet" checked> Preview snippets</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
+                    <label class="tb-menu-item" title="Stack From + Subject on two lines per row, date to the right — denser on narrow windows"><input type="checkbox" id="opt-two-line"> Two-line view</label>
+                    <label class="tb-menu-item" title="Show the reading pane below/beside the message list"><input type="checkbox" id="opt-preview" checked> Preview pane</label>
+                    <label class="tb-menu-item" title="Show a short body-text preview (first ~80 chars) beneath each row's subject"><input type="checkbox" id="opt-snippet" checked> Preview snippets</label>
+                    <label class="tb-menu-item" title="Show only flagged (★) messages in the list"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
+                    <label class="tb-menu-item" title="Show unread/total counts next to each folder in the tree"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
                 </div>
             </div>
             <div class="tb-menu" id="settings-menu">
@@ -109,6 +110,22 @@
         <button class="alert-dismiss" id="alert-dismiss" title="Dismiss">&times;</button>
     </div>
+    <aside class="icon-rail" id="icon-rail" aria-label="App rail">
+        <div class="rail-top">
+            <button class="rail-btn" id="rail-compose" title="Compose" aria-label="Compose">✏</button>
+            <button class="rail-btn" id="rail-inbox" title="Inbox" aria-label="Inbox" data-active="true">✉</button>
+            <button class="rail-btn" id="rail-unified" title="All Inboxes" aria-label="All Inboxes">⌘</button>
+            <button class="rail-btn" id="rail-contacts" title="Contacts" aria-label="Contacts">👤</button>
+            <button class="rail-btn" id="rail-calendar" title="Calendar" aria-label="Calendar">📅</button>
+            <button class="rail-btn" id="rail-tasks" title="Tasks" aria-label="Tasks">☑</button>
+        </div>
+        <div class="rail-bottom">
+            <button class="rail-btn" id="rail-settings" title="Settings" aria-label="Settings">⚙</button>
+            <button class="rail-btn" id="rail-theme" title="Theme" aria-label="Theme">◐</button>
+            <button class="rail-btn" id="rail-help" title="Help" aria-label="Help">?</button>
+        </div>
+    </aside>
     <div class="folder-panel">
         <div class="ft-filter">
             <input type="text" id="ft-filter-input" placeholder="Find folder..." autocomplete="off">

package/client/app.js CHANGED Viewed

@@ -390,9 +390,21 @@ if (messageList) {
         }
     }).observe(messageList);
 }
-// ── Narrow screen navigation ──
+// ── Narrow/medium drawer toggles ──
+// Hamburger (☰): rail drawer on narrow; on wider tiers the rail is already
+// visible so this is a no-op visually (the toggle still fires but the rail
+// has no `.open` style to invoke).
+// Folder (📁): folder-panel drawer on any tier where it's positioned as an
+// overlay (medium + narrow).
 document.getElementById("btn-menu")?.addEventListener("click", () => {
+    document.querySelector(".icon-rail")?.classList.toggle("open");
+    // Rail drawer and folder drawer are mutually exclusive — opening one
+    // closes the other so they don't fight for the left edge.
+    document.querySelector(".folder-panel")?.classList.remove("open");
+});
+document.getElementById("btn-folder-toggle")?.addEventListener("click", () => {
     document.querySelector(".folder-panel")?.classList.toggle("open");
+    document.querySelector(".icon-rail")?.classList.remove("open");
 });
 const backToList = (e) => {
     e.preventDefault();

package/client/components/message-list.js CHANGED Viewed

@@ -65,6 +65,34 @@ function clearSelection() {
     if (body)
         body.querySelectorAll(".ml-row.selected").forEach(r => r.classList.remove("selected"));
 }
+/** Exit multi-select mode (entered via touch long-press). Clears selection
+ *  and the sticky body flag so subsequent taps open messages again. */
+function exitMultiSelect() {
+    const body = document.getElementById("ml-body");
+    if (!body?.classList.contains("multi-select-on"))
+        return;
+    body.classList.remove("multi-select-on");
+    clearSelection();
+}
+// Escape key + click-outside-list exit multi-select mode. Attached once
+// (idempotent because document only has one listener scope per handler).
+if (!window.__mailxMultiSelectWired) {
+    window.__mailxMultiSelectWired = true;
+    document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape")
+            exitMultiSelect();
+    });
+    document.addEventListener("pointerdown", (e) => {
+        const body = document.getElementById("ml-body");
+        if (!body?.classList.contains("multi-select-on"))
+            return;
+        const target = e.target;
+        // A tap on a row is handled by the row's own click listener; only
+        // exit when the tap is on neutral ground (outside the list entirely).
+        if (!target.closest(".ml-row"))
+            exitMultiSelect();
+    }, true);
+}
 function selectRange(from, to) {
     const body = document.getElementById("ml-body");
     if (!body)
@@ -636,6 +664,15 @@ function appendMessages(body, accountId, items) {
                 touchWasScroll = false;
                 return;
             }
+            // Multi-select mode (entered via long-press on touch): taps toggle
+            // rows instead of opening messages. Exit mode when the user taps
+            // outside any row or presses Escape (handled at the body level).
+            const body = row.parentElement;
+            if (body?.classList.contains("multi-select-on")) {
+                row.classList.toggle("selected");
+                lastClickedRow = row;
+                return;
+            }
             if (e.shiftKey && lastClickedRow) {
                 clearSelection();
                 selectRange(lastClickedRow, row);
@@ -700,12 +737,30 @@ function appendMessages(body, accountId, items) {
                 clearTimeout(longPressTimer);
             longPressTimer = setTimeout(() => {
                 longPressTimer = null;
-                // Synthesize a contextmenu event so the existing handler below
-                // owns all the menu logic — no per-event duplication.
-                const ev = new MouseEvent("contextmenu", {
-                    clientX: cx, clientY: cy, bubbles: true, cancelable: true,
-                });
-                row.dispatchEvent(ev);
+                // Long-press semantics:
+                //   - If the list is already in multi-select mode, toggle this
+                //     row's selected state (so the user can extend a selection
+                //     without needing a second long-press-and-menu dance).
+                //   - Otherwise enter multi-select mode: mark THIS row selected
+                //     and add a sticky class on the body so future taps toggle
+                //     instead of opening messages. Tap elsewhere or press
+                //     Escape to exit.
+                const body = row.parentElement;
+                const alreadyMulti = body?.classList.contains("multi-select-on");
+                if (alreadyMulti) {
+                    row.classList.toggle("selected");
+                }
+                else {
+                    clearSelection();
+                    row.classList.add("selected");
+                    body?.classList.add("multi-select-on");
+                }
+                lastClickedRow = row;
+                // Haptic hint if the platform supports it (Android WebView does).
+                try {
+                    navigator.vibrate?.(20);
+                }
+                catch { /* */ }
             }, LONG_PRESS_MS);
         }, { passive: true });
         const cancelLongPress = () => {
@@ -800,6 +855,15 @@ function appendMessages(body, accountId, items) {
                     action: () => document.dispatchEvent(new CustomEvent("mailx-delete")),
                 },
                 { label: "", action: () => { }, separator: true },
+                {
+                    label: "⚠ Mark as spam",
+                    action: () => document.getElementById("btn-spam")?.click(),
+                },
+                {
+                    label: "🚫 Report spam",
+                    action: () => document.getElementById("btn-spam-report")?.click(),
+                },
+                { label: "", action: () => { }, separator: true },
                 {
                     label: "Copy Message-ID",
                     action: async () => {

package/client/index.html CHANGED Viewed

@@ -13,7 +13,8 @@
 <body>
     <header class="toolbar">
         <div class="toolbar-left">
-            <button class="tb-btn" id="btn-menu" title="Folders" hidden>☰</button>
+            <button class="tb-btn" id="btn-menu" title="Menu / rail" hidden>☰</button>
+            <button class="tb-btn" id="btn-folder-toggle" title="Show / hide folders" hidden>📁</button>
             <button class="tb-btn" id="btn-compose" title="Compose (Ctrl+N)">
                 <span class="tb-icon">✏</span><span class="tb-label"> Compose</span>
             </button>
@@ -22,14 +23,14 @@
             <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-snippet" checked> Preview snippets</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-threaded"> Group by thread</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-thread-filter"> Only this conversation</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
-                    <label class="tb-menu-item"><input type="checkbox" id="opt-calendar-sidebar"> Calendar sidebar</label>
+                    <label class="tb-menu-item" title="Stack From + Subject on two lines per row, date to the right — denser on narrow windows"><input type="checkbox" id="opt-two-line"> Two-line view</label>
+                    <label class="tb-menu-item" title="Show the reading pane to the right of the message list"><input type="checkbox" id="opt-preview" checked> Preview pane</label>
+                    <label class="tb-menu-item" title="Show a short body-text preview (first ~80 chars) beneath each row's subject"><input type="checkbox" id="opt-snippet" checked> Preview snippets</label>
+                    <label class="tb-menu-item" title="Collapse reply chains to one row showing the newest message; a pill shows thread size"><input type="checkbox" id="opt-threaded"> Group by thread</label>
+                    <label class="tb-menu-item" title="Filter the list to rows sharing the selected message's thread (set selection first)"><input type="checkbox" id="opt-thread-filter"> Only this conversation</label>
+                    <label class="tb-menu-item" title="Show only flagged (★) messages in the list"><input type="checkbox" id="opt-flagged"> ★ Flagged only</label>
+                    <label class="tb-menu-item" title="Show unread/total counts next to each folder in the tree"><input type="checkbox" id="opt-folder-counts"> Folder counts</label>
+                    <label class="tb-menu-item" title="Show the right-side calendar/tasks sidebar (Thunderbird-Lightning style)"><input type="checkbox" id="opt-calendar-sidebar"> Calendar sidebar</label>
                 </div>
             </div>
             <div class="tb-menu" id="settings-menu">

package/client/styles/components.css CHANGED Viewed

@@ -900,6 +900,23 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
    list empty when the selection is a singleton thread. */
 .ml-row.thread-filter-hidden { display: none; }
+/* Multi-select mode (entered by long-press on touch or Ctrl/Shift click on
+   desktop). Add a left-edge accent bar so it's visually clear the list is
+   in selection mode, not navigation mode. */
+#ml-body.multi-select-on .ml-row::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--color-brand, oklch(0.65 0.14 250));
+    opacity: 0.25;
+}
+#ml-body.multi-select-on .ml-row.selected::before {
+    opacity: 1;
+}
 /* Info banner inside a modal — used by the Add-contact dialog to surface
    "already in address book" duplicate notices. Amber tone so it reads as
    "heads up" not "error". */

package/client/styles/layout.css CHANGED Viewed

@@ -153,10 +153,15 @@ body.calendar-sidebar-on {
             "status   status";
     }
-    /* Folder panel: overlay slide-in from left, sitting just to the right of the rail */
+    /* Folder panel: FULLY off-screen when closed — previously `calc(48px -
+       280px) = -232px` left a 48 px tail showing behind the rail, which on
+       Android (where the rail isn't always rendered) leaked a strip of
+       folder-row badges at the left edge of the viewport. Now the closed
+       panel is flush off-screen at `-280px` and the `.open` slide-in starts
+       at the rail's right edge. */
     .folder-panel {
         position: fixed;
-        left: calc(var(--rail-width, 48px) - 280px);
+        left: -280px;
         top: var(--toolbar-height);
         bottom: var(--statusbar-height);
         width: 280px;
@@ -168,14 +173,19 @@ body.calendar-sidebar-on {
     }
     .folder-panel.open { left: var(--rail-width, 48px); }
-    /* Show hamburger */
-    #btn-menu { display: inline-flex !important; }
+    /* Medium tier has the rail visible permanently — no hamburger needed.
+       Show the folder-toggle (📁) so the user can still reveal the folder
+       tree on demand. */
+    #btn-menu { display: none !important; }
+    #btn-folder-toggle { display: inline-flex !important; }
 }
 /* Responsive: narrow OR short viewport — single panel navigation */
 @media (max-width: 768px), (max-height: 600px) {
-    /* Hide preview snippet under message subject — save space */
-    .ml-preview { display: none; }
+    /* Preview snippets remain visible on narrow — user-controlled via the
+       View menu's "Preview snippets" checkbox. Previously this rule forced
+       them hidden on any narrow viewport, so Android users never saw the
+       checkbox take effect. */
     /* Column headers (From/Date/Subject) take space without being useful on narrow */
     .ml-header { display: none; }
     /* Current folder name shown above the list, Dovecot-style */
@@ -208,12 +218,25 @@ body.calendar-sidebar-on {
             "status";
     }
-    /* Rail hidden on narrow — its commands fold into the hamburger / toolbar.
-       Future work: a slide-in rail behind the hamburger so power-users on phone
-       can still reach calendar/contacts/etc. */
-    .icon-rail { display: none; }
+    /* Rail on narrow: slide-in drawer triggered by the hamburger (☰). The
+       rail is the entry point to Inbox / All-Inboxes / Contacts / Calendar /
+       Tasks / Settings — without this drawer, narrow-tier users couldn't
+       reach any of those. */
+    .icon-rail {
+        display: flex;
+        position: fixed;
+        left: -64px;
+        top: var(--toolbar-height);
+        bottom: var(--statusbar-height);
+        z-index: 60;
+        transition: left 0.2s ease;
+        box-shadow: 2px 0 8px rgba(0,0,0,0.3);
+    }
+    .icon-rail.open { left: 0; }
-    /* Folder panel: overlay slide-in from left */
+    /* Folder panel: slide-in drawer triggered by the folder icon (📁).
+       Kept separate from the rail drawer so the user can have folders open
+       while the rail is closed, or vice versa — matching the desktop flow. */
     .folder-panel {
         position: fixed;
         left: -280px;
@@ -246,8 +269,10 @@ body.calendar-sidebar-on {
     }
     .message-list.narrow-hidden { display: none; }
-    /* Show hamburger always on narrow */
+    /* Hamburger opens the rail drawer; folder-toggle opens the folder drawer.
+       Both always visible on narrow so the user can reach either. */
     #btn-menu { display: inline-flex !important; }
+    #btn-folder-toggle { display: inline-flex !important; }
     /* Back button: only show when viewer is active (message list hidden) */
     #btn-back { display: none !important; }
     .message-viewer.narrow-active ~ * #btn-back,
@@ -280,7 +305,8 @@ body.calendar-sidebar-on {
     }
 }
-/* Hide hamburger and back on wide screens (folder panel always visible) */
+/* Hide hamburger, folder-toggle, and back on wide screens (folder panel
+   permanent column, rail permanent column, no drawer toggles needed). */
 @media (min-width: 1101px) {
-    #btn-menu, #btn-back { display: none !important; }
+    #btn-menu, #btn-folder-toggle, #btn-back { display: none !important; }
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bobfrankston/mailx",
-  "version": "1.0.394",
+  "version": "1.0.395",
   "description": "Local-first email client with IMAP sync and standalone native app",
   "type": "module",
   "main": "bin/mailx.js",