From 91b978c0437297fd45b7b072d3c9814e3a541f17 Mon Sep 17 00:00:00 2001
From: Andre Padez <andre.padez@gmail.com>
Date: Tue, 18 Aug 2026 15:50:46 +0000
Subject: [PATCH] mount the accounts modal in the empty state, so a fresh
 install can add its first account
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 web/EmailList.tsx | 71 ++++++++++++++++++++++++++++-------------------
 1 file changed, 42 insertions(+), 29 deletions(-)

diff --git a/web/EmailList.tsx b/web/EmailList.tsx
index afe4dd2..2999737 100644
--- a/web/EmailList.tsx
+++ b/web/EmailList.tsx
@@ -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>
+      </>
     );
   }