lukasandClaude Opus 4.8
49738740c0
Search: - Meilisearch backend (app/search/meili.py) + factory wiring; pinned SDK 2.7 - Search-as-you-type: debounced query + Postgres prefix matching, built from the DB tokenizer so full email addresses match (email stays one lexeme) - Saved searches API + sidebar virtual mailboxes; save affordance in the box Account sync windows (SPEC §12 M2): - Choose at setup: All (recent 30d first, then remainder), Last 3 months, New only - Per-account sync_window + "Sync remaining mail" from settings (idempotent re-run) - Provider windowed backfill (SINCE/BEFORE), message_count, newest_uid - migration 0012: accounts.sync_window + backfill_total/backfill_done Backfill progress UX: - Floating progress card (auto-dissolves after 10s) + spinning sidebar ring that fills with the account colour; driven by sync.progress over WS Thread list pagination: - Server-side offset + accurate grand total, with filter/order in SQL; working prev/next across all synced mail Reading panel: - "Load images" one-off now actually renders images (?images=1) without trusting the sender; envelope carries images_allowed so a trusted sender shows no prompt Threading: - Subject fallback no longer merges messages that declare an explicit (different) parent; true siblings still group via a shared-parent reference match. Fixes unrelated auto-replies with the same subject landing in one thread Backend 257 tests green, ruff + mypy --strict clean; frontend tsc/eslint/vitest clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01U72FZiF1W1pb8XxyWBTREA
70 lines
2.4 KiB
TypeScript
70 lines
2.4 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(
|
|
(a) => a.state === "backfilling" && a.backfill_total > 0,
|
|
);
|
|
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) => {
|
|
const done = Math.min(a.backfill_done, a.backfill_total);
|
|
const pct = 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">
|
|
{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}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|