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:
chahinebrini
parent
cc2d963d1f
commit
72cd195d36
@ -10,6 +10,7 @@ import { ProtectionLockedCard } from '../../components/blocker/ProtectionLockedC
|
||||
import { CooldownBanner } from '../../components/blocker/CooldownBanner';
|
||||
import { DomainGrid } from '../../components/blocker/DomainGrid';
|
||||
import { AddDomainSheet } from '../../components/blocker/AddDomainSheet';
|
||||
import { VipDomainList } from '../../components/blocker/VipDomainList';
|
||||
import { ProtectionDetailsSheet } from '../../components/blocker/ProtectionDetailsSheet';
|
||||
import { DeactivationExplainerSheet } from '../../components/blocker/DeactivationExplainerSheet';
|
||||
import { PermissionDeniedSheet } from '../../components/PermissionDeniedSheet';
|
||||
@ -48,6 +49,7 @@ export default function BlockerScreen() {
|
||||
limits,
|
||||
addDomain,
|
||||
submitDomain,
|
||||
removeDomain,
|
||||
refresh: refreshDomains,
|
||||
} = useCustomDomains(plan);
|
||||
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);
|
||||
useEffect(() => {
|
||||
if (state?.phase !== 'recoveringFromBypass') {
|
||||
@ -309,26 +319,16 @@ export default function BlockerScreen() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Free: Erwartungs-Transparenz-Hinweis */}
|
||||
{plan === 'free' && (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
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>
|
||||
)}
|
||||
{/* VIP-Liste: Meine geblockten Seiten */}
|
||||
<VipDomainList
|
||||
domains={domains}
|
||||
webCount={countsByType.web}
|
||||
webLimit={limits.web}
|
||||
globalBlocklistCount={state.blocklistCount}
|
||||
onAddPress={() => setAddSheetOpen(true)}
|
||||
onRemoveDomain={handleRemoveWebDomain}
|
||||
colors={colors}
|
||||
/>
|
||||
|
||||
{/* Custom-Filter-Slot-Übersicht */}
|
||||
<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.",
|
||||
"kind_override_label": "Das ist eine E-Mail-Adresse / Mail-Absender",
|
||||
"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": {
|
||||
"lyra": {
|
||||
|
||||
@ -378,7 +378,24 @@
|
||||
"error_duplicate": "You've already added this entry — it's in your filter list.",
|
||||
"kind_override_label": "This is an email address / mail sender",
|
||||
"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": {
|
||||
"lyra": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user