feat(blocker): VIP-Domain-Sektion + Cooldown-Friction beim Entfernen
Neue VIP-Sektion in der Blocker-Page: eigene Web-Custom-Domains als Tiles mit Zaehler (X/10 Pro, X/20 Legend), Hinzufuegen frei. Entfernen geht durch einen 3-Klick-Friction-Flow (RemoveDomainSheet, gespiegelt vom Deactivation-Muster) — kein Block-Abbau im Craving-Moment. free-Tier-Zweig entfernt (kein Free mehr). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
cc2d963d1f
commit
72cd195d36
@ -10,6 +10,7 @@ import { ProtectionLockedCard } from '../../components/blocker/ProtectionLockedC
|
|||||||
import { CooldownBanner } from '../../components/blocker/CooldownBanner';
|
import { CooldownBanner } from '../../components/blocker/CooldownBanner';
|
||||||
import { DomainGrid } from '../../components/blocker/DomainGrid';
|
import { DomainGrid } from '../../components/blocker/DomainGrid';
|
||||||
import { AddDomainSheet } from '../../components/blocker/AddDomainSheet';
|
import { AddDomainSheet } from '../../components/blocker/AddDomainSheet';
|
||||||
|
import { VipDomainList } from '../../components/blocker/VipDomainList';
|
||||||
import { ProtectionDetailsSheet } from '../../components/blocker/ProtectionDetailsSheet';
|
import { ProtectionDetailsSheet } from '../../components/blocker/ProtectionDetailsSheet';
|
||||||
import { DeactivationExplainerSheet } from '../../components/blocker/DeactivationExplainerSheet';
|
import { DeactivationExplainerSheet } from '../../components/blocker/DeactivationExplainerSheet';
|
||||||
import { PermissionDeniedSheet } from '../../components/PermissionDeniedSheet';
|
import { PermissionDeniedSheet } from '../../components/PermissionDeniedSheet';
|
||||||
@ -48,6 +49,7 @@ export default function BlockerScreen() {
|
|||||||
limits,
|
limits,
|
||||||
addDomain,
|
addDomain,
|
||||||
submitDomain,
|
submitDomain,
|
||||||
|
removeDomain,
|
||||||
refresh: refreshDomains,
|
refresh: refreshDomains,
|
||||||
} = useCustomDomains(plan);
|
} = useCustomDomains(plan);
|
||||||
const { sync: syncBlocklist } = useBlocklistSync();
|
const { sync: syncBlocklist } = useBlocklistSync();
|
||||||
@ -219,6 +221,14 @@ export default function BlockerScreen() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function handleRemoveWebDomain(id: string) {
|
||||||
|
const result = await removeDomain(id);
|
||||||
|
if (result.ok) {
|
||||||
|
const sync = await syncBlocklist();
|
||||||
|
if (sync.ok) refresh();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const bypassAlertShownRef = useRef(false);
|
const bypassAlertShownRef = useRef(false);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (state?.phase !== 'recoveringFromBypass') {
|
if (state?.phase !== 'recoveringFromBypass') {
|
||||||
@ -309,26 +319,16 @@ export default function BlockerScreen() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Free: Erwartungs-Transparenz-Hinweis */}
|
{/* VIP-Liste: Meine geblockten Seiten */}
|
||||||
{plan === 'free' && (
|
<VipDomainList
|
||||||
<View
|
domains={domains}
|
||||||
style={{
|
webCount={countsByType.web}
|
||||||
backgroundColor: colors.surface,
|
webLimit={limits.web}
|
||||||
borderRadius: 12,
|
globalBlocklistCount={state.blocklistCount}
|
||||||
padding: 12,
|
onAddPress={() => setAddSheetOpen(true)}
|
||||||
borderWidth: 1,
|
onRemoveDomain={handleRemoveWebDomain}
|
||||||
borderColor: colors.border,
|
colors={colors}
|
||||||
flexDirection: 'row',
|
/>
|
||||||
alignItems: 'flex-start',
|
|
||||||
gap: 8,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Ionicons name="shield-outline" size={15} color={colors.textMuted} style={{ marginTop: 1 }} />
|
|
||||||
<Text style={{ flex: 1, fontSize: 12, color: colors.textMuted, fontFamily: 'Nunito_400Regular', lineHeight: 17 }}>
|
|
||||||
{t('plan_limit.blocker_basic_protection')}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Custom-Filter-Slot-Übersicht */}
|
{/* Custom-Filter-Slot-Übersicht */}
|
||||||
<CustomFilterOverview
|
<CustomFilterOverview
|
||||||
|
|||||||
225
apps/rebreak-native/components/blocker/RemoveDomainSheet.tsx
Normal file
225
apps/rebreak-native/components/blocker/RemoveDomainSheet.tsx
Normal file
@ -0,0 +1,225 @@
|
|||||||
|
import { View, Text, TouchableOpacity, ScrollView, ActionSheetIOS, Platform, Alert } from 'react-native';
|
||||||
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useColors } from '../../lib/theme';
|
||||||
|
import { FormSheet } from '../FormSheet';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
visible: boolean;
|
||||||
|
domain: string;
|
||||||
|
onClose: () => void;
|
||||||
|
onConfirmRemove: () => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 3-Click Friction-Gate vor dem Entfernen einer eigenen Web-Domain.
|
||||||
|
*
|
||||||
|
* Selbes UX-Muster wie DeactivationExplainerSheet:
|
||||||
|
* Click 1: User tippt Papierkorb-Icon → Sheet öffnet sich (dieser Component)
|
||||||
|
* Click 2: User liest Kontext → primäre Aktion = "Behalten" (Deflect)
|
||||||
|
* sekundäre Aktion = "Trotzdem entfernen" (klein, destructive)
|
||||||
|
* Click 3: ActionSheet / Alert zur finalen Bestätigung → removeDomain()
|
||||||
|
*
|
||||||
|
* Kein Cooldown wird gestartet — nur der Domain-Delete-Endpoint.
|
||||||
|
* Die Verzögerung entsteht durch das bewusste 3-Schritt-UX, nicht durch
|
||||||
|
* eine zeitliche Sperre (anders als beim Schutz-Deaktivieren).
|
||||||
|
*/
|
||||||
|
export function RemoveDomainSheet({ visible, domain, onClose, onConfirmRemove }: Props) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const colors = useColors();
|
||||||
|
const insets = useSafeAreaInsets();
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
|
||||||
|
function showFinalConfirm() {
|
||||||
|
const title = t('blocker.remove_domain_actionsheet_title');
|
||||||
|
const message = t('blocker.remove_domain_actionsheet_message', { domain });
|
||||||
|
const cancelLabel = t('common.cancel');
|
||||||
|
const confirmLabel = t('blocker.remove_domain_confirm_cta');
|
||||||
|
|
||||||
|
if (Platform.OS === 'ios') {
|
||||||
|
ActionSheetIOS.showActionSheetWithOptions(
|
||||||
|
{
|
||||||
|
title,
|
||||||
|
message,
|
||||||
|
options: [cancelLabel, confirmLabel],
|
||||||
|
destructiveButtonIndex: 1,
|
||||||
|
cancelButtonIndex: 0,
|
||||||
|
},
|
||||||
|
async (idx) => {
|
||||||
|
if (idx === 1) await runRemove();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
Alert.alert(title, message, [
|
||||||
|
{ text: cancelLabel, style: 'cancel' },
|
||||||
|
{ text: confirmLabel, style: 'destructive', onPress: runRemove },
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runRemove() {
|
||||||
|
setSubmitting(true);
|
||||||
|
try {
|
||||||
|
await onConfirmRemove();
|
||||||
|
onClose();
|
||||||
|
} catch (e: any) {
|
||||||
|
Alert.alert(t('common.error'), e?.message ?? t('blocker.remove_domain_failed'));
|
||||||
|
} finally {
|
||||||
|
setSubmitting(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormSheet
|
||||||
|
visible={visible}
|
||||||
|
onClose={onClose}
|
||||||
|
title={t('blocker.remove_domain_sheet_heading')}
|
||||||
|
initialHeightPct={0.58}
|
||||||
|
minHeightPct={0.3}
|
||||||
|
safeAreaBottom={false}
|
||||||
|
>
|
||||||
|
<ScrollView
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
contentContainerStyle={{ padding: 20, paddingBottom: Math.max(insets.bottom, 12) + 24, gap: 18 }}
|
||||||
|
>
|
||||||
|
<Text style={{ fontSize: 22, fontFamily: 'Nunito_800ExtraBold', color: colors.text }}>
|
||||||
|
{t('blocker.remove_domain_title')}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.surfaceElevated,
|
||||||
|
borderRadius: 10,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 10,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Ionicons name="globe-outline" size={16} color={colors.textMuted} />
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={{ fontSize: 14, fontFamily: 'Nunito_600SemiBold', color: colors.text, flex: 1 }}
|
||||||
|
>
|
||||||
|
{domain}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 15,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.textMuted,
|
||||||
|
lineHeight: 22,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('blocker.remove_domain_intro')}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<View style={{ gap: 12 }}>
|
||||||
|
<BulletRow
|
||||||
|
icon="shield-outline"
|
||||||
|
title={t('blocker.remove_domain_bullet1_title')}
|
||||||
|
text={t('blocker.remove_domain_bullet1_text')}
|
||||||
|
/>
|
||||||
|
<BulletRow
|
||||||
|
icon="alert-circle-outline"
|
||||||
|
title={t('blocker.remove_domain_bullet2_title')}
|
||||||
|
text={t('blocker.remove_domain_bullet2_text')}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{ height: 8 }} />
|
||||||
|
|
||||||
|
<TouchableOpacity onPress={onClose} activeOpacity={0.85}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.success,
|
||||||
|
borderRadius: 14,
|
||||||
|
paddingVertical: 16,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Ionicons name="shield-checkmark" size={18} color="#fff" />
|
||||||
|
<Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
|
||||||
|
{t('blocker.remove_domain_keep_cta')}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={showFinalConfirm}
|
||||||
|
disabled={submitting}
|
||||||
|
hitSlop={8}
|
||||||
|
activeOpacity={0.5}
|
||||||
|
style={{
|
||||||
|
opacity: submitting ? 0.5 : 1,
|
||||||
|
alignSelf: 'center',
|
||||||
|
paddingVertical: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.error,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{submitting ? t('blocker.remove_domain_removing') : t('blocker.remove_domain_remove_anyway')}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</ScrollView>
|
||||||
|
</FormSheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BulletRow({
|
||||||
|
icon,
|
||||||
|
title,
|
||||||
|
text,
|
||||||
|
}: {
|
||||||
|
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||||
|
title: string;
|
||||||
|
text: string;
|
||||||
|
}) {
|
||||||
|
const colors = useColors();
|
||||||
|
return (
|
||||||
|
<View style={{ flexDirection: 'row', gap: 12 }}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
width: 36,
|
||||||
|
height: 36,
|
||||||
|
borderRadius: 10,
|
||||||
|
backgroundColor: colors.surfaceElevated,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Ionicons name={icon} size={18} color={colors.textMuted} />
|
||||||
|
</View>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={{ fontSize: 14, fontFamily: 'Nunito_700Bold', color: colors.text }}>
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 12,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.textMuted,
|
||||||
|
marginTop: 2,
|
||||||
|
lineHeight: 17,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
356
apps/rebreak-native/components/blocker/VipDomainList.tsx
Normal file
356
apps/rebreak-native/components/blocker/VipDomainList.tsx
Normal file
@ -0,0 +1,356 @@
|
|||||||
|
import { useRef, useEffect, useState, useMemo } from 'react';
|
||||||
|
import { View, Text, TouchableOpacity, Animated, ActivityIndicator } from 'react-native';
|
||||||
|
import { Image } from 'expo-image';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useColors, type ColorScheme } from '../../lib/theme';
|
||||||
|
import { RemoveDomainSheet } from './RemoveDomainSheet';
|
||||||
|
import type { CustomDomain } from '../../hooks/useCustomDomains';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
domains: CustomDomain[];
|
||||||
|
webCount: number;
|
||||||
|
webLimit: number;
|
||||||
|
globalBlocklistCount: number;
|
||||||
|
onAddPress: () => void;
|
||||||
|
onRemoveDomain: (id: string) => Promise<void>;
|
||||||
|
colors: ColorScheme;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* VIP-Sektion: "Meine geblockten Seiten".
|
||||||
|
*
|
||||||
|
* Zeigt eigene Web-Custom-Domains des Users (kind='web') + Zähler (X / Limit).
|
||||||
|
* Domain entfernen → 3-Click Friction via RemoveDomainSheet (selbes Pattern wie
|
||||||
|
* Schutz-Deaktivieren). Domain hinzufügen → frei via onAddPress.
|
||||||
|
* Darunter: ruhiger Hinweis auf die automatische globale Blocklist.
|
||||||
|
*/
|
||||||
|
export function VipDomainList({
|
||||||
|
domains,
|
||||||
|
webCount,
|
||||||
|
webLimit,
|
||||||
|
globalBlocklistCount,
|
||||||
|
onAddPress,
|
||||||
|
onRemoveDomain,
|
||||||
|
colors,
|
||||||
|
}: Props) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const webDomains = useMemo(
|
||||||
|
() => domains.filter((d) => (d.type === 'web' || !d.type) && d.status !== 'approved'),
|
||||||
|
[domains],
|
||||||
|
);
|
||||||
|
|
||||||
|
const atLimit = webCount >= webLimit;
|
||||||
|
const fillAnim = useRef(new Animated.Value(0)).current;
|
||||||
|
const ratio = webLimit > 0 ? Math.min(webCount / webLimit, 1) : 0;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
Animated.timing(fillAnim, { toValue: ratio, duration: 380, useNativeDriver: false }).start();
|
||||||
|
}, [ratio]);
|
||||||
|
|
||||||
|
const pct = ratio * 100;
|
||||||
|
const barColor = pct >= 90 ? colors.error : pct >= 60 ? colors.warning : colors.brandOrange;
|
||||||
|
|
||||||
|
const badgeBg = atLimit ? '#fee2e2' : colors.surfaceElevated;
|
||||||
|
const badgeFg = atLimit ? colors.error : colors.textMuted;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.surface,
|
||||||
|
borderRadius: 16,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 14,
|
||||||
|
paddingTop: 12,
|
||||||
|
paddingBottom: 10,
|
||||||
|
gap: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={{ flex: 1, fontSize: 14, fontFamily: 'Nunito_700Bold', color: colors.text }}>
|
||||||
|
{t('blocker.vip_section_title')}
|
||||||
|
</Text>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
paddingHorizontal: 8,
|
||||||
|
paddingVertical: 3,
|
||||||
|
borderRadius: 999,
|
||||||
|
backgroundColor: badgeBg,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: badgeFg }}>
|
||||||
|
{t('blocker.count_label', { count: webCount, max: webLimit })}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={atLimit ? undefined : onAddPress}
|
||||||
|
activeOpacity={atLimit ? 1 : 0.75}
|
||||||
|
style={{
|
||||||
|
width: 28,
|
||||||
|
height: 28,
|
||||||
|
borderRadius: 14,
|
||||||
|
backgroundColor: atLimit ? colors.surfaceElevated : colors.brandOrange,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Ionicons name="add" size={18} color={atLimit ? colors.textMuted : '#fff'} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{ paddingHorizontal: 14, paddingBottom: 14, gap: 12 }}>
|
||||||
|
{/* Progress bar */}
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
height: 5,
|
||||||
|
borderRadius: 3,
|
||||||
|
backgroundColor: colors.surfaceElevated,
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Animated.View
|
||||||
|
style={{
|
||||||
|
height: '100%',
|
||||||
|
borderRadius: 3,
|
||||||
|
backgroundColor: barColor,
|
||||||
|
width: fillAnim.interpolate({ inputRange: [0, 1], outputRange: ['0%', '100%'] }),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Domain list or empty state */}
|
||||||
|
{webDomains.length === 0 ? (
|
||||||
|
<VipEmptyState onAddPress={onAddPress} colors={colors} />
|
||||||
|
) : (
|
||||||
|
<VipDomainTiles domains={webDomains} onRemoveDomain={onRemoveDomain} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Global list hint — ruhig, nicht als Casino-Trigger */}
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
gap: 6,
|
||||||
|
paddingTop: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Ionicons name="shield-checkmark-outline" size={13} color={colors.textMuted} style={{ marginTop: 1 }} />
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
fontSize: 11,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.textMuted,
|
||||||
|
lineHeight: 16,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('blocker.vip_global_hint', { count: globalBlocklistCount })}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Empty State ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function VipEmptyState({ onAddPress, colors }: { onAddPress: () => void; colors: ColorScheme }) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
return (
|
||||||
|
<TouchableOpacity onPress={onAddPress} activeOpacity={0.7}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
paddingVertical: 28,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
borderRadius: 14,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderStyle: 'dashed',
|
||||||
|
borderColor: colors.border,
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 6,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Ionicons name="add-circle-outline" size={26} color={colors.textMuted} />
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 13,
|
||||||
|
fontFamily: 'Nunito_400Regular',
|
||||||
|
color: colors.textMuted,
|
||||||
|
textAlign: 'center',
|
||||||
|
lineHeight: 18,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('blocker.vip_empty')}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Domain Tiles ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function VipDomainTiles({
|
||||||
|
domains,
|
||||||
|
onRemoveDomain,
|
||||||
|
}: {
|
||||||
|
domains: CustomDomain[];
|
||||||
|
onRemoveDomain: (id: string) => Promise<void>;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 10, columnGap: 8 }}>
|
||||||
|
{domains.map((d) => (
|
||||||
|
<VipDomainTile key={d.id} domain={d} onRemove={onRemoveDomain} />
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function VipDomainTile({
|
||||||
|
domain,
|
||||||
|
onRemove,
|
||||||
|
}: {
|
||||||
|
domain: CustomDomain;
|
||||||
|
onRemove: (id: string) => Promise<void>;
|
||||||
|
}) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const colors = useColors();
|
||||||
|
const [imgError, setImgError] = useState(false);
|
||||||
|
const [removeSheetOpen, setRemoveSheetOpen] = useState(false);
|
||||||
|
const [removing, setRemoving] = useState(false);
|
||||||
|
|
||||||
|
const stripped = domain.domain.replace(/^www\./, '');
|
||||||
|
|
||||||
|
const statusColor: string = (() => {
|
||||||
|
switch (domain.status) {
|
||||||
|
case 'submitted': return colors.warning;
|
||||||
|
case 'rejected': return colors.error;
|
||||||
|
default: return colors.brandOrange;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
const badgeLabel: string = (() => {
|
||||||
|
switch (domain.status) {
|
||||||
|
case 'submitted': return t('blocker.domain_badge_pruefung');
|
||||||
|
case 'rejected': return t('blocker.domain_badge_rejected');
|
||||||
|
default: return t('blocker.domain_badge_active');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
async function handleConfirmRemove() {
|
||||||
|
setRemoving(true);
|
||||||
|
try {
|
||||||
|
await onRemove(domain.id);
|
||||||
|
} finally {
|
||||||
|
setRemoving(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: colors.bg,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
borderRadius: 14,
|
||||||
|
padding: 8,
|
||||||
|
width: '31%',
|
||||||
|
minHeight: 110,
|
||||||
|
gap: 4,
|
||||||
|
opacity: removing ? 0.4 : 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Status badge row */}
|
||||||
|
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
paddingHorizontal: 5,
|
||||||
|
paddingVertical: 1,
|
||||||
|
borderRadius: 999,
|
||||||
|
backgroundColor: statusColor,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={{ fontSize: 8, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
|
||||||
|
{badgeLabel}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Favicon + domain name */}
|
||||||
|
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 4, paddingVertical: 6 }}>
|
||||||
|
{!imgError ? (
|
||||||
|
<Image
|
||||||
|
source={{ uri: `https://www.google.com/s2/favicons?domain=${stripped}&sz=128` }}
|
||||||
|
style={{ width: 24, height: 24, borderRadius: 5 }}
|
||||||
|
onError={() => setImgError(true)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
borderRadius: 5,
|
||||||
|
backgroundColor: '#525252',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={{ fontSize: 8, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
|
||||||
|
{stripped.slice(0, 2).toUpperCase()}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={{
|
||||||
|
fontSize: 10,
|
||||||
|
fontFamily: 'Nunito_600SemiBold',
|
||||||
|
color: colors.text,
|
||||||
|
textAlign: 'center',
|
||||||
|
width: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{stripped}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Remove button */}
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => setRemoveSheetOpen(true)}
|
||||||
|
disabled={removing}
|
||||||
|
activeOpacity={0.65}
|
||||||
|
style={{
|
||||||
|
height: 26,
|
||||||
|
borderRadius: 6,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{removing ? (
|
||||||
|
<ActivityIndicator size="small" color={colors.textMuted} />
|
||||||
|
) : (
|
||||||
|
<Ionicons name="trash-outline" size={13} color={colors.textMuted} />
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<RemoveDomainSheet
|
||||||
|
visible={removeSheetOpen}
|
||||||
|
domain={stripped}
|
||||||
|
onClose={() => setRemoveSheetOpen(false)}
|
||||||
|
onConfirmRemove={handleConfirmRemove}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -378,7 +378,24 @@
|
|||||||
"error_duplicate": "Diesen Eintrag hast du schon — er ist bereits in deiner Filter-Liste.",
|
"error_duplicate": "Diesen Eintrag hast du schon — er ist bereits in deiner Filter-Liste.",
|
||||||
"kind_override_label": "Das ist eine E-Mail-Adresse / Mail-Absender",
|
"kind_override_label": "Das ist eine E-Mail-Adresse / Mail-Absender",
|
||||||
"empty_web": "Noch keine eigenen Domains.\nTippe + um eine hinzuzufügen.",
|
"empty_web": "Noch keine eigenen Domains.\nTippe + um eine hinzuzufügen.",
|
||||||
"empty_mail": "Noch keine Mail-Domains. Tippe + um eine E-Mail-Adresse oder Domain zu blockieren."
|
"empty_mail": "Noch keine Mail-Domains. Tippe + um eine E-Mail-Adresse oder Domain zu blockieren.",
|
||||||
|
"vip_section_title": "Meine geblockten Seiten",
|
||||||
|
"vip_empty": "Noch keine eigenen Seiten.\nTippe + um eine Website zu sperren.",
|
||||||
|
"vip_global_hint": "+ %{count} bekannte Glücksspielseiten automatisch geschützt",
|
||||||
|
"remove_domain_sheet_heading": "Domain entfernen",
|
||||||
|
"remove_domain_title": "Kurz nachdenken.",
|
||||||
|
"remove_domain_intro": "Du bist dabei, diese Seite aus deiner persönlichen Sperrliste zu entfernen. Das passiert sofort — sie wäre dann wieder erreichbar.",
|
||||||
|
"remove_domain_bullet1_title": "Schutz bleibt für andere Seiten",
|
||||||
|
"remove_domain_bullet1_text": "Die globale Blocklist mit 200.000+ Domains bleibt aktiv. Nur diese eine Seite wäre wieder frei.",
|
||||||
|
"remove_domain_bullet2_title": "Im Drang-Moment ist das riskant",
|
||||||
|
"remove_domain_bullet2_text": "Du hast diese Seite damals selbst gesperrt — wahrscheinlich aus gutem Grund. Warte bis der Drang nachlässt.",
|
||||||
|
"remove_domain_keep_cta": "Schutz behalten",
|
||||||
|
"remove_domain_remove_anyway": "Trotzdem entfernen",
|
||||||
|
"remove_domain_removing": "Wird entfernt…",
|
||||||
|
"remove_domain_failed": "Entfernen fehlgeschlagen.",
|
||||||
|
"remove_domain_actionsheet_title": "Domain wirklich entfernen?",
|
||||||
|
"remove_domain_actionsheet_message": "%{domain} wird sofort aus deiner Sperrliste gelöscht.",
|
||||||
|
"remove_domain_confirm_cta": "Entfernen"
|
||||||
},
|
},
|
||||||
"onboarding": {
|
"onboarding": {
|
||||||
"lyra": {
|
"lyra": {
|
||||||
|
|||||||
@ -378,7 +378,24 @@
|
|||||||
"error_duplicate": "You've already added this entry — it's in your filter list.",
|
"error_duplicate": "You've already added this entry — it's in your filter list.",
|
||||||
"kind_override_label": "This is an email address / mail sender",
|
"kind_override_label": "This is an email address / mail sender",
|
||||||
"empty_web": "No custom domains yet.\nTap + to add one.",
|
"empty_web": "No custom domains yet.\nTap + to add one.",
|
||||||
"empty_mail": "No mail domains yet. Tap + to block an email address or domain."
|
"empty_mail": "No mail domains yet. Tap + to block an email address or domain.",
|
||||||
|
"vip_section_title": "My blocked sites",
|
||||||
|
"vip_empty": "No custom sites yet.\nTap + to block a website.",
|
||||||
|
"vip_global_hint": "+ %{count} known gambling sites automatically protected",
|
||||||
|
"remove_domain_sheet_heading": "Remove domain",
|
||||||
|
"remove_domain_title": "Take a moment.",
|
||||||
|
"remove_domain_intro": "You're about to remove this site from your personal blocklist. This takes effect immediately — the site would be reachable again.",
|
||||||
|
"remove_domain_bullet1_title": "Other sites stay protected",
|
||||||
|
"remove_domain_bullet1_text": "The global blocklist with 200,000+ domains stays active. Only this one site would be unblocked.",
|
||||||
|
"remove_domain_bullet2_title": "This is risky in a craving moment",
|
||||||
|
"remove_domain_bullet2_text": "You added this site yourself — probably for a good reason. Wait until the urge passes.",
|
||||||
|
"remove_domain_keep_cta": "Keep protection",
|
||||||
|
"remove_domain_remove_anyway": "Remove anyway",
|
||||||
|
"remove_domain_removing": "Removing…",
|
||||||
|
"remove_domain_failed": "Remove failed.",
|
||||||
|
"remove_domain_actionsheet_title": "Really remove domain?",
|
||||||
|
"remove_domain_actionsheet_message": "%{domain} will be immediately deleted from your blocklist.",
|
||||||
|
"remove_domain_confirm_cta": "Remove"
|
||||||
},
|
},
|
||||||
"onboarding": {
|
"onboarding": {
|
||||||
"lyra": {
|
"lyra": {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user