chahinebrini 1dfb0c647c feat(mail-page): polish v3 + shared HalfDonut + status-dot heartbeat-aware
User-Feedback nach Live-Test:

Frontend (mail page):
- HalfDonut als shared component in components/common/HalfDonut.tsx
  extrahiert (vorher local in ProtectionDetailsSheet). Mail-Page nutzt
  jetzt dieselbe SVG-Math, Animation und Stroke-Style wie der
  Blocker-Schutz-Details-Sheet — visuelle Konsistenz auf einen Blick.
  Mail-Donut: width=168 (kompakter als die 220 in Blocker, weil Legend
  rechts daneben sitzt).
- Donut zeigt Total in der Mitte mit kompaktem Format:
  < 1000 → "999", >=1000 → "1.2k+" / "12k+" / "27k+"
  Headline-Zahl oben links entfällt — Total ist im Donut-Center.
- "Mehr Infos" + "Kürzlich blockiert" zu EINER Top-Level-Collapsible
  zusammengefasst. Beim Aufklappen: Bar-Chart direkt sichtbar, nested
  Collapsible "Kürzlich blockiert" darunter (default zu).
- Account-Card Expanded: per-Connection-Bar-Chart mit adaptive
  Granularität nach Connection-Age:
  · <24h → Empty-State "Daten werden gesammelt, Auswertung nach 24h"
  · 1-14d → Day-Buckets (echte Daten via /api/mail/stats/blocked-by-day
    ?connectionId=)
  · 15-90d → Week-Buckets (client-aggregiert)
  · >90d → Month-Buckets (client-aggregiert)
- Settings-Sheet komplett refactored: State-Machine `mode: 'list' |
  'edit-title' | 'edit-email' | 'edit-password'` mit Back-Pfeil. Inline-
  Edit im selben Sheet statt Sub-Sheet öffnen (FormSheet-Pattern).
  Email-Edit-Row vorbereitet (Backend-PATCH-Endpoint kommt separat).
- Pen-Icons app-weit entfernt: SheetFieldStack-Row, alle Settings-Rows
  auf chevron-forward (Memory-Konvention).

Frontend (MailAccountCard status fix):
- resolveStatusDot nutzt jetzt heartbeat-as-fallback. Vorher: "waiting"
  wenn lastScannedAt=null, egal ob Daemon längst connected war. Jetzt:
  "waiting" nur wenn weder lebendiger Heartbeat noch vergangener Scan
  existiert → frisch verbundene Connections (z.B. OAuth-Outlook 5s nach
  Connect) zeigen direkt "live".
- Behebt User-Beobachtung: "wartet auf erste verbindung" bei Outlook
  obwohl Daemon-Log "connected, auth=xoauth2" zeigt.

Backend (imap-idle daemon):
- getMailboxLock("INBOX") jetzt mit 30s Promise.race-Timeout gewrappt.
- Outlook/XOAUTH2 hat den Edge-Case, dass der Mailbox-Lock lautlos
  hängt nach erfolgreichem connect — die Session bleibt offen ohne
  Fortschritt bis der Renew-Timer (10min) ein imap.close() schickt.
  Mit Timeout wird das Failure-Mode explizit → Auth-Retry-Loop greift
  sauber + last_connect_error mit klarem Text (statt stiller Hänger).
- Root-Cause "warum hängt es" noch nicht behoben — Diagnose nach
  Deploy in Logs (mo).

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

150 lines
4.3 KiB
TypeScript

import { useCallback, useEffect, useRef, useState } from 'react';
import { apiFetch } from '../lib/api';
export type BlockedByDayEntry = {
date: string;
count: number;
};
export type BlockedByConnectionEntry = {
connectionId: string;
title: string | null;
email: string;
providerLabel: string;
count: number;
};
type MailStatsState = {
blockedByDay: BlockedByDayEntry[];
blockedByConnection: BlockedByConnectionEntry[];
loading: boolean;
};
type ConnectionAgeGranularity = 'too-new' | 'day' | 'week' | 'month';
function resolveGranularity(createdAt: string | null | undefined): ConnectionAgeGranularity {
if (!createdAt) return 'day';
const ageMs = Date.now() - new Date(createdAt).getTime();
const ageH = ageMs / 3_600_000;
if (ageH < 24) return 'too-new';
const ageD = ageH / 24;
if (ageD <= 14) return 'day';
if (ageD <= 90) return 'week';
return 'month';
}
type ConnectionStatsState = {
data: BlockedByDayEntry[];
granularity: ConnectionAgeGranularity;
loading: boolean;
};
/**
* Fetches per-connection blocked-by-day stats lazily (only when `enabled` flips true).
* Adaptive heading granularity based on connection age:
* < 24h → 'too-new' (empty-state, data collection in progress)
* 1-14d → 'day' (30-day bars)
* 15-90d → 'week' (client-aggregated into week buckets)
* > 90d → 'month' (client-aggregated into month buckets)
*/
export function useMailConnectionStats(
connectionId: string,
createdAt: string | null | undefined,
enabled: boolean,
) {
const fetchedRef = useRef(false);
const [state, setState] = useState<ConnectionStatsState>({
data: [],
granularity: resolveGranularity(createdAt),
loading: false,
});
const granularity = resolveGranularity(createdAt);
const fetch = useCallback(async () => {
if (!enabled || !connectionId) return;
setState((s) => ({ ...s, loading: true }));
try {
const raw = await apiFetch<BlockedByDayEntry[]>(
`/api/mail/stats/blocked-by-day?days=30&connectionId=${connectionId}`,
);
let data = raw;
if (granularity === 'week') {
data = aggregateToWeeks(raw);
} else if (granularity === 'month') {
data = aggregateToMonths(raw);
}
setState({ data, granularity, loading: false });
} catch {
setState((s) => ({ ...s, loading: false }));
}
}, [enabled, connectionId, granularity]);
useEffect(() => {
if (!enabled) return;
if (fetchedRef.current) return;
fetchedRef.current = true;
fetch();
}, [enabled, fetch]);
return { ...state, refresh: fetch };
}
function aggregateToWeeks(entries: BlockedByDayEntry[]): BlockedByDayEntry[] {
const buckets: Map<string, number> = new Map();
for (const e of entries) {
const d = new Date(e.date + 'T00:00:00');
const day = d.getDay();
const diff = d.getDate() - day + (day === 0 ? -6 : 1);
const monday = new Date(d);
monday.setDate(diff);
const key = monday.toISOString().slice(0, 10);
buckets.set(key, (buckets.get(key) ?? 0) + e.count);
}
return [...buckets.entries()]
.sort(([a], [b]) => a.localeCompare(b))
.map(([date, count]) => ({ date, count }));
}
function aggregateToMonths(entries: BlockedByDayEntry[]): BlockedByDayEntry[] {
const buckets: Map<string, number> = new Map();
for (const e of entries) {
const key = e.date.slice(0, 7);
buckets.set(key, (buckets.get(key) ?? 0) + e.count);
}
return [...buckets.entries()]
.sort(([a], [b]) => a.localeCompare(b))
.map(([date, count]) => ({ date, count }));
}
export function useMailStats(enabled: boolean) {
const [state, setState] = useState<MailStatsState>({
blockedByDay: [],
blockedByConnection: [],
loading: false,
});
const fetch = useCallback(async () => {
if (!enabled) return;
setState((s) => ({ ...s, loading: true }));
try {
const [byDay, byConn] = await Promise.all([
apiFetch<BlockedByDayEntry[]>('/api/mail/stats/blocked-by-day?days=30'),
apiFetch<BlockedByConnectionEntry[]>('/api/mail/stats/blocked-by-connection'),
]);
setState({ blockedByDay: byDay, blockedByConnection: byConn, loading: false });
} catch {
setState((s) => ({ ...s, loading: false }));
}
}, [enabled]);
useEffect(() => {
fetch();
}, [fetch]);
return { ...state, refresh: fetch };
}