@bobfrankston/rmfmail 1.0.467

package/client/components/folder-picker.js

@@ -0,0 +1,119 @@
+/**
+ * Folder picker — small modal for choosing a destination folder.
+ * Used by the message-list right-click "Move to folder…" item and any
+ * other UI that needs the user to pick a folder.
+ *
+ * Reads folders from the local DB via getFolders() (local-first — no
+ * server round-trip). Filters by typed text. Returns the selected
+ * folder, or null if the user dismissed.
+ */
+import { getFolders } from "../lib/api-client.js";
+/** Show a modal folder picker. Returns a promise resolving to the picked
+ *  folder, or null if dismissed. The list is restricted to one account
+ *  (the current message's account) so it doesn't get cluttered with
+ *  unrelated folders; cross-account moves can be added later via an
+ *  account selector at the top of the picker. */
+export function pickFolder(accountId, opts) {
+    return new Promise(async (resolve) => {
+        const overlay = document.createElement("div");
+        overlay.className = "folder-picker-overlay";
+        overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:10000;display:flex;align-items:center;justify-content:center;";
+        const modal = document.createElement("div");
+        modal.className = "folder-picker-modal";
+        modal.style.cssText = "background:var(--bg, #fff);color:var(--fg, #000);border:1px solid var(--border, #ccc);border-radius:6px;box-shadow:0 4px 24px rgba(0,0,0,0.3);width:380px;max-width:90vw;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;";
+        const header = document.createElement("div");
+        header.style.cssText = "padding:10px 14px;border-bottom:1px solid var(--border, #ddd);font-weight:600;";
+        header.textContent = opts?.title || "Move to folder…";
+        modal.appendChild(header);
+        const search = document.createElement("input");
+        search.type = "text";
+        search.placeholder = "Filter folders…";
+        search.style.cssText = "margin:8px 12px;padding:6px 10px;border:1px solid var(--border, #ccc);border-radius:4px;font-size:13px;";
+        modal.appendChild(search);
+        const listEl = document.createElement("div");
+        listEl.style.cssText = "flex:1;overflow-y:auto;padding:4px 0;";
+        modal.appendChild(listEl);
+        const footer = document.createElement("div");
+        footer.style.cssText = "padding:8px 12px;border-top:1px solid var(--border, #ddd);display:flex;justify-content:flex-end;gap:8px;";
+        const cancelBtn = document.createElement("button");
+        cancelBtn.textContent = "Cancel";
+        cancelBtn.style.cssText = "padding:6px 14px;cursor:pointer;";
+        footer.appendChild(cancelBtn);
+        modal.appendChild(footer);
+        overlay.appendChild(modal);
+        document.body.appendChild(overlay);
+        const dismiss = (result) => {
+            overlay.remove();
+            document.removeEventListener("keydown", onKey);
+            resolve(result);
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                dismiss(null);
+            }
+            if (e.key === "Enter") {
+                const first = listEl.querySelector(".folder-picker-row.match");
+                if (first)
+                    first.click();
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        overlay.addEventListener("click", (e) => { if (e.target === overlay)
+            dismiss(null); });
+        cancelBtn.addEventListener("click", () => dismiss(null));
+        // Local-first: load from DB synchronously-ish (one IPC round-trip).
+        let folders = [];
+        try {
+            folders = (await getFolders(accountId)) || [];
+        }
+        catch (e) {
+            listEl.textContent = "Failed to load folders";
+            return;
+        }
+        // Hide special-use that don't make sense as targets (Outbox).
+        // Allow Trash / Junk so users can manually file into them.
+        const excluded = new Set(opts?.excludeFolderIds || []);
+        const targets = folders
+            .filter((f) => !excluded.has(f.id))
+            .filter((f) => f.specialUse !== "outbox")
+            .sort((a, b) => a.path.localeCompare(b.path));
+        function render(filter) {
+            listEl.innerHTML = "";
+            const lc = filter.toLowerCase().trim();
+            let firstMatchSet = false;
+            for (const f of targets) {
+                const row = document.createElement("div");
+                row.className = "folder-picker-row";
+                row.style.cssText = "padding:6px 14px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:8px;";
+                const name = document.createElement("span");
+                name.textContent = f.path;
+                const tag = document.createElement("span");
+                tag.style.cssText = "color:var(--muted, #888);font-size:11px;";
+                tag.textContent = f.specialUse || "";
+                row.appendChild(name);
+                row.appendChild(tag);
+                const matches = !lc || f.path.toLowerCase().includes(lc);
+                if (matches) {
+                    row.classList.add("match");
+                    if (!firstMatchSet) {
+                        row.style.background = "var(--hover, #eee)";
+                        firstMatchSet = true;
+                    }
+                }
+                row.addEventListener("mouseenter", () => row.style.background = "var(--hover, #eee)");
+                row.addEventListener("mouseleave", () => row.style.background = "");
+                row.addEventListener("click", () => {
+                    dismiss({ accountId, folderId: f.id, folderPath: f.path, folderName: f.path.split(/[./]/).pop() || f.path });
+                });
+                if (!matches)
+                    row.style.display = "none";
+                listEl.appendChild(row);
+            }
+        }
+        render("");
+        search.addEventListener("input", () => render(search.value));
+        setTimeout(() => search.focus(), 0);
+    });
+}
+//# sourceMappingURL=folder-picker.js.map

package/client/components/folder-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"folder-picker.js","sourceRoot":"","sources":["folder-picker.ts"],"names":[],"mappings":"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"}

package/client/components/folder-picker.ts

@@ -0,0 +1,127 @@
+/**
+ * Folder picker — small modal for choosing a destination folder.
+ * Used by the message-list right-click "Move to folder…" item and any
+ * other UI that needs the user to pick a folder.
+ *
+ * Reads folders from the local DB via getFolders() (local-first — no
+ * server round-trip). Filters by typed text. Returns the selected
+ * folder, or null if the user dismissed.
+ */
+
+import { getFolders } from "../lib/api-client.js";
+
+export interface FolderPickResult {
+    accountId: string;
+    folderId: number;
+    folderPath: string;
+    folderName: string;
+}
+
+/** Show a modal folder picker. Returns a promise resolving to the picked
+ *  folder, or null if dismissed. The list is restricted to one account
+ *  (the current message's account) so it doesn't get cluttered with
+ *  unrelated folders; cross-account moves can be added later via an
+ *  account selector at the top of the picker. */
+export function pickFolder(accountId: string, opts?: { excludeFolderIds?: number[]; title?: string }): Promise<FolderPickResult | null> {
+    return new Promise(async (resolve) => {
+        const overlay = document.createElement("div");
+        overlay.className = "folder-picker-overlay";
+        overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:10000;display:flex;align-items:center;justify-content:center;";
+
+        const modal = document.createElement("div");
+        modal.className = "folder-picker-modal";
+        modal.style.cssText = "background:var(--bg, #fff);color:var(--fg, #000);border:1px solid var(--border, #ccc);border-radius:6px;box-shadow:0 4px 24px rgba(0,0,0,0.3);width:380px;max-width:90vw;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;";
+
+        const header = document.createElement("div");
+        header.style.cssText = "padding:10px 14px;border-bottom:1px solid var(--border, #ddd);font-weight:600;";
+        header.textContent = opts?.title || "Move to folder…";
+        modal.appendChild(header);
+
+        const search = document.createElement("input");
+        search.type = "text";
+        search.placeholder = "Filter folders…";
+        search.style.cssText = "margin:8px 12px;padding:6px 10px;border:1px solid var(--border, #ccc);border-radius:4px;font-size:13px;";
+        modal.appendChild(search);
+
+        const listEl = document.createElement("div");
+        listEl.style.cssText = "flex:1;overflow-y:auto;padding:4px 0;";
+        modal.appendChild(listEl);
+
+        const footer = document.createElement("div");
+        footer.style.cssText = "padding:8px 12px;border-top:1px solid var(--border, #ddd);display:flex;justify-content:flex-end;gap:8px;";
+        const cancelBtn = document.createElement("button");
+        cancelBtn.textContent = "Cancel";
+        cancelBtn.style.cssText = "padding:6px 14px;cursor:pointer;";
+        footer.appendChild(cancelBtn);
+        modal.appendChild(footer);
+
+        overlay.appendChild(modal);
+        document.body.appendChild(overlay);
+
+        const dismiss = (result: FolderPickResult | null) => {
+            overlay.remove();
+            document.removeEventListener("keydown", onKey);
+            resolve(result);
+        };
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") { e.preventDefault(); dismiss(null); }
+            if (e.key === "Enter") {
+                const first = listEl.querySelector(".folder-picker-row.match") as HTMLElement | null;
+                if (first) first.click();
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        overlay.addEventListener("click", (e) => { if (e.target === overlay) dismiss(null); });
+        cancelBtn.addEventListener("click", () => dismiss(null));
+
+        // Local-first: load from DB synchronously-ish (one IPC round-trip).
+        let folders: any[] = [];
+        try {
+            folders = (await getFolders(accountId)) || [];
+        } catch (e) {
+            listEl.textContent = "Failed to load folders";
+            return;
+        }
+
+        // Hide special-use that don't make sense as targets (Outbox).
+        // Allow Trash / Junk so users can manually file into them.
+        const excluded = new Set(opts?.excludeFolderIds || []);
+        const targets = folders
+            .filter((f: any) => !excluded.has(f.id))
+            .filter((f: any) => f.specialUse !== "outbox")
+            .sort((a: any, b: any) => a.path.localeCompare(b.path));
+
+        function render(filter: string): void {
+            listEl.innerHTML = "";
+            const lc = filter.toLowerCase().trim();
+            let firstMatchSet = false;
+            for (const f of targets) {
+                const row = document.createElement("div");
+                row.className = "folder-picker-row";
+                row.style.cssText = "padding:6px 14px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:8px;";
+                const name = document.createElement("span");
+                name.textContent = f.path;
+                const tag = document.createElement("span");
+                tag.style.cssText = "color:var(--muted, #888);font-size:11px;";
+                tag.textContent = f.specialUse || "";
+                row.appendChild(name);
+                row.appendChild(tag);
+                const matches = !lc || f.path.toLowerCase().includes(lc);
+                if (matches) {
+                    row.classList.add("match");
+                    if (!firstMatchSet) { row.style.background = "var(--hover, #eee)"; firstMatchSet = true; }
+                }
+                row.addEventListener("mouseenter", () => row.style.background = "var(--hover, #eee)");
+                row.addEventListener("mouseleave", () => row.style.background = "");
+                row.addEventListener("click", () => {
+                    dismiss({ accountId, folderId: f.id, folderPath: f.path, folderName: f.path.split(/[./]/).pop() || f.path });
+                });
+                if (!matches) row.style.display = "none";
+                listEl.appendChild(row);
+            }
+        }
+        render("");
+        search.addEventListener("input", () => render(search.value));
+        setTimeout(() => search.focus(), 0);
+    });
+}