@bobfrankston/rmfmail 1.2.247 → 1.2.250

package/client/components/folder-tree.ts

@@ -6,6 +6,7 @@
 import { getAccounts, getFolders, moveMessage, moveMessages, markFolderRead, createFolder, renameFolder, deleteFolder, moveFolderToTrash, emptyFolder, setupAccount, getDeviceAccounts, getVersion, syncAccount, popoutMainWindow } from "../lib/api-client.js";
 import { showContextMenu, type MenuItem } from "./context-menu.js";
 import { openTab } from "./tabs.js";
+import { foldText } from "../lib/fold-text.js";
 
 type FolderSelectHandler = (accountId: string, folderId: number, folderName: string, specialUse: string) => void;
 // Unified inbox uses folderId = -1 as a sentinel
@@ -47,6 +48,43 @@ function collapseDragExpanded(): boolean {
     return true;
 }
 
+// ── Sidebar "Find folder" filter ──
+// Matching runs against the folder DATA, not the rendered rows. Folders under
+// a collapsed parent are never in the DOM at all (renderNode only recurses
+// when expanded) and a collapsed ACCOUNT isn't even fetched, so the old
+// DOM-hiding filter could only ever find the handful of folders already on
+// screen — with ~90 mostly-collapsed folders that reads as "search doesn't
+// find my folder" (Bob 2026-08-11). Now every account's full folder list is
+// searched, name and path, case- and accent-insensitively, and the ancestors
+// of each hit are force-expanded so the match is actually visible.
+let folderFilter = "";
+
+/** Set (or clear, with "") the sidebar folder filter and re-render the tree. */
+export function setFolderFilter(query: string): void {
+    const next = foldText(query.trim());
+    if (next === folderFilter) return;
+    folderFilter = next;
+    const container = document.getElementById("folder-tree");
+    if (container) loadFolderTree(container);
+}
+
+/** Keep only branches containing a match, folding case and accents on both
+ *  sides. A folder that matches keeps its whole subtree (so you can see what
+ *  lives under the hit); a non-matching ancestor keeps only the branches that
+ *  lead to one, and is recorded in `forceExpand` so it renders open whatever
+ *  the user's saved collapse state says. */
+function pruneToMatches(nodes: FolderNode[], q: string, forceExpand: Set<string>): FolderNode[] {
+    const kept: FolderNode[] = [];
+    for (const n of nodes) {
+        const selfMatch = foldText(n.name).includes(q) || foldText(n.path).includes(q);
+        const keptChildren = pruneToMatches(n.children, q, forceExpand);
+        if (!selfMatch && keptChildren.length === 0) continue;
+        kept.push({ ...n, children: selfMatch ? n.children : keptChildren });
+        if (keptChildren.length > 0) forceExpand.add(`${n.accountId}:${n.path}`);
+    }
+    return kept;
+}
+
 // Persist expand/collapse state in localStorage
 const expandState: Record<string, boolean> = JSON.parse(localStorage.getItem("mailx-folders-expanded") || "{}");
 
@@ -218,11 +256,16 @@ function sortFolders(nodes: FolderNode[]): void {
     }
 }
 
-/** Render a folder node and its children recursively */
-function renderNode(node: FolderNode, container: HTMLElement, depth: number): void {
+/** Render a folder node and its children recursively.
+ *  `forceExpand` holds the keys of folders that sit on the path to a filter
+ *  match — those default to open (the user can still collapse one explicitly,
+ *  which is why this reads `!== false` rather than forcing `true`). */
+function renderNode(node: FolderNode, container: HTMLElement, depth: number, forceExpand?: Set<string>): void {
     const hasChildren = node.children.length > 0;
     const expandKey = `${node.accountId}:${node.path}`;
-    const isExpanded = expandState[expandKey] === true; // default collapsed
+    const isExpanded = forceExpand?.has(expandKey)
+        ? expandState[expandKey] !== false
+        : expandState[expandKey] === true; // default collapsed
 
     const folderEl = document.createElement("div");
     folderEl.className = "ft-folder";
@@ -598,7 +641,7 @@ function renderNode(node: FolderNode, container: HTMLElement, depth: number): vo
     // Render children if expanded
     if (hasChildren && isExpanded) {
         for (const child of node.children) {
-            renderNode(child, container, depth + 1);
+            renderNode(child, container, depth + 1, forceExpand);
         }
     }
 }
@@ -992,11 +1035,14 @@ async function loadFolderTree(container: HTMLElement): Promise<void> {
         }
 
         // Fetch ALL account folder data in parallel BEFORE touching the DOM
+        // A collapsed account normally isn't fetched at all. While a filter is
+        // active we fetch every account — a folder you can't see is exactly
+        // the one you're searching for.
         const accountFolderData: { account: any; folders: any[] }[] = await Promise.all(
             accounts.map(async (account: any) => {
                 const accountKey = `account:${account.id}`;
                 const accountExpanded = expandState[accountKey] !== false;
-                const folders = accountExpanded ? await getFolders(account.id) : [];
+                const folders = (accountExpanded || folderFilter) ? await getFolders(account.id) : [];
                 return { account, folders };
             })
         );
@@ -1010,7 +1056,7 @@ async function loadFolderTree(container: HTMLElement): Promise<void> {
         // Unified Inbox — always shown so startup auto-selects it consistently
         // (with one account it's effectively that account's INBOX, but the UI
         // stays uniform so the auto-select path doesn't fork on account count)
-        if (accounts.length >= 1) {
+        if (accounts.length >= 1 && (!folderFilter || foldText("All Inboxes").includes(folderFilter))) {
             const unifiedEl = document.createElement("div");
             unifiedEl.className = "ft-folder ft-unified";
             unifiedEl.title = accounts.length > 1
@@ -1032,7 +1078,7 @@ async function loadFolderTree(container: HTMLElement): Promise<void> {
         // queue, only shown when something is actually queued. Clicking
         // opens the outbox-view modal (pink rows, cancellable). Lives at
         // the top of the tree so a stuck send is impossible to miss.
-        if (lastOutboxTotal > 0) {
+        if (lastOutboxTotal > 0 && (!folderFilter || foldText("Send-pending").includes(folderFilter))) {
             const pendingEl = document.createElement("div");
             pendingEl.className = "ft-folder ft-unified ft-send-pending";
             pendingEl.id = "ft-send-pending";
@@ -1064,7 +1110,9 @@ async function loadFolderTree(container: HTMLElement): Promise<void> {
             accountEl.className = "ft-account";
 
             const accountKey = `account:${account.id}`;
-            const accountExpanded = expandState[accountKey] !== false; // accounts default expanded
+            // A filter opens every account: its matches have to be reachable
+            // even when the user left the account collapsed.
+            const accountExpanded = folderFilter ? true : expandState[accountKey] !== false; // accounts default expanded
 
             const header = document.createElement("div");
             header.className = "ft-account-header";
@@ -1073,7 +1121,10 @@ async function loadFolderTree(container: HTMLElement): Promise<void> {
             const disambiguator = isDup ? ` (${(account as any).email || account.id})` : "";
             header.textContent = `${accountExpanded ? "▾" : "▸"} ${baseLabel}${disambiguator}`;
             header.addEventListener("click", () => {
-                expandState[accountKey] = !accountExpanded;
+                // Toggle the SAVED state, not the rendered one — while a
+                // filter forces the account open, a click must still flip
+                // what the user gets back when the filter clears.
+                expandState[accountKey] = expandState[accountKey] === false;
                 saveExpandState();
                 const treeContainer = document.getElementById("folder-tree");
                 if (treeContainer) loadFolderTree(treeContainer);
@@ -1119,11 +1170,25 @@ async function loadFolderTree(container: HTMLElement): Promise<void> {
 
             accountEl.appendChild(header);
 
+            // With a filter active an account that has no hit is dropped
+            // entirely (header included) rather than left as a bare label.
+            let filteredOut = false;
+
             if (accountExpanded && folders.length > 0) {
                 const delimiter = folders[0]?.delimiter || ".";
-                const tree = buildTree(folders, delimiter, account.id);
+                let tree = buildTree(folders, delimiter, account.id);
                 sortFolders(tree);
 
+                // Filter: prune to matching branches. An account whose own
+                // label matches keeps all of its folders — "show me everything
+                // under gmail" is the natural reading of typing the account
+                // name into the folder box.
+                const forceExpand = new Set<string>();
+                if (folderFilter && !foldText(`${baseLabel} ${(account as any).email || ""} ${account.id}`).includes(folderFilter)) {
+                    tree = pruneToMatches(tree, folderFilter, forceExpand);
+                    if (tree.length === 0) filteredOut = true;
+                }
+
                 // Case-duplicate detection: fold folder paths to lowercase and
                 // flag any whose form matches another. Common with servers that
                 // let users create `Archive` and `archive` as distinct folders,
@@ -1139,7 +1204,7 @@ async function loadFolderTree(container: HTMLElement): Promise<void> {
                 for (const [k, c] of lowerCounts) if (c > 1) duplicatePaths.add(k);
 
                 for (const node of tree) {
-                    renderNode(node, accountEl, 1);
+                    renderNode(node, accountEl, 1, forceExpand);
                 }
 
                 if (duplicatePaths.size > 0) {
@@ -1152,9 +1217,21 @@ async function loadFolderTree(container: HTMLElement): Promise<void> {
                         }
                     });
                 }
+            } else if (folderFilter) {
+                filteredOut = true;
             }
 
-            fragment.appendChild(accountEl);
+            if (!filteredOut) fragment.appendChild(accountEl);
+        }
+
+        // Nothing matched anywhere — say so instead of showing a blank rail,
+        // which reads as "the tree broke" (name the query, per the rule that
+        // status text names its target).
+        if (folderFilter && !fragment.querySelector(".ft-folder")) {
+            const empty = document.createElement("div");
+            empty.className = "ft-filter-empty";
+            empty.textContent = `No folder matches "${(document.getElementById("ft-filter-input") as HTMLInputElement | null)?.value || folderFilter}"`;
+            fragment.appendChild(empty);
         }
 
         // Atomic swap — single reflow, no intermediate empty state

package/client/components/message-list.js

@@ -7,6 +7,7 @@ import * as state from "../lib/message-state.js";
 import { showMessage as viewerShow, clearViewer as viewerClear } from "./message-viewer.js";
 import { showContextMenu } from "./context-menu.js";
 import { pickFolder } from "./folder-picker.js";
+import { foldText } from "../lib/fold-text.js";
 import { seenOf, flaggedOf, draftOf, setSeen, setFlagged } from "@bobfrankston/mailx-types";
 let onMessageSelect;
 let currentAccountId;
@@ -37,7 +38,7 @@ let liveFilterText = "";
  *  it (background reloads resume). Lower-cased once here so the per-row test
  *  is a plain substring check. */
 export function setLiveFilter(query) {
-    liveFilterText = (query || "").trim().toLowerCase();
+    liveFilterText = foldText((query || "").trim());
     const body = document.getElementById("ml-body");
     if (body)
         applyLiveFilter(body);
@@ -51,7 +52,7 @@ function applyLiveFilter(body) {
         return;
     }
     for (const row of body.querySelectorAll(".ml-row")) {
-        const text = row.textContent?.toLowerCase() || "";
+        const text = foldText(row.textContent);
         row.classList.toggle("filter-hidden", !text.includes(liveFilterText));
     }
 }
@@ -1982,11 +1983,22 @@ class MessageRow {
         const icons = document.createElement("span");
         icons.className = "ml-status-icons";
         renderStatusIcons(icons, msg);
+        // Size, immediately left of the date (Bob 2026-08-10). It lives INSIDE
+        // the date cell rather than as a sixth grid column so it lands in the
+        // same place in all three list layouts — default, two-line and
+        // eleanor-view each declare their own column set, and a new column
+        // would have to be threaded through every one of them.
+        const size = document.createElement("span");
+        size.className = "ml-size";
+        size.textContent = formatSize(msg.size);
+        if (msg.size > 0)
+            size.title = `${msg.size.toLocaleString()} bytes`;
         const dateText = document.createElement("span");
         dateText.className = "ml-date-text";
         dateText.textContent = formatDate(effectiveDate(msg));
         dateText.title = dateBasis === "received" ? "Received date" : "Sent date";
         date.appendChild(icons);
+        date.appendChild(size);
         date.appendChild(dateText);
         row.appendChild(avatar);
         row.appendChild(flag);
@@ -2525,6 +2537,27 @@ function appendMessages(body, accountId, items) {
         row.attach(body);
     }
 }
+/**
+ * Message size for the list, in the width of a few characters.
+ *
+ * Deliberately coarse: the value is there to answer "is this a note or a
+ * 9 MB bounce", not to be an accounting figure — the exact byte count is on
+ * the tooltip. Sizes round to K below a megabyte and to one decimal above,
+ * so the column never grows past five characters and nothing shifts as you
+ * scroll. Anything under 1 KB reads "<1K" rather than "0K", which would look
+ * like a broken message rather than a short one.
+ */
+function formatSize(bytes) {
+    if (!bytes || bytes <= 0)
+        return "";
+    if (bytes < 1024)
+        return "<1K";
+    const kb = bytes / 1024;
+    if (kb < 1024)
+        return `${Math.round(kb)}K`;
+    const mb = kb / 1024;
+    return mb < 10 ? `${mb.toFixed(1)}M` : `${Math.round(mb)}M`;
+}
 function formatDate(epochMs) {
     const d = new Date(epochMs);
     const now = new Date();