domma-cms 0.54.2 → 0.66.0

package/plugins/_lib/admin/mail/keyboard.js

@@ -0,0 +1,136 @@
+/**
+ * Keyboard navigation for the reader.
+ *
+ * A mail client that needs the mouse for every message is a mail client people
+ * stop using at volume. The bindings follow what mail clients have agreed on
+ * for decades - j/k and the arrows to move, Enter to open, r to reply - so
+ * nobody has to learn them.
+ *
+ * Two rules keep it out of the way:
+ *
+ *   - While the caret is in a field, the keyboard belongs to the field. A
+ *     shortcut that fires while someone is typing a subject line is a bug, not
+ *     a feature, so anything with a text target is ignored outright.
+ *   - Only plain keypresses are claimed. Ctrl, Alt and Meta combinations
+ *     belong to the browser and the operating system.
+ *
+ * @module _lib/admin/mail/keyboard
+ */
+
+/**
+ * Is the keyboard currently someone's typing surface?
+ *
+ * @param   {EventTarget|null} target
+ * @returns {boolean}
+ */
+export function isTyping(target) {
+    if (!target) return false;
+    // Duck-typed rather than `instanceof Element`: that check fails across
+    // realms - an element inside an iframe is not the same Element - and it
+    // makes this untestable outside a browser for no benefit.
+    if (target.isContentEditable === true) return true;
+    const tag = target.tagName;
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+}
+
+/**
+ * Should this event be considered at all?
+ *
+ * @param   {KeyboardEvent} event
+ * @returns {boolean}
+ */
+export function isPlainKey(event) {
+    return !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+
+/**
+ * Work out what a keypress means.
+ *
+ * Returned as an intent rather than performed, so the mapping can be tested
+ * without a browser and the view keeps every decision about what to do.
+ *
+ * @param   {{key: string, shiftKey?: boolean}} event
+ * @param   {{pane: 'folders'|'messages'}} context
+ * @returns {{action: string, delta?: number}|null}
+ */
+export function resolveKey(event, context) {
+    // Lower-cased, because holding Shift changes what the browser reports:
+    // Shift-R arrives as `R`, not `r` with a flag. Matching on the raw value
+    // meant Shift-R fell through to nothing at all, while a test written as
+    // `{key: 'r', shiftKey: true}` - which no browser sends - passed happily.
+    // Only single characters: `ArrowDown` and `Escape` must keep their case.
+    const key = event.key?.length === 1 ? event.key.toLowerCase() : event.key;
+    const inMessages = context.pane === 'messages';
+
+    switch (key) {
+        case 'ArrowDown':
+        case 'j':
+            return {action: inMessages ? 'moveMessage' : 'moveFolder', delta: 1};
+        case 'ArrowUp':
+        case 'k':
+            return {action: inMessages ? 'moveMessage' : 'moveFolder', delta: -1};
+
+        case 'ArrowRight':
+            // Rightwards is "into" - from the folder list to its messages, and
+            // from a message to its body.
+            return {action: inMessages ? 'focusReader' : 'enterFolder'};
+        case 'ArrowLeft':
+            return {action: 'focusFolders'};
+
+        case 'Enter':
+            return {action: inMessages ? 'openMessage' : 'enterFolder'};
+
+        case 'u':
+            return {action: 'toggleUnread'};
+        case 's':
+            return {action: 'toggleStar'};
+        case 'r':
+            return {action: event.shiftKey ? 'replyAll' : 'reply'};
+        case 'f':
+            return {action: 'forward'};
+        case 'c':
+            return {action: 'compose'};
+        case '/':
+            return {action: 'search'};
+        case 'x':
+            // What Gmail uses. Until this existed, selecting needed a mouse
+            // and a modifier key, so a tablet could not select at all.
+            return {action: 'toggleSelect'};
+        case 'a':
+            if (event.shiftKey) return {action: 'selectAll'};
+            return {action: 'replyAll'};
+        case '!':
+            // What Gmail and SnappyMail both use, so the muscle memory
+            // carries over. Which way it goes depends on the folder, which
+            // the view knows and this does not.
+            return {action: 'spam'};
+        case '#':
+        case 'Delete':
+            return {action: 'delete'};
+        case 'Escape':
+            return {action: 'escape'};
+        case '?':
+            return {action: 'help'};
+        default:
+            return null;
+    }
+}
+
+/** What the help panel lists, in the order it shows them. */
+export const SHORTCUTS = [
+    ['↑ ↓ or j k', 'Move through the list'],
+    ['← →', 'Between folders and messages'],
+    ['Enter', 'Open'],
+    ['u', 'Mark read or unread'],
+    ['s', 'Star or unstar'],
+    ['r / Shift-R', 'Reply / reply all'],
+    ['f', 'Forward'],
+    ['c', 'New message'],
+    ['/', 'Search'],
+    ['x', 'Select or deselect'],
+    ['Shift-A', 'Select all on this page'],
+    ['!', 'Mark as spam, or not spam'],
+    ['# or Delete', 'Delete'],
+    ['Esc', 'Clear search or selection'],
+    ['?', 'This list']
+];

package/plugins/_lib/admin/mail/mail.css

@@ -0,0 +1 @@
+#view-container.mail-fullbleed{max-width:none}.mail-layout [hidden],.dm-slideover [hidden]{display:none!important}.mail-reader-summary{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}.mail-header-toggle,.mail-extras-toggle{padding:0!important;font-size:.78rem;opacity:.75;text-decoration:underline}.mail-header-toggle:hover,.mail-extras-toggle:hover{opacity:1}.mail-header-details{display:grid;grid-template-columns:max-content 1fr;gap:.15rem .75rem;margin:.5rem 0 0;font-size:.8rem}.mail-header-details dt{opacity:.65}.mail-header-details dd{margin:0;overflow-wrap:anywhere}.mail-layout{display:grid;grid-template-columns:var(--mail-col-1, 190px) auto var(--mail-col-2, 340px) auto 1fr;height:calc(100vh - 140px);min-height:320px;border:1px solid var(--dm-border, #e2e8f0);border-radius:var(--dm-radius-md, 8px);overflow:hidden;background:var(--dm-surface, #fff)}.mail-folders-pane,.mail-list-pane{display:flex;flex-direction:column;border-right:1px solid var(--dm-border, #e2e8f0);min-width:0;min-height:0}.mail-reader-pane{display:flex;flex-direction:column;min-width:0;min-height:0}.mail-pane-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--dm-text-muted, #64748b);border-bottom:1px solid var(--dm-border, #e2e8f0);flex-shrink:0}.mail-folders-list,.mail-list{overflow-y:auto;flex:1;min-height:0}.mail-search{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-bottom:1px solid var(--dm-border, #e2e8f0);color:var(--dm-text-muted, #64748b);flex-shrink:0}.mail-search input{flex:1;min-width:0;font-size:.85rem;padding:.25rem .4rem}.mail-search-note{padding:.3rem .6rem;font-size:.74rem;color:var(--dm-text-muted, #64748b);border-bottom:1px solid var(--dm-border, #e2e8f0);flex-shrink:0}.mail-slideover-resizer{padding:0;position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:2;background:transparent}.mail-slideover-resizer:hover,.is-resizing>.mail-slideover-resizer{background:var(--dm-primary, #2563eb);opacity:.7}.is-resizing{user-select:none;transition:none!important}.mail-selection{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;padding:.35rem .6rem;font-size:.78rem;background:var(--dm-primary, #2563eb);color:#fff;flex-shrink:0}.mail-selection span{flex:1;min-width:0}.mail-selection .btn{color:#fff;border:1px solid currentColor;background:transparent}.mail-selection .btn:hover{background:#ffffff26}.mail-item.is-selected{background:var(--dm-active-bg, rgba(15, 23, 42, .07));box-shadow:inset 3px 0 0 var(--dm-primary, #2563eb)}.mail-undo{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;font-size:.78rem;background:var(--dm-active-bg, rgba(15, 23, 42, .07));border-bottom:1px solid var(--dm-border, #e2e8f0);flex-shrink:0}.mail-undo span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-splitter{width:5px;cursor:col-resize;background:var(--dm-border, #e2e8f0);flex-shrink:0;background-clip:content-box;border-left:2px solid transparent;border-right:2px solid transparent;box-sizing:content-box}.mail-splitter:hover,.mail-layout.is-resizing .mail-splitter{background-color:var(--dm-primary, #2563eb)}.mail-layout.is-resizing{user-select:none}.mail-layout.is-resizing .mail-folders-pane,.mail-layout.is-resizing .mail-list-pane,.mail-layout.is-resizing .mail-reader-pane,.mail-layout.is-resizing iframe{pointer-events:none}.mail-unread-filter{display:flex;align-items:center;gap:.3rem;font-size:.7rem;text-transform:none;letter-spacing:0;cursor:pointer;margin-left:auto;margin-right:.25rem}.mail-unread-pill{flex-shrink:0;min-width:1.15rem;padding:0 .3rem;border-radius:999px;background:var(--dm-primary, #2563eb);color:#fff;font-size:.66rem;font-weight:700;line-height:1.35;text-align:center}.mail-folder.is-context .mail-folder-name{opacity:.6}.mail-account{display:flex;align-items:center;gap:.4rem;width:100%;padding:.45rem .6rem;border:none;background:var(--dm-surface, #fff);cursor:pointer;text-align:left;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--dm-text-muted, #64748b)}.mail-account:hover{background:var(--dm-hover-bg, rgba(15, 23, 42, .04))}.mail-account.is-active{color:var(--dm-text, #1e293b);position:sticky;top:0;z-index:1;background:var(--dm-surface, #fff)}.mail-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-folder{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.875rem;cursor:pointer;border:none;background:none;width:100%;text-align:left;color:var(--dm-text, #1e293b)}.mail-folder:hover{background:var(--dm-hover-bg, rgba(15, 23, 42, .04))}.mail-folder.is-active{background:var(--dm-active-bg, rgba(15, 23, 42, .07));color:var(--dm-primary, #2563eb);font-weight:600}.mail-folder.is-unselectable{opacity:.6;cursor:default}.mail-folder.is-unselectable:hover{background:none}.mail-folder-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-item{display:block;width:100%;text-align:left;padding:.55rem .75rem;border:none;border-bottom:1px solid var(--dm-border, #e2e8f0);background:none;cursor:pointer;color:var(--dm-text, #1e293b)}.mail-item:hover{background:var(--dm-hover-bg, rgba(15, 23, 42, .04))}.mail-item.is-active{background:var(--dm-active-bg, rgba(15, 23, 42, .07))}.mail-item-top{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}.mail-item-from{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-item.is-unread .mail-item-from,.mail-item.is-unread .mail-item-subject{font-weight:700}.mail-item-date{font-size:.72rem;color:var(--dm-text-muted, #64748b);flex-shrink:0}.mail-item-subject{font-size:.82rem;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-item-meta{display:flex;align-items:center;gap:.35rem;margin-top:.15rem;color:var(--dm-text-muted, #64748b)}.mail-pager{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .6rem;border-top:1px solid var(--dm-border, #e2e8f0);font-size:.75rem;color:var(--dm-text-muted, #64748b);flex-shrink:0}.mail-reader-head{padding:.75rem 1rem;border-bottom:1px solid var(--dm-border, #e2e8f0);flex-shrink:0}.mail-reader-head:empty{display:none}.mail-reader-subject{font-size:1.05rem;font-weight:600;margin:0 0 .3rem;color:var(--dm-text, #1e293b)}.mail-reader-actions{display:flex;gap:.25rem;margin:.1rem 0 .35rem;flex-wrap:wrap}.mail-reader-meta{font-size:.8rem;color:var(--dm-text-muted, #64748b)}.mail-reader-body{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:var(--dm-surface, #fff)}.mail-reader-body iframe{width:100%;flex:1;border:none;display:block;background:#fff}.mail-notice{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.4rem .75rem;font-size:.78rem;background:var(--dm-warning, #8a6d1f);color:var(--dm-warning-text, #fff);border-bottom:1px solid var(--dm-border, #e2e8f0)}.mail-notice .btn{color:var(--dm-warning-text, #fff);border:1px solid currentColor;background:transparent;opacity:.95}.mail-notice .btn:hover{background:#ffffff26;opacity:1}.mail-attachments{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem .75rem;border-bottom:1px solid var(--dm-border, #e2e8f0);background:var(--dm-background-alt, rgba(15, 23, 42, .03))}.mail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;height:100%;color:var(--dm-text-muted, #94a3b8);text-align:center;padding:1rem}.mail-empty p{margin:0;font-size:.875rem}@media(max-width:900px){.mail-layout{grid-template-columns:1fr;height:auto!important}.mail-splitter{display:none}.mail-folders-pane,.mail-list-pane{border-right:none;border-bottom:1px solid var(--dm-border, #e2e8f0)}.mail-folders-list,.mail-list{max-height:240px}.mail-reader-body{min-height:60vh}}.mail-box-row{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border:1px solid var(--dm-border, #e2e8f0);border-radius:var(--dm-radius-md, 6px)}.mail-item.is-dragging{opacity:.45}.mail-folder.is-drop-target{background:var(--dm-primary, #2563eb);color:#fff;outline:2px solid var(--dm-primary, #2563eb);outline-offset:-2px}.mail-folder.is-drop-target .mail-folder-name,.mail-folder.is-drop-target .mail-unread-pill{color:inherit}.mail-item.is-dragging *{pointer-events:none}.mail-item{position:relative}.mail-item-tick{position:absolute;left:.45rem;top:.55rem;display:inline-flex;opacity:0;color:var(--dm-text-muted, #64748b);transition:opacity .12s ease;padding:2px;margin:-2px;border-radius:var(--dm-radius-sm, 3px)}.mail-item:hover .mail-item-tick,.mail-item:focus-visible .mail-item-tick,.mail-list.is-selecting .mail-item-tick,.mail-item-tick[aria-checked=true]{opacity:1}.mail-item-tick[aria-checked=true]{color:var(--dm-primary, #2563eb)}.mail-item-tick:hover{color:var(--dm-primary, #2563eb);background:var(--dm-hover-bg)}.mail-item-top,.mail-item-subject,.mail-item-meta{padding-left:1.5rem}.mail-select-all{display:inline-flex;align-items:center;margin-right:.1rem;cursor:pointer}.mail-select-all input{cursor:pointer;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mail-item-meta>span{display:inline-flex}.mail-item-meta .is-high{color:var(--dm-danger, #dc2626)}.mail-item-meta .is-low{color:var(--dm-text-muted, #64748b);opacity:.7}.mail-folder.is-hidden-folder .mail-folder-name{opacity:.5;font-style:italic}.mail-thread-chip{display:inline-flex;align-items:center;margin-left:.4rem;padding:0 .35rem;border-radius:999px;font-size:.68rem;font-weight:700;line-height:1.5;color:var(--dm-text-muted, #64748b);background:var(--dm-active-bg, rgba(15, 23, 42, .07));cursor:pointer}.mail-thread-chip:hover{color:var(--dm-primary, #2563eb)}.mail-thread-chip.is-unread{background:var(--dm-primary, #2563eb);color:#fff}.mail-item.is-in-thread{padding-left:1.6rem;box-shadow:inset 3px 0 0 var(--dm-border, #e2e8f0)}.mail-item.is-in-thread .mail-item-from{font-size:.8rem}.mail-pane-head .btn.is-on{color:var(--dm-primary, #2563eb);background:var(--dm-active-bg, rgba(15, 23, 42, .07))}#mail-outbox-btn{font-size:.72rem;font-weight:700}#mail-outbox-btn.is-failed{color:var(--dm-danger, #dc2626)}.mail-attachment{display:inline-flex;align-items:center;border:1px solid var(--dm-border, #e2e8f0);border-radius:var(--dm-radius-md, 6px);overflow:hidden}.mail-attachment .btn{border:none;border-radius:0}.mail-attachment-save{padding-left:.4rem!important;padding-right:.4rem!important;border-left:1px solid var(--dm-border, #e2e8f0)!important;opacity:.7}.mail-attachment-save:hover{opacity:1;color:var(--dm-primary, #2563eb)}.mail-section-heading{margin:1rem 0 .1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--dm-text-muted, #64748b)}.mail-section-heading:first-child{margin-top:.25rem}.mail-section-form .domma-form{margin:0}.mail-section-form .domma-form-field:last-child{margin-bottom:0}.mail-item-card{margin:0}.mail-item-card .card-header{padding:.5rem .6rem}.mail-item-card .card-body{padding:.6rem}.mail-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.mail-status{min-height:1.2em}.mail-empty-line{margin:.25rem 0}.mail-editor-fallback{min-height:8rem;font-family:inherit;resize:vertical}.mail-clause{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}.mail-clause .form-select,.mail-clause .form-input{width:auto;flex:0 1 auto}.mail-clause .mail-clause-value{flex:1 1 8rem;min-width:8rem}.mail-section-list{display:flex;flex-direction:column;gap:.5rem}.mail-scroll-sm{max-height:20vh;overflow-y:auto}.mail-scroll-md{max-height:46vh;overflow-y:auto}.mail-section-form .domma-form-field:has(select) .form-label .text-danger{display:none}.mail-compose-form{padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.6rem;height:100%}.mail-compose-body{display:flex;flex-direction:column;flex:1;min-height:0}.mail-compose-editor{flex:1;min-height:0}.mail-compose-textarea{flex:1;min-height:34vh;font-family:inherit;resize:vertical}.mail-attach-list{display:flex;flex-direction:column;gap:.2rem}.mail-template-row{margin:-.15rem 0 .35rem}.mail-template-picker{max-width:16rem}.mail-suggest-row{display:flex;flex-direction:column;line-height:1.25}.mail-suggest-detail{opacity:.7}.mail-rule-off{opacity:.55}.mail-panel{padding:.25rem 0 .5rem}.mail-panel-stack{padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:1rem}.mail-form-stack{padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem}.mail-dialog-stack{display:flex;flex-direction:column;gap:.5rem;padding:.25rem 0}.mail-hint{margin-top:.2rem}.mail-box-sub{overflow:hidden;text-overflow:ellipsis}.mail-add-btn{align-self:flex-start;margin-top:.5rem}.mail-none{margin:0;padding:.5rem .6rem}.mail-kv{padding:.5rem 0;display:flex;flex-direction:column;gap:.35rem}.mail-kv-row{display:flex;gap:.75rem}.mail-kv-key{min-width:8.5rem;flex-shrink:0}.mail-toggle-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.mail-sender-list{display:flex;flex-direction:column;gap:.2rem;max-height:40vh;overflow-y:auto}.mail-folder-pick{display:flex;align-items:center;gap:.5rem;padding:.3rem .4rem;border-radius:var(--dm-radius-md, 6px)}.mail-diag-log{width:100%;height:30vh;margin-top:.5rem;font-family:monospace;font-size:.72rem}.mail-facts{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.75rem}

package/plugins/_lib/admin/mail/mail.html

@@ -0,0 +1,71 @@
+<div class="mail-layout">
+
+  <!-- Folders -->
+  <div class="mail-folders-pane">
+    <div class="mail-pane-head">
+      <span>Folders</span>
+      <label class="mail-unread-filter" id="mail-unread-filter" title="Show only folders with unread mail" hidden>
+        <input type="checkbox" id="mail-unread-only">
+        <span>Unread</span>
+      </label>
+      <button class="btn btn-sm btn-ghost" id="mail-new-folder-btn" title="New folder" hidden>
+        <span data-icon="folder-plus" data-icon-size="14"></span>
+      </button>
+      <button class="btn btn-sm btn-ghost" id="mail-settings-btn" title="Mail account settings">
+        <span data-icon="settings" data-icon-size="14"></span>
+      </button>
+    </div>
+    <div class="mail-folders-list" id="mail-folders-list"></div>
+  </div>
+
+  <div class="mail-splitter" data-splitter="folders" title="Drag to resize"></div>
+
+  <!-- Message list -->
+  <div class="mail-list-pane">
+    <div class="mail-pane-head">
+      <label class="mail-select-all" id="mail-select-all" title="Select every message on this page" hidden>
+        <input type="checkbox" id="mail-select-all-box">
+        <span class="sr-only">Select every message on this page</span>
+      </label>
+      <span id="mail-list-title" title="The folder you are looking at">Inbox</span>
+      <div class="mail-pane-head-actions">
+        <button class="btn btn-sm btn-ghost" id="mail-outbox-btn" title="Mail waiting to be sent" hidden>
+          <span data-icon="clock" data-icon-size="14"></span><span id="mail-outbox-count"></span>
+        </button>
+        <button class="btn btn-sm btn-ghost" id="mail-threads-btn" title="Group messages into conversations" aria-pressed="false" hidden>
+          <span data-icon="messages-square" data-icon-size="14"></span>
+        </button>
+        <button class="btn btn-sm btn-ghost" id="mail-compose-btn" title="New message" hidden>
+          <span data-icon="edit-3" data-icon-size="14"></span>
+        </button>
+        <button class="btn btn-sm btn-ghost" id="mail-refresh-btn" title="Refresh">
+          <span data-icon="refresh-cw" data-icon-size="14"></span>
+        </button>
+      </div>
+    </div>
+    <div class="mail-search" id="mail-search" hidden>
+      <span data-icon="search" data-icon-size="14"></span>
+      <input type="search" id="mail-search-input" class="form-input" placeholder="Search mail…" autocomplete="off">
+      <button class="btn btn-sm btn-ghost" id="mail-search-clear" title="Clear the search and go back to the folder" hidden>Clear</button>
+    </div>
+    <div class="mail-search-note" id="mail-search-note" hidden></div>
+    <div class="mail-selection" id="mail-selection" hidden></div>
+    <div class="mail-undo" id="mail-undo" hidden></div>
+    <div class="mail-list" id="mail-list"></div>
+    <div class="mail-pager" id="mail-pager"></div>
+  </div>
+
+  <div class="mail-splitter" data-splitter="list" title="Drag to resize"></div>
+
+  <!-- Reader -->
+  <div class="mail-reader-pane">
+    <div class="mail-reader-head" id="mail-reader-head"></div>
+    <div class="mail-reader-body" id="mail-reader-body">
+      <div class="mail-empty" id="mail-reader-empty">
+        <span data-icon="mail" data-icon-size="40"></span>
+        <p>Select a message to read it.</p>
+      </div>
+    </div>
+  </div>
+
+</div>

package/plugins/_lib/admin/mail/panes.js

@@ -0,0 +1,253 @@
+/**
+ * Pane sizing for the mail reader, shared by the Mail Reader and Email Pro.
+ *
+ * Two jobs, both of which every mail client is expected to do and neither of
+ * which CSS can manage alone:
+ *
+ *   1. Fill the window. The reader is a workspace, not an article - leftover
+ *      space below it is wasted, and a fixed `calc(100vh - 140px)` guesses at
+ *      admin chrome that changes with the theme and the viewport.
+ *   2. Let the dividers move. Folder names and subject lines vary wildly in
+ *      length, so whatever widths we pick will be wrong for someone.
+ *
+ * Pure DOM, no framework: the plugins own their markup, this owns the geometry.
+ *
+ * @module _lib/admin/mail/panes
+ */
+
+/** Smallest a pane may be dragged, in pixels. Below this it stops being usable. */
+const MIN_PANE = 120;
+
+/** Breathing room under the layout, if its container does not already provide it. */
+const BOTTOM_GAP = 16;
+
+/**
+ * The nearest ancestor that scrolls, or null when that is the window.
+ *
+ * The admin puts its views inside `main.dashboard-main`, which scrolls on its
+ * own and sits below a fixed header. Measuring against `window.innerHeight`
+ * therefore overshoots by whatever padding that container adds, and the
+ * container scrolls instead of the layout fitting - which looks exactly like
+ * "it doesn't fill the screen".
+ *
+ * @param   {HTMLElement} el
+ * @returns {HTMLElement|null}
+ */
+function scrollParentOf(el) {
+    for (let node = el.parentElement; node && node !== document.body; node = node.parentElement) {
+        const overflow = getComputedStyle(node).overflowY;
+        if (overflow === 'auto' || overflow === 'scroll') return node;
+    }
+    return null;
+}
+
+/**
+ * Keep an element stretched to the bottom of the window.
+ *
+ * Measures where the element actually starts rather than assuming a fixed
+ * header height, so it survives a theme with taller chrome, a wrapped
+ * breadcrumb, or a notice bar appearing above it.
+ *
+ * @param   {HTMLElement} el
+ * @param   {{minHeight?: number}} [options]
+ * @returns {() => void} stop, for when the view unmounts
+ */
+export function fitToViewport(el, {minHeight = 320} = {}) {
+    let frame = 0;
+
+    const apply = () => {
+        frame = 0;
+        // Measuring after clearing avoids the element's own height feeding back
+        // into the calculation as it grows.
+        el.style.height = 'auto';
+        const top = el.getBoundingClientRect().top;
+
+        const scroller = scrollParentOf(el);
+        let bottom;
+        if (scroller) {
+            const rect = scroller.getBoundingClientRect();
+            // clientHeight excludes a horizontal scrollbar; padding-bottom is
+            // inside the client box, so it has to come off separately.
+            bottom = rect.top + scroller.clientHeight
+                - (parseFloat(getComputedStyle(scroller).paddingBottom) || 0);
+        } else {
+            bottom = window.innerHeight;
+        }
+
+        // Padding on the containers in between is space we cannot occupy.
+        let trailing = 0;
+        for (let node = el.parentElement; node && node !== scroller; node = node.parentElement) {
+            trailing += parseFloat(getComputedStyle(node).paddingBottom) || 0;
+            if (node === document.body) break;
+        }
+
+        // Only add a gap if the containers do not already provide one.
+        const gap = Math.max(0, BOTTOM_GAP - trailing);
+        const available = bottom - top - trailing - gap;
+        el.style.height = `${Math.max(minHeight, Math.round(available))}px`;
+    };
+
+    const schedule = () => {
+        if (!frame) frame = requestAnimationFrame(apply);
+    };
+
+    apply();
+    window.addEventListener('resize', schedule);
+
+    // The admin sidebar can collapse, which moves nothing vertically but does
+    // change layout; watching the element itself catches anything a resize
+    // event does not.
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(schedule) : null;
+    observer?.observe(document.body);
+    const scroller = scrollParentOf(el);
+    if (scroller) observer?.observe(scroller);
+
+    return () => {
+        window.removeEventListener('resize', schedule);
+        observer?.disconnect();
+        if (frame) cancelAnimationFrame(frame);
+    };
+}
+
+/**
+ * Make the dividers in a grid layout draggable.
+ *
+ * The container is expected to lay its panes out with
+ * `grid-template-columns: var(--mail-col-1) <divider> var(--mail-col-2) <divider> 1fr`,
+ * and to contain elements matching `selector` sitting in the divider columns.
+ * Widths are written back as those two custom properties.
+ *
+ * @param   {HTMLElement} container
+ * @param   {{selector?: string, widths?: number[], onChange?: (widths: number[]) => void}} [options]
+ * @returns {{setWidths: (w: number[]) => void, reset: () => void, destroy: () => void}}
+ */
+export function createSplitters(container, {selector = '.mail-splitter', widths, onChange} = {}) {
+    const handles = [...container.querySelectorAll(selector)];
+    const defaults = [190, 340];
+    let current = normalise(widths ?? defaults);
+
+    /**
+     * Clamp widths so neither pane collapses and the reader keeps room.
+     *
+     * @param   {number[]} next
+     * @returns {number[]}
+     */
+    function normalise(next) {
+        const available = container.clientWidth;
+        const out = [...next];
+        out[0] = Math.max(MIN_PANE, Math.round(out[0] ?? defaults[0]));
+        out[1] = Math.max(MIN_PANE, Math.round(out[1] ?? defaults[1]));
+
+        // Before the browser has laid the container out, clientWidth is 0.
+        // Clamping against a guessed width would quietly shrink remembered
+        // widths on every single load - which is what it did until 0.61.0.
+        // The re-clamp on the next frame catches a genuinely too-narrow window.
+        if (!available) return out;
+        // Always leave the reader at least a pane's worth, whatever the drag
+        // asked for - a mail client with no room to read mail is a bad joke.
+        const maxFirstTwo = Math.max(MIN_PANE * 2, available - MIN_PANE);
+        if (out[0] + out[1] > maxFirstTwo) {
+            const overshoot = out[0] + out[1] - maxFirstTwo;
+            out[1] = Math.max(MIN_PANE, out[1] - overshoot);
+            const stillOver = out[0] + out[1] - maxFirstTwo;
+            if (stillOver > 0) out[0] = Math.max(MIN_PANE, out[0] - stillOver);
+        }
+        return out;
+    }
+
+    /**
+     * Push the current widths into the grid.
+     *
+     * @returns {void}
+     */
+    function apply() {
+        container.style.setProperty('--mail-col-1', `${current[0]}px`);
+        container.style.setProperty('--mail-col-2', `${current[1]}px`);
+    }
+
+    /**
+     * Begin a drag on one divider.
+     *
+     * @param   {PointerEvent} event
+     * @param   {number} index
+     * @returns {void}
+     */
+    function startDrag(event, index) {
+        event.preventDefault();
+        const startX = event.clientX;
+        const startWidths = [...current];
+        const handle = event.currentTarget;
+        handle.setPointerCapture?.(event.pointerId);
+        container.classList.add('is-resizing');
+
+        const move = moveEvent => {
+            const delta = moveEvent.clientX - startX;
+            const next = [...startWidths];
+            next[index] = startWidths[index] + delta;
+            current = normalise(next);
+            apply();
+        };
+
+        const end = () => {
+            handle.removeEventListener('pointermove', move);
+            handle.removeEventListener('pointerup', end);
+            handle.removeEventListener('pointercancel', end);
+            container.classList.remove('is-resizing');
+            onChange?.([...current]);
+        };
+
+        handle.addEventListener('pointermove', move);
+        handle.addEventListener('pointerup', end);
+        handle.addEventListener('pointercancel', end);
+    }
+
+    const listeners = handles.map((handle, index) => {
+        const down = event => startDrag(event, index);
+        const dbl = () => {
+            current = normalise(defaults);
+            apply();
+            onChange?.([...current]);
+        };
+        handle.addEventListener('pointerdown', down);
+        // Double-click to put it back, which is what people try first.
+        handle.addEventListener('dblclick', dbl);
+        handle.setAttribute('role', 'separator');
+        handle.setAttribute('aria-orientation', 'vertical');
+        handle.title = 'Drag to resize · double-click to reset';
+        return {handle, down, dbl};
+    });
+
+    apply();
+
+    // Clamp for real once the container has a measured width, and again
+    // whenever the window changes shape.
+    const reclamp = () => {
+        if (!container.clientWidth) return;
+        const clamped = normalise(current);
+        if (clamped[0] !== current[0] || clamped[1] !== current[1]) {
+            current = clamped;
+            apply();
+        }
+    };
+    requestAnimationFrame(reclamp);
+    window.addEventListener('resize', reclamp);
+
+    return {
+        setWidths(next) {
+            current = normalise(next);
+            apply();
+        },
+        reset() {
+            current = normalise(defaults);
+            apply();
+            onChange?.([...current]);
+        },
+        destroy() {
+            window.removeEventListener('resize', reclamp);
+            for (const {handle, down, dbl} of listeners) {
+                handle.removeEventListener('pointerdown', down);
+                handle.removeEventListener('dblclick', dbl);
+            }
+        }
+    };
+}