chahinebrini 206941e5e1 fix(mail-page): UX polish — FAB-revert, legend cap, activity NaNd, instant heartbeat
User-Feedback nach Live-Test:

Frontend:
- FAB raus, Plus-Button zurück in den Account-Liste-Section-Header
  (`add-circle-outline` in brandOrange + Label "Postfach hinzufügen").
  FAB stört am unteren Rand, oben passt zum iOS-NavBar-Pattern.
- Half-Donut Legend strikt max Top-3 + "Sonstige" — Threshold von ≤4
  auf ≤3 gesenkt. Auch bei 4 Connections wird jetzt schon komprimiert.
- Hero-Donut-Subtitle "über N Postfächer" entfernt — Title-Block ist
  jetzt eine Zeile: "XX blockiert · ● Live"
- Activity-Log default-collapsed war schon richtig (kein Change)
- Activity-Item-Redesign: x-Icon-Pille raus, Zeit + Provider als
  Sub-Zeile unter dem Subject ("vor 2h · GMX"), kein Zeit-Label rechts mehr

Bug-Fix — NaNd in Activity-Row:
- Root-Cause: snake_case/camelCase-Mismatch. Backend liefert
  `receivedAt`, `senderEmail`, `senderName`, `connectionId` (camelCase),
  Frontend-Type hatte snake_case → undefined-Werte → `new Date(undefined)`
  → NaN → "NaNd"-Render
- MailBlockedItem-Type auf camelCase umgestellt + nested `connection`-Objekt
  (passt jetzt zum Backend-Response)
- formatDate mit Number.isFinite-Guard — gibt null zurück bei ungültigem
  Datum statt NaN-String zu rendern

Backend (imap-idle daemon):
- Daemon schreibt jetzt unmittelbar nach `client.connect()` einen Heartbeat
  (last_idle_heartbeat_at = NOW()) + clear last_connect_error parallel
- Vorher: User sah 2-9min lang "wartet auf erste verbindung" obwohl
  Connection längst aktiv war (Heartbeat kam erst beim ersten NOOP-Cycle)
- Re-Connect-Pfad nach AUTHENTICATIONFAILED ist automatisch mit
  abgedeckt (geht durch denselben connect-Block)
- ESM-Daemon, kein Build-Step — Pipeline scp + pm2-restart reicht

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-13 22:55:50 +02:00

62 lines
1.7 KiB
TypeScript

import { useCallback, useEffect, useState } from "react";
import { apiFetch } from "../lib/api";
export type MailBlockedItem = {
id: string;
subject: string;
senderEmail: string;
senderName: string | null;
receivedAt: string;
connectionId: string;
connection?: {
id: string;
email: string;
title: string | null;
provider: string;
providerLabel: string;
} | null;
};
export type MailResultsResponse = {
results: MailBlockedItem[];
total: number;
page: number;
pages: number;
};
/**
* GET /api/mail/results — Liste der blockierten Mails mit optionalem Provider-Filter.
* Backend räumt selbst nach 24h auf (deleteOldMailBlocked) — Retention sollte für
* den 30-Tage-Bar-Chart auf 90 Tage hochgesetzt werden, sonst sind die Stats leer.
*/
export function useMailResults(enabled: boolean = true, provider: string = 'all') {
const [results, setResults] = useState<MailBlockedItem[]>([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const refresh = useCallback(async () => {
if (!enabled) return;
setLoading(true);
try {
const qs = provider !== 'all' ? `?provider=${encodeURIComponent(provider)}` : '';
const res = await apiFetch<MailResultsResponse>(
`/api/mail/results${qs}`,
);
setResults(res.results ?? []);
setTotal(res.total ?? 0);
setError(null);
} catch (e: any) {
setError(e?.message ?? "unknown");
} finally {
setLoading(false);
}
}, [enabled, provider]);
useEffect(() => {
if (enabled) refresh();
}, [enabled, refresh]);
return { results, total, loading, error, refresh };
}