@bobfrankston/rmfmail 1.0.467

package/client/components/folder-tree.js

@@ -0,0 +1,1093 @@
+/**
+ * Folder tree component -- renders account folders with hierarchy,
+ * expand/collapse, and optional unified inbox.
+ */
+import { getAccounts, getFolders, moveMessage, moveMessages, markFolderRead, createFolder, renameFolder, deleteFolder, emptyFolder, setupAccount, getDeviceAccounts, getVersion, syncAccount } from "../lib/api-client.js";
+import { showContextMenu } from "./context-menu.js";
+let onFolderSelect;
+let onUnifiedInbox = null;
+let selectedElement;
+let selectedAccountId = null;
+let selectedFolderId = null;
+let isFirstLoad = true; // only auto-select on first load
+let hasAutoSelected = false; // track whether we've ever managed to auto-select
+// Debounce timer for refreshFolderTree
+let refreshDebounceTimer = null;
+// Persist expand/collapse state in localStorage
+const expandState = JSON.parse(localStorage.getItem("mailx-folders-expanded") || "{}");
+function saveExpandState() {
+    localStorage.setItem("mailx-folders-expanded", JSON.stringify(expandState));
+}
+// Last-sync tracking: populated by folderSynced events. Memory-only; fresh
+// restarts start with an empty map and fill in as syncs happen.
+const folderLastSync = new Map(); // key = `${accountId}:${folderId}`
+function syncKey(accountId, folderId) {
+    return `${accountId}:${folderId}`;
+}
+export function setFolderSynced(accountId, folderId, syncedAt) {
+    folderLastSync.set(syncKey(accountId, folderId), syncedAt);
+    // Update the row in place if rendered — avoids a full re-render.
+    const el = document.querySelector(`.ft-folder[data-account-id="${CSS.escape(accountId)}"][data-folder-id="${folderId}"]`);
+    if (el)
+        applyFreshness(el, syncedAt);
+}
+export function getFolderSynced(accountId, folderId) {
+    return folderLastSync.get(syncKey(accountId, folderId));
+}
+function formatAge(ms) {
+    const secs = Math.round(ms / 1000);
+    if (secs < 60)
+        return `${secs}s ago`;
+    const mins = Math.round(secs / 60);
+    if (mins < 60)
+        return `${mins}m ago`;
+    const hours = Math.round(mins / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    return `${Math.round(hours / 24)}d ago`;
+}
+function freshnessClass(ageMs) {
+    if (ageMs < 5 * 60_000)
+        return "fresh"; // green
+    if (ageMs < 30 * 60_000)
+        return "stale-soft"; // yellow
+    return "stale"; // red
+}
+function applyFreshness(el, syncedAt) {
+    const age = Date.now() - syncedAt;
+    el.classList.remove("fresh", "stale-soft", "stale");
+    el.classList.add(freshnessClass(age));
+    el.title = `Last synced: ${formatAge(age)} (${new Date(syncedAt).toLocaleTimeString()})`;
+}
+/** Build a tree from flat folder list using delimiter */
+function buildTree(folders, delimiter, accountId) {
+    const root = [];
+    const byPath = {};
+    // Sort by path so parents come before children
+    const sorted = [...folders].sort((a, b) => a.path.localeCompare(b.path));
+    for (const f of sorted) {
+        const node = {
+            id: f.id,
+            accountId: f.accountId,
+            path: f.path,
+            name: f.name,
+            specialUse: f.specialUse,
+            delimiter: f.delimiter || delimiter,
+            unreadCount: f.unreadCount || 0,
+            totalCount: f.totalCount || 0,
+            children: [],
+        };
+        byPath[f.path] = node;
+        // Find parent by stripping the last segment
+        const lastDelim = f.path.lastIndexOf(delimiter);
+        if (lastDelim > 0) {
+            const parentPath = f.path.substring(0, lastDelim);
+            let parent = byPath[parentPath];
+            if (!parent) {
+                // Create virtual parent for non-selectable folders (e.g., "Added2")
+                const parentName = parentPath.split(delimiter).pop() || parentPath;
+                parent = {
+                    id: -1, // virtual, not selectable
+                    accountId,
+                    path: parentPath,
+                    name: parentName,
+                    specialUse: "",
+                    delimiter,
+                    unreadCount: 0,
+                    totalCount: 0,
+                    children: [],
+                };
+                byPath[parentPath] = parent;
+                // Insert the virtual parent into the tree
+                const grandParentDelim = parentPath.lastIndexOf(delimiter);
+                if (grandParentDelim > 0) {
+                    const grandParent = byPath[parentPath.substring(0, grandParentDelim)];
+                    if (grandParent) {
+                        grandParent.children.push(parent);
+                    }
+                    else {
+                        root.push(parent);
+                    }
+                }
+                else {
+                    root.push(parent);
+                }
+            }
+            parent.children.push(node);
+        }
+        else {
+            root.push(node);
+        }
+    }
+    // Aggregate counts from children to parents (so collapsed parents show totals)
+    function aggregateCounts(nodes) {
+        let unread = 0, total = 0;
+        for (const n of nodes) {
+            const child = aggregateCounts(n.children);
+            n.unreadCount += child.unread;
+            n.totalCount += child.total;
+            unread += n.unreadCount;
+            total += n.totalCount;
+        }
+        return { unread, total };
+    }
+    aggregateCounts(root);
+    return root;
+}
+/** Sort: INBOX first, then special folders, then alphabetical */
+function sortFolders(nodes) {
+    const specialOrder = { inbox: 0, sent: 1, outbox: 2, drafts: 3, trash: 4, junk: 5, archive: 6 };
+    const nameOrder = { inbox: 0, sent: 1, "sent items": 1, outbox: 2, drafts: 3, trash: 4, "deleted items": 4, junk: 5, "junk email": 5, "junk e-mail": 5, spam: 5, archive: 6 };
+    nodes.sort((a, b) => {
+        const aOrder = specialOrder[a.specialUse] ?? nameOrder[a.name.toLowerCase()] ?? 99;
+        const bOrder = specialOrder[b.specialUse] ?? nameOrder[b.name.toLowerCase()] ?? 99;
+        if (aOrder !== bOrder)
+            return aOrder - bOrder;
+        return a.name.localeCompare(b.name);
+    });
+    for (const n of nodes) {
+        if (n.children.length > 0)
+            sortFolders(n.children);
+    }
+}
+/** Render a folder node and its children recursively */
+function renderNode(node, container, depth) {
+    const hasChildren = node.children.length > 0;
+    const expandKey = `${node.accountId}:${node.path}`;
+    const isExpanded = expandState[expandKey] === true; // default collapsed
+    const folderEl = document.createElement("div");
+    folderEl.className = "ft-folder";
+    folderEl.dataset.accountId = node.accountId;
+    folderEl.dataset.folderId = String(node.id);
+    folderEl.dataset.folderPath = node.path;
+    folderEl.dataset.specialUse = node.specialUse || "";
+    folderEl.style.paddingLeft = `${depth * 16 + 8}px`;
+    // Expand/collapse toggle
+    const toggle = document.createElement("span");
+    toggle.className = "ft-toggle";
+    if (hasChildren) {
+        toggle.textContent = isExpanded ? "▾" : "▸";
+        toggle.addEventListener("click", (e) => {
+            e.stopPropagation();
+            expandState[expandKey] = !isExpanded;
+            saveExpandState();
+            // Re-render the tree
+            const treeContainer = document.getElementById("folder-tree");
+            if (treeContainer)
+                loadFolderTree(treeContainer);
+        });
+    }
+    else {
+        toggle.textContent = " ";
+    }
+    folderEl.appendChild(toggle);
+    const freshnessDot = document.createElement("span");
+    freshnessDot.className = "ft-freshness";
+    freshnessDot.setAttribute("aria-hidden", "true");
+    folderEl.appendChild(freshnessDot);
+    const nameSpan = document.createElement("span");
+    nameSpan.className = "ft-folder-name";
+    nameSpan.textContent = node.name;
+    folderEl.appendChild(nameSpan);
+    const syncedAt = getFolderSynced(node.accountId, node.id);
+    if (syncedAt)
+        applyFreshness(folderEl, syncedAt);
+    const isOutbox = node.specialUse === "outbox" || node.path.toLowerCase() === "outbox";
+    if (isOutbox && node.totalCount > 0) {
+        // Outbox: show total (pending) count with warning style
+        const badge = document.createElement("span");
+        badge.className = "ft-badge ft-badge-outbox";
+        badge.textContent = String(node.totalCount);
+        badge.title = `${node.totalCount} pending`;
+        folderEl.appendChild(badge);
+    }
+    else if (node.unreadCount > 0) {
+        const badge = document.createElement("span");
+        badge.className = "ft-badge";
+        badge.textContent = String(node.unreadCount);
+        badge.title = `${node.unreadCount} unread`;
+        folderEl.appendChild(badge);
+    }
+    // Total count (shown when View > Folder counts is checked)
+    if (node.totalCount > 0) {
+        const total = document.createElement("span");
+        total.className = "ft-total-count";
+        total.textContent = String(node.totalCount);
+        total.title = `${node.totalCount} total messages`;
+        folderEl.appendChild(total);
+    }
+    folderEl.addEventListener("click", () => {
+        if (node.id === -1) {
+            // Virtual parent — toggle expand instead of selecting
+            expandState[expandKey] = !isExpanded;
+            saveExpandState();
+            const treeContainer = document.getElementById("folder-tree");
+            if (treeContainer)
+                loadFolderTree(treeContainer);
+            return;
+        }
+        if (selectedElement)
+            selectedElement.classList.remove("selected");
+        folderEl.classList.add("selected");
+        selectedElement = folderEl;
+        selectedAccountId = node.accountId;
+        selectedFolderId = node.id;
+        onFolderSelect(node.accountId, node.id, node.name, node.specialUse || node.path.toLowerCase());
+    });
+    // ── Right-click context menu ──
+    folderEl.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const isTrash = node.specialUse === "trash" || node.path.toLowerCase().includes("trash");
+        const isJunk = node.specialUse === "junk" || node.path.toLowerCase().includes("spam") || node.path.toLowerCase().includes("junk");
+        const items = [
+            { label: "Mark all read", action: async () => {
+                    try {
+                        await markFolderRead(node.accountId, node.id);
+                        const treeContainer = document.getElementById("folder-tree");
+                        if (treeContainer)
+                            loadFolderTree(treeContainer);
+                    }
+                    catch { /* ignore */ }
+                } },
+            { label: "", action: () => { }, separator: true },
+            { label: "New subfolder...", action: async () => {
+                    const name = prompt("New folder name:");
+                    if (!name)
+                        return;
+                    try {
+                        await createFolder(node.accountId, node.path, name);
+                        const treeContainer = document.getElementById("folder-tree");
+                        if (treeContainer)
+                            loadFolderTree(treeContainer);
+                    }
+                    catch (err) {
+                        alert(`Failed: ${err.message}`);
+                    }
+                } },
+            { label: "Rename...", action: async () => {
+                    const newName = prompt("Rename folder:", node.name);
+                    if (!newName || newName === node.name)
+                        return;
+                    try {
+                        await renameFolder(node.accountId, node.id, newName);
+                        const treeContainer = document.getElementById("folder-tree");
+                        if (treeContainer)
+                            loadFolderTree(treeContainer);
+                    }
+                    catch (err) {
+                        alert(`Failed: ${err.message}`);
+                    }
+                }, disabled: !!node.specialUse },
+            { label: "Delete folder", action: async () => {
+                    if (!confirm(`Delete folder "${node.name}"? Messages will be moved to Trash.`))
+                        return;
+                    try {
+                        await deleteFolder(node.accountId, node.id);
+                        const treeContainer = document.getElementById("folder-tree");
+                        if (treeContainer)
+                            loadFolderTree(treeContainer);
+                    }
+                    catch (err) {
+                        alert(`Failed: ${err.message}`);
+                    }
+                }, disabled: !!node.specialUse },
+            { label: "", action: () => { }, separator: true },
+            // Q57: copy IMAP path so user can paste into accounts.jsonc as
+            // a spam/sent/drafts/trash hint without retyping case-sensitively.
+            { label: "Copy folder path", action: async () => {
+                    try {
+                        await navigator.clipboard.writeText(node.path);
+                        const status = document.getElementById("status-sync");
+                        if (status)
+                            status.textContent = `Copied: ${node.path}`;
+                    }
+                    catch {
+                        prompt("Folder path:", node.path);
+                    }
+                } },
+        ];
+        if (isTrash || isJunk) {
+            items.push({ label: "", action: () => { }, separator: true });
+            items.push({ label: `Empty ${node.name}`, action: async () => {
+                    if (!confirm(`Permanently delete all messages in "${node.name}"?`))
+                        return;
+                    try {
+                        await emptyFolder(node.accountId, node.id);
+                        const { setMessages } = await import("../lib/message-state.js");
+                        setMessages([]); // Folder emptied — clear list and viewer
+                        const treeContainer = document.getElementById("folder-tree");
+                        if (treeContainer)
+                            loadFolderTree(treeContainer);
+                    }
+                    catch (err) {
+                        alert(`Failed: ${err.message}`);
+                    }
+                } });
+        }
+        showContextMenu(e.clientX, e.clientY, items);
+    });
+    // ── Drop target for message drag-and-drop ──
+    if (node.id !== -1) {
+        let dragExpandTimer = null;
+        folderEl.addEventListener("dragover", (e) => {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = e.ctrlKey ? "copy" : "move";
+            folderEl.classList.add("drop-target");
+        });
+        folderEl.addEventListener("dragenter", () => {
+            if (hasChildren && !isExpanded && !dragExpandTimer) {
+                dragExpandTimer = setTimeout(() => {
+                    dragExpandTimer = null;
+                    expandState[expandKey] = true;
+                    saveExpandState();
+                    const treeContainer = document.getElementById("folder-tree");
+                    if (treeContainer)
+                        loadFolderTree(treeContainer);
+                }, 500);
+            }
+        });
+        folderEl.addEventListener("dragleave", () => {
+            folderEl.classList.remove("drop-target");
+            if (dragExpandTimer) {
+                clearTimeout(dragExpandTimer);
+                dragExpandTimer = null;
+            }
+        });
+        folderEl.addEventListener("drop", async (e) => {
+            e.preventDefault();
+            folderEl.classList.remove("drop-target");
+            if (dragExpandTimer) {
+                clearTimeout(dragExpandTimer);
+                dragExpandTimer = null;
+            }
+            // Multi-message or single-message drop
+            const multiData = e.dataTransfer.getData("application/x-mailx-messages");
+            const singleData = e.dataTransfer.getData("application/x-mailx-message");
+            const messages = multiData ? JSON.parse(multiData) : singleData ? [JSON.parse(singleData)] : [];
+            // Filter: not already in target folder
+            const toMove = messages.filter(m => m.folderId !== node.id || m.accountId !== node.accountId);
+            if (toMove.length === 0)
+                return;
+            const statusEl = document.getElementById("status-sync");
+            const crossAccount = toMove.some(m => m.accountId !== node.accountId);
+            try {
+                if (crossAccount) {
+                    // Cross-account: must do one at a time
+                    for (const msg of toMove) {
+                        const targetAccountId = msg.accountId !== node.accountId ? node.accountId : undefined;
+                        await moveMessage(msg.accountId, msg.uid, node.id, targetAccountId);
+                    }
+                }
+                else {
+                    // Same account: bulk move
+                    const accountId = toMove[0].accountId;
+                    const uids = toMove.map(m => m.uid);
+                    await moveMessages(accountId, uids, node.id);
+                }
+                const moved = toMove.length;
+                if (statusEl)
+                    statusEl.textContent = `Moved ${moved} message${moved > 1 ? "s" : ""} to ${node.name} — Ctrl+Z to undo`;
+                // Remove from shared state — list and viewer update automatically
+                const { removeMessages } = await import("../lib/message-state.js");
+                removeMessages(toMove);
+                const treeContainer = document.getElementById("folder-tree");
+                if (treeContainer)
+                    loadFolderTree(treeContainer);
+                // Notify app.ts so Ctrl+Z can undo this move. Each entry carries
+                // its ORIGINAL folderId/accountId so we know where to move back to.
+                document.dispatchEvent(new CustomEvent("mailx-moved", {
+                    detail: {
+                        messages: toMove.map(m => ({ accountId: m.accountId, uid: m.uid, sourceFolderId: m.folderId })),
+                        targetAccountId: node.accountId,
+                        targetFolderId: node.id,
+                    },
+                }));
+            }
+            catch (err) {
+                console.error(`Move failed: ${err.message}`);
+                if (statusEl)
+                    statusEl.textContent = `Move failed: ${err.message}`;
+            }
+        });
+    }
+    container.appendChild(folderEl);
+    // Render children if expanded
+    if (hasChildren && isExpanded) {
+        for (const child of node.children) {
+            renderNode(child, container, depth + 1);
+        }
+    }
+}
+export function initFolderTree(container, handler, unifiedHandler) {
+    onFolderSelect = handler;
+    onUnifiedInbox = unifiedHandler || null;
+    loadFolderTree(container);
+}
+// Item 12: outbox total drives a synthesized "Send-pending" row at the top
+// of the folder tree. The server pushes outboxStatus on every mutation; when
+// the total flips between zero and non-zero we re-render so the row appears
+// / disappears without waiting for the next full refresh.
+let lastOutboxTotal = 0;
+export function setOutboxTotal(total) {
+    const prev = lastOutboxTotal;
+    lastOutboxTotal = total | 0;
+    // Zero → zero: nothing to render, nothing to clear.
+    if (prev === 0 && lastOutboxTotal === 0)
+        return;
+    const existing = document.getElementById("ft-send-pending");
+    // Non-zero in both → just update the badge text; avoid a full re-render.
+    if (prev > 0 && lastOutboxTotal > 0 && existing) {
+        const badge = existing.querySelector(".ft-badge");
+        if (badge)
+            badge.textContent = String(lastOutboxTotal);
+        existing.title = `${lastOutboxTotal} message${lastOutboxTotal === 1 ? "" : "s"} queued for send`;
+        return;
+    }
+    // Presence flipped (0→N or N→0) — re-render to insert / remove the row.
+    const container = document.getElementById("folder-tree");
+    if (container)
+        loadFolderTree(container);
+}
+async function loadFolderTree(container) {
+    // Show loading state while preserving existing tree (if any) on refresh
+    const hadContent = container.children.length > 0 && !container.querySelector(".folder-loading");
+    if (!hadContent) {
+        container.innerHTML = `<div class="folder-loading">Loading accounts...</div>`;
+    }
+    try {
+        let accounts = await getAccounts();
+        // Accounts may still be registering (OAuth in progress) — retry a few times
+        if (accounts.length === 0) {
+            for (let retry = 0; retry < 5 && accounts.length === 0; retry++) {
+                await new Promise(r => setTimeout(r, 2000));
+                accounts = await getAccounts();
+            }
+        }
+        if (accounts.length === 0) {
+            container.innerHTML = `<div class="folder-loading">No accounts</div>`;
+            // Hide the message list and show setup in the viewer pane (full width)
+            const mlSection = document.querySelector(".message-list");
+            if (mlSection)
+                mlSection.style.display = "none";
+            const splitter = document.getElementById("splitter-h");
+            if (splitter)
+                splitter.style.display = "none";
+            const mvHeader = document.getElementById("mv-header");
+            if (mvHeader)
+                mvHeader.style.display = "none";
+            const mainBody = document.getElementById("mv-body");
+            if (mainBody) {
+                const isAndroid = window.mailxapi?.platform === "android";
+                const formDisplay = isAndroid ? "display:none;" : "";
+                const introText = isAndroid ? "" : "Add your email account to get started.";
+                const checkingHtml = isAndroid ? '<div style="padding:0.5rem;color:var(--color-text-muted)">Checking for accounts...</div>' : "";
+                mainBody.innerHTML = `<div style="padding:2rem;line-height:1.8;max-width:500px">
+                    <h2 style="margin-bottom:1rem">Welcome to mailx</h2>
+                    <div id="setup-device-accounts">${checkingHtml}</div>
+                    <div id="setup-cloud-status"></div>
+                    <p id="setup-form-intro">${introText}</p>
+                    <form id="setup-form" style="margin-top:1rem;${formDisplay}">
+                        <label style="display:block;margin-bottom:0.5rem">
+                            Email address
+                            <input id="setup-email" type="email" placeholder="you@gmail.com" required style="display:block;width:100%;padding:0.5rem;margin-top:0.25rem;background:var(--color-bg-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px">
+                        </label>
+                        <div id="setup-provider-preview" style="display:none;margin-bottom:0.5rem;padding:0.4rem 0.6rem;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:4px;font-size:0.9rem">
+                            <span id="setup-provider-icon" style="display:inline-block;width:1.2em;text-align:center;margin-right:0.4em"></span><span id="setup-provider-label"></span>
+                        </div>
+                        <label id="setup-name-row" style="display:none;margin-bottom:0.5rem">
+                            Your name <span style="color:var(--color-text-muted);font-size:0.85rem">(optional — auto-detected from Google)</span>
+                            <input id="setup-name" type="text" placeholder="Your Name (leave blank to use Google profile)" style="display:block;width:100%;padding:0.5rem;margin-top:0.25rem;background:var(--color-bg-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px">
+                        </label>
+                        <label id="setup-password-row" style="display:none;margin-bottom:0.5rem">
+                            Password
+                            <input id="setup-password" type="password" placeholder="password" style="display:block;width:100%;padding:0.5rem;margin-top:0.25rem;background:var(--color-bg-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px">
+                            <div id="setup-app-password-help" style="display:none;margin-top:0.25rem;font-size:0.8rem;color:var(--color-text-muted)"></div>
+                        </label>
+                        <button id="setup-submit" type="submit" style="display:none;margin-top:1rem;padding:0.5rem 2rem;background:var(--color-accent);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem">Add Account</button>
+                        <div id="setup-status" style="margin-top:1rem;color:var(--color-text-muted)"></div>
+                    </form>
+                    <details style="margin-top:2rem;color:var(--color-text-muted)">
+                        <summary>Manual setup (advanced)</summary>
+                        <p style="margin-top:0.5rem">Create <code>~/.rmfmail/config.jsonc</code> with a cloud provider:</p>
+                        <code style="display:block;padding:0.75rem;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:4px;margin:0.5rem 0;white-space:pre;font-size:0.85rem">{ "sharedDir": { "provider": "gdrive", "path": "rmfmail" } }</code>
+                        <p style="margin-top:0.5rem;font-size:0.85rem">Settings sync via Google Drive API (auto-configured for Gmail accounts).</p>
+                    </details>
+                </div>`;
+                // Wire up the setup form
+                const form = document.getElementById("setup-form");
+                const emailInput = document.getElementById("setup-email");
+                const statusEl = document.getElementById("setup-status");
+                // Hide password for OAuth providers, show app-password help for others
+                const APP_PASSWORD_HELP = {
+                    "yahoo.com": "Use an app password: Yahoo Settings → Account Security → Generate app password",
+                    "aol.com": "Use an app password: AOL Settings → Account Security → Generate app password",
+                    "icloud.com": "Use an app-specific password: appleid.apple.com → Sign-In and Security → App-Specific Passwords",
+                };
+                // Q67: describe the detected provider so the user knows which
+                // auto-config path we're about to take BEFORE they hit Next.
+                // Gmail / Google Workspace domains auto-detect via MX in the
+                // service; here we can only name the known ones up front and
+                // say "will auto-detect" for everything else.
+                const PROVIDER_PREVIEW = {
+                    "gmail.com": { icon: "✉", label: "Gmail — OAuth (no password needed)" },
+                    "googlemail.com": { icon: "✉", label: "Gmail — OAuth (no password needed)" },
+                    "outlook.com": { icon: "✉", label: "Outlook.com — OAuth (no password needed)" },
+                    "hotmail.com": { icon: "✉", label: "Outlook.com — OAuth (no password needed)" },
+                    "live.com": { icon: "✉", label: "Outlook.com — OAuth (no password needed)" },
+                    "yahoo.com": { icon: "✉", label: "Yahoo Mail — IMAP (needs app password)" },
+                    "aol.com": { icon: "✉", label: "AOL Mail — IMAP (needs app password)" },
+                    "icloud.com": { icon: "✉", label: "iCloud Mail — IMAP (needs app-specific password)" },
+                    "me.com": { icon: "✉", label: "iCloud Mail — IMAP (needs app-specific password)" },
+                    "mac.com": { icon: "✉", label: "iCloud Mail — IMAP (needs app-specific password)" },
+                };
+                let oauthAutoFired = false;
+                emailInput?.addEventListener("input", () => {
+                    const email = emailInput.value.trim();
+                    const domain = email.split("@")[1]?.toLowerCase() || "";
+                    const hasAt = email.includes("@") && domain.length > 0;
+                    const isOAuth = ["gmail.com", "googlemail.com", "outlook.com", "hotmail.com", "live.com"].includes(domain);
+                    const isGmailLike = ["gmail.com", "googlemail.com"].includes(domain);
+                    // Provider preview row
+                    const preview = document.getElementById("setup-provider-preview");
+                    const icon = document.getElementById("setup-provider-icon");
+                    const label = document.getElementById("setup-provider-label");
+                    if (preview && icon && label) {
+                        if (hasAt) {
+                            const hit = PROVIDER_PREVIEW[domain];
+                            icon.textContent = hit ? hit.icon : "❓";
+                            label.textContent = hit ? hit.label : `${domain} — will auto-detect via MX records`;
+                            preview.style.display = "block";
+                        }
+                        else {
+                            preview.style.display = "none";
+                        }
+                    }
+                    // OAuth providers: auto-fire setup immediately once domain
+                    // is recognized — don't show name/password (name is auto-
+                    // detected from Google profile, no password needed). This
+                    // eliminates the "form flash" where fields briefly appear
+                    // before the page reloads.
+                    if (hasAt && isOAuth && !oauthAutoFired && !setupTriggered) {
+                        oauthAutoFired = true;
+                        statusEl.textContent = `Connecting to ${isGmailLike ? "Gmail" : "Outlook"}...`;
+                        trySetup();
+                        return;
+                    }
+                    // Non-OAuth: progressive reveal of name + password + submit.
+                    const nameRow = document.getElementById("setup-name-row");
+                    const pwRow = document.getElementById("setup-password-row");
+                    const submitBtn = document.getElementById("setup-submit");
+                    if (nameRow)
+                        nameRow.style.display = hasAt && !isOAuth ? "block" : "none";
+                    if (pwRow)
+                        pwRow.style.display = hasAt && !isOAuth ? "block" : "none";
+                    if (submitBtn)
+                        submitBtn.style.display = hasAt && !isOAuth ? "block" : "none";
+                    const helpEl = document.getElementById("setup-app-password-help");
+                    if (helpEl) {
+                        const help = APP_PASSWORD_HELP[domain];
+                        helpEl.style.display = help ? "block" : "none";
+                        helpEl.textContent = help || "";
+                    }
+                });
+                // When a valid email is entered, try setup immediately — if cloud has
+                // existing accounts, loads them without needing name/password
+                let setupTriggered = false;
+                async function trySetup() {
+                    const email = emailInput.value.trim();
+                    if (!email || !email.includes("@") || setupTriggered)
+                        return;
+                    const name = document.getElementById("setup-name").value.trim();
+                    const password = document.getElementById("setup-password").value;
+                    setupTriggered = true;
+                    statusEl.textContent = "Checking for existing accounts...";
+                    try {
+                        const data = await setupAccount(name, email, password);
+                        if (data.ok) {
+                            statusEl.textContent = data.message || "Accounts loaded! Syncing...";
+                            setTimeout(() => location.reload(), 5000);
+                        }
+                        else {
+                            setupTriggered = false;
+                            statusEl.textContent = `Error: ${data.error || "Setup failed"}`;
+                        }
+                    }
+                    catch (err) {
+                        setupTriggered = false;
+                        statusEl.textContent = `Error: ${err.message}`;
+                    }
+                }
+                form?.addEventListener("submit", async (e) => {
+                    e.preventDefault();
+                    await trySetup();
+                });
+                // Auto-trigger for OAuth providers when email looks complete
+                emailInput?.addEventListener("change", async () => {
+                    const domain = emailInput.value.split("@")[1]?.toLowerCase() || "";
+                    const isOAuth = ["gmail.com", "googlemail.com", "outlook.com", "hotmail.com", "live.com"].includes(domain);
+                    if (isOAuth)
+                        await trySetup();
+                });
+                // Show cloud storage status in setup form
+                getVersion().then((d) => {
+                    const cloudEl = document.getElementById("setup-cloud-status");
+                    if (!cloudEl)
+                        return;
+                    const s = d.storage || {};
+                    if (s.cloudError) {
+                        cloudEl.innerHTML = `<div style="padding:0.75rem;margin-bottom:1rem;background:#5c1a1a;color:#fca;border:1px solid #a33;border-radius:4px">
+                            <strong>Cloud storage unavailable:</strong> ${s.cloudError}<br>
+                            <span style="font-size:0.85rem">Settings on ${s.provider || "cloud"} cannot be read. Add an account below to initialize cloud storage.</span>
+                        </div>`;
+                    }
+                    else if (s.mode === "api") {
+                        cloudEl.innerHTML = `<div style="padding:0.5rem;margin-bottom:1rem;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-muted)">
+                            Using ${s.provider} API (no local mount)
+                        </div>`;
+                    }
+                }).catch(() => { });
+                // On Android, check for device Google accounts
+                getDeviceAccounts().then(async (deviceAccounts) => {
+                    const pickerEl = document.getElementById("setup-device-accounts");
+                    if (!pickerEl)
+                        return;
+                    if (deviceAccounts.length === 0) {
+                        // No device accounts — show the form
+                        pickerEl.innerHTML = "";
+                        const f = document.getElementById("setup-form");
+                        const i = document.getElementById("setup-form-intro");
+                        if (f)
+                            f.style.display = "block";
+                        if (i)
+                            i.textContent = "Add your email account to get started.";
+                        return;
+                    }
+                    const formEl = document.getElementById("setup-form");
+                    const introEl = document.getElementById("setup-form-intro");
+                    // Auto-setup helper
+                    async function autoSetup(email, name) {
+                        if (introEl)
+                            introEl.textContent = "";
+                        if (formEl)
+                            formEl.style.display = "none";
+                        pickerEl.innerHTML = `<div style="padding:0.5rem;color:var(--color-text-muted)">Setting up ${email}...</div>`;
+                        const result = await setupAccount(name, email, "");
+                        if (result?.ok) {
+                            pickerEl.innerHTML = `<div style="padding:0.5rem;color:var(--color-accent)">${result.message || "Account added!"}</div>`;
+                            setTimeout(() => location.reload(), 2000);
+                        }
+                        else {
+                            pickerEl.innerHTML = `<div style="padding:0.5rem;color:#f55">${result?.error || "Setup failed"}</div>`;
+                            if (formEl)
+                                formEl.style.display = "block";
+                        }
+                    }
+                    // One account — auto-select it
+                    if (deviceAccounts.length === 1) {
+                        await autoSetup(deviceAccounts[0].email, deviceAccounts[0].name);
+                        return;
+                    }
+                    // Multiple accounts — show picker
+                    if (introEl)
+                        introEl.textContent = "Select an account:";
+                    if (formEl)
+                        formEl.style.display = "none";
+                    pickerEl.innerHTML = deviceAccounts.map((a) => `<button class="device-account-btn" data-email="${a.email}" data-name="${a.name}" style="display:block;width:100%;padding:0.75rem 1rem;margin-bottom:0.5rem;background:var(--color-accent);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:1rem;text-align:left">Use ${a.email}</button>`).join("") + `<button id="setup-show-form" style="margin-top:0.5rem;padding:0.5rem 1rem;background:none;color:var(--color-text-muted);border:none;cursor:pointer;font-size:0.9rem">Use a different account...</button>`;
+                    pickerEl.querySelectorAll(".device-account-btn").forEach((btn) => {
+                        btn.addEventListener("click", async () => {
+                            await autoSetup(btn.dataset.email || "", btn.dataset.name || "");
+                        });
+                    });
+                    document.getElementById("setup-show-form")?.addEventListener("click", () => {
+                        pickerEl.style.display = "none";
+                        if (formEl)
+                            formEl.style.display = "block";
+                        if (introEl)
+                            introEl.textContent = "Add your email account to get started.";
+                    });
+                }).catch(() => {
+                    // Bridge failed — show the form
+                    const p = document.getElementById("setup-device-accounts");
+                    if (p)
+                        p.innerHTML = "";
+                    const f = document.getElementById("setup-form");
+                    const i = document.getElementById("setup-form-intro");
+                    if (f)
+                        f.style.display = "block";
+                    if (i)
+                        i.textContent = "Add your email account to get started.";
+                });
+            }
+            // Dismiss startup overlay
+            const overlay = document.getElementById("startup-overlay");
+            if (overlay) {
+                overlay.classList.add("hidden");
+                setTimeout(() => overlay.remove(), 400);
+            }
+            return;
+        }
+        // Fetch ALL account folder data in parallel BEFORE touching the DOM
+        const accountFolderData = await Promise.all(accounts.map(async (account) => {
+            const accountKey = `account:${account.id}`;
+            const accountExpanded = expandState[accountKey] !== false;
+            const folders = accountExpanded ? await getFolders(account.id) : [];
+            return { account, folders };
+        }));
+        // Save scroll position before rebuild
+        const savedScroll = container.scrollTop;
+        // Build entire new tree into a DocumentFragment (off-screen, no reflows)
+        const fragment = document.createDocumentFragment();
+        // 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) {
+            const unifiedEl = document.createElement("div");
+            unifiedEl.className = "ft-folder ft-unified";
+            unifiedEl.title = accounts.length > 1
+                ? "Merged inbox view of all accounts — click to see messages from every account's INBOX sorted by date"
+                : "Inbox view across all your accounts";
+            unifiedEl.innerHTML = `<span class="ft-toggle"> </span><span class="ft-folder-name">All Inboxes</span>`;
+            unifiedEl.addEventListener("click", () => {
+                if (selectedElement)
+                    selectedElement.classList.remove("selected");
+                unifiedEl.classList.add("selected");
+                selectedElement = unifiedEl;
+                selectedAccountId = null;
+                selectedFolderId = -1;
+                if (onUnifiedInbox)
+                    onUnifiedInbox();
+            });
+            fragment.appendChild(unifiedEl);
+        }
+        // Item 12: Send-pending virtual row — synthesized from the outbox
+        // 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) {
+            const pendingEl = document.createElement("div");
+            pendingEl.className = "ft-folder ft-unified ft-send-pending";
+            pendingEl.id = "ft-send-pending";
+            pendingEl.title = `${lastOutboxTotal} message${lastOutboxTotal === 1 ? "" : "s"} queued for send`;
+            pendingEl.innerHTML = `<span class="ft-toggle"> </span><span class="ft-folder-name">Send-pending</span><span class="ft-badge ft-badge-outbox">${lastOutboxTotal}</span>`;
+            pendingEl.addEventListener("click", async () => {
+                try {
+                    const { openOutboxView } = await import("./outbox-view.js");
+                    openOutboxView();
+                }
+                catch { /* outbox-view load failed — silent is OK, status pill still works */ }
+            });
+            fragment.appendChild(pendingEl);
+        }
+        for (const { account, folders } of accountFolderData) {
+            const accountEl = document.createElement("div");
+            accountEl.className = "ft-account";
+            const accountKey = `account:${account.id}`;
+            const accountExpanded = expandState[accountKey] !== false; // accounts default expanded
+            const header = document.createElement("div");
+            header.className = "ft-account-header";
+            header.textContent = `${accountExpanded ? "▾" : "▸"} ${account.label || account.name}`;
+            header.addEventListener("click", () => {
+                expandState[accountKey] = !accountExpanded;
+                saveExpandState();
+                const treeContainer = document.getElementById("folder-tree");
+                if (treeContainer)
+                    loadFolderTree(treeContainer);
+            });
+            // Right-click: full menu instead of plain toggle (Q54).
+            header.addEventListener("contextmenu", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const items = [
+                    { label: "Mark all read (account)", action: async () => {
+                            const folderRows = folders.slice();
+                            for (const f of folderRows) {
+                                try {
+                                    await markFolderRead(account.id, f.id);
+                                }
+                                catch { /* keep going */ }
+                            }
+                            const tc = document.getElementById("folder-tree");
+                            if (tc)
+                                loadFolderTree(tc);
+                        } },
+                    { label: "", action: () => { }, separator: true },
+                    { label: "Expand all folders", action: () => {
+                            const keys = Object.keys(expandState).filter(k => k.startsWith(`${account.id}:`));
+                            for (const k of keys)
+                                expandState[k] = true;
+                            expandState[accountKey] = true;
+                            saveExpandState();
+                            const tc = document.getElementById("folder-tree");
+                            if (tc)
+                                loadFolderTree(tc);
+                        } },
+                    { label: "Collapse all folders", action: () => {
+                            const keys = Object.keys(expandState).filter(k => k.startsWith(`${account.id}:`));
+                            for (const k of keys)
+                                expandState[k] = false;
+                            expandState[accountKey] = false;
+                            saveExpandState();
+                            const tc = document.getElementById("folder-tree");
+                            if (tc)
+                                loadFolderTree(tc);
+                        } },
+                    { label: "", action: () => { }, separator: true },
+                    { label: "Sync this account now", action: async () => {
+                            try {
+                                await syncAccount(account.id);
+                            }
+                            catch (err) {
+                                alert(`Sync failed: ${err?.message || err}`);
+                            }
+                        } },
+                ];
+                showContextMenu(e.clientX, e.clientY, items);
+            });
+            accountEl.appendChild(header);
+            if (accountExpanded && folders.length > 0) {
+                const delimiter = folders[0]?.delimiter || ".";
+                const tree = buildTree(folders, delimiter, account.id);
+                sortFolders(tree);
+                // 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,
+                // or `Sent Items` alongside a `Sent items` rename gone sideways.
+                // A ⚠ glyph on the affected rows lets the user notice before
+                // losing mail to the wrong one.
+                const lowerCounts = new Map();
+                for (const f of folders) {
+                    const key = (f.path || "").toLowerCase();
+                    lowerCounts.set(key, (lowerCounts.get(key) || 0) + 1);
+                }
+                const duplicatePaths = new Set();
+                for (const [k, c] of lowerCounts)
+                    if (c > 1)
+                        duplicatePaths.add(k);
+                for (const node of tree) {
+                    renderNode(node, accountEl, 1);
+                }
+                if (duplicatePaths.size > 0) {
+                    accountEl.querySelectorAll(".ft-folder").forEach(el => {
+                        const p = (el.dataset.folderPath || "").toLowerCase();
+                        if (duplicatePaths.has(p)) {
+                            el.classList.add("ft-folder-duplicate");
+                            el.title = (el.title ? el.title + " — " : "") +
+                                "Case-duplicate folder name on the server (another folder with the same name in different case exists)";
+                        }
+                    });
+                }
+            }
+            fragment.appendChild(accountEl);
+        }
+        // Atomic swap — single reflow, no intermediate empty state
+        container.replaceChildren(fragment);
+        // Restore scroll position
+        container.scrollTop = savedScroll;
+        // Re-select previous folder, or auto-select on first load
+        const allFolderEls = container.querySelectorAll('.ft-folder');
+        let target = null;
+        if (selectedFolderId === -1) {
+            // Unified inbox was selected — just re-highlight it, don't click
+            const unified = container.querySelector('.ft-unified');
+            if (unified) {
+                unified.classList.add("selected");
+                selectedElement = unified;
+                target = unified;
+            }
+        }
+        else if (selectedAccountId && selectedFolderId !== null && selectedFolderId >= 0) {
+            for (const f of allFolderEls) {
+                const el = f;
+                if (el.dataset.accountId === selectedAccountId && el.dataset.folderId === String(selectedFolderId)) {
+                    el.classList.add("selected");
+                    selectedElement = el;
+                    target = el;
+                    break;
+                }
+            }
+        }
+        // Auto-select on first load OR until we successfully auto-selected at least once
+        // (handles Android where folders don't exist on first load — they arrive after sync)
+        if (!target && (isFirstLoad || !hasAutoSelected)) {
+            // Auto-select only on first load — not on refresh (prevents jumping)
+            const unified = container.querySelector('.ft-unified');
+            if (unified) {
+                target = unified;
+            }
+            else {
+                let bestInbox = null;
+                let bestCount = -1;
+                for (const f of allFolderEls) {
+                    const name = f.querySelector('.ft-folder-name')?.textContent ?? "";
+                    if (name.toLowerCase() === "inbox") {
+                        const badge = f.querySelector('.ft-badge');
+                        const count = badge ? parseInt(badge.textContent || "0") : 0;
+                        if (count > bestCount) {
+                            bestCount = count;
+                            bestInbox = f;
+                        }
+                    }
+                }
+                target = bestInbox;
+            }
+            if (!target && allFolderEls.length > 0)
+                target = allFolderEls[0];
+            if (target) {
+                target.click();
+                hasAutoSelected = true;
+            }
+        }
+        isFirstLoad = false;
+        // Dismiss startup overlay once tree is loaded
+        const overlay = document.getElementById("startup-overlay");
+        if (overlay)
+            overlay.classList.add("hidden");
+        // Remove from DOM after transition
+        setTimeout(() => overlay?.remove(), 400);
+    }
+    catch (e) {
+        // Don't destroy existing folder tree on error — just log it
+        console.error(`Folder tree error: ${e.message}`);
+        // Only show error if tree is completely empty (first load failure)
+        if (container.children.length === 0 || container.querySelector(".folder-loading")) {
+            const errEl = document.createElement("div");
+            errEl.className = "folder-loading";
+            errEl.textContent = `Error loading folders: ${e.message}`;
+            container.replaceChildren(errEl);
+        }
+        // Dismiss overlay on error too
+        const overlay = document.getElementById("startup-overlay");
+        if (overlay) {
+            const status = document.getElementById("startup-status");
+            if (status)
+                status.textContent = `Error: ${e.message}`;
+            setTimeout(() => { overlay.classList.add("hidden"); setTimeout(() => overlay.remove(), 400); }, 2000);
+        }
+    }
+}
+/** Refresh folder tree (e.g., after sync) — debounced to prevent rapid rebuilds */
+export function refreshFolderTree() {
+    if (refreshDebounceTimer)
+        clearTimeout(refreshDebounceTimer);
+    refreshDebounceTimer = setTimeout(() => {
+        refreshDebounceTimer = null;
+        const container = document.getElementById("folder-tree");
+        if (container)
+            loadFolderTree(container);
+    }, 300);
+}
+/**
+ * Incremental count update — patches badge counts in-place without rebuilding the DOM.
+ * Used for folderCountsChanged events to avoid jitter. Falls back to full rebuild
+ * if the folder structure has changed.
+ */
+export async function updateFolderCounts() {
+    const container = document.getElementById("folder-tree");
+    if (!container)
+        return;
+    // If tree hasn't loaded yet, do a full load
+    if (container.children.length === 0 || container.querySelector(".folder-loading")) {
+        refreshFolderTree();
+        return;
+    }
+    try {
+        const accounts = await getAccounts();
+        // Fetch all folder data in parallel
+        const allFolderData = await Promise.all(accounts.map(async (account) => {
+            const folders = await getFolders(account.id);
+            return { accountId: account.id, folders };
+        }));
+        // Build a lookup: accountId+folderId → { unreadCount, totalCount }
+        // Also rebuild trees to get aggregated counts
+        const countMap = new Map();
+        for (const { accountId, folders } of allFolderData) {
+            const delimiter = folders[0]?.delimiter || ".";
+            const tree = buildTree(folders, delimiter, accountId);
+            // Walk the tree and collect counts (buildTree already aggregates)
+            function collectCounts(nodes) {
+                for (const n of nodes) {
+                    countMap.set(`${n.accountId}:${n.id}`, { unread: n.unreadCount, total: n.totalCount });
+                    collectCounts(n.children);
+                }
+            }
+            collectCounts(tree);
+        }
+        // Patch existing DOM elements in-place
+        const folderEls = container.querySelectorAll(".ft-folder[data-account-id][data-folder-id]");
+        let structureChanged = false;
+        for (const el of folderEls) {
+            const htmlEl = el;
+            const key = `${htmlEl.dataset.accountId}:${htmlEl.dataset.folderId}`;
+            const counts = countMap.get(key);
+            if (!counts)
+                continue; // folder not found — structure may have changed
+            // Update unread badge
+            const isOutbox = htmlEl.dataset.specialUse === "outbox" || htmlEl.dataset.folderPath?.toLowerCase() === "outbox";
+            let badge = htmlEl.querySelector(".ft-badge");
+            const outboxBadge = htmlEl.querySelector(".ft-badge-outbox");
+            if (isOutbox) {
+                if (counts.total > 0) {
+                    if (outboxBadge) {
+                        outboxBadge.textContent = String(counts.total);
+                    }
+                    else {
+                        const b = document.createElement("span");
+                        b.className = "ft-badge ft-badge-outbox";
+                        b.textContent = String(counts.total);
+                        htmlEl.querySelector(".ft-folder-name")?.after(b);
+                    }
+                }
+                else if (outboxBadge) {
+                    outboxBadge.remove();
+                }
+            }
+            else {
+                if (counts.unread > 0) {
+                    if (badge) {
+                        badge.textContent = String(counts.unread);
+                    }
+                    else {
+                        const b = document.createElement("span");
+                        b.className = "ft-badge";
+                        b.textContent = String(counts.unread);
+                        htmlEl.querySelector(".ft-folder-name")?.after(b);
+                    }
+                }
+                else if (badge && !badge.classList.contains("ft-badge-outbox")) {
+                    badge.remove();
+                }
+            }
+            // Update total count
+            let totalEl = htmlEl.querySelector(".ft-total-count");
+            if (counts.total > 0) {
+                if (totalEl) {
+                    totalEl.textContent = String(counts.total);
+                }
+                else {
+                    const t = document.createElement("span");
+                    t.className = "ft-total-count";
+                    t.textContent = String(counts.total);
+                    htmlEl.appendChild(t);
+                }
+            }
+            else if (totalEl) {
+                totalEl.remove();
+            }
+        }
+        // Check if folder count changed (new folders added or removed)
+        const existingCount = folderEls.length;
+        let serverCount = 0;
+        for (const { folders } of allFolderData)
+            serverCount += folders.length;
+        if (Math.abs(existingCount - serverCount) > 2) {
+            // Structure changed significantly — do a full rebuild
+            refreshFolderTree();
+        }
+    }
+    catch {
+        // If count update fails, fall back to full rebuild
+        refreshFolderTree();
+    }
+}
+//# sourceMappingURL=folder-tree.js.map