zele 0.3.12 → 0.3.14

package/dist/mail-tui.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Termcast email extension — browse and read emails in a Raycast-like TUI.
 // Uses List with detail view, sections for date grouping, infinite scroll via
 // useCachedPromise pagination, and a dropdown for account selection.
@@ -19,7 +19,7 @@ if (typeof globalThis.fetch === 'function' &&
 }
 import { Action, ActionPanel, Color, Detail, Form, Icon, List, showToast, Toast, useNavigation, showFailureToast, } from 'termcast';
 import { useTerminalDimensions } from '@opentui/react';
-import { useCachedPromise } from '@termcast/utils';
+import { useCachedPromise, useCachedState } from '@termcast/utils';
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { getClients, getClient, listAccounts, login, logout, } from './auth.js';
 import { isTruthy } from './api-utils.js';
@@ -30,6 +30,9 @@ import { renderEmailBody, replyParser, formatDate, formatSender, } from './outpu
 const DEFAULT_PAGE_SIZE = 25;
 const MIN_PAGE_SIZE = 10;
 const VISIBLE_ROWS_OFFSET = 6;
+/** Spacing mode for the mail list. 'relaxed' renders each item as 3 lines. */
+const LIST_SPACING_MODE = 'relaxed';
+const LINES_PER_ITEM = LIST_SPACING_MODE === 'relaxed' ? 3 : 1;
 const ACCOUNT_COLORS = [
     Color.Blue,
     Color.Green,
@@ -97,7 +100,9 @@ function threadStatusIcon(thread) {
 function getPageSizeFromTerminalHeight(rows) {
     if (typeof rows !== 'number' || rows <= 0)
         return DEFAULT_PAGE_SIZE;
-    return Math.max(MIN_PAGE_SIZE, rows - VISIBLE_ROWS_OFFSET);
+    const visibleRows = rows - VISIBLE_ROWS_OFFSET;
+    const itemCount = Math.floor(visibleRows / LINES_PER_ITEM);
+    return Math.max(MIN_PAGE_SIZE, itemCount);
 }
 // ---------------------------------------------------------------------------
 // Data fetching
@@ -126,7 +131,7 @@ function AccountDropdown({ accounts, value, onChange, onAdded, onRemoved, }) {
         }, children: [_jsx(List.Dropdown.Item, { title: 'All Accounts', value: 'all', icon: Icon.Globe }), _jsx(List.Dropdown.Section, { title: 'Accounts', children: accounts.map((a) => (_jsx(List.Dropdown.Item, { title: a.email, value: a.email, icon: {
                         source: Icon.Person,
                         tintColor: accountColor(a.email),
-                    } }, a.email))) }), _jsxs(List.Dropdown.Section, { children: [_jsx(List.Dropdown.Item, { title: 'Add Account', value: ADD_ACCOUNT, icon: Icon.Plus }), _jsx(List.Dropdown.Item, { title: 'Manage Accounts', value: MANAGE_ACCOUNTS, icon: Icon.Gear })] })] }));
+                    } }, a.email))) }), _jsxs(List.Dropdown.Section, { title: 'Manage Accounts', children: [_jsx(List.Dropdown.Item, { title: 'Add Account', value: ADD_ACCOUNT, icon: Icon.Plus }), _jsx(List.Dropdown.Item, { title: 'Manage Accounts', value: MANAGE_ACCOUNTS, icon: Icon.Gear })] })] }));
 }
 // ---------------------------------------------------------------------------
 // Add Account (interactive login)
@@ -201,83 +206,77 @@ function ManageAccounts({ onAdded, onRemoved, }) {
                             color: Color.SecondaryText,
                         },
                     },
-                ], actions: _jsxs(ActionPanel, { children: [_jsx(Action.CopyToClipboard, { title: 'Copy Email', content: a.email }), _jsx(Action, { title: 'Logout Account', icon: Icon.Trash, style: Action.Style.Destructive, onAction: () => handleRemoved(a.email) })] }) }, `${a.email}-${a.appId}`))), _jsx(List.Item, { title: 'Add Account', icon: Icon.Plus, actions: _jsx(ActionPanel, { children: _jsx(Action.Push, { title: 'Add Account', target: _jsx(AddAccount, { onAdded: handleAdded }) }) }) }, 'add-account')] }));
+                ], actions: _jsxs(ActionPanel, { children: [_jsx(Action.CopyToClipboard, { title: 'Copy Email', content: a.email }), _jsx(Action, { title: 'Logout Account', icon: Icon.Trash, onAction: () => handleRemoved(a.email) })] }) }, `${a.email}-${a.appId}`))), _jsx(List.Item, { title: 'Add Account', icon: Icon.Plus, actions: _jsx(ActionPanel, { children: _jsx(Action.Push, { title: 'Add Account', target: _jsx(AddAccount, { onAdded: handleAdded }) }) }) }, 'add-account')] }));
 }
-// ---------------------------------------------------------------------------
-// Reply Form
-// ---------------------------------------------------------------------------
-function ReplyForm({ threadId, account, replyAll, revalidate, }) {
+function ComposeForm({ mode, initialAccount, accounts, onSent }) {
     const { pop } = useNavigation();
     const [isLoading, setIsLoading] = useState(false);
+    const [selectedAccount, setSelectedAccount] = useState(initialAccount);
+    const navigationTitle = mode.type === 'forward'
+        ? 'Forward'
+        : mode.replyAll
+            ? 'Reply All'
+            : 'Reply';
+    const bodyPlaceholder = mode.type === 'forward'
+        ? 'Add a message (optional)...'
+        : 'Type your reply...';
     const handleSubmit = async (values) => {
-        if (!values.body?.trim()) {
+        // Validate based on mode
+        if (mode.type === 'forward' && !values.to?.trim()) {
             await showToast({
                 style: Toast.Style.Failure,
-                title: 'Body is required',
+                title: 'Recipient is required',
             });
             return;
         }
-        setIsLoading(true);
-        const { client } = await getClient([account]);
-        const result = await client.replyToThread({
-            threadId,
-            body: values.body,
-            replyAll,
-        });
-        setIsLoading(false);
-        if (result instanceof Error) {
-            await showFailureToast(result, { title: 'Failed to send reply' });
-            return;
-        }
-        await showToast({ style: Toast.Style.Success, title: 'Reply sent' });
-        revalidate();
-        pop();
-    };
-    return (_jsx(Form, { isLoading: isLoading, navigationTitle: replyAll ? 'Reply All' : 'Reply', actions: _jsx(ActionPanel, { children: _jsx(Action.SubmitForm, { title: 'Send Reply', onSubmit: handleSubmit }) }), children: _jsx(Form.TextArea, { id: 'body', title: 'Message', placeholder: 'Type your reply...' }) }));
-}
-// ---------------------------------------------------------------------------
-// Forward Form
-// ---------------------------------------------------------------------------
-function ForwardForm({ threadId, account, revalidate, }) {
-    const { pop } = useNavigation();
-    const [isLoading, setIsLoading] = useState(false);
-    const handleSubmit = async (values) => {
-        if (!values.to?.trim()) {
+        if (mode.type !== 'forward' && !values.body?.trim()) {
             await showToast({
                 style: Toast.Style.Failure,
-                title: 'Recipient is required',
+                title: 'Message is required',
             });
             return;
         }
         setIsLoading(true);
-        const recipients = values.to
-            .split(',')
-            .map((e) => ({ email: e.trim() }))
-            .filter((e) => e.email);
-        const { client } = await getClient([account]);
-        const result = await client.forwardThread({
-            threadId,
-            to: recipients,
-            body: values.body || undefined,
-        });
+        const { client } = await getClient([selectedAccount]);
+        let result;
+        if (mode.type === 'forward') {
+            const recipients = (values.to ?? '')
+                .split(',')
+                .map((e) => ({ email: e.trim() }))
+                .filter((e) => e.email);
+            result = await client.forwardThread({
+                threadId: mode.threadId,
+                to: recipients,
+                body: values.body || undefined,
+            });
+        }
+        else {
+            result = await client.replyToThread({
+                threadId: mode.threadId,
+                body: values.body ?? '',
+                replyAll: mode.replyAll,
+            });
+        }
         setIsLoading(false);
         if (result instanceof Error) {
-            await showFailureToast(result, { title: 'Failed to forward' });
+            await showFailureToast(result, {
+                title: mode.type === 'forward' ? 'Failed to forward' : 'Failed to send reply',
+            });
             return;
         }
-        await showToast({
-            style: Toast.Style.Success,
-            title: `Forwarded to ${values.to}`,
-        });
-        revalidate();
+        const successTitle = mode.type === 'forward'
+            ? `Forwarded to ${values.to}`
+            : 'Reply sent';
+        await showToast({ style: Toast.Style.Success, title: successTitle });
+        onSent?.();
         pop();
     };
-    return (_jsxs(Form, { isLoading: isLoading, navigationTitle: 'Forward', actions: _jsx(ActionPanel, { children: _jsx(Action.SubmitForm, { title: 'Forward', onSubmit: handleSubmit }) }), children: [_jsx(Form.TextField, { id: 'to', title: 'To', placeholder: 'recipient@example.com' }), _jsx(Form.TextArea, { id: 'body', title: 'Message', placeholder: 'Optional message to prepend...' })] }));
+    return (_jsxs(Form, { isLoading: isLoading, navigationTitle: navigationTitle, actions: _jsx(ActionPanel, { children: _jsx(Action.SubmitForm, { title: mode.type === 'forward' ? 'Forward' : 'Send Reply', onSubmit: handleSubmit }) }), children: [accounts.length > 1 && (_jsx(Form.Dropdown, { id: 'account', title: 'From', value: selectedAccount, onChange: (v) => setSelectedAccount(Array.isArray(v) ? v[0] ?? initialAccount : v), children: accounts.map((a) => (_jsx(Form.Dropdown.Item, { value: a.email, title: a.email }, a.email))) })), mode.type === 'forward' && (_jsx(Form.TextField, { id: 'to', title: 'To', placeholder: 'recipient@example.com' })), _jsx(Form.TextArea, { id: 'body', title: 'Message', placeholder: bodyPlaceholder })] }));
 }
 // ---------------------------------------------------------------------------
 // Thread Detail (full thread view, pushed via Enter)
 // ---------------------------------------------------------------------------
-function ThreadDetail({ threadId, account, revalidate, }) {
+function ThreadDetail({ threadId, account, accounts, revalidate, }) {
     const thread = useCachedPromise(async (tid, acct) => {
         const { client } = await getClient([acct]);
         const result = await client.getThread({ threadId: tid });
@@ -322,20 +321,34 @@ function ThreadDetail({ threadId, account, revalidate, }) {
         .filter((l) => typeof l === 'string' && !l.startsWith('Label_')) // skip internal IDs
         .slice(0, 10);
     const latestMsg = messages[messages.length - 1];
-    return (_jsx(Detail, { navigationTitle: t.subject, markdown: markdown, metadata: _jsxs(Detail.Metadata, { children: [_jsx(Detail.Metadata.Label, { title: 'From', text: formatSender(latestMsg.from) }), _jsx(Detail.Metadata.Label, { title: 'To', text: latestMsg.to.map((r) => r.name || r.email).join(', ') }), latestMsg.cc && latestMsg.cc.length > 0 && (_jsx(Detail.Metadata.Label, { title: 'Cc', text: latestMsg.cc.map((r) => r.name || r.email).join(', ') })), _jsx(Detail.Metadata.Label, { title: 'Date', text: latestMsg.date }), _jsx(Detail.Metadata.Separator, {}), _jsx(Detail.Metadata.Label, { title: 'Messages', text: String(t.messageCount) }), _jsx(Detail.Metadata.Label, { title: 'Participants', text: [...participants.values()].join(', ') }), labels.length > 0 && (_jsx(Detail.Metadata.TagList, { title: 'Labels', children: labels.map((l) => (_jsx(Detail.Metadata.TagList.Item, { text: l, color: labelColor(l) }, l))) })), _jsx(Detail.Metadata.Separator, {}), _jsx(Detail.Metadata.Label, { title: 'Thread ID', text: t.id }), _jsx(Detail.Metadata.Label, { title: 'Account', text: account })] }), actions: _jsxs(ActionPanel, { children: [_jsxs(ActionPanel.Section, { title: 'Reply & Forward', children: [_jsx(Action.Push, { title: 'Reply', icon: Icon.Reply, shortcut: { modifiers: ['ctrl'], key: 'r' }, target: _jsx(ReplyForm, { threadId: threadId, account: account, revalidate: revalidate }) }), _jsx(Action.Push, { title: 'Reply All', icon: Icon.Reply, shortcut: {
+    return (_jsx(Detail, { navigationTitle: t.subject, markdown: markdown, metadata: _jsxs(Detail.Metadata, { children: [_jsx(Detail.Metadata.Label, { title: 'From', text: formatSender(latestMsg.from) }), _jsx(Detail.Metadata.Label, { title: 'To', text: latestMsg.to.map((r) => r.name || r.email).join(', ') }), latestMsg.cc && latestMsg.cc.length > 0 && (_jsx(Detail.Metadata.Label, { title: 'Cc', text: latestMsg.cc.map((r) => r.name || r.email).join(', ') })), _jsx(Detail.Metadata.Label, { title: 'Date', text: latestMsg.date }), _jsx(Detail.Metadata.Separator, {}), _jsx(Detail.Metadata.Label, { title: 'Messages', text: String(t.messageCount) }), _jsx(Detail.Metadata.Label, { title: 'Participants', text: [...participants.values()].join(', ') }), labels.length > 0 && (_jsx(Detail.Metadata.TagList, { title: 'Labels', children: labels.map((l) => (_jsx(Detail.Metadata.TagList.Item, { text: l, color: labelColor(l) }, l))) })), _jsx(Detail.Metadata.Separator, {}), _jsx(Detail.Metadata.Label, { title: 'Thread ID', text: t.id }), _jsx(Detail.Metadata.Label, { title: 'Account', text: account })] }), actions: _jsxs(ActionPanel, { children: [_jsxs(ActionPanel.Section, { title: 'Reply & Forward', children: [_jsx(Action.Push, { title: 'Reply', icon: Icon.Reply, shortcut: { modifiers: ['ctrl'], key: 'r' }, target: _jsx(ComposeForm, { mode: { type: 'reply', threadId }, initialAccount: account, accounts: accounts, onSent: revalidate }) }), _jsx(Action.Push, { title: 'Reply All', icon: Icon.Reply, shortcut: {
                                 modifiers: ['ctrl', 'shift'],
                                 key: 'r',
-                            }, target: _jsx(ReplyForm, { threadId: threadId, account: account, replyAll: true, revalidate: revalidate }) }), _jsx(Action.Push, { title: 'Forward', icon: Icon.Forward, shortcut: { modifiers: ['ctrl'], key: 'f' }, target: _jsx(ForwardForm, { threadId: threadId, account: account, revalidate: revalidate }) })] }), _jsxs(ActionPanel.Section, { title: 'Copy', children: [_jsx(Action.CopyToClipboard, { title: 'Copy Thread ID', content: t.id }), _jsx(Action.CopyToClipboard, { title: 'Copy Subject', content: t.subject }), latestMsg && (_jsx(Action.CopyToClipboard, { title: 'Copy Email Body', content: renderEmailBody(latestMsg.body, latestMsg.mimeType) }))] })] }) }));
+                            }, target: _jsx(ComposeForm, { mode: { type: 'reply', threadId, replyAll: true }, initialAccount: account, accounts: accounts, onSent: revalidate }) }), _jsx(Action.Push, { title: 'Forward', icon: Icon.Forward, shortcut: { modifiers: ['ctrl'], key: 'f' }, target: _jsx(ComposeForm, { mode: { type: 'forward', threadId }, initialAccount: account, accounts: accounts, onSent: revalidate }) })] }), _jsxs(ActionPanel.Section, { title: 'Copy', children: [_jsx(Action.CopyToClipboard, { title: 'Copy Thread ID', content: t.id }), _jsx(Action.CopyToClipboard, { title: 'Copy Subject', content: t.subject }), latestMsg && (_jsx(Action.CopyToClipboard, { title: 'Copy Email Body', content: renderEmailBody(latestMsg.body, latestMsg.mimeType) }))] })] }) }));
 }
 // ---------------------------------------------------------------------------
 // Main Command
 // ---------------------------------------------------------------------------
+const CACHE_NAMESPACE = 'mail-tui';
 export default function Command() {
-    const [selectedAccount, setSelectedAccount] = useState('all');
+    const { push } = useNavigation();
+    const [selectedAccount, setSelectedAccount] = useCachedState('selectedAccount', 'all', { cacheNamespace: CACHE_NAMESPACE });
     const [searchText, setSearchText] = useState('');
-    const [isShowingDetail, setIsShowingDetail] = useState(true);
+    const [isShowingDetail, setIsShowingDetail] = useCachedState('isShowingDetail', true, { cacheNamespace: CACHE_NAMESPACE });
     const [selectedThreads, setSelectedThreads] = useState([]);
+    const [activeMutations, setActiveMutations] = useState(0);
+    const isMutating = activeMutations > 0;
     const { height: terminalRows } = useTerminalDimensions();
+    /** Wrap async mutation calls to track global loading state. */
+    const withMutation = useCallback(async (fn) => {
+        setActiveMutations((n) => n + 1);
+        try {
+            return await fn();
+        }
+        finally {
+            setActiveMutations((n) => n - 1);
+        }
+    }, []);
     const pageSize = getPageSizeFromTerminalHeight(terminalRows);
     const accounts = useAccounts();
     const accountList = accounts.data ?? [];
@@ -462,34 +475,36 @@ export default function Command() {
     const handleBulkAction = useCallback(async (actionName, fn) => {
         if (selectedThreads.length === 0)
             return;
-        // Group selected threads by account
-        const byAccount = new Map();
-        for (const tid of selectedThreads) {
-            const thread = allThreads.find((t) => t.id === tid);
-            if (!thread)
-                continue;
-            const list = byAccount.get(thread.account) ?? [];
-            list.push(tid);
-            byAccount.set(thread.account, list);
-        }
-        for (const [acct, ids] of byAccount) {
-            const { client } = await getClient([acct]);
-            const result = await fn(client, ids);
-            if (result instanceof Error) {
-                await showFailureToast(result, {
-                    title: `Failed to ${actionName}`,
-                });
-                return;
+        await withMutation(async () => {
+            // Group selected threads by account
+            const byAccount = new Map();
+            for (const tid of selectedThreads) {
+                const thread = allThreads.find((t) => t.id === tid);
+                if (!thread)
+                    continue;
+                const list = byAccount.get(thread.account) ?? [];
+                list.push(tid);
+                byAccount.set(thread.account, list);
             }
-        }
-        await showToast({
-            style: Toast.Style.Success,
-            title: `${actionName}: ${selectedThreads.length} thread(s)`,
+            for (const [acct, ids] of byAccount) {
+                const { client } = await getClient([acct]);
+                const result = await fn(client, ids);
+                if (result instanceof Error) {
+                    await showFailureToast(result, {
+                        title: `Failed to ${actionName}`,
+                    });
+                    return;
+                }
+            }
+            await showToast({
+                style: Toast.Style.Success,
+                title: `${actionName}: ${selectedThreads.length} thread(s)`,
+            });
+            setSelectedThreads([]);
+            revalidate();
         });
-        setSelectedThreads([]);
-        revalidate();
-    }, [selectedThreads, allThreads, revalidate]);
-    return (_jsx(List, { isLoading: isLoading || accounts.isLoading, isShowingDetail: isShowingDetail, searchBarPlaceholder: 'Search emails...', onSearchTextChange: setSearchText, throttle: true, pagination: pagination ? { ...pagination, pageSize } : undefined, searchBarAccessory: accountList.length > 0 ? (_jsx(AccountDropdown, { accounts: accountList, value: selectedAccount, onChange: setSelectedAccount, onAdded: handleAccountAdded, onRemoved: handleAccountRemoved })) : undefined, children: sections.map((section) => (_jsx(List.Section, { title: section.name, children: section.threads.map((thread) => {
+    }, [selectedThreads, allThreads, revalidate, withMutation]);
+    return (_jsx(List, { isLoading: isLoading || accounts.isLoading || isMutating, isShowingDetail: isShowingDetail, spacingMode: LIST_SPACING_MODE, searchBarPlaceholder: 'Search emails...', onSearchTextChange: setSearchText, throttle: true, pagination: pagination ? { ...pagination, pageSize } : undefined, searchBarAccessory: accountList.length > 0 ? (_jsx(AccountDropdown, { accounts: accountList, value: selectedAccount, onChange: setSelectedAccount, onAdded: handleAccountAdded, onRemoved: handleAccountRemoved })) : undefined, children: sections.map((section) => (_jsx(List.Section, { title: section.name, children: section.threads.map((thread) => {
                 const isSelected = selectedThreads.includes(thread.id);
                 const hasSelection = selectedThreads.length > 0;
                 // Icon: selection mode or status
@@ -527,114 +542,77 @@ export default function Command() {
                         thread.from.email,
                         thread.from.name ?? '',
                         thread.account,
-                    ], detail: detail, actions: _jsxs(ActionPanel, { children: [hasSelection && (_jsxs(ActionPanel.Section, { title: 'Selection', children: [_jsx(Action, { title: isSelected ? 'Deselect Thread' : 'Select Thread', icon: isSelected ? Icon.CheckCircle : Icon.Circle, onAction: () => toggleSelection(thread.id) }), _jsx(Action, { title: `Archive ${selectedThreads.length} Selected`, icon: Icon.Tray, onAction: () => handleBulkAction('Archived', (c, ids) => c.archive({
-                                            threadIds: ids,
-                                        })) }), _jsx(Action, { title: `Mark ${selectedThreads.length} as Read`, icon: Icon.Eye, onAction: () => handleBulkAction('Marked as read', (c, ids) => c.markAsRead({
-                                            threadIds: ids,
-                                        })) }), _jsx(Action, { title: `Star ${selectedThreads.length} Selected`, icon: Icon.Star, onAction: () => handleBulkAction('Starred', (c, ids) => c.star({
-                                            threadIds: ids,
-                                        })) }), _jsx(Action, { title: `Trash ${selectedThreads.length} Selected`, icon: Icon.Trash, style: Action.Style.Destructive, onAction: () => handleBulkAction('Trashed', async (c, ids) => {
-                                            for (const id of ids) {
-                                                await c.trash({
-                                                    threadId: id,
+                    ], detail: detail, actions: _jsx(ActionPanel, { children: hasSelection ? (
+                        // ─────────────────────────────────────────────
+                        // SELECTION MODE
+                        // ─────────────────────────────────────────────
+                        _jsxs(_Fragment, { children: [_jsxs(ActionPanel.Section, { title: 'Selection', children: [_jsx(Action, { title: isSelected ? 'Deselect Thread' : 'Select Thread', icon: isSelected ? Icon.Circle : Icon.CheckCircle, shortcut: { modifiers: ['ctrl'], key: 'x' }, onAction: () => toggleSelection(thread.id) }), _jsx(Action, { title: `Archive ${selectedThreads.length} Selected`, icon: Icon.Tray, onAction: () => handleBulkAction('Archived', (c, ids) => c.archive({ threadIds: ids })) }), _jsx(Action, { title: `Mark ${selectedThreads.length} as Read`, icon: Icon.Eye, onAction: () => handleBulkAction('Marked as read', (c, ids) => c.markAsRead({ threadIds: ids })) }), _jsx(Action, { title: `Star ${selectedThreads.length} Selected`, icon: Icon.Star, onAction: () => handleBulkAction('Starred', (c, ids) => c.star({ threadIds: ids })) }), _jsx(Action, { title: `Trash ${selectedThreads.length} Selected`, icon: Icon.Trash, onAction: () => handleBulkAction('Trashed', async (c, ids) => {
+                                                for (const id of ids) {
+                                                    await c.trash({ threadId: id });
+                                                }
+                                            }) }), _jsx(Action, { title: 'Deselect All', icon: Icon.XMarkCircle, onAction: () => setSelectedThreads([]) })] }), _jsxs(ActionPanel.Section, { children: [_jsx(Action, { title: 'Refresh', icon: Icon.ArrowClockwise, shortcut: { modifiers: ['ctrl', 'shift'], key: 'r' }, onAction: () => revalidate() }), _jsx(Action, { title: 'Toggle Detail', icon: Icon.Sidebar, shortcut: { modifiers: ['ctrl'], key: 'd' }, onAction: () => setIsShowingDetail((v) => !v) })] })] })) : (
+                        // ─────────────────────────────────────────────
+                        // NORMAL MODE
+                        // ─────────────────────────────────────────────
+                        _jsxs(_Fragment, { children: [_jsxs(ActionPanel.Section, { children: [_jsx(Action, { title: 'Open Thread', icon: Icon.Eye, onAction: async () => {
+                                                push(_jsx(ThreadDetail, { threadId: thread.id, account: thread.account, accounts: accountList, revalidate: revalidate }));
+                                                if (thread.unread) {
+                                                    const { client } = await getClient([thread.account]);
+                                                    const result = await client.markAsRead({ threadIds: [thread.id] });
+                                                    if (result instanceof Error)
+                                                        return;
+                                                    revalidate();
+                                                }
+                                            } }), _jsx(Action, { title: 'Select Thread', icon: Icon.CheckCircle, shortcut: { modifiers: ['ctrl'], key: 'x' }, onAction: () => toggleSelection(thread.id) }), _jsx(Action, { title: thread.unread ? 'Mark as Read' : 'Mark as Unread', icon: thread.unread ? Icon.Eye : Icon.EyeDisabled, shortcut: { modifiers: ['ctrl'], key: 'u' }, onAction: () => withMutation(async () => {
+                                                const { client } = await getClient([thread.account]);
+                                                const result = thread.unread
+                                                    ? await client.markAsRead({ threadIds: [thread.id] })
+                                                    : await client.markAsUnread({ threadIds: [thread.id] });
+                                                if (result instanceof Error) {
+                                                    await showFailureToast(result);
+                                                    return;
+                                                }
+                                                await showToast({
+                                                    style: Toast.Style.Success,
+                                                    title: thread.unread ? 'Marked as read' : 'Marked as unread',
                                                 });
-                                            }
-                                        }) }), _jsx(Action, { title: 'Deselect All', icon: Icon.XMarkCircle, onAction: () => setSelectedThreads([]) })] })), _jsxs(ActionPanel.Section, { children: [_jsx(Action.Push, { title: 'Open Thread', icon: Icon.Eye, target: _jsx(ThreadDetail, { threadId: thread.id, account: thread.account, revalidate: revalidate }) }), !hasSelection && (_jsx(Action, { title: 'Select Thread', icon: Icon.CheckCircle, shortcut: {
-                                            modifiers: ['ctrl'],
-                                            key: 'x',
-                                        }, onAction: () => toggleSelection(thread.id) })), _jsx(Action, { title: thread.unread ? 'Mark as Read' : 'Mark as Unread', icon: thread.unread ? Icon.Eye : Icon.EyeDisabled, shortcut: {
-                                            modifiers: ['ctrl'],
-                                            key: 'u',
-                                        }, onAction: async () => {
-                                            const { client } = await getClient([thread.account]);
-                                            const result = thread.unread
-                                                ? await client.markAsRead({
-                                                    threadIds: [thread.id],
-                                                })
-                                                : await client.markAsUnread({
-                                                    threadIds: [thread.id],
+                                                revalidate();
+                                            }) }), _jsx(Action, { title: 'Archive', icon: Icon.Tray, shortcut: { modifiers: ['ctrl'], key: 'e' }, onAction: () => withMutation(async () => {
+                                                const { client } = await getClient([thread.account]);
+                                                const result = await client.archive({ threadIds: [thread.id] });
+                                                if (result instanceof Error) {
+                                                    await showFailureToast(result);
+                                                    return;
+                                                }
+                                                await showToast({
+                                                    style: Toast.Style.Success,
+                                                    title: 'Archived',
                                                 });
-                                            if (result instanceof Error) {
-                                                await showFailureToast(result);
-                                                return;
-                                            }
-                                            await showToast({
-                                                style: Toast.Style.Success,
-                                                title: thread.unread
-                                                    ? 'Marked as read'
-                                                    : 'Marked as unread',
-                                            });
-                                            revalidate();
-                                        } }), _jsx(Action, { title: 'Archive', icon: Icon.Tray, shortcut: {
-                                            modifiers: ['ctrl'],
-                                            key: 'e',
-                                        }, onAction: async () => {
-                                            const { client } = await getClient([thread.account]);
-                                            const result = await client.archive({
-                                                threadIds: [thread.id],
-                                            });
-                                            if (result instanceof Error) {
-                                                await showFailureToast(result);
-                                                return;
-                                            }
-                                            await showToast({
-                                                style: Toast.Style.Success,
-                                                title: 'Archived',
-                                            });
-                                            revalidate();
-                                        } }), _jsx(Action, { title: thread.labelIds.includes('STARRED')
-                                            ? 'Unstar'
-                                            : 'Star', icon: Icon.Star, shortcut: {
-                                            modifiers: ['ctrl'],
-                                            key: 's',
-                                        }, onAction: async () => {
-                                            const { client } = await getClient([thread.account]);
-                                            const isStarred = thread.labelIds.includes('STARRED');
-                                            const result = isStarred
-                                                ? await client.unstar({
-                                                    threadIds: [thread.id],
-                                                })
-                                                : await client.star({
-                                                    threadIds: [thread.id],
+                                                revalidate();
+                                            }) }), _jsx(Action, { title: thread.labelIds.includes('STARRED') ? 'Unstar' : 'Star', icon: Icon.Star, shortcut: { modifiers: ['ctrl'], key: 's' }, onAction: () => withMutation(async () => {
+                                                const { client } = await getClient([thread.account]);
+                                                const isStarred = thread.labelIds.includes('STARRED');
+                                                const result = isStarred
+                                                    ? await client.unstar({ threadIds: [thread.id] })
+                                                    : await client.star({ threadIds: [thread.id] });
+                                                if (result instanceof Error) {
+                                                    await showFailureToast(result);
+                                                    return;
+                                                }
+                                                await showToast({
+                                                    style: Toast.Style.Success,
+                                                    title: isStarred ? 'Unstarred' : 'Starred',
                                                 });
-                                            if (result instanceof Error) {
-                                                await showFailureToast(result);
-                                                return;
-                                            }
+                                                revalidate();
+                                            }) })] }), _jsxs(ActionPanel.Section, { title: 'Reply & Forward', children: [_jsx(Action.Push, { title: 'Reply', icon: Icon.Reply, shortcut: { modifiers: ['ctrl'], key: 'r' }, target: _jsx(ComposeForm, { mode: { type: 'reply', threadId: thread.id }, initialAccount: thread.account, accounts: accountList, onSent: revalidate }) }), _jsx(Action.Push, { title: 'Reply All', icon: Icon.Reply, shortcut: { modifiers: ['ctrl', 'shift'], key: 'r' }, target: _jsx(ComposeForm, { mode: { type: 'reply', threadId: thread.id, replyAll: true }, initialAccount: thread.account, accounts: accountList, onSent: revalidate }) }), _jsx(Action.Push, { title: 'Forward', icon: Icon.Forward, shortcut: { modifiers: ['ctrl'], key: 'f' }, target: _jsx(ComposeForm, { mode: { type: 'forward', threadId: thread.id }, initialAccount: thread.account, accounts: accountList, onSent: revalidate }) })] }), _jsxs(ActionPanel.Section, { title: 'Copy', children: [_jsx(Action.CopyToClipboard, { title: 'Copy Thread ID', content: thread.id }), _jsx(Action.CopyToClipboard, { title: 'Copy Subject', content: thread.subject }), _jsx(Action.CopyToClipboard, { title: 'Copy Sender Email', content: thread.from.email })] }), _jsx(ActionPanel.Section, { children: _jsx(Action, { title: 'Trash', icon: Icon.Trash, shortcut: { modifiers: ['ctrl'], key: 'backspace' }, onAction: () => withMutation(async () => {
+                                            const { client } = await getClient([thread.account]);
+                                            await client.trash({ threadId: thread.id });
                                             await showToast({
                                                 style: Toast.Style.Success,
-                                                title: isStarred ? 'Unstarred' : 'Starred',
+                                                title: 'Trashed',
                                             });
                                             revalidate();
-                                        } })] }), _jsxs(ActionPanel.Section, { title: 'Reply & Forward', children: [_jsx(Action.Push, { title: 'Reply', icon: Icon.Reply, shortcut: {
-                                            modifiers: ['ctrl'],
-                                            key: 'r',
-                                        }, target: _jsx(ReplyForm, { threadId: thread.id, account: thread.account, revalidate: revalidate }) }), _jsx(Action.Push, { title: 'Reply All', icon: Icon.Reply, shortcut: {
-                                            modifiers: ['ctrl', 'shift'],
-                                            key: 'r',
-                                        }, target: _jsx(ReplyForm, { threadId: thread.id, account: thread.account, replyAll: true, revalidate: revalidate }) }), _jsx(Action.Push, { title: 'Forward', icon: Icon.Forward, shortcut: {
-                                            modifiers: ['ctrl'],
-                                            key: 'f',
-                                        }, target: _jsx(ForwardForm, { threadId: thread.id, account: thread.account, revalidate: revalidate }) })] }), _jsxs(ActionPanel.Section, { title: 'Copy', children: [_jsx(Action.CopyToClipboard, { title: 'Copy Thread ID', content: thread.id }), _jsx(Action.CopyToClipboard, { title: 'Copy Subject', content: thread.subject }), _jsx(Action.CopyToClipboard, { title: 'Copy Sender Email', content: thread.from.email })] }), _jsx(ActionPanel.Section, { children: _jsx(Action, { title: 'Trash', icon: Icon.Trash, style: Action.Style.Destructive, shortcut: {
-                                        modifiers: ['ctrl'],
-                                        key: 'backspace',
-                                    }, onAction: async () => {
-                                        const { client } = await getClient([thread.account]);
-                                        await client.trash({
-                                            threadId: thread.id,
-                                        });
-                                        await showToast({
-                                            style: Toast.Style.Success,
-                                            title: 'Trashed',
-                                        });
-                                        revalidate();
-                                    } }) }), _jsxs(ActionPanel.Section, { children: [_jsx(Action, { title: 'Refresh', icon: Icon.ArrowClockwise, shortcut: {
-                                            modifiers: ['ctrl', 'shift'],
-                                            key: 'r',
-                                        }, onAction: () => revalidate() }), _jsx(Action, { title: 'Toggle Detail', icon: Icon.Sidebar, shortcut: {
-                                            modifiers: ['ctrl'],
-                                            key: 'd',
-                                        }, onAction: () => setIsShowingDetail((v) => !v) })] })] }) }, `${thread.account}-${thread.id}`));
+                                        }) }) }), _jsxs(ActionPanel.Section, { children: [_jsx(Action, { title: 'Refresh', icon: Icon.ArrowClockwise, shortcut: { modifiers: ['ctrl', 'shift'], key: 'r' }, onAction: () => revalidate() }), _jsx(Action, { title: 'Toggle Detail', icon: Icon.Sidebar, shortcut: { modifiers: ['ctrl'], key: 'd' }, onAction: () => setIsShowingDetail((v) => !v) })] })] })) }) }, `${thread.account}-${thread.id}`));
             }) }, section.name))) }));
 }
 // ---------------------------------------------------------------------------