chahinebrini b7909d77e4 feat(mail): custom title + settings collapsible + stats charts + provider filter
Mail-Page-Refactor — Privacy-friendly + DiGA-tauglich:

- Custom title pro mail-connection (z.B. "Privat-Gmail" statt voller E-Mail).
  Memory-Pattern: Anonymität via Nickname jetzt auch für Mail-Adressen
  sichtbar, Datenminimierung. Title nullable, Fallback auf Email-Domain.
- Schema-Migration mail_connection_title (additiv, NULL default für Bestand)
- Endpoint PATCH /api/mail-connections/:id mit title-Validation (max 60,
  trim, leerer String → NULL)
- "Passwort ändern"-Collapsible → vollwertige "Einstellungen"-Sektion:
  Title editieren · Email read-only · Passwort neu setzen · Verbindung
  trennen (mit Confirm-Dialog)
- EditMailTitleSheet als FormSheet-Pattern für Title-Edit
- mailConnectDraft-Store kriegt Title-Feld für Pre-Fill bei Re-Open

Zwei neue Stats-Charts auf der Mail-Page:

- MailBlockedByDayChart — 30-Tage-Bar-Chart, Plain-View-Bars (Pattern wie
  Sparkline-Profile), Empty-State bei 0 Cooldowns
  · Backend: GET /api/mail/stats/blocked-by-day?days=30
- MailDistributionChart — Half-Donut via react-native-svg, Top-5 Connections
  + "Sonstige", rendert nicht bei ≤1 Connection
  · Backend: GET /api/mail/stats/blocked-by-connection

Activity-Log mit Provider-Filter:

- Filter-Chips Mo Gmail/Outlook/iCloud/etc. über bestehendem Activity-Log
- GET /api/mail/results?provider=X (war vorher hardcoded all)
- Endpoint-Naming-Fix in useMailResults (war /api/mail/blocked, jetzt
  korrekt /api/mail/results — UI-Agent hatte falschen Path geraten)

Backend-Side-Effects:

- imap-providers util resolveProviderMeta(host) — gibt {provider, label,
  isCustomDomain} zurück, von 3 Endpoints konsumiert
- /api/mail/status erweitert: title, provider, providerLabel,
  isCustomDomain im Account-Shape
- /api/mail/results erweitert: connection-Sub-Objekt pro Entry +
  provider-Filter-Query

Open follow-ups (TODOs):

- deleteOldMailBlocked-Cron löscht <24h → Bar-Chart-Daten weg. Retention
  auf 90 Tage hochsetzen oder Cron stoppen.
- POST /api/mail/connect könnte die neue connection.id im Response
  mitliefern → Title-PATCH direkt ohne Extra-GET (UI-Agent-Empfehlung).
- /api/mail/status zeigt nur active Connections — paused mit Title wären
  unsichtbar. Entscheiden.

18 neue i18n-Keys (mail.title_*, mail.settings_*, mail.row_*,
mail.disconnect_confirm_*, mail.stats.*, mail.filter.all) in DE + EN.

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

143 lines
3.8 KiB
TypeScript

import { useCallback, useEffect, useRef, useState } from 'react';
import { AppState, type AppStateStatus } from 'react-native';
import { apiFetch } from '../lib/api';
export type MailAccount = {
id: string;
email: string;
provider: string;
title?: string | null;
isActive: boolean;
paused?: boolean;
lastScannedAt: string | null;
nextScanAt: string | null;
totalBlocked: number;
totalScanned: number;
scanInterval: number;
blockRate: number;
lastConnectError?: string | null;
lastConnectErrorAt?: string | null;
lastIdleHeartbeatAt?: string | null;
};
export type DailyStat = {
date: string;
label: string;
count: number;
};
export type MailStatusResponse = {
connected: boolean;
accounts: MailAccount[];
totalBlocked: number;
totalScanned: number;
dailyStats: DailyStat[];
};
export type Plan = 'free' | 'pro' | 'legend';
export type UseMailStatusReturn = {
connected: boolean;
accounts: MailAccount[];
totalBlocked: number;
totalScanned: number;
dailyStats: DailyStat[];
/** Plan-derived account limit: free=1, pro=3, legend=Infinity */
maxAccounts: number;
loading: boolean;
error: string | null;
refresh: () => Promise<void>;
};
const POLL_INTERVAL_MS = 30_000;
function deriveMaxAccounts(plan: Plan): number {
if (plan === 'free') return 1;
if (plan === 'pro') return 3;
return Infinity;
}
/**
* Fetched GET /api/mail/status mit:
* - initialem Fetch on mount
* - 30s-Polling solange App im Vordergrund (AppState === 'active')
* - manuell triggerbar via refresh()
*
* TODO: Ersetze Polling durch IDLE-Realtime-Websocket wenn Phase-10-Backend fertig ist.
*/
export function useMailStatus(plan: Plan): UseMailStatusReturn {
const [data, setData] = useState<MailStatusResponse | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
const appStateRef = useRef<AppStateStatus>(AppState.currentState);
const fetchStatus = useCallback(async () => {
try {
const res = await apiFetch<MailStatusResponse>('/api/mail/status');
setData(res);
setError(null);
} catch (e: any) {
console.error('[useMailStatus] fetch failed:', e?.message ?? e);
setError(e?.message ?? 'unknown');
} finally {
setLoading(false);
}
}, []);
// Polling starten / stoppen je nach AppState
const startPolling = useCallback(() => {
if (intervalRef.current) return;
intervalRef.current = setInterval(() => {
fetchStatus();
}, POLL_INTERVAL_MS);
}, [fetchStatus]);
const stopPolling = useCallback(() => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
}, []);
useEffect(() => {
fetchStatus();
startPolling();
const sub = AppState.addEventListener('change', (nextState: AppStateStatus) => {
const wasActive = appStateRef.current === 'active';
const isNowActive = nextState === 'active';
appStateRef.current = nextState;
if (!wasActive && isNowActive) {
// App kommt in Vordergrund — sofort refreshen + Polling neu starten
fetchStatus();
startPolling();
} else if (wasActive && !isNowActive) {
// App geht in Hintergrund — Polling stoppen
stopPolling();
}
});
return () => {
stopPolling();
sub.remove();
};
}, [fetchStatus, startPolling, stopPolling]);
const maxAccounts = deriveMaxAccounts(plan);
return {
connected: data?.connected ?? false,
accounts: data?.accounts ?? [],
totalBlocked: data?.totalBlocked ?? 0,
totalScanned: data?.totalScanned ?? 0,
dailyStats: data?.dailyStats ?? [],
maxAccounts,
loading,
error,
refresh: fetchStatus,
};
}