zele 0.3.12 → 0.3.14

package/src/mail-tui.tsx

@@ -35,7 +35,7 @@ import {
   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 {
@@ -63,6 +63,10 @@ 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: 'default' | 'relaxed' = 'relaxed'
+const LINES_PER_ITEM = LIST_SPACING_MODE === 'relaxed' ? 3 : 1
+
 const ACCOUNT_COLORS = [
   Color.Blue,
   Color.Green,
@@ -140,7 +144,9 @@ type MailCursor =
 
 function getPageSizeFromTerminalHeight(rows?: number): number {
   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)
 }
 
 // ---------------------------------------------------------------------------
@@ -203,7 +209,7 @@ function AccountDropdown({
           />
         ))}
       </List.Dropdown.Section>
-      <List.Dropdown.Section>
+      <List.Dropdown.Section title='Manage Accounts'>
         <List.Dropdown.Item
           title='Add Account'
           value={ADD_ACCOUNT}
@@ -343,7 +349,6 @@ function ManageAccounts({
               <Action
                 title='Logout Account'
                 icon={Icon.Trash}
-                style={Action.Style.Destructive}
                 onAction={() => handleRemoved(a.email)}
               />
             </ActionPanel>
@@ -368,130 +373,134 @@ function ManageAccounts({
 }
 
 // ---------------------------------------------------------------------------
-// Reply Form
+// Compose Form (unified: reply, reply all, forward)
 // ---------------------------------------------------------------------------
 
-function ReplyForm({
-  threadId,
-  account,
-  replyAll,
-  revalidate,
-}: {
-  threadId: string
-  account: string
-  replyAll?: boolean
-  revalidate: () => void
-}) {
+type ComposeMode =
+  | { type: 'reply'; threadId: string; replyAll?: boolean }
+  | { type: 'forward'; threadId: string }
+
+interface ComposeFormProps {
+  mode: ComposeMode
+  initialAccount: string
+  accounts: AuthStatus[]
+  onSent?: () => void
+}
+
+function ComposeForm({ mode, initialAccount, accounts, onSent }: ComposeFormProps) {
   const { pop } = useNavigation()
   const [isLoading, setIsLoading] = useState(false)
-
-  const handleSubmit = async (values: { body: string }) => {
-    if (!values.body?.trim()) {
+  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: { to?: string; body?: string }) => {
+    // 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 (
-    <Form
-      isLoading={isLoading}
-      navigationTitle={replyAll ? 'Reply All' : 'Reply'}
-      actions={
-        <ActionPanel>
-          <Action.SubmitForm title='Send Reply' onSubmit={handleSubmit} />
-        </ActionPanel>
-      }
-    >
-      <Form.TextArea
-        id='body'
-        title='Message'
-        placeholder='Type your reply...'
-      />
-    </Form>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Forward Form
-// ---------------------------------------------------------------------------
-
-function ForwardForm({
-  threadId,
-  account,
-  revalidate,
-}: {
-  threadId: string
-  account: string
-  revalidate: () => void
-}) {
-  const { pop } = useNavigation()
-  const [isLoading, setIsLoading] = useState(false)
-
-  const handleSubmit = async (values: { to: string; body: string }) => {
-    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: Error | unknown
+    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 (
     <Form
       isLoading={isLoading}
-      navigationTitle='Forward'
+      navigationTitle={navigationTitle}
       actions={
         <ActionPanel>
-          <Action.SubmitForm title='Forward' onSubmit={handleSubmit} />
+          <Action.SubmitForm
+            title={mode.type === 'forward' ? 'Forward' : 'Send Reply'}
+            onSubmit={handleSubmit}
+          />
         </ActionPanel>
       }
     >
-      <Form.TextField id='to' title='To' placeholder='recipient@example.com' />
+      {accounts.length > 1 && (
+        <Form.Dropdown
+          id='account'
+          title='From'
+          value={selectedAccount}
+          onChange={(v) => setSelectedAccount(Array.isArray(v) ? v[0] ?? initialAccount : v)}
+        >
+          {accounts.map((a) => (
+            <Form.Dropdown.Item
+              key={a.email}
+              value={a.email}
+              title={a.email}
+            />
+          ))}
+        </Form.Dropdown>
+      )}
+      {mode.type === 'forward' && (
+        <Form.TextField
+          id='to'
+          title='To'
+          placeholder='recipient@example.com'
+        />
+      )}
       <Form.TextArea
         id='body'
         title='Message'
-        placeholder='Optional message to prepend...'
+        placeholder={bodyPlaceholder}
       />
     </Form>
   )
@@ -504,10 +513,12 @@ function ForwardForm({
 function ThreadDetail({
   threadId,
   account,
+  accounts,
   revalidate,
 }: {
   threadId: string
   account: string
+  accounts: AuthStatus[]
   revalidate: () => void
 }) {
   const thread = useCachedPromise(
@@ -622,10 +633,11 @@ function ThreadDetail({
               icon={Icon.Reply}
               shortcut={{ modifiers: ['ctrl'], key: 'r' }}
               target={
-                <ReplyForm
-                  threadId={threadId}
-                  account={account}
-                  revalidate={revalidate}
+                <ComposeForm
+                  mode={{ type: 'reply', threadId }}
+                  initialAccount={account}
+                  accounts={accounts}
+                  onSent={revalidate}
                 />
               }
             />
@@ -637,11 +649,11 @@ function ThreadDetail({
                 key: 'r',
               }}
               target={
-                <ReplyForm
-                  threadId={threadId}
-                  account={account}
-                  replyAll
-                  revalidate={revalidate}
+                <ComposeForm
+                  mode={{ type: 'reply', threadId, replyAll: true }}
+                  initialAccount={account}
+                  accounts={accounts}
+                  onSent={revalidate}
                 />
               }
             />
@@ -650,10 +662,11 @@ function ThreadDetail({
               icon={Icon.Forward}
               shortcut={{ modifiers: ['ctrl'], key: 'f' }}
               target={
-                <ForwardForm
-                  threadId={threadId}
-                  account={account}
-                  revalidate={revalidate}
+                <ComposeForm
+                  mode={{ type: 'forward', threadId }}
+                  initialAccount={account}
+                  accounts={accounts}
+                  onSent={revalidate}
                 />
               }
             />
@@ -678,12 +691,35 @@ function ThreadDetail({
 // 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<string[]>([])
+  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 <T,>(fn: () => Promise<T>): Promise<T> => {
+    setActiveMutations((n) => n + 1)
+    try {
+      return await fn()
+    } finally {
+      setActiveMutations((n) => n - 1)
+    }
+  }, [])
   const pageSize = getPageSizeFromTerminalHeight(terminalRows)
 
   const accounts = useAccounts()
@@ -859,41 +895,44 @@ export default function Command() {
     ) => {
       if (selectedThreads.length === 0) return
 
-      // Group selected threads by account
-      const byAccount = new Map<string, string[]>()
-      for (const tid of selectedThreads) {
-        const thread = allThreads.find((t: ThreadItem) => t.id === tid)
-        if (!thread) continue
-        const list = byAccount.get(thread.account) ?? []
-        list.push(tid)
-        byAccount.set(thread.account, list)
-      }
+      await withMutation(async () => {
+        // Group selected threads by account
+        const byAccount = new Map<string, string[]>()
+        for (const tid of selectedThreads) {
+          const thread = allThreads.find((t: ThreadItem) => 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
+        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)`,
+        await showToast({
+          style: Toast.Style.Success,
+          title: `${actionName}: ${selectedThreads.length} thread(s)`,
+        })
+        setSelectedThreads([])
+        revalidate()
       })
-      setSelectedThreads([])
-      revalidate()
     },
-    [selectedThreads, allThreads, revalidate],
+    [selectedThreads, allThreads, revalidate, withMutation],
   )
 
   return (
     <List
-      isLoading={isLoading || accounts.isLoading}
+      isLoading={isLoading || accounts.isLoading || isMutating}
       isShowingDetail={isShowingDetail}
+      spacingMode={LIST_SPACING_MODE}
       searchBarPlaceholder='Search emails...'
       onSearchTextChange={setSearchText}
       throttle
@@ -903,10 +942,10 @@ export default function Command() {
           <AccountDropdown
             accounts={accountList}
             value={selectedAccount}
-            onChange={setSelectedAccount}
-            onAdded={handleAccountAdded}
-            onRemoved={handleAccountRemoved}
-          />
+              onChange={setSelectedAccount}
+              onAdded={handleAccountAdded}
+              onRemoved={handleAccountRemoved}
+            />
         ) : undefined
       }
     >
@@ -1012,294 +1051,256 @@ export default function Command() {
                 detail={detail}
                 actions={
                   <ActionPanel>
-                    {/* Selection actions (when items are selected) */}
-                    {hasSelection && (
-                      <ActionPanel.Section title='Selection'>
-                        <Action
-                          title={
-                            isSelected ? 'Deselect Thread' : 'Select Thread'
-                          }
-                          icon={isSelected ? Icon.CheckCircle : Icon.Circle}
-                          onAction={() => toggleSelection(thread.id)}
-                        />
-                        <Action
-                          title={`Archive ${selectedThreads.length} Selected`}
-                          icon={Icon.Tray}
-                          onAction={() =>
-                            handleBulkAction('Archived', (c, ids) =>
-                              c.archive({
-                                threadIds: ids,
-                              }),
-                            )
-                          }
-                        />
-                        <Action
-                          title={`Mark ${selectedThreads.length} as Read`}
-                          icon={Icon.Eye}
-                          onAction={() =>
-                            handleBulkAction('Marked as read', (c, ids) =>
-                              c.markAsRead({
-                                threadIds: ids,
-                              }),
-                            )
-                          }
-                        />
-                        <Action
-                          title={`Star ${selectedThreads.length} Selected`}
-                          icon={Icon.Star}
-                          onAction={() =>
-                            handleBulkAction('Starred', (c, ids) =>
-                              c.star({
-                                threadIds: ids,
-                              }),
-                            )
-                          }
-                        />
-                        <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,
-                                })
+                    {hasSelection ? (
+                      // ─────────────────────────────────────────────
+                      // SELECTION MODE
+                      // ─────────────────────────────────────────────
+                      <>
+                        <ActionPanel.Section title='Selection'>
+                          <Action
+                            title={isSelected ? 'Deselect Thread' : 'Select Thread'}
+                            icon={isSelected ? Icon.Circle : Icon.CheckCircle}
+                            shortcut={{ modifiers: ['ctrl'], key: 'x' }}
+                            onAction={() => toggleSelection(thread.id)}
+                          />
+                          <Action
+                            title={`Archive ${selectedThreads.length} Selected`}
+                            icon={Icon.Tray}
+                            onAction={() =>
+                              handleBulkAction('Archived', (c, ids) =>
+                                c.archive({ threadIds: ids }),
+                              )
+                            }
+                          />
+                          <Action
+                            title={`Mark ${selectedThreads.length} as Read`}
+                            icon={Icon.Eye}
+                            onAction={() =>
+                              handleBulkAction('Marked as read', (c, ids) =>
+                                c.markAsRead({ threadIds: ids }),
+                              )
+                            }
+                          />
+                          <Action
+                            title={`Star ${selectedThreads.length} Selected`}
+                            icon={Icon.Star}
+                            onAction={() =>
+                              handleBulkAction('Starred', (c, ids) =>
+                                c.star({ threadIds: ids }),
+                              )
+                            }
+                          />
+                          <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 })
+                                }
+                              })
+                            }
+                          />
+                          <Action
+                            title='Deselect All'
+                            icon={Icon.XMarkCircle}
+                            onAction={() => setSelectedThreads([])}
+                          />
+                        </ActionPanel.Section>
+                        <ActionPanel.Section>
+                          <Action
+                            title='Refresh'
+                            icon={Icon.ArrowClockwise}
+                            shortcut={{ modifiers: ['ctrl', 'shift'], key: 'r' }}
+                            onAction={() => revalidate()}
+                          />
+                          <Action
+                            title='Toggle Detail'
+                            icon={Icon.Sidebar}
+                            shortcut={{ modifiers: ['ctrl'], key: 'd' }}
+                            onAction={() => setIsShowingDetail((v) => !v)}
+                          />
+                        </ActionPanel.Section>
+                      </>
+                    ) : (
+                      // ─────────────────────────────────────────────
+                      // NORMAL MODE
+                      // ─────────────────────────────────────────────
+                      <>
+                        <ActionPanel.Section>
+                          <Action
+                            title='Open Thread'
+                            icon={Icon.Eye}
+                            onAction={async () => {
+                              push(
+                                <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()
                               }
-                            })
-                          }
-                        />
-                        <Action
-                          title='Deselect All'
-                          icon={Icon.XMarkCircle}
-                          onAction={() => setSelectedThreads([])}
-                        />
-                      </ActionPanel.Section>
-                    )}
-
-                    {/* Primary actions */}
-                    <ActionPanel.Section>
-                      <Action.Push
-                        title='Open Thread'
-                        icon={Icon.Eye}
-                        target={
-                          <ThreadDetail
-                            threadId={thread.id}
-                            account={thread.account}
-                            revalidate={revalidate}
+                            }}
                           />
-                        }
-                      />
-                      {!hasSelection && (
-                        <Action
-                          title='Select Thread'
-                          icon={Icon.CheckCircle}
-                          shortcut={{
-                            modifiers: ['ctrl'],
-                            key: 'x',
-                          }}
-                          onAction={() => toggleSelection(thread.id)}
-                        />
-                      )}
-                      <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],
+                          <Action
+                            title='Select Thread'
+                            icon={Icon.CheckCircle}
+                            shortcut={{ modifiers: ['ctrl'], key: 'x' }}
+                            onAction={() => toggleSelection(thread.id)}
+                          />
+                          <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',
                               })
-                            : await client.markAsUnread({
-                                threadIds: [thread.id],
+                              revalidate()
+                            })}
+                          />
+                          <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()
-                        }}
-                      />
-                      <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()
-                        }}
-                      />
-                      <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],
+                              revalidate()
+                            })}
+                          />
+                          <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',
                               })
-                            : await client.star({
-                                threadIds: [thread.id],
+                              revalidate()
+                            })}
+                          />
+                        </ActionPanel.Section>
+                        <ActionPanel.Section title='Reply & Forward'>
+                          <Action.Push
+                            title='Reply'
+                            icon={Icon.Reply}
+                            shortcut={{ modifiers: ['ctrl'], key: 'r' }}
+                            target={
+                              <ComposeForm
+                                mode={{ type: 'reply', threadId: thread.id }}
+                                initialAccount={thread.account}
+                                accounts={accountList}
+                                onSent={revalidate}
+                              />
+                            }
+                          />
+                          <Action.Push
+                            title='Reply All'
+                            icon={Icon.Reply}
+                            shortcut={{ modifiers: ['ctrl', 'shift'], key: 'r' }}
+                            target={
+                              <ComposeForm
+                                mode={{ type: 'reply', threadId: thread.id, replyAll: true }}
+                                initialAccount={thread.account}
+                                accounts={accountList}
+                                onSent={revalidate}
+                              />
+                            }
+                          />
+                          <Action.Push
+                            title='Forward'
+                            icon={Icon.Forward}
+                            shortcut={{ modifiers: ['ctrl'], key: 'f' }}
+                            target={
+                              <ComposeForm
+                                mode={{ type: 'forward', threadId: thread.id }}
+                                initialAccount={thread.account}
+                                accounts={accountList}
+                                onSent={revalidate}
+                              />
+                            }
+                          />
+                        </ActionPanel.Section>
+                        <ActionPanel.Section title='Copy'>
+                          <Action.CopyToClipboard
+                            title='Copy Thread ID'
+                            content={thread.id}
+                          />
+                          <Action.CopyToClipboard
+                            title='Copy Subject'
+                            content={thread.subject}
+                          />
+                          <Action.CopyToClipboard
+                            title='Copy Sender Email'
+                            content={thread.from.email}
+                          />
+                        </ActionPanel.Section>
+                        <ActionPanel.Section>
+                          <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: 'Trashed',
                               })
-                          if (result instanceof Error) {
-                            await showFailureToast(result)
-                            return
-                          }
-                          await showToast({
-                            style: Toast.Style.Success,
-                            title: isStarred ? 'Unstarred' : 'Starred',
-                          })
-                          revalidate()
-                        }}
-                      />
-                    </ActionPanel.Section>
-
-                    {/* Reply & Forward */}
-                    <ActionPanel.Section title='Reply & Forward'>
-                      <Action.Push
-                        title='Reply'
-                        icon={Icon.Reply}
-                        shortcut={{
-                          modifiers: ['ctrl'],
-                          key: 'r',
-                        }}
-                        target={
-                          <ReplyForm
-                            threadId={thread.id}
-                            account={thread.account}
-                            revalidate={revalidate}
+                              revalidate()
+                            })}
                           />
-                        }
-                      />
-                      <Action.Push
-                        title='Reply All'
-                        icon={Icon.Reply}
-                        shortcut={{
-                          modifiers: ['ctrl', 'shift'],
-                          key: 'r',
-                        }}
-                        target={
-                          <ReplyForm
-                            threadId={thread.id}
-                            account={thread.account}
-                            replyAll
-                            revalidate={revalidate}
+                        </ActionPanel.Section>
+                        <ActionPanel.Section>
+                          <Action
+                            title='Refresh'
+                            icon={Icon.ArrowClockwise}
+                            shortcut={{ modifiers: ['ctrl', 'shift'], key: 'r' }}
+                            onAction={() => revalidate()}
                           />
-                        }
-                      />
-                      <Action.Push
-                        title='Forward'
-                        icon={Icon.Forward}
-                        shortcut={{
-                          modifiers: ['ctrl'],
-                          key: 'f',
-                        }}
-                        target={
-                          <ForwardForm
-                            threadId={thread.id}
-                            account={thread.account}
-                            revalidate={revalidate}
+                          <Action
+                            title='Toggle Detail'
+                            icon={Icon.Sidebar}
+                            shortcut={{ modifiers: ['ctrl'], key: 'd' }}
+                            onAction={() => setIsShowingDetail((v) => !v)}
                           />
-                        }
-                      />
-                    </ActionPanel.Section>
-
-                    {/* Copy */}
-                    <ActionPanel.Section title='Copy'>
-                      <Action.CopyToClipboard
-                        title='Copy Thread ID'
-                        content={thread.id}
-                      />
-                      <Action.CopyToClipboard
-                        title='Copy Subject'
-                        content={thread.subject}
-                      />
-                      <Action.CopyToClipboard
-                        title='Copy Sender Email'
-                        content={thread.from.email}
-                      />
-                    </ActionPanel.Section>
-
-                    {/* Danger */}
-                    <ActionPanel.Section>
-                      <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()
-                        }}
-                      />
-                    </ActionPanel.Section>
-
-                    {/* Utility */}
-                    <ActionPanel.Section>
-                      <Action
-                        title='Refresh'
-                        icon={Icon.ArrowClockwise}
-                        shortcut={{
-                          modifiers: ['ctrl', 'shift'],
-                          key: 'r',
-                        }}
-                        onAction={() => revalidate()}
-                      />
-                      <Action
-                        title='Toggle Detail'
-                        icon={Icon.Sidebar}
-                        shortcut={{
-                          modifiers: ['ctrl'],
-                          key: 'd',
-                        }}
-                        onAction={() => setIsShowingDetail((v) => !v)}
-                      />
-                    </ActionPanel.Section>
+                        </ActionPanel.Section>
+                      </>
+                    )}
                   </ActionPanel>
                 }
               />