ca72437f18
Statt Half-Donut (Höhen-Mismatch mit Circles): zwei volle Circles (Mobil/Computer) + darunter ein eigener animierter Balken (grün/blau-Segmente, gleiche Easing/Dauer wie die Ringe) mit Legende. Kein native-Default. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
730 lines
23 KiB
TypeScript
730 lines
23 KiB
TypeScript
import {
|
|
ActivityIndicator,
|
|
Alert,
|
|
Image,
|
|
Platform,
|
|
ScrollView,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native';
|
|
import { Button } from '../components/Button';
|
|
import { useEffect, useState } from 'react';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { MenuView } from '@react-native-menu/menu';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useColors } from '../lib/theme';
|
|
import { useDevicesStore, type UserDevice } from '../stores/devices';
|
|
|
|
function formatCountdown(isoTarget: string): string {
|
|
const ms = new Date(isoTarget).getTime() - Date.now();
|
|
if (ms <= 0) return '0min';
|
|
const totalMin = Math.floor(ms / 60_000);
|
|
const h = Math.floor(totalMin / 60);
|
|
const m = totalMin % 60;
|
|
if (h > 0) return `${h}h ${m}min`;
|
|
return `${m}min`;
|
|
}
|
|
import { useProtectedDevicesStore, type ProtectedDevice } from '../stores/protectedDevices';
|
|
import { useProtectedDevicesRealtime } from '../hooks/useProtectedDevicesRealtime';
|
|
import { useUserDevicesRealtime } from '../hooks/useUserDevicesRealtime';
|
|
import { useUserPlan } from '../hooks/useUserPlan';
|
|
import { AppHeader } from '../components/AppHeader';
|
|
import { MagicSheet } from '../components/devices/MagicSheet';
|
|
import { DeviceSlotDonut, MOBILE_COLOR, DESKTOP_COLOR } from '../components/devices/DeviceSlotDonut';
|
|
import { DeviceDistributionBar } from '../components/devices/DeviceDistributionBar';
|
|
import { DeviceStatusPill } from '../components/devices/DeviceStatusPill';
|
|
import { DeviceDetailSheet, type DeviceDetail } from '../components/devices/DeviceDetailSheet';
|
|
import { deviceImage } from '../components/devices/deviceIcon';
|
|
|
|
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
|
|
|
function formatLastSeen(iso: string, t: (k: string, o?: any) => string): string {
|
|
const ms = Date.now() - new Date(iso).getTime();
|
|
const min = Math.floor(ms / 60_000);
|
|
if (min < 1) return t('settings.devices_just_now');
|
|
if (min < 60) return t('settings.devices_mins_ago', { count: min });
|
|
const hr = Math.floor(min / 60);
|
|
if (hr < 24) return t('settings.devices_hours_ago', { count: hr });
|
|
const day = Math.floor(hr / 24);
|
|
if (day < 30) return t('settings.devices_days_ago', { count: day });
|
|
return new Date(iso).toLocaleDateString(Platform.OS === 'ios' ? undefined : 'de-DE', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
});
|
|
}
|
|
|
|
function formatSince(iso: string): string {
|
|
return new Date(iso).toLocaleDateString(Platform.OS === 'ios' ? undefined : 'de-DE', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
});
|
|
}
|
|
|
|
// ─── Status Badge ─────────────────────────────────────────────────────────────
|
|
|
|
function StatusBadge({ status }: { status: ProtectedDevice['status'] }) {
|
|
const { t } = useTranslation();
|
|
const colors = useColors();
|
|
|
|
const config: Record<string, { label: string; bg: string; fg: string }> = {
|
|
pending: {
|
|
label: t('devices.status_pending'),
|
|
bg: 'rgba(245,158,11,0.12)',
|
|
fg: '#f59e0b',
|
|
},
|
|
active: {
|
|
label: t('devices.status_active'),
|
|
bg: colors.success + '1a',
|
|
fg: colors.success,
|
|
},
|
|
revoked: {
|
|
label: t('devices.status_revoked'),
|
|
bg: 'rgba(0,0,0,0.06)',
|
|
fg: colors.textMuted,
|
|
},
|
|
degraded: {
|
|
label: t('plan_limit.device_degraded_title'),
|
|
bg: 'rgba(220,38,38,0.1)',
|
|
fg: colors.error,
|
|
},
|
|
};
|
|
const resolved = config[status] ?? { label: status, bg: 'rgba(0,0,0,0.06)', fg: colors.textMuted };
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
borderRadius: 6,
|
|
backgroundColor: resolved.bg,
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 10, color: resolved.fg, fontFamily: 'Nunito_600SemiBold' }}>
|
|
{resolved.label}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// ─── Mobile Device Row ────────────────────────────────────────────────────────
|
|
|
|
function MobileDeviceRow({
|
|
device,
|
|
onRemove,
|
|
onRequestRelease,
|
|
onCancelRelease,
|
|
onOpenDetail,
|
|
}: {
|
|
device: UserDevice;
|
|
onRemove: (id: string) => void;
|
|
onRequestRelease: (id: string) => void;
|
|
onCancelRelease: (id: string) => void;
|
|
onOpenDetail: (d: DeviceDetail) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const colors = useColors();
|
|
|
|
const isBound = !!device.boundToPlan;
|
|
const releaseAt = device.releaseRequestedAt
|
|
? new Date(new Date(device.releaseRequestedAt).getTime() + 24 * 60 * 60 * 1000).toISOString()
|
|
: null;
|
|
const releaseActive = !!releaseAt && new Date(releaseAt).getTime() > Date.now();
|
|
|
|
function confirmRequestRelease() {
|
|
Alert.alert(
|
|
t('devices.release_request_title'),
|
|
t('devices.release_request_body'),
|
|
[
|
|
{ text: t('common.cancel'), style: 'cancel' },
|
|
{
|
|
text: t('devices.release_request_confirm'),
|
|
style: 'destructive',
|
|
onPress: () => onRequestRelease(device.id),
|
|
},
|
|
]
|
|
);
|
|
}
|
|
|
|
function confirmCancelRelease() {
|
|
Alert.alert(
|
|
t('devices.release_cancel_confirm'),
|
|
t('devices.release_cancel_body'),
|
|
[
|
|
{ text: t('common.cancel'), style: 'cancel' },
|
|
{
|
|
text: t('devices.release_cancel_cta'),
|
|
style: 'destructive',
|
|
onPress: () => onCancelRelease(device.id),
|
|
},
|
|
]
|
|
);
|
|
}
|
|
|
|
const deviceName = device.model ?? device.name ?? device.platform;
|
|
const footerText = `${formatLastSeen(device.lastSeenAt, t)} · ${t('settings.devices_since')} ${formatSince(device.createdAt)}`;
|
|
|
|
function openDetail() {
|
|
onOpenDetail({
|
|
name: deviceName,
|
|
icon: deviceImage(device.platform, device.model),
|
|
platform: device.platform,
|
|
createdAt: device.createdAt,
|
|
lastSeenAt: device.lastSeenAt,
|
|
statusLabel: device.isCurrent
|
|
? t('settings.devices_this_device')
|
|
: t('devices.status_active'),
|
|
statusColor: colors.success,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 14,
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
onPress={openDetail}
|
|
activeOpacity={0.6}
|
|
style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 12, minWidth: 0 }}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 12,
|
|
backgroundColor: colors.surfaceElevated,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Image
|
|
source={deviceImage(device.platform, device.model)}
|
|
style={{ width: 26, height: 26 }}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
|
|
<View style={{ flex: 1, minWidth: 0 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
|
|
<Text
|
|
numberOfLines={1}
|
|
style={{
|
|
fontSize: 15,
|
|
color: colors.text,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
flexShrink: 1,
|
|
}}
|
|
>
|
|
{deviceName}
|
|
</Text>
|
|
{device.isCurrent ? (
|
|
<View
|
|
style={{
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
borderRadius: 6,
|
|
backgroundColor: 'rgba(249,115,22,0.12)',
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
color: colors.brandOrange,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
}}
|
|
>
|
|
{t('settings.devices_this_device')}
|
|
</Text>
|
|
</View>
|
|
) : null}
|
|
{isBound && !releaseActive ? (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 3,
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
borderRadius: 6,
|
|
backgroundColor: 'rgba(37,99,235,0.1)',
|
|
}}
|
|
>
|
|
<Ionicons name="lock-closed" size={9} color="#2563eb" />
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
color: '#2563eb',
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
}}
|
|
>
|
|
{t('devices.bound_badge')}
|
|
</Text>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
|
|
<DeviceStatusPill
|
|
kind={releaseActive ? 'cooldown' : 'online'}
|
|
durationText={releaseActive && releaseAt ? formatCountdown(releaseAt) : undefined}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
{releaseActive ? (
|
|
<TouchableOpacity
|
|
onPress={confirmCancelRelease}
|
|
hitSlop={8}
|
|
activeOpacity={0.5}
|
|
>
|
|
<Ionicons name="close-circle-outline" size={20} color={colors.textMuted} />
|
|
</TouchableOpacity>
|
|
) : isBound ? (
|
|
<TouchableOpacity
|
|
onPress={confirmRequestRelease}
|
|
hitSlop={8}
|
|
activeOpacity={0.5}
|
|
>
|
|
<Ionicons name="lock-open-outline" size={18} color={colors.error} />
|
|
</TouchableOpacity>
|
|
) : (
|
|
// Entfernen passiert am Gerät selbst (Cooldown), nicht aus der Liste —
|
|
// Pfeil öffnet nur das Info-/Detail-Sheet.
|
|
<TouchableOpacity
|
|
onPress={openDetail}
|
|
hitSlop={8}
|
|
activeOpacity={0.5}
|
|
>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textMuted} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// ─── Protected Device Row ────────────────────────────────────────────────────
|
|
|
|
function ProtectedDeviceRow({
|
|
device,
|
|
onRemove,
|
|
onOpenDetail,
|
|
}: {
|
|
device: ProtectedDevice;
|
|
onRemove: (id: string) => void;
|
|
onOpenDetail: (d: DeviceDetail) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const colors = useColors();
|
|
|
|
const statusMeta: Record<string, { label: string; color: string }> = {
|
|
pending: { label: t('devices.status_pending'), color: '#f59e0b' },
|
|
active: { label: t('devices.status_active'), color: colors.success },
|
|
revoked: { label: t('devices.status_revoked'), color: colors.textMuted },
|
|
degraded: { label: t('plan_limit.device_degraded_title'), color: colors.error },
|
|
};
|
|
const meta = statusMeta[device.status] ?? {
|
|
label: device.status,
|
|
color: colors.textMuted,
|
|
};
|
|
|
|
function openDetail() {
|
|
onOpenDetail({
|
|
name: device.label,
|
|
icon: deviceImage(device.platform),
|
|
platform: device.platform,
|
|
createdAt: device.createdAt,
|
|
lastSeenAt: null,
|
|
statusLabel: meta.label,
|
|
statusColor: meta.color,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 14,
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
onPress={openDetail}
|
|
activeOpacity={0.6}
|
|
style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 12, minWidth: 0 }}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 12,
|
|
backgroundColor: colors.surfaceElevated,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Image
|
|
source={deviceImage(device.platform)}
|
|
style={{ width: 26, height: 26 }}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
|
|
<View style={{ flex: 1, minWidth: 0 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
|
|
<Text
|
|
numberOfLines={1}
|
|
style={{
|
|
fontSize: 15,
|
|
color: colors.text,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
flexShrink: 1,
|
|
}}
|
|
>
|
|
{device.label}
|
|
</Text>
|
|
</View>
|
|
|
|
<DeviceStatusPill
|
|
kind={
|
|
device.status === 'active'
|
|
? 'online'
|
|
: device.status === 'pending'
|
|
? 'pending'
|
|
: 'unprotected'
|
|
}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
{/* Kein Entfernen aus der Liste — Pfeil öffnet nur das Detail-Sheet. */}
|
|
<TouchableOpacity onPress={openDetail} hitSlop={8} activeOpacity={0.5}>
|
|
<Ionicons name="chevron-forward" size={18} color={colors.textMuted} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// ─── Section Card wrapper ─────────────────────────────────────────────────────
|
|
|
|
function SectionCard({ children }: { children: React.ReactNode }) {
|
|
const colors = useColors();
|
|
return (
|
|
<View
|
|
style={{
|
|
backgroundColor: colors.surface,
|
|
borderRadius: 14,
|
|
overflow: 'hidden',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.04,
|
|
shadowRadius: 3,
|
|
elevation: 1,
|
|
}}
|
|
>
|
|
{children}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function SectionLabel({ title }: { title: string }) {
|
|
const colors = useColors();
|
|
return (
|
|
<Text
|
|
style={{
|
|
fontSize: 11,
|
|
color: colors.textMuted,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 1,
|
|
marginBottom: 8,
|
|
marginLeft: 4,
|
|
}}
|
|
>
|
|
{title}
|
|
</Text>
|
|
);
|
|
}
|
|
|
|
// ─── Screen ──────────────────────────────────────────────────────────────────
|
|
|
|
export default function DevicesScreen() {
|
|
const insets = useSafeAreaInsets();
|
|
const { t } = useTranslation();
|
|
const colors = useColors();
|
|
const { plan } = useUserPlan();
|
|
const isLegend = plan === 'legend';
|
|
|
|
const {
|
|
devices: mobileDevices,
|
|
loading: mobileLoading,
|
|
loadDevices,
|
|
removeDevice: removeMobileDevice,
|
|
requestRelease,
|
|
cancelRelease,
|
|
} = useDevicesStore();
|
|
|
|
const {
|
|
devices: protectedDevices,
|
|
loading: protectedLoading,
|
|
load: loadProtected,
|
|
remove: removeProtected,
|
|
} = useProtectedDevicesStore();
|
|
|
|
const [magicVisible, setMagicVisible] = useState(false);
|
|
const [magicPlatform, setMagicPlatform] = useState<'mac' | 'windows'>('mac');
|
|
const [detailDevice, setDetailDevice] = useState<DeviceDetail | null>(null);
|
|
|
|
function openMagic(platform: 'mac' | 'windows') {
|
|
setMagicPlatform(platform);
|
|
setMagicVisible(true);
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadDevices();
|
|
loadProtected();
|
|
}, []);
|
|
|
|
useProtectedDevicesRealtime();
|
|
useUserDevicesRealtime();
|
|
|
|
// Geräte-Matrix (Mirror von backend plan-features):
|
|
// Pro = 1 mobil + 1 stationär, Legend = 3 mobil + 2 stationär ("lückenlos auf 5")
|
|
const mobileLimit = isLegend ? 3 : 1;
|
|
const desktopLimit = isLegend ? 2 : 1;
|
|
|
|
// Dedupe: wenn ein UserDevice (mobile/desktop) auf der gleichen Plattform
|
|
// (mac/ios/android/win) bereits existiert, blende die entsprechende
|
|
// ProtectedDevice-Row aus \u2014 sonst erscheint der MacBook doppelt
|
|
// (1x als UserDevice via Magic, 1x als ProtectedDevice via altem DNS-Flow).
|
|
const normalizePlatform = (p: string | null | undefined): string => {
|
|
const n = (p ?? '').toLowerCase();
|
|
if (n.startsWith('mac') || n === 'darwin') return 'mac';
|
|
if (n.startsWith('ios') || n.startsWith('iphone') || n.startsWith('ipad')) return 'ios';
|
|
if (n.startsWith('android')) return 'android';
|
|
if (n.startsWith('win')) return 'win';
|
|
return n;
|
|
};
|
|
const mobilePlatformKeys = new Set(
|
|
mobileDevices.map((d) => normalizePlatform(d.platform || d.model || '')),
|
|
);
|
|
const dedupedProtected = protectedDevices.filter(
|
|
(d) => !mobilePlatformKeys.has(normalizePlatform(d.platform)),
|
|
);
|
|
|
|
// Mobile vs Desktop getrennt zählen: UserDevices mit mac/win-Plattform sind
|
|
// Magic-Desktops, der Rest (ios/android) zählt auf die Mobile-Slots.
|
|
const isDesktopPlatform = (d: { platform?: string | null; model?: string | null }) => {
|
|
const key = normalizePlatform(d.platform || d.model || '');
|
|
return key === 'mac' || key === 'win';
|
|
};
|
|
const mobileCount = mobileDevices.filter((d) => !isDesktopPlatform(d)).length;
|
|
const desktopCount =
|
|
mobileDevices.filter(isDesktopPlatform).length +
|
|
dedupedProtected.filter((d) => d.status !== 'revoked').length;
|
|
const atDesktopLimit = desktopCount >= desktopLimit;
|
|
|
|
// Mobile zuerst (current oben), danach Desktop/Protected.
|
|
const sortedMobile = [...mobileDevices].sort((a, b) => {
|
|
if (a.isCurrent && !b.isCurrent) return -1;
|
|
if (!a.isCurrent && b.isCurrent) return 1;
|
|
return new Date(b.lastSeenAt).getTime() - new Date(a.lastSeenAt).getTime();
|
|
});
|
|
const isLoading = mobileLoading || protectedLoading;
|
|
const isEmpty = !isLoading && sortedMobile.length === 0 && dedupedProtected.length === 0;
|
|
const subtitle = isLegend ? t('devices.subtitle_legend') : t('devices.subtitle_pro');
|
|
|
|
async function handleRemoveProtected(id: string) {
|
|
try {
|
|
const { manualRemovalRequired } = await removeProtected(id);
|
|
if (manualRemovalRequired) {
|
|
Alert.alert(t('devices.remove_warning_title'), t('devices.remove_warning_body'));
|
|
}
|
|
} catch {
|
|
Alert.alert(t('common.error'), t('common.unknown_error'));
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: colors.bg }}>
|
|
<AppHeader showBack title={t('settings.devices')} />
|
|
|
|
<ScrollView
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={{
|
|
paddingHorizontal: 16,
|
|
paddingTop: 16,
|
|
paddingBottom: insets.bottom + 40,
|
|
gap: 24,
|
|
}}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Zwei Circles (Mobil/Computer) + animierter Gesamt-Verteilungs-Balken */}
|
|
<View style={{ gap: 18, marginBottom: -4 }}>
|
|
<View style={{ flexDirection: 'row', gap: 12, marginTop: 4 }}>
|
|
<DeviceSlotDonut
|
|
segments={[{ value: mobileCount, color: MOBILE_COLOR }]}
|
|
total={mobileLimit}
|
|
atLimit={mobileCount >= mobileLimit}
|
|
label={t('devices.progress_mobile')}
|
|
/>
|
|
<DeviceSlotDonut
|
|
segments={[{ value: desktopCount, color: DESKTOP_COLOR }]}
|
|
total={desktopLimit}
|
|
atLimit={atDesktopLimit}
|
|
label={t('devices.progress_desktop')}
|
|
/>
|
|
</View>
|
|
<DeviceDistributionBar
|
|
mobile={mobileCount}
|
|
desktop={desktopCount}
|
|
total={mobileLimit + desktopLimit}
|
|
/>
|
|
</View>
|
|
|
|
{/* Unified devices section: Mobile zuerst, dann Desktop */}
|
|
<View>
|
|
<SectionLabel title={t('settings.devices')} />
|
|
<SectionCard>
|
|
{isLoading && isEmpty ? (
|
|
<View style={{ paddingVertical: 32, alignItems: 'center' }}>
|
|
<ActivityIndicator color={colors.brandOrange} />
|
|
</View>
|
|
) : isEmpty ? (
|
|
<View style={{ paddingVertical: 20, alignItems: 'center' }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 13,
|
|
color: colors.textMuted,
|
|
fontFamily: 'Nunito_400Regular',
|
|
}}
|
|
>
|
|
{t('settings.devices_empty')}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<>
|
|
{sortedMobile.map((device, i) => {
|
|
const isLast =
|
|
i === sortedMobile.length - 1 && dedupedProtected.length === 0;
|
|
return (
|
|
<View
|
|
key={device.id}
|
|
style={{
|
|
borderBottomWidth: isLast ? 0 : 1,
|
|
borderBottomColor: colors.border,
|
|
}}
|
|
>
|
|
<MobileDeviceRow
|
|
device={device}
|
|
onRemove={removeMobileDevice}
|
|
onRequestRelease={requestRelease}
|
|
onCancelRelease={cancelRelease}
|
|
onOpenDetail={setDetailDevice}
|
|
/>
|
|
</View>
|
|
);
|
|
})}
|
|
{dedupedProtected.map((device, i) => (
|
|
<View
|
|
key={device.id}
|
|
style={{
|
|
borderBottomWidth: i < dedupedProtected.length - 1 ? 1 : 0,
|
|
borderBottomColor: colors.border,
|
|
}}
|
|
>
|
|
<ProtectedDeviceRow
|
|
device={device}
|
|
onRemove={handleRemoveProtected}
|
|
onOpenDetail={setDetailDevice}
|
|
/>
|
|
</View>
|
|
))}
|
|
</>
|
|
)}
|
|
</SectionCard>
|
|
</View>
|
|
|
|
{/* CTA — Desktop-Gerät hinzufügen (Pro: 1 Slot, Legend: 2 Slots) */}
|
|
{atDesktopLimit ? (
|
|
isLegend ? (
|
|
<Button
|
|
title={t('devices.add_device')}
|
|
icon="add-circle-outline"
|
|
disabled
|
|
style={{ backgroundColor: colors.surfaceElevated }}
|
|
/>
|
|
) : (
|
|
<View
|
|
style={{
|
|
backgroundColor: colors.surface,
|
|
borderRadius: 14,
|
|
padding: 16,
|
|
gap: 12,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
|
|
<Ionicons name="shield-checkmark-outline" size={22} color={colors.brandOrange} />
|
|
<Text
|
|
style={{ fontSize: 15, color: colors.text, fontFamily: 'Nunito_700Bold', flex: 1 }}
|
|
>
|
|
{t('devices.subtitle_legend')}
|
|
</Text>
|
|
</View>
|
|
<Button title={t('devices.upgrade_cta')} />
|
|
</View>
|
|
)
|
|
) : (
|
|
// Kein Mac/Windows-Menü mehr — das MagicSheet hat selbst den
|
|
// Plattform-Umschalter (Mac/Windows). Direkt öffnen.
|
|
<Button
|
|
title={t('devices.add_device')}
|
|
icon="add-circle-outline"
|
|
onPress={() => openMagic('mac')}
|
|
/>
|
|
)}
|
|
|
|
<Text
|
|
style={{
|
|
fontSize: 11,
|
|
color: colors.textMuted,
|
|
fontFamily: 'Nunito_400Regular',
|
|
lineHeight: 16,
|
|
marginHorizontal: 4,
|
|
}}
|
|
>
|
|
{t('settings.devices_hint')}
|
|
</Text>
|
|
</ScrollView>
|
|
|
|
<MagicSheet
|
|
visible={magicVisible}
|
|
initialPlatform={magicPlatform}
|
|
colors={colors}
|
|
onClose={() => {
|
|
setMagicVisible(false);
|
|
loadDevices();
|
|
loadProtected();
|
|
}}
|
|
/>
|
|
|
|
<DeviceDetailSheet
|
|
visible={!!detailDevice}
|
|
device={detailDevice}
|
|
onClose={() => setDetailDevice(null)}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|