@bobfrankston/rmfmail 1.1.36 → 1.1.38

package/client/components/message-list.ts

@@ -82,7 +82,7 @@ function cacheKey(mode: "folder" | "search", a?: string, f?: number, flagged?: b
  *  Gmail's hash-derived ids). If no smaller uid exists either, fall
  *  back to whatever row sits at the same numeric index. Survives a
  *  session reload via sessionStorage. */
-interface ViewPosition { uid: number; scroll: number; }
+interface ViewPosition { uid: number; uuid?: string; scroll: number; }
 const positionMemory = new Map<string, ViewPosition>();
 const POSITION_STORAGE_KEY = "mailx-list-positions";
 try {
@@ -117,25 +117,36 @@ function rememberPosition(): void {
     if (!sel) return;
     const uid = Number(sel.dataset.uid);
     if (!Number.isFinite(uid)) return;
-    positionMemory.set(key, { uid, scroll: body.scrollTop });
+    // Remember the stable `uuid` as the primary identity — bare `uid` is only
+    // unique within (account, folder), so restoring by it can rebind the
+    // viewer to a different message that happens to share the uid number.
+    // `uid` is kept only for the next-older-neighbor fallback when the
+    // remembered message has since been deleted.
+    positionMemory.set(key, { uid, uuid: sel.dataset.uuid || "", scroll: body.scrollTop });
     persistPositions();
 }
 /** Choose the row to focus when re-entering a view with saved position.
  *  Returns the uid to focus, or null to fall back to selectFirst. */
-function pickRestoreUid(items: any[], saved: number): number | null {
+function pickRestoreUid(items: any[], saved: ViewPosition): string | null {
     if (!items.length) return null;
-    if (items.some(m => m.uid === saved)) return saved;
-    // Next-older entry: largest remaining uid that is < saved. Stable
-    // even if list is unsorted by uid (loops through all rows).
-    let best = -1;
+    // Exact restore by stable uuid — globally unique, so this can never
+    // rebind the viewer to a same-uid-number message in another folder
+    // (the bug: viewer silently jumped to a different letter mid-cleanup).
+    if (saved.uuid) {
+        const exact = items.find(m => m.uuid && m.uuid === saved.uuid);
+        if (exact?.uuid) return exact.uuid;
+    }
+    // Saved message is gone (deleted). Pick the next-older entry by uid —
+    // uid is roughly monotonic with arrival on IMAP/Gmail — and return ITS
+    // uuid so the restore stays uuid-keyed end to end.
+    let best: any = null;
     for (const m of items) {
-        if (typeof m.uid !== "number") continue;
-        if (m.uid < saved && m.uid > best) best = m.uid;
+        if (typeof m.uid !== "number" || !m.uuid) continue;
+        if (m.uid < saved.uid && (!best || m.uid > best.uid)) best = m;
     }
-    if (best >= 0) return best;
-    // No older entry — saved was the bottom of the list. Snap to the
-    // first row that sorts "after" via date-desc tie-break (top of list).
-    return typeof items[0]?.uid === "number" ? items[0].uid : null;
+    if (best) return best.uuid;
+    // No older entry — saved was the bottom. Snap to the top of the list.
+    return items[0]?.uuid || null;
 }
 
 /** Quick equality check — same UID set, same flag pattern, same total.
@@ -680,10 +691,10 @@ export async function loadUnifiedInbox(autoSelect = true): Promise<void> {
         totalMessages = cached.total;
         state.setMessages(cached.items);
         renderMessages(body, "", cached.items);
-        const targetUid = remembered ? pickRestoreUid(cached.items, remembered.uid) : null;
-        if (targetUid != null) {
+        const targetUuid = remembered ? pickRestoreUid(cached.items, remembered) : null;
+        if (targetUuid) {
             body.scrollTop = savedScroll;
-            restoreSelection(body, String(targetUid));
+            restoreSelection(body, targetUuid);
         } else if (autoSelect) {
             selectFirst(body);
         }
@@ -711,10 +722,10 @@ export async function loadUnifiedInbox(autoSelect = true): Promise<void> {
         state.setMessages(result.items);
         renderMessages(body, "", result.items);
 
-        const targetUid = remembered ? pickRestoreUid(result.items, remembered.uid) : null;
-        if (targetUid != null) {
+        const targetUuid = remembered ? pickRestoreUid(result.items, remembered) : null;
+        if (targetUuid) {
             body.scrollTop = savedScroll;
-            restoreSelection(body, String(targetUid));
+            restoreSelection(body, targetUuid);
         } else if (autoSelect) {
             selectFirst(body);
         }
@@ -858,11 +869,11 @@ export async function loadMessages(accountId: string, folderId: number, page = 1
         totalMessages = cached.total;
         state.setMessages(cached.items);
         renderMessages(body, accountId, cached.items);
-        const targetUid = remembered ? pickRestoreUid(cached.items, remembered.uid) : null;
-        if (targetUid != null) {
+        const targetUuid = remembered ? pickRestoreUid(cached.items, remembered) : null;
+        if (targetUuid) {
             requestAnimationFrame(() => {
                 body.scrollTop = savedScroll;
-                restoreSelection(body, String(targetUid));
+                restoreSelection(body, targetUuid);
             });
         } else if (autoSelect) {
             selectFirst(body);
@@ -893,12 +904,12 @@ export async function loadMessages(accountId: string, folderId: number, page = 1
         renderMessages(body, accountId, result.items);
 
         // Prefer saved position; otherwise default by autoSelect.
-        const targetUid = remembered ? pickRestoreUid(result.items, remembered.uid) : null;
-        if (targetUid != null) {
+        const targetUuid = remembered ? pickRestoreUid(result.items, remembered) : null;
+        if (targetUuid) {
             requestAnimationFrame(() => {
                 if (myGen !== loadGen) return;
                 body.scrollTop = savedScroll;
-                restoreSelection(body, String(targetUid));
+                restoreSelection(body, targetUuid);
             });
         } else if (autoSelect) {
             selectFirst(body);
@@ -957,15 +968,19 @@ function selectFirst(body: HTMLElement): void {
     if (firstRow) firstRow.click();
 }
 
-function restoreSelection(body: HTMLElement, savedUid: string | null | undefined): void {
-    if (!savedUid) return;
-    const accountId = (body.querySelector(`.ml-row[data-uid="${savedUid}"]`) as HTMLElement)?.dataset.accountId;
-    if (accountId) {
-        // {scroll:false} — this is a programmatic restore after a sync-driven
-        // reload. The user might be reading rows ABOVE the focused one; do
-        // NOT yank their scroll back to the focused row every time the list
-        // rebuilds.
-        focusByIdentity(accountId, Number(savedUid), { scroll: false });
+function restoreSelection(body: HTMLElement, savedUuid: string | null | undefined): void {
+    if (!savedUuid) return;
+    // Locate the row by stable uuid — unique, so this is the exact message
+    // the user had selected, never a uid-number collision in another folder.
+    const row = body.querySelector(`.ml-row[data-uuid="${CSS.escape(savedUuid)}"]`) as HTMLElement | null;
+    if (!row) return;
+    const accountId = row.dataset.accountId;
+    const uid = Number(row.dataset.uid);
+    if (accountId && Number.isFinite(uid)) {
+        // {scroll:false} — programmatic restore after a sync-driven reload.
+        // The user might be reading rows ABOVE the focused one; do NOT yank
+        // their scroll back to the focused row every time the list rebuilds.
+        focusByIdentity(accountId, uid, { scroll: false });
     }
 }
 
@@ -1081,6 +1096,12 @@ class MessageRow {
         row.dataset.uid = String(msg.uid);
         row.dataset.accountId = accountId;
         row.dataset.folderId = String(msg.folderId);
+        // Stable local identity. `uid` is only unique within (account, folder)
+        // — in a unified / multi-folder list two messages can share a uid
+        // NUMBER, so selection memory keyed on bare uid can rebind the viewer
+        // to the wrong letter after a re-render. `uuid` is globally unique
+        // and never changes; selection restore keys on it.
+        if (msg.uuid) row.dataset.uuid = msg.uuid;
         if (msg.threadId) row.dataset.threadId = msg.threadId;
         if (threadHead) row.classList.add("thread-head");
 

package/client/components/tabs.js

@@ -0,0 +1,155 @@
+/** View tabs — multiple views over one mailbox / one backend.
+ *
+ *  See docs/multi-view.md. A tab is a self-contained *view descriptor*: which
+ *  folder / unified-inbox / search it shows. The expensive things (DB, the
+ *  live sync stream, folder counts, contacts) stay shared in the daemon and
+ *  the one IPC channel — a tab is just the cheap "which folder, restored how"
+ *  bundle. That bundle is also exactly what a future tear-off window needs,
+ *  so this module is the seam for Stage 3.
+ *
+ *  Stage 1: snapshot/restore. The DOM has ONE three-pane; switching tabs
+ *  re-invokes the existing load functions for the target tab's view, and the
+ *  list's own `positionMemory` restores selection + scroll per view. Inactive
+ *  tabs hold only their descriptor — no detached DOM, no second list state.
+ */
+const STORAGE_KEY = "mailx-view-tabs";
+let tabs = [];
+let activeId = "";
+let stripEl = null;
+/** Applies a tab's view to the single three-pane. Set by initTabs; defined in
+ *  app.ts because it must touch app-level view state + the load functions. */
+let applyView = () => { };
+let _nextId = 1;
+function newId() { return `t${_nextId++}`; }
+function persist() {
+    try {
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ tabs, activeId }));
+    }
+    catch { /* sessionStorage unavailable — tabs just won't survive reload */ }
+}
+function render() {
+    if (!stripEl)
+        return;
+    stripEl.innerHTML = "";
+    for (const tab of tabs) {
+        const chip = document.createElement("div");
+        chip.className = "view-tab" + (tab.id === activeId ? " active" : "");
+        chip.dataset.tabId = tab.id;
+        const label = document.createElement("span");
+        label.className = "view-tab-label";
+        label.textContent = tab.title || "(view)";
+        chip.appendChild(label);
+        // Close affordance — hidden when only one tab remains (can't close
+        // the last one; the window always shows something).
+        if (tabs.length > 1) {
+            const close = document.createElement("button");
+            close.className = "view-tab-close";
+            close.textContent = "×";
+            close.title = "Close tab";
+            close.addEventListener("click", (e) => { e.stopPropagation(); closeTab(tab.id); });
+            chip.appendChild(close);
+        }
+        chip.addEventListener("click", () => activate(tab.id));
+        stripEl.appendChild(chip);
+    }
+    const plus = document.createElement("button");
+    plus.className = "view-tab-new";
+    plus.textContent = "+";
+    plus.title = "New tab (All Inboxes)";
+    plus.addEventListener("click", () => openTab({ kind: "unified" }, "All Inboxes", true));
+    stripEl.appendChild(plus);
+    // Strip is visible whenever a tab exists — the "+" must stay reachable so
+    // the user can open a second view (browser model: one tab still shows a
+    // tab bar). Hidden only in the brief pre-first-selection boot window.
+    stripEl.hidden = tabs.length < 1;
+}
+/** Wire the strip. `apply` is the app.ts callback that loads a tab's view. */
+export function initTabs(strip, apply) {
+    stripEl = strip;
+    applyView = apply;
+    try {
+        const raw = sessionStorage.getItem(STORAGE_KEY);
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            if (Array.isArray(parsed?.tabs) && parsed.tabs.length) {
+                tabs = parsed.tabs;
+                activeId = parsed.activeId || tabs[0].id;
+                for (const t of tabs) {
+                    const n = Number(String(t.id).replace(/^t/, ""));
+                    if (Number.isFinite(n) && n >= _nextId)
+                        _nextId = n + 1;
+                }
+            }
+        }
+    }
+    catch { /* corrupt — start fresh */ }
+    render();
+}
+/** The currently-active tab, or null before any tab exists. */
+export function activeTab() {
+    return tabs.find(t => t.id === activeId) || null;
+}
+/** Open a new tab for `view` and (by default) switch to it. */
+export function openTab(view, title, activateIt = true) {
+    const tab = { id: newId(), title, view };
+    tabs.push(tab);
+    if (activateIt)
+        activeId = tab.id;
+    persist();
+    render();
+    if (activateIt)
+        applyView(tab);
+}
+/** Switch to an existing tab and load its view. */
+export function activate(id) {
+    const tab = tabs.find(t => t.id === id);
+    if (!tab || id === activeId)
+        return;
+    activeId = id;
+    persist();
+    render();
+    applyView(tab);
+}
+/** Close a tab. Never closes the last one. If the active tab is closed, the
+ *  neighbour to its left (or right) becomes active. */
+export function closeTab(id) {
+    if (tabs.length < 2)
+        return;
+    const idx = tabs.findIndex(t => t.id === id);
+    if (idx < 0)
+        return;
+    const wasActive = id === activeId;
+    tabs.splice(idx, 1);
+    if (wasActive) {
+        const next = tabs[Math.max(0, idx - 1)];
+        activeId = next.id;
+        persist();
+        render();
+        applyView(next);
+    }
+    else {
+        persist();
+        render();
+    }
+}
+/** Record the view the user just navigated to in the CURRENT tab — called
+ *  from the folder-tree / search handlers. Does NOT re-apply the view (the
+ *  navigation already loaded it); only keeps the active tab's descriptor +
+ *  title in sync so a later tab-switch restores the right thing. If no tab
+ *  exists yet (first navigation after boot), this creates the first tab —
+ *  so the very first folder/inbox selection seeds the strip. */
+export function setActiveView(view, title) {
+    let tab = activeTab();
+    if (!tab) {
+        tab = { id: newId(), title, view };
+        tabs.push(tab);
+        activeId = tab.id;
+    }
+    else {
+        tab.view = view;
+        tab.title = title;
+    }
+    persist();
+    render();
+}
+//# sourceMappingURL=tabs.js.map

package/client/components/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAaH,MAAM,WAAW,GAAG,iBAAiB,CAAC;AACtC,IAAI,IAAI,GAAc,EAAE,CAAC;AACzB,IAAI,QAAQ,GAAG,EAAE,CAAC;AAClB,IAAI,OAAO,GAAuB,IAAI,CAAC;AACvC;8EAC8E;AAC9E,IAAI,SAAS,GAA2B,GAAG,EAAE,GAAS,CAAC,CAAC;AACxD,IAAI,OAAO,GAAG,CAAC,CAAC;AAChB,SAAS,KAAK,KAAa,OAAO,IAAI,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;AAEpD,SAAS,OAAO;IACZ,IAAI,CAAC;QACD,cAAc,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC5E,CAAC;IAAC,MAAM,CAAC,CAAC,iEAAiE,CAAC,CAAC;AACjF,CAAC;AAED,SAAS,MAAM;IACX,IAAI,CAAC,OAAO;QAAE,OAAO;IACrB,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;IACvB,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,SAAS,GAAG,UAAU,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrE,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,EAAE,CAAC;QAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7C,KAAK,CAAC,SAAS,GAAG,gBAAgB,CAAC;QACnC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC,KAAK,IAAI,QAAQ,CAAC;QAC1C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,mEAAmE;QACnE,oDAAoD;QACpD,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC/C,KAAK,CAAC,SAAS,GAAG,gBAAgB,CAAC;YACnC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;YACxB,KAAK,CAAC,KAAK,GAAG,WAAW,CAAC;YAC1B,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACnF,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QACvD,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IACD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC;IAChC,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;IACvB,IAAI,CAAC,KAAK,GAAG,uBAAuB,CAAC;IACrC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IACxF,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1B,0EAA0E;IAC1E,wEAAwE;IACxE,sEAAsE;IACtE,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;AACrC,CAAC;AAED,8EAA8E;AAC9E,MAAM,UAAU,QAAQ,CAAC,KAAkB,EAAE,KAA6B;IACtE,OAAO,GAAG,KAAK,CAAC;IAChB,SAAS,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC;QACD,MAAM,GAAG,GAAG,cAAc,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAChD,IAAI,GAAG,EAAE,CAAC;YACN,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAA0C,CAAC;YACxE,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACpD,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;gBACnB,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACzC,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;oBACnB,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;oBACjD,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,OAAO;wBAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC;gBAC5D,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;IAAC,MAAM,CAAC,CAAC,2BAA2B,CAAC,CAAC;IACvC,MAAM,EAAE,CAAC;AACb,CAAC;AAED,+DAA+D;AAC/D,MAAM,UAAU,SAAS;IACrB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,IAAI,IAAI,CAAC;AACrD,CAAC;AAED,+DAA+D;AAC/D,MAAM,UAAU,OAAO,CAAC,IAAa,EAAE,KAAa,EAAE,UAAU,GAAG,IAAI;IACnE,MAAM,GAAG,GAAY,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IAClD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,IAAI,UAAU;QAAE,QAAQ,GAAG,GAAG,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,IAAI,UAAU;QAAE,SAAS,CAAC,GAAG,CAAC,CAAC;AACnC,CAAC;AAED,mDAAmD;AACnD,MAAM,UAAU,QAAQ,CAAC,EAAU;IAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACxC,IAAI,CAAC,GAAG,IAAI,EAAE,KAAK,QAAQ;QAAE,OAAO;IACpC,QAAQ,GAAG,EAAE,CAAC;IACd,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,SAAS,CAAC,GAAG,CAAC,CAAC;AACnB,CAAC;AAED;uDACuD;AACvD,MAAM,UAAU,QAAQ,CAAC,EAAU;IAC/B,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO;IAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7C,IAAI,GAAG,GAAG,CAAC;QAAE,OAAO;IACpB,MAAM,SAAS,GAAG,EAAE,KAAK,QAAQ,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IACpB,IAAI,SAAS,EAAE,CAAC;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QACxC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;QACT,SAAS,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;SAAM,CAAC;QACJ,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;IACb,CAAC;AACL,CAAC;AAED;;;;;gEAKgE;AAChE,MAAM,UAAU,aAAa,CAAC,IAAa,EAAE,KAAa;IACtD,IAAI,GAAG,GAAG,SAAS,EAAE,CAAC;IACtB,IAAI,CAAC,GAAG,EAAE,CAAC;QACP,GAAG,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACf,QAAQ,GAAG,GAAG,CAAC,EAAE,CAAC;IACtB,CAAC;SAAM,CAAC;QACJ,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC;QAChB,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;IACtB,CAAC;IACD,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;AACb,CAAC"}

package/client/components/tabs.ts

@@ -0,0 +1,163 @@
+/** View tabs — multiple views over one mailbox / one backend.
+ *
+ *  See docs/multi-view.md. A tab is a self-contained *view descriptor*: which
+ *  folder / unified-inbox / search it shows. The expensive things (DB, the
+ *  live sync stream, folder counts, contacts) stay shared in the daemon and
+ *  the one IPC channel — a tab is just the cheap "which folder, restored how"
+ *  bundle. That bundle is also exactly what a future tear-off window needs,
+ *  so this module is the seam for Stage 3.
+ *
+ *  Stage 1: snapshot/restore. The DOM has ONE three-pane; switching tabs
+ *  re-invokes the existing load functions for the target tab's view, and the
+ *  list's own `positionMemory` restores selection + scroll per view. Inactive
+ *  tabs hold only their descriptor — no detached DOM, no second list state.
+ */
+
+export type TabView =
+    | { kind: "unified" }
+    | { kind: "folder"; accountId: string; folderId: number; specialUse: string }
+    | { kind: "search"; query: string; scope: string; accountId: string; folderId: number; includeTrash: boolean };
+
+export interface ViewTab {
+    id: string;
+    title: string;
+    view: TabView;
+}
+
+const STORAGE_KEY = "mailx-view-tabs";
+let tabs: ViewTab[] = [];
+let activeId = "";
+let stripEl: HTMLElement | null = null;
+/** Applies a tab's view to the single three-pane. Set by initTabs; defined in
+ *  app.ts because it must touch app-level view state + the load functions. */
+let applyView: (tab: ViewTab) => void = () => { /* */ };
+let _nextId = 1;
+function newId(): string { return `t${_nextId++}`; }
+
+function persist(): void {
+    try {
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ tabs, activeId }));
+    } catch { /* sessionStorage unavailable — tabs just won't survive reload */ }
+}
+
+function render(): void {
+    if (!stripEl) return;
+    stripEl.innerHTML = "";
+    for (const tab of tabs) {
+        const chip = document.createElement("div");
+        chip.className = "view-tab" + (tab.id === activeId ? " active" : "");
+        chip.dataset.tabId = tab.id;
+        const label = document.createElement("span");
+        label.className = "view-tab-label";
+        label.textContent = tab.title || "(view)";
+        chip.appendChild(label);
+        // Close affordance — hidden when only one tab remains (can't close
+        // the last one; the window always shows something).
+        if (tabs.length > 1) {
+            const close = document.createElement("button");
+            close.className = "view-tab-close";
+            close.textContent = "×";
+            close.title = "Close tab";
+            close.addEventListener("click", (e) => { e.stopPropagation(); closeTab(tab.id); });
+            chip.appendChild(close);
+        }
+        chip.addEventListener("click", () => activate(tab.id));
+        stripEl.appendChild(chip);
+    }
+    const plus = document.createElement("button");
+    plus.className = "view-tab-new";
+    plus.textContent = "+";
+    plus.title = "New tab (All Inboxes)";
+    plus.addEventListener("click", () => openTab({ kind: "unified" }, "All Inboxes", true));
+    stripEl.appendChild(plus);
+    // Strip is visible whenever a tab exists — the "+" must stay reachable so
+    // the user can open a second view (browser model: one tab still shows a
+    // tab bar). Hidden only in the brief pre-first-selection boot window.
+    stripEl.hidden = tabs.length < 1;
+}
+
+/** Wire the strip. `apply` is the app.ts callback that loads a tab's view. */
+export function initTabs(strip: HTMLElement, apply: (tab: ViewTab) => void): void {
+    stripEl = strip;
+    applyView = apply;
+    try {
+        const raw = sessionStorage.getItem(STORAGE_KEY);
+        if (raw) {
+            const parsed = JSON.parse(raw) as { tabs: ViewTab[]; activeId: string };
+            if (Array.isArray(parsed?.tabs) && parsed.tabs.length) {
+                tabs = parsed.tabs;
+                activeId = parsed.activeId || tabs[0].id;
+                for (const t of tabs) {
+                    const n = Number(String(t.id).replace(/^t/, ""));
+                    if (Number.isFinite(n) && n >= _nextId) _nextId = n + 1;
+                }
+            }
+        }
+    } catch { /* corrupt — start fresh */ }
+    render();
+}
+
+/** The currently-active tab, or null before any tab exists. */
+export function activeTab(): ViewTab | null {
+    return tabs.find(t => t.id === activeId) || null;
+}
+
+/** Open a new tab for `view` and (by default) switch to it. */
+export function openTab(view: TabView, title: string, activateIt = true): void {
+    const tab: ViewTab = { id: newId(), title, view };
+    tabs.push(tab);
+    if (activateIt) activeId = tab.id;
+    persist();
+    render();
+    if (activateIt) applyView(tab);
+}
+
+/** Switch to an existing tab and load its view. */
+export function activate(id: string): void {
+    const tab = tabs.find(t => t.id === id);
+    if (!tab || id === activeId) return;
+    activeId = id;
+    persist();
+    render();
+    applyView(tab);
+}
+
+/** Close a tab. Never closes the last one. If the active tab is closed, the
+ *  neighbour to its left (or right) becomes active. */
+export function closeTab(id: string): void {
+    if (tabs.length < 2) return;
+    const idx = tabs.findIndex(t => t.id === id);
+    if (idx < 0) return;
+    const wasActive = id === activeId;
+    tabs.splice(idx, 1);
+    if (wasActive) {
+        const next = tabs[Math.max(0, idx - 1)];
+        activeId = next.id;
+        persist();
+        render();
+        applyView(next);
+    } else {
+        persist();
+        render();
+    }
+}
+
+/** Record the view the user just navigated to in the CURRENT tab — called
+ *  from the folder-tree / search handlers. Does NOT re-apply the view (the
+ *  navigation already loaded it); only keeps the active tab's descriptor +
+ *  title in sync so a later tab-switch restores the right thing. If no tab
+ *  exists yet (first navigation after boot), this creates the first tab —
+ *  so the very first folder/inbox selection seeds the strip. */
+export function setActiveView(view: TabView, title: string): void {
+    let tab = activeTab();
+    if (!tab) {
+        tab = { id: newId(), title, view };
+        tabs.push(tab);
+        activeId = tab.id;
+    } else {
+        tab.view = view;
+        tab.title = title;
+    }
+    persist();
+    render();
+}

package/client/index.html

@@ -794,6 +794,10 @@
         <button class="alert-dismiss" id="alert-dismiss" title="Dismiss">&times;</button>
     </div>
 
+    <!-- View tabs — full-width bar above all three panes. A tab is the whole
+         three-pane view, so the strip spans the window (see docs/multi-view.md). -->
+    <div class="view-tab-strip" id="view-tab-strip" hidden></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 (Ctrl+N)" aria-label="Compose">✏</button>

package/client/styles/components.css

@@ -146,6 +146,64 @@ button.tb-menu-item { background: none; border: none; color: inherit; width: 100
     }
 }
 
+/* View tabs — see docs/multi-view.md. Hidden until a 2nd tab exists. */
+.view-tab-strip {
+    display: flex;
+    align-items: stretch;
+    gap: 2px;
+    padding: 2px 4px 0;
+    overflow-x: auto;
+    background: var(--color-bg-subtle, #f0f0f0);
+    border-bottom: 1px solid var(--color-border, #ccc);
+
+    & .view-tab {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 8px;
+        max-width: 200px;
+        font-size: 0.85em;
+        cursor: pointer;
+        border: 1px solid transparent;
+        border-bottom: none;
+        border-radius: 5px 5px 0 0;
+        white-space: nowrap;
+        color: var(--color-text-muted, #555);
+
+        & .view-tab-label { overflow: hidden; text-overflow: ellipsis; }
+
+        &.active {
+            background: var(--color-bg, #fff);
+            border-color: var(--color-border, #ccc);
+            color: var(--color-text, #000);
+            font-weight: 600;
+        }
+        &:not(.active):hover { background: var(--color-hover, #e4e4e4); }
+
+        & .view-tab-close {
+            border: none;
+            background: none;
+            cursor: pointer;
+            font-size: 1.1em;
+            line-height: 1;
+            padding: 0 2px;
+            color: inherit;
+            opacity: 0.6;
+        }
+        & .view-tab-close:hover { opacity: 1; }
+    }
+
+    & .view-tab-new {
+        border: none;
+        background: none;
+        cursor: pointer;
+        font-size: 1.1em;
+        padding: 0 8px;
+        color: var(--color-text-muted, #555);
+    }
+    & .view-tab-new:hover { color: var(--color-text, #000); }
+}
+
 .search-bar {
     display: flex;
     flex-wrap: wrap;     /* Server / Trash-Spam checkboxes drop to a second row when the column is too narrow to fit them inline */

package/client/styles/layout.css

@@ -10,12 +10,13 @@ body {
     display: grid;
     /* rail | folders | main */
     grid-template-columns: var(--rail-width, 48px) var(--folder-width) 1fr;
-    grid-template-rows: var(--toolbar-height) auto 1fr var(--statusbar-height);
+    grid-template-rows: var(--toolbar-height) auto auto 1fr var(--statusbar-height);
     grid-template-areas:
-        "toolbar  toolbar  toolbar"
-        "alert    alert    alert"
-        "rail     folders  main"
-        "status   status   status";
+        "toolbar   toolbar   toolbar"
+        "alert     alert     alert"
+        "viewtabs  viewtabs  viewtabs"
+        "rail      folders   main"
+        "status    status    status";
     height: 100vh;
     overflow: hidden;
     font-family: var(--font-ui);
@@ -32,6 +33,7 @@ body.fullscreen-preview > .toolbar,
 body.fullscreen-preview > .icon-rail,
 body.fullscreen-preview > .folder-panel,
 body.fullscreen-preview > .alert-banner,
+body.fullscreen-preview > .view-tab-strip,
 body.fullscreen-preview > .status-bar,
 body.fullscreen-preview .message-list,
 body.fullscreen-preview .ml-toolbar,
@@ -50,10 +52,11 @@ body.fullscreen-preview {
 body.calendar-sidebar-on {
     grid-template-columns: var(--rail-width, 48px) var(--folder-width) 1fr var(--cal-side-width, 280px);
     grid-template-areas:
-        "toolbar  toolbar  toolbar  toolbar"
-        "alert    alert    alert    alert"
-        "rail     folders  main     cal-side"
-        "status   status   status   status";
+        "toolbar   toolbar   toolbar   toolbar"
+        "alert     alert     alert     alert"
+        "viewtabs  viewtabs  viewtabs  viewtabs"
+        "rail      folders   main      cal-side"
+        "status    status    status    status";
 }
 
 .toolbar { grid-area: toolbar; }
@@ -62,6 +65,9 @@ body.calendar-sidebar-on {
 .folder-tree { flex: 1; overflow-y: auto; }
 .main-area { grid-area: main; }
 .status-bar { grid-area: status; }
+/* View-tabs bar — full-width row above all panes. When hidden the `auto`
+   row collapses to 0, so nothing changes for single-tab use. */
+.view-tab-strip { grid-area: viewtabs; }
 
 /* Vertical icon rail — Thunderbird Supernova style: dark background with
    light icons so the rail reads as "chrome" and contrasts visibly against