plugins/email
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mount the accounts modal in the empty state, so a fresh install can add its first account

Browse Source 
Clicking "Add Account" on a new install did nothing at all — no modal, no
error, nothing in the console.

EmailList early-returns an onboarding empty state when there is no mail, and
that branch carries the "Add Account" button. But <AccountsModal /> was only
mounted in the OTHER return — the one that renders when mail exists. The button
flipped the shared EMAIL_ACCOUNTS_OPEN global and nothing was listening.

A catch-22, and it closed the only door in: the sole other trigger is in the
toolbar, which is also in the mail-exists branch. So an install with no account
could never reach the dialog that adds one, and the failure was silent in both
directions — nothing threw, and the state flag really did flip.

Mount it in both branches. The empty state is exactly when it is needed most.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-08-18 15:50:46 +00:00
co-authored by Claude Opus 5
parent 37d7c3c010
commit 91b978c043
1 changed files with 42 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/EmailList.tsx
+42 -29
View File
@@ -219,36 +219,49 @@ export const EmailList = () => {
const hasNoEmails = !isSearching && total === 0 && folder === 'inbox' && !allCount?.total; const hasNoEmails = !isSearching && total === 0 && folder === 'inbox' && !allCount?.total;
if (hasNoEmails && !isLoading && page === 1) { if (hasNoEmails && !isLoading && page === 1) {
return ( return (
<div className="flex h-full flex-col items-center justify-center gap-3 text-sm opacity-50"> <>
<Mail className="h-8 w-8" /> {/*
{!hasAccounts ? ( The modal has to be mounted HERE too, not only in the main return below.
<div className="flex flex-col items-center gap-2">
<span>Add an email account to get started</span> It was only down there, and the result was a catch-22 you could not get out of: with no account
<Button variant="outline" size="sm" onClick={() => openAccounts(true)}> the component takes this early return, "Add Account" flips the shared `EMAIL_ACCOUNTS_OPEN`
Add Account global — and nothing is listening, because `<AccountsModal />` lives in the branch that renders
</Button> when mail EXISTS. Clicking it did nothing at all, with no error anywhere. The only other trigger
</div> is in the toolbar, which is also in that branch, so a fresh install had no reachable way to add
) : syncableAccount ? ( the first account.
<div className="flex flex-col items-center gap-2"> */}
<AccountsModal />
<div className="flex h-full flex-col items-center justify-center gap-3 text-sm opacity-50">
<Mail className="h-8 w-8" />
{!hasAccounts ? (
<div className="flex flex-col items-center gap-2">
<span>Add an email account to get started</span>
<Button variant="outline" size="sm" onClick={() => openAccounts(true)}>
Add Account
</Button>
</div>
) : syncableAccount ? (
<div className="flex flex-col items-center gap-2">
<span>No emails synced yet</span>
<Button variant="outline" size="sm" onClick={handleSync} disabled={syncing || isSyncing}>
{syncing || isSyncing ? (
<Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
) : (
<RefreshCw className="mr-2 h-3.5 w-3.5" />
)}
Sync Now
</Button>
</div>
) : isSyncing ? (
<div className="flex flex-col items-center gap-2">
<Loader2 className="h-5 w-5 animate-spin" />
<span>Syncing emails...</span>
</div>
) : (
<span>No emails synced yet</span> <span>No emails synced yet</span>
<Button variant="outline" size="sm" onClick={handleSync} disabled={syncing || isSyncing}> )}
{syncing || isSyncing ? ( </div>
<Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> </>
) : (
<RefreshCw className="mr-2 h-3.5 w-3.5" />
)}
Sync Now
</Button>
</div>
) : isSyncing ? (
<div className="flex flex-col items-center gap-2">
<Loader2 className="h-5 w-5 animate-spin" />
<span>Syncing emails...</span>
</div>
) : (
<span>No emails synced yet</span>
)}
</div>
); );
} }