lukasandClaude Opus 4.8
719eeef378
- 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
83 lines
3.1 KiB
TypeScript
83 lines
3.1 KiB
TypeScript
// Initial-sync progress UX (SPEC §12 M2). Shows a small floating card while any
|
|
// account is importing its history; reads the accounts query, which the WS
|
|
// `sync.progress` event invalidates so the bar advances live.
|
|
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { useT } from "../i18n";
|
|
import { api } from "../lib/api";
|
|
|
|
export function BackfillBanner() {
|
|
const t = useT();
|
|
const accounts = useQuery({ queryKey: ["accounts"], queryFn: api.accounts });
|
|
|
|
const importing = (accounts.data ?? []).filter(
|
|
// 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;
|
|
|
|
// Dissolve the card 10s after it appears; the sidebar ring keeps showing
|
|
// progress until the sync finishes.
|
|
const [dismissed, setDismissed] = useState(false);
|
|
useEffect(() => {
|
|
if (!active) {
|
|
setDismissed(false);
|
|
return;
|
|
}
|
|
const timer = window.setTimeout(() => setDismissed(true), 10000);
|
|
return () => window.clearTimeout(timer);
|
|
}, [active]);
|
|
|
|
if (!active) return null;
|
|
|
|
return (
|
|
<div
|
|
className={`fixed bottom-4 left-4 z-40 w-72 space-y-2 transition-opacity duration-700 ${
|
|
dismissed ? "pointer-events-none opacity-0" : "opacity-100"
|
|
}`}
|
|
>
|
|
{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 = preparing ? 0 : Math.round((done / a.backfill_total) * 100);
|
|
return (
|
|
<div
|
|
key={a.id}
|
|
className="rounded-lg border border-app-border bg-app-surface p-3 shadow-lg"
|
|
>
|
|
<div className="mb-1 flex items-center gap-2">
|
|
<span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: a.color }} />
|
|
<span className="truncate text-xs font-medium text-app-fg">{a.email}</span>
|
|
</div>
|
|
<div className="mb-1.5 text-xs text-app-muted">
|
|
{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">
|
|
{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>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|