@bobfrankston/rmfmail 1.2.101 → 1.2.102

package/client/app.ts

@@ -4286,10 +4286,10 @@ optTwoLine?.addEventListener("change", () => {
     localStorage.setItem("mailx-two-line", String(optTwoLine.checked));
 });
 
-// Eleanor view toggle — Thunderbird-classic one-line summary list
-// (★ | Subject | From | Date, whitespace, monochrome). Pure CSS class;
-// the row markup is unchanged. TODO.md: generalize into per-column view
-// control instead of a named preset.
+// Eleanor view toggle — Thunderbird-classic two-line card list at every
+// width (From … Date / Subject, outlined entries, airy, monochrome).
+// Pure CSS class; the row markup is unchanged. TODO.md: generalize into
+// per-column view control instead of a named preset.
 function applyEleanorView(on: boolean): void {
     document.getElementById("message-list")?.classList.toggle("eleanor-view", on);
     if (optEleanor) optEleanor.checked = on;

package/client/styles/components.css

@@ -539,39 +539,49 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
 }
 
 /* ── Eleanor view ──────────────────────────────────────────────────────
-   Thunderbird-classic summary list: one line per message in table order
-   ★ | Subject | From | Date — no avatar, no snippet, no row tinting,
-   generous row padding. Named for its first user; TODO.md tracks
-   generalizing it into proper per-column view control.
-   :not(.two-line) — below 600px the ResizeObserver forces two-line,
-   which must keep winning there; a one-line table is unusable that
-   narrow anyway. The monochrome rules below apply in both cases. */
-.message-list.eleanor-view:not(.two-line) {
-    /* flag | subject | from | date */
-    grid-template-columns: 1.7em minmax(0, 1fr) minmax(140px, 220px) auto;
+   Thunderbird-classic two-line card list at EVERY width: From … Date on
+   the first line, Subject on the second, each entry outlined and set off
+   with breathing room. No avatar, no snippet, monochrome rows. Named for
+   its first user; TODO.md tracks generalizing it into per-column view
+   control with drag-reorder.
+   Defined without reference to .two-line so the layout is identical
+   whether the ResizeObserver has forced two-line (narrow) or not (wide);
+   these rules sit after the .two-line block, so they win when both
+   classes are present. */
+.message-list.eleanor-view {
+    /* flag | from + subject | date */
+    grid-template-columns: 1.7em minmax(0, 1fr) auto;
     column-gap: var(--gap-md);
 }
-.message-list.eleanor-view:not(.two-line) .ml-row {
-    grid-template-rows: auto;
-    padding-top: 9px;
-    padding-bottom: 9px;
+.message-list.eleanor-view .ml-row {
+    grid-template-columns: subgrid;
+    grid-template-rows: auto auto;
+    margin: var(--gap-xs) var(--gap-sm);
+    padding: 8px var(--gap-sm);
+    border: 1px solid color-mix(in oklch, var(--color-text-muted) 55%, transparent);
+    border-radius: 4px;
     line-height: 1.5;
 }
-.message-list.eleanor-view:not(.two-line) .ml-avatar { display: none; }
-.message-list.eleanor-view:not(.two-line) .ml-flag { grid-column: 1; grid-row: 1; font-size: 1.15em; }
-.message-list.eleanor-view:not(.two-line) .ml-subject {
-    grid-column: 2; grid-row: 1;
+.message-list.eleanor-view .ml-avatar { display: none; }
+.message-list.eleanor-view .ml-flag { grid-column: 1; grid-row: 1 / 3; align-self: center; font-size: 1.15em; }
+.message-list.eleanor-view .ml-from { grid-column: 2; grid-row: 1; }
+.message-list.eleanor-view .ml-date { grid-column: 3; grid-row: 1; padding-right: var(--gap-md); }
+.message-list.eleanor-view .ml-subject {
+    grid-column: 2 / 4;
+    grid-row: 2;
+    /* !important beats the two-line block's !important accent color when
+       both classes are present; muted gray keeps the view monochrome. */
+    color: var(--color-text-muted) !important;
+    font-size: var(--font-size-base);
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.message-list.eleanor-view:not(.two-line) .ml-from { grid-column: 3; grid-row: 1; }
-.message-list.eleanor-view:not(.two-line) .ml-date { grid-column: 4; grid-row: 1; padding-right: var(--gap-md); }
-/* Sortable header follows the remapped column order. */
-.message-list.eleanor-view:not(.two-line) .ml-col-avatar { display: none; }
-.message-list.eleanor-view:not(.two-line) .ml-col-flag { grid-column: 1; }
-.message-list.eleanor-view:not(.two-line) .ml-col-subject { grid-column: 2; grid-row: 1; }
-.message-list.eleanor-view:not(.two-line) .ml-col-from { grid-column: 3; grid-row: 1; }
-.message-list.eleanor-view:not(.two-line) .ml-col-date { grid-column: 4; grid-row: 1; }
-/* Single clean line: no body snippet after the subject. */
+/* Sortable header mirrors the row anatomy (Subject on its own line). */
+.message-list.eleanor-view .ml-col-avatar { display: none; }
+.message-list.eleanor-view .ml-col-flag { grid-column: 1; grid-row: 1; }
+.message-list.eleanor-view .ml-col-from { grid-column: 2; grid-row: 1; }
+.message-list.eleanor-view .ml-col-date { grid-column: 3; grid-row: 1; }
+.message-list.eleanor-view .ml-col-subject { grid-column: 2 / 4; grid-row: 2; }
+/* Clean rows: no body snippet after the subject. */
 .message-list.eleanor-view .ml-preview { display: none; }
 /* Monochrome: unread speaks through weight alone; flagged rows keep the
    gold ★ glyph but lose the row wash; priority loses bar + tint. The
@@ -579,7 +589,8 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
 .message-list.eleanor-view .ml-row.unread { color: var(--color-text); }
 .message-list.eleanor-view .ml-row.flagged:not(.selected) { background: transparent; }
 .message-list.eleanor-view .ml-row.priority:not(.selected) {
-    border-left: none;
+    /* replace the gold accent bar with the card's own outline */
+    border-left: 1px solid color-mix(in oklch, var(--color-text-muted) 55%, transparent);
     padding-left: var(--gap-sm);
     background: transparent;
 }

package/package.json

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