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;
if (hasNoEmails && !isLoading && page === 1) {
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 ? (
<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">
<>
{/*
The modal has to be mounted HERE too, not only in the main return below.
It was only down there, and the result was a catch-22 you could not get out of: with no account
the component takes this early return, "Add Account" flips the shared `EMAIL_ACCOUNTS_OPEN`
global — and nothing is listening, because `<AccountsModal />` lives in the branch that renders
when mail EXISTS. Clicking it did nothing at all, with no error anywhere. The only other trigger
is in the toolbar, which is also in that branch, so a fresh install had no reachable way to add
the first account.
*/}
<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>
<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>
)}
</div>
)}
</div>
</>
);
}