5d6c322129
Sheets via neuer KeyboardAwareSheet-Composable (in Modal pattern, auto-grow mit Tastatur, paddingBottom-Lift): EditMail, AddDomain, CreateRoom, ConnectMail. GameOverScreen behält Spring-Slide-In, nutzt RN Keyboard.addListener für Lift. - KeyboardAwareSheet.tsx — universal modal with sheet-grow + keyboard-padding - react-native-keyboard-controller installiert + KeyboardProvider in Root - Snake: time + ScoreProgressBar + useSnakeSounds (haptic, audio TODO) - Tetris: title weg, Buttons zentriert, kein Pressable mit style-fn - DPad-Buttons 60→48, more bg, no scale - useMe: pub-sub listener pattern für app-weite avatar/nickname-Updates - dm.tsx: resolveAvatar wrap (iron.png-Warning) - Mail-error-humanizer + locales Recovery-Doc-Update in docs/internal/RECOVERY_LOG_2026-05-10.md Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
529 lines
18 KiB
TypeScript
529 lines
18 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
LayoutAnimation,
|
|
Platform,
|
|
Pressable,
|
|
Text,
|
|
UIManager,
|
|
View,
|
|
} from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { ConfirmAlert } from '../ConfirmAlert';
|
|
import { EditMailAccountSheet } from './EditMailAccountSheet';
|
|
import { useMailInterval } from '../../hooks/useMailInterval';
|
|
import type { MailAccount } from '../../hooks/useMailStatus';
|
|
|
|
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
|
|
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
}
|
|
|
|
type Props = {
|
|
account: MailAccount;
|
|
plan: 'free' | 'pro' | 'legend';
|
|
expanded: boolean;
|
|
onToggle: () => void;
|
|
onDisconnect: (id: string) => Promise<void>;
|
|
onIntervalChanged: () => void;
|
|
onEditSuccess: () => void;
|
|
disconnecting?: boolean;
|
|
};
|
|
|
|
function resolveProviderIcon(provider: string): {
|
|
icon: React.ComponentProps<typeof Ionicons>['name'];
|
|
color: string;
|
|
} {
|
|
const p = provider.toLowerCase();
|
|
if (p.includes('gmail') || p.includes('google')) return { icon: 'mail', color: '#EA4335' };
|
|
if (p.includes('icloud') || p.includes('apple')) return { icon: 'cloud', color: '#007AFF' };
|
|
if (p.includes('outlook') || p.includes('hotmail') || p.includes('microsoft'))
|
|
return { icon: 'mail-open', color: '#0078D4' };
|
|
if (p.includes('yahoo')) return { icon: 'at', color: '#7C3AED' };
|
|
if (p.includes('gmx') || p.includes('web.de'))
|
|
return { icon: 'mail-unread', color: '#E87A22' };
|
|
return { icon: 'server', color: '#737373' };
|
|
}
|
|
|
|
const STALE_THRESHOLD_MS = 5 * 60 * 1_000;
|
|
const IDLE_HEARTBEAT_STALE_MS = STALE_THRESHOLD_MS;
|
|
const NO_NEW_MAIL_THRESHOLD_MS = 60 * 60_000;
|
|
|
|
function formatRelativeAbsolute(ts: Date): string {
|
|
const min = Math.floor((Date.now() - ts.getTime()) / 60_000);
|
|
const todayStr = new Date().toDateString();
|
|
const yesterdayStr = new Date(Date.now() - 86_400_000).toDateString();
|
|
|
|
const hh = ts.getHours().toString().padStart(2, '0');
|
|
const mm = ts.getMinutes().toString().padStart(2, '0');
|
|
|
|
let dayLabel: string;
|
|
if (ts.toDateString() === todayStr) dayLabel = 'heute';
|
|
else if (ts.toDateString() === yesterdayStr) dayLabel = 'gestern';
|
|
else dayLabel = ts.toLocaleDateString('de', { day: '2-digit', month: '2-digit' });
|
|
|
|
let rel: string;
|
|
if (min < 1) rel = 'gerade eben';
|
|
else if (min < 60) rel = `vor ${min} min`;
|
|
else if (min < 1440) rel = `vor ${Math.floor(min / 60)}h`;
|
|
else rel = `vor ${Math.floor(min / 1440)}d`;
|
|
|
|
return `${rel} (${dayLabel} ${hh}:${mm})`;
|
|
}
|
|
|
|
function idleHeartbeatAlive(lastIdleHeartbeatAt: string | null | undefined): boolean {
|
|
if (!lastIdleHeartbeatAt) return false;
|
|
return Date.now() - new Date(lastIdleHeartbeatAt).getTime() < IDLE_HEARTBEAT_STALE_MS;
|
|
}
|
|
|
|
function StatusBadgeRow({
|
|
account,
|
|
isLegend,
|
|
t,
|
|
}: {
|
|
account: MailAccount;
|
|
isLegend: boolean;
|
|
t: (k: string, opts?: Record<string, string | number>) => string;
|
|
}) {
|
|
// Priority 1 — auth / connect error
|
|
if (account.lastConnectError) {
|
|
const isAuthError =
|
|
account.lastConnectError.toLowerCase().includes('invalid credentials') ||
|
|
account.lastConnectError.toLowerCase().includes('authentication failed');
|
|
const errorLabel = isAuthError ? t('mail.status_auth_error') : t('mail.status_connect_error');
|
|
const since = account.lastConnectErrorAt
|
|
? formatRelativeAbsolute(new Date(account.lastConnectErrorAt))
|
|
: null;
|
|
return (
|
|
<View style={{ marginTop: 3 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<Ionicons name="lock-closed" size={11} color="#dc2626" style={{ marginRight: 4 }} />
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}>
|
|
{errorLabel}
|
|
</Text>
|
|
<Text
|
|
style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginLeft: 4 }}
|
|
>
|
|
· {t('mail.status_error_tap_hint')}
|
|
</Text>
|
|
</View>
|
|
{since ? (
|
|
<Text
|
|
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
|
>
|
|
{since}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Priority 5 — never connected
|
|
if (!account.lastScannedAt) {
|
|
return (
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }}>
|
|
<View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#a3a3a3', marginRight: 5 }} />
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#a3a3a3' }}>
|
|
{t('mail.status_waiting_first_connect')}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const heartbeatAlive = idleHeartbeatAlive(account.lastIdleHeartbeatAt);
|
|
const lastScannedTs = new Date(account.lastScannedAt);
|
|
const scannedAgo = Date.now() - lastScannedTs.getTime();
|
|
const scannedRelAbs = formatRelativeAbsolute(lastScannedTs);
|
|
|
|
// Priority 4 — stale: heartbeat missing/expired AND scan is old
|
|
if (!heartbeatAlive && scannedAgo > STALE_THRESHOLD_MS) {
|
|
return (
|
|
<View style={{ marginTop: 3 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View
|
|
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#d97706', marginRight: 5 }}
|
|
/>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#d97706' }}>
|
|
{t('mail.status_stale')}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
|
numberOfLines={1}
|
|
>
|
|
{t('mail.status_stale_last_scan', { rel: scannedRelAbs })}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Priority 2 + 3 — heartbeat alive (or scan recent enough for pre-migration backend)
|
|
if (heartbeatAlive) {
|
|
const heartbeatTs = new Date(account.lastIdleHeartbeatAt!);
|
|
const heartbeatMin = Math.floor((Date.now() - heartbeatTs.getTime()) / 60_000);
|
|
const idleSince = heartbeatMin < 1 ? 'gerade eben' : `${heartbeatMin} min`;
|
|
|
|
if (scannedAgo > NO_NEW_MAIL_THRESHOLD_MS) {
|
|
// Priority 3 — connected but no new mail for >1h
|
|
return (
|
|
<View style={{ marginTop: 3 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View
|
|
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
|
|
/>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
|
|
{isLegend ? t('mail.live') : t('mail.account_active')}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
|
numberOfLines={1}
|
|
>
|
|
{t('mail.status_live_no_new_mail', { rel: scannedRelAbs })}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Priority 2 — live + heartbeat recent + scan recent
|
|
return (
|
|
<View style={{ marginTop: 3 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View
|
|
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
|
|
/>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
|
|
{isLegend ? t('mail.live') : t('mail.account_active')}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
|
numberOfLines={1}
|
|
>
|
|
{t('mail.status_live_idle', { rel: idleSince })}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Fallback — scan recent, backend without heartbeat field
|
|
return (
|
|
<View style={{ marginTop: 3 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View
|
|
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
|
|
/>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
|
|
{isLegend ? t('mail.live') : t('mail.account_active')}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
|
numberOfLines={1}
|
|
>
|
|
{scannedRelAbs}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const INTERVAL_OPTIONS_BY_PLAN: Record<'free' | 'pro' | 'legend', number[]> = {
|
|
free: [4],
|
|
pro: [1, 4, 8],
|
|
legend: [1, 4, 8],
|
|
};
|
|
|
|
const HEADER_ROW = {
|
|
flexDirection: 'row' as const,
|
|
alignItems: 'center' as const,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 14,
|
|
};
|
|
|
|
const ACTION_BTN_BASE = {
|
|
flex: 1,
|
|
flexDirection: 'row' as const,
|
|
alignItems: 'center' as const,
|
|
justifyContent: 'center' as const,
|
|
paddingVertical: 12,
|
|
borderRadius: 10,
|
|
};
|
|
|
|
export function MailAccountCard({
|
|
account,
|
|
plan,
|
|
expanded,
|
|
onToggle,
|
|
onDisconnect,
|
|
onIntervalChanged,
|
|
onEditSuccess,
|
|
disconnecting,
|
|
}: Props) {
|
|
const { t } = useTranslation();
|
|
const [confirmVisible, setConfirmVisible] = useState(false);
|
|
const [editVisible, setEditVisible] = useState(false);
|
|
const { setInterval, updating } = useMailInterval();
|
|
const { icon, color } = resolveProviderIcon(account.provider);
|
|
|
|
const isLegend = plan === 'legend';
|
|
const intervalOptions = INTERVAL_OPTIONS_BY_PLAN[plan];
|
|
|
|
function handleToggle() {
|
|
if (account.lastConnectError) {
|
|
setEditVisible(true);
|
|
return;
|
|
}
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
|
onToggle();
|
|
}
|
|
|
|
async function handleSetInterval(value: number) {
|
|
const res = await setInterval(account.id, value);
|
|
if (res.ok) onIntervalChanged();
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<View
|
|
style={{
|
|
backgroundColor: '#fff',
|
|
borderRadius: 16,
|
|
borderWidth: 1,
|
|
borderColor: account.lastConnectError ? '#fecaca' : '#e5e5e5',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<Pressable onPress={handleToggle} android_ripple={{ color: '#f5f5f5' }}>
|
|
<View style={HEADER_ROW}>
|
|
<View
|
|
style={{
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 10,
|
|
backgroundColor: color + '18',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: 12,
|
|
}}
|
|
>
|
|
<Ionicons name={icon} size={19} color={color} />
|
|
</View>
|
|
|
|
<View style={{ flex: 1, minWidth: 0, marginRight: 8 }}>
|
|
<Text
|
|
style={{ fontSize: 14, fontFamily: 'Nunito_700Bold', color: '#0a0a0a' }}
|
|
numberOfLines={1}
|
|
>
|
|
{account.email}
|
|
</Text>
|
|
<StatusBadgeRow account={account} isLegend={isLegend} t={t} />
|
|
</View>
|
|
|
|
<Ionicons
|
|
name={expanded ? 'chevron-up' : 'chevron-down'}
|
|
size={18}
|
|
color="#a3a3a3"
|
|
/>
|
|
</View>
|
|
</Pressable>
|
|
|
|
{/* Body */}
|
|
{expanded && (
|
|
<View style={{ borderTopWidth: 1, borderTopColor: '#f5f5f5', padding: 14 }}>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: '#fef2f2',
|
|
borderRadius: 12,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 12,
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<Ionicons name="shield-checkmark" size={20} color="#dc2626" style={{ marginRight: 10 }} />
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}>
|
|
{t('mail.account_stat_blocked')}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 22,
|
|
fontFamily: 'Nunito_800ExtraBold',
|
|
color: '#dc2626',
|
|
marginTop: 1,
|
|
}}
|
|
>
|
|
{account.totalBlocked.toLocaleString()}
|
|
</Text>
|
|
</View>
|
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#737373' }}>
|
|
{t('mail.account_of_scanned', {
|
|
scanned: account.totalScanned.toLocaleString(),
|
|
})}
|
|
</Text>
|
|
</View>
|
|
|
|
{isLegend ? (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: '#f0fdf4',
|
|
borderRadius: 10,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<Ionicons name="flash" size={14} color="#16a34a" style={{ marginRight: 8 }} />
|
|
<Text
|
|
style={{
|
|
flex: 1,
|
|
fontSize: 12,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: '#16a34a',
|
|
}}
|
|
>
|
|
{t('mail.realtime_desc')}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<View style={{ marginBottom: 12 }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 11,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: '#737373',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.6,
|
|
marginBottom: 6,
|
|
}}
|
|
>
|
|
{t('mail.scan_interval_label')}
|
|
</Text>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
{intervalOptions.map((opt, idx) => {
|
|
const active = account.scanInterval === opt;
|
|
const disabled = plan === 'free' || updating === account.id;
|
|
return (
|
|
<Pressable
|
|
key={opt}
|
|
disabled={disabled}
|
|
onPress={() => handleSetInterval(opt)}
|
|
style={{
|
|
flex: 1,
|
|
paddingVertical: 9,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
backgroundColor: active ? '#007AFF' : '#f5f5f5',
|
|
marginLeft: idx === 0 ? 0 : 6,
|
|
opacity: disabled && !active ? 0.5 : 1,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 13,
|
|
fontFamily: 'Nunito_700Bold',
|
|
color: active ? '#fff' : '#525252',
|
|
}}
|
|
>
|
|
{opt}h
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
{plan === 'free' && (
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: '#a3a3a3',
|
|
marginTop: 6,
|
|
}}
|
|
>
|
|
{t('mail.free_scan_interval_hint')}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
)}
|
|
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<Pressable
|
|
onPress={() => setEditVisible(true)}
|
|
style={{ ...ACTION_BTN_BASE, backgroundColor: '#f5f5f5', marginRight: 6 }}
|
|
>
|
|
<Ionicons
|
|
name="key-outline"
|
|
size={14}
|
|
color="#525252"
|
|
style={{ marginRight: 6 }}
|
|
/>
|
|
<Text
|
|
style={{ fontSize: 13, fontFamily: 'Nunito_700Bold', color: '#525252' }}
|
|
numberOfLines={1}
|
|
>
|
|
{t('mail.account_change_password')}
|
|
</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
onPress={() => setConfirmVisible(true)}
|
|
disabled={disconnecting}
|
|
style={{
|
|
...ACTION_BTN_BASE,
|
|
backgroundColor: '#fef2f2',
|
|
marginLeft: 6,
|
|
opacity: disconnecting ? 0.6 : 1,
|
|
}}
|
|
>
|
|
{disconnecting ? (
|
|
<ActivityIndicator size="small" color="#dc2626" />
|
|
) : (
|
|
<>
|
|
<Ionicons
|
|
name="trash-outline"
|
|
size={14}
|
|
color="#dc2626"
|
|
style={{ marginRight: 6 }}
|
|
/>
|
|
<Text
|
|
style={{ fontSize: 13, fontFamily: 'Nunito_700Bold', color: '#dc2626' }}
|
|
numberOfLines={1}
|
|
>
|
|
{t('mail.disconnect')}
|
|
</Text>
|
|
</>
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<ConfirmAlert
|
|
visible={confirmVisible}
|
|
title={t('mail.account_disconnect_confirm_title')}
|
|
message={t('mail.account_disconnect_confirm_message', { email: account.email })}
|
|
confirmLabel={t('mail.account_disconnect_confirm_btn')}
|
|
destructive
|
|
icon="trash"
|
|
iconColor="#FF3B30"
|
|
onConfirm={async () => {
|
|
setConfirmVisible(false);
|
|
await onDisconnect(account.id);
|
|
}}
|
|
onCancel={() => setConfirmVisible(false)}
|
|
/>
|
|
|
|
<EditMailAccountSheet
|
|
visible={editVisible}
|
|
email={account.email}
|
|
onClose={() => setEditVisible(false)}
|
|
onSuccess={onEditSuccess}
|
|
/>
|
|
</>
|
|
);
|
|
}
|