feat: Alle/Nur-neue Tabs + Option Nur neue Leads speichern

- Suchergebnis-Filter als Tabs: [Alle (46)] [Nur neue (X)] — beide klickbar
- Checkbox "Nur neue Leads speichern" erscheint vor der Suche
- Bei aktivierter Option: nach Abschluss werden vorhandene Leads
  automatisch aus dem Leadspeicher gelöscht, Toast zeigt Bilanz

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
TimoUttenweiler
2026-04-01 10:56:30 +02:00
parent 25234b70ee
commit 6264ebf786

View File

@@ -17,6 +17,7 @@ export default function SuchePage() {
const [selected, setSelected] = useState<Set<string>>(new Set());
const [deleting, setDeleting] = useState(false);
const [onlyNew, setOnlyNew] = useState(false);
const [saveOnlyNew, setSaveOnlyNew] = useState(false);
function handleChange(field: "query" | "region" | "count", value: string | number) {
if (field === "query") setQuery(value as string);
@@ -32,6 +33,7 @@ export default function SuchePage() {
setSearchDone(false);
setSelected(new Set());
setOnlyNew(false);
// saveOnlyNew intentionally kept — user setting persists across searches
try {
const res = await fetch("/api/search", {
method: "POST",
@@ -51,16 +53,33 @@ export default function SuchePage() {
}
}
const handleDone = useCallback((result: LeadResult[], warning?: string) => {
const handleDone = useCallback(async (result: LeadResult[], warning?: string) => {
setLoading(false);
setLeads(result);
setSearchDone(true);
// Auto-delete existing (non-new) leads from vault if "Nur neue speichern" is active
const existingIds = result.filter(l => !l.isNew).map(l => l.id);
if (saveOnlyNew && existingIds.length > 0) {
try {
await fetch("/api/leads/delete-from-results", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ resultIds: existingIds }),
});
// Mark them as deleted in local state (isNew stays false, they remain visible but are gone from vault)
} catch { /* silent — vault cleanup best-effort */ }
}
const newCount = result.filter(l => l.isNew).length;
if (warning) {
toast.warning(`${result.length} Unternehmen gefunden — E-Mail-Anreicherung fehlgeschlagen: ${warning}`, { duration: 6000 });
} else if (saveOnlyNew && existingIds.length > 0) {
toast.success(`${newCount} neue Leads gespeichert, ${existingIds.length} bereits vorhandene verworfen`, { duration: 5000 });
} else {
toast.success(`${result.length} Leads gefunden und im Leadspeicher gespeichert`, { duration: 4000 });
}
}, []);
}, [saveOnlyNew]);
async function handleDelete(ids: string[]) {
if (!ids.length || deleting) return;
@@ -127,6 +146,29 @@ export default function SuchePage() {
onSubmit={handleSubmit}
/>
{/* Save option */}
{!loading && !searchDone && (
<label
style={{
display: "flex",
alignItems: "center",
gap: 8,
marginTop: 10,
padding: "0 4px",
cursor: "pointer",
width: "fit-content",
}}
>
<input
type="checkbox"
checked={saveOnlyNew}
onChange={e => setSaveOnlyNew(e.target.checked)}
style={{ accentColor: "#3b82f6", width: 13, height: 13, cursor: "pointer" }}
/>
<span style={{ fontSize: 12, color: "#6b7280" }}>Nur neue Leads speichern</span>
</label>
)}
{/* Loading Card */}
{loading && jobId && (
<LoadingCard
@@ -206,30 +248,38 @@ export default function SuchePage() {
: `${visibleLeads.length} Leads`}
</span>
{/* Nur neue Filter */}
<button
className="filter-pill"
onClick={() => setOnlyNew(v => !v)}
style={{
display: "flex",
alignItems: "center",
gap: 5,
background: onlyNew ? "rgba(34,197,94,0.15)" : "rgba(255,255,255,0.05)",
border: `1px solid ${onlyNew ? "rgba(34,197,94,0.4)" : "#2e2e3e"}`,
borderRadius: 20,
padding: "3px 10px",
fontSize: 11,
color: onlyNew ? "#22c55e" : "#9ca3af",
cursor: "pointer",
}}
>
<span style={{
width: 6, height: 6, borderRadius: 3,
background: onlyNew ? "#22c55e" : "#6b7280",
display: "inline-block",
}} />
Nur neue ({newCount})
</button>
{/* Filter tabs */}
<div style={{
display: "flex",
background: "#0d0d18",
border: "1px solid #2e2e3e",
borderRadius: 8,
padding: 2,
gap: 2,
}}>
{[
{ label: `Alle (${leads.length})`, value: false },
{ label: `Nur neue (${newCount})`, value: true },
].map(tab => (
<button
key={String(tab.value)}
onClick={() => setOnlyNew(tab.value)}
style={{
padding: "3px 10px",
borderRadius: 6,
border: "none",
fontSize: 11,
cursor: "pointer",
background: onlyNew === tab.value ? "#1e1e2e" : "transparent",
color: onlyNew === tab.value ? "#ffffff" : "#6b7280",
fontWeight: onlyNew === tab.value ? 500 : 400,
transition: "background 0.12s, color 0.12s",
}}
>
{tab.label}
</button>
))}
</div>
</div>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>