Backfill start-window indicator, account-delete spinner, app-password Help popup

- Backfill: show the sidebar spinner + "Preparing…" banner during the brief window
  after account creation when state=backfilling but total is not yet counted
  (total===0), so a freshly-added account shows progress immediately instead of
  looking done until a refresh. The stuck-at-100% guard is preserved.
- Settings: a centered spinner overlay ("Removing account…") covers the screen from
  confirm until the (slow) server cascade + accounts refetch complete, so the row
  no longer appears frozen before it disappears.
- Add-account wizard: the manual password hint now includes Outlook and gains a
  "Help" link opening a popup with per-provider direct links to enable 2-step
  verification and generate the app password (Gmail, Outlook, Yahoo, iCloud).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U72FZiF1W1pb8XxyWBTREA

frontend/src/components/BackfillBanner.tsx

@@ -13,9 +13,12 @@ export function BackfillBanner() {
   const accounts = useQuery({ queryKey: ["accounts"], queryFn: api.accounts });
 
   const importing = (accounts.data ?? []).filter(
-    // Also require done < total so a completed account whose state event was missed
-    // (e.g. a dropped WS) never leaves a stuck "X of X" banner.
-    (a) => a.state === "backfilling" && a.backfill_total > 0 && a.backfill_done < a.backfill_total,
+    // Show while backfilling — including the brief start window before the worker has
+    // counted the total (total === 0). Hide only once done, so a completed account
+    // whose state event was missed (e.g. a dropped WS) never leaves a stuck banner.
+    (a) =>
+      a.state === "backfilling" &&
+      (a.backfill_total === 0 || a.backfill_done < a.backfill_total),
   );
   const active = importing.length > 0;
 
@@ -40,8 +43,10 @@ export function BackfillBanner() {
       }`}
     >
       {importing.map((a) => {
+        // total === 0: the worker hasn't counted yet — show an indeterminate bar.
+        const preparing = a.backfill_total === 0;
         const done = Math.min(a.backfill_done, a.backfill_total);
-        const pct = Math.round((done / a.backfill_total) * 100);
+        const pct = preparing ? 0 : Math.round((done / a.backfill_total) * 100);
         return (
           <div
             key={a.id}
@@ -52,16 +57,22 @@ export function BackfillBanner() {
               <span className="truncate text-xs font-medium text-app-fg">{a.email}</span>
             </div>
             <div className="mb-1.5 text-xs text-app-muted">
-              {t("backfill.importing", {
-                done: done.toLocaleString(),
-                total: a.backfill_total.toLocaleString(),
-              })}
+              {preparing
+                ? t("backfill.preparing")
+                : t("backfill.importing", {
+                    done: done.toLocaleString(),
+                    total: a.backfill_total.toLocaleString(),
+                  })}
             </div>
             <div className="h-1.5 w-full overflow-hidden rounded-full bg-app-hover">
-              <div
-                className="h-full rounded-full bg-app-accent transition-all duration-500"
-                style={{ width: `${pct}%` }}
-              />
+              {preparing ? (
+                <div className="h-full w-full animate-pulse rounded-full bg-app-accent/60" />
+              ) : (
+                <div
+                  className="h-full rounded-full bg-app-accent transition-all duration-500"
+                  style={{ width: `${pct}%` }}
+                />
+              )}
             </div>
           </div>
         );