feat(blocker): Blocker-Page-Redesign — 2 Sektionen statt 4 Bloecke
Meine Filter (unified web + mail_domain, Typ-Badge pro Kachel, Slot-Pool- Zaehler) + collapsible VIP-Liste (Zweitschutz-Beschreibung, read-only). Die 3 redundanten Web-Bloecke (CustomFilterOverview + DomainSection Eigene Domains) entfernt. Slot-Pool rein frontend (limits.web+limits.mail), kein Backend noetig. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
chahinebrini
parent
adeaf4eb75
commit
dfcee68dc8
@ -1,16 +1,14 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { Animated, AppState, Platform, ScrollView, Text, View, Alert, ActivityIndicator, TouchableOpacity } from 'react-native';
|
||||
import { AppState, Platform, ScrollView, View, Alert, ActivityIndicator } from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useBottomTabBarHeight } from 'react-native-bottom-tabs';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { AppHeader } from '../../components/AppHeader';
|
||||
import { LayerSwitchCard } from '../../components/blocker/LayerSwitchCard';
|
||||
import { ProtectionLockedCard } from '../../components/blocker/ProtectionLockedCard';
|
||||
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 { MyFiltersList, VipDomainList } from '../../components/blocker/VipDomainList';
|
||||
import { ProtectionDetailsSheet } from '../../components/blocker/ProtectionDetailsSheet';
|
||||
import { DeactivationExplainerSheet } from '../../components/blocker/DeactivationExplainerSheet';
|
||||
import { PermissionDeniedSheet } from '../../components/PermissionDeniedSheet';
|
||||
@ -20,7 +18,7 @@ import { useCustomDomains } from '../../hooks/useCustomDomains';
|
||||
import { useBlocklistSync } from '../../hooks/useBlocklistSync';
|
||||
import { useDomainSubmissionRealtime } from '../../hooks/useDomainSubmissionRealtime';
|
||||
import { protection, FAMILY_CONTROLS_AVAILABLE } from '../../lib/protection';
|
||||
import { useColors, type ColorScheme } from '../../lib/theme';
|
||||
import { useColors } from '../../lib/theme';
|
||||
|
||||
export default function BlockerScreen() {
|
||||
const router = useRouter();
|
||||
@ -48,7 +46,6 @@ export default function BlockerScreen() {
|
||||
countsByType,
|
||||
limits,
|
||||
addDomain,
|
||||
submitDomain,
|
||||
removeDomain,
|
||||
refresh: refreshDomains,
|
||||
} = useCustomDomains(plan);
|
||||
@ -65,7 +62,7 @@ export default function BlockerScreen() {
|
||||
}, [refreshDomains, syncBlocklist, refresh]);
|
||||
useDomainSubmissionRealtime(onDomainChange, true);
|
||||
|
||||
const [mailOpen, setMailOpen] = useState(false);
|
||||
const [vipOpen, setVipOpen] = useState(false);
|
||||
const [addSheetOpen, setAddSheetOpen] = useState(false);
|
||||
|
||||
const [detailsOpen, setDetailsOpen] = useState(false);
|
||||
@ -332,62 +329,25 @@ export default function BlockerScreen() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* VIP-Liste: Meine geblockten Seiten */}
|
||||
<VipDomainList
|
||||
{/* Sektion 1: Meine Filter (unified web + mail_domain) */}
|
||||
<MyFiltersList
|
||||
domains={domains}
|
||||
webCount={countsByType.web}
|
||||
webLimit={limits.web}
|
||||
totalCount={countsByType.web + countsByType.mail}
|
||||
totalLimit={limits.web + limits.mail}
|
||||
globalBlocklistCount={state.blocklistCount}
|
||||
onAddPress={() => setAddSheetOpen(true)}
|
||||
onRemoveDomain={handleRemoveWebDomain}
|
||||
colors={colors}
|
||||
/>
|
||||
|
||||
{/* Custom-Filter-Slot-Übersicht */}
|
||||
<CustomFilterOverview
|
||||
webCount={countsByType.web}
|
||||
mailCount={countsByType.mail}
|
||||
webLimit={limits.web}
|
||||
mailLimit={limits.mail}
|
||||
onAddPress={() => setAddSheetOpen(true)}
|
||||
{/* Sektion 2: VIP-Liste (Zweitschutz, collapsible) */}
|
||||
<VipDomainList
|
||||
domains={domains}
|
||||
globalBlocklistCount={state.blocklistCount}
|
||||
open={vipOpen}
|
||||
onToggle={() => setVipOpen((v) => !v)}
|
||||
colors={colors}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
{/* Section 1: Eigene Domains */}
|
||||
<DomainSection
|
||||
title={t('blocker.section_domains')}
|
||||
count={countsByType.web}
|
||||
max={limits.web}
|
||||
atLimit={countsByType.web >= limits.web}
|
||||
>
|
||||
<DomainGrid
|
||||
domains={domains}
|
||||
tier={tier}
|
||||
kind="web"
|
||||
onSubmit={submitDomain}
|
||||
onUpgradePro={() => Alert.alert(t('blocker.upgrade_alert_title'), t('blocker.upgrade_alert_desc'))}
|
||||
/>
|
||||
</DomainSection>
|
||||
|
||||
{/* Section 2: Eigene Mails */}
|
||||
<DomainSection
|
||||
title={t('blocker.section_mails')}
|
||||
count={countsByType.mail}
|
||||
max={limits.mail}
|
||||
collapsible
|
||||
open={mailOpen}
|
||||
onToggle={() => setMailOpen((v) => !v)}
|
||||
atLimit={countsByType.mail >= limits.mail}
|
||||
>
|
||||
<DomainGrid
|
||||
domains={domains}
|
||||
tier={tier}
|
||||
kind="mail"
|
||||
onSubmit={submitDomain}
|
||||
onUpgradePro={() => Alert.alert(t('blocker.upgrade_alert_title'), t('blocker.upgrade_alert_desc'))}
|
||||
/>
|
||||
</DomainSection>
|
||||
</ScrollView>
|
||||
|
||||
{/* Sheets */}
|
||||
@ -460,242 +420,3 @@ export default function BlockerScreen() {
|
||||
);
|
||||
}
|
||||
|
||||
// ─── CustomFilterOverview ─────────────────────────────────────────────────────
|
||||
|
||||
function CustomFilterOverview({
|
||||
webCount,
|
||||
mailCount,
|
||||
webLimit,
|
||||
mailLimit,
|
||||
onAddPress,
|
||||
colors,
|
||||
t,
|
||||
}: {
|
||||
webCount: number;
|
||||
mailCount: number;
|
||||
webLimit: number;
|
||||
mailLimit: number;
|
||||
onAddPress: () => void;
|
||||
colors: ColorScheme;
|
||||
t: (key: string, opts?: Record<string, unknown>) => string;
|
||||
}) {
|
||||
const total = webCount + mailCount;
|
||||
const max = webLimit + mailLimit;
|
||||
const webFillAnim = useRef(new Animated.Value(0)).current;
|
||||
const mailFillAnim = useRef(new Animated.Value(0)).current;
|
||||
|
||||
const webRatio = max > 0 ? Math.min(webCount / max, 1) : 0;
|
||||
const mailRatio = max > 0 ? Math.min(mailCount / max, 1) : 0;
|
||||
|
||||
useEffect(() => {
|
||||
Animated.parallel([
|
||||
Animated.timing(webFillAnim, { toValue: webRatio, duration: 380, useNativeDriver: false }),
|
||||
Animated.timing(mailFillAnim, { toValue: mailRatio, duration: 380, useNativeDriver: false }),
|
||||
]).start();
|
||||
}, [webRatio, mailRatio]);
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
{/* Top row: title + legend on left, count badge + add button on right */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
||||
<Text style={{ fontSize: 14, fontFamily: 'Nunito_700Bold', color: colors.text }}>
|
||||
{t('blocker.custom_filter_overview_title')}
|
||||
</Text>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
|
||||
<View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: colors.brandOrange }} />
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: colors.textMuted }}>
|
||||
{webCount} Web
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
|
||||
<View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: colors.success }} />
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: colors.textMuted }}>
|
||||
{mailCount} Mail
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1 }} />
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 3,
|
||||
borderRadius: 999,
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: colors.textMuted }}>
|
||||
{t('blocker.custom_filter_overview_count', { count: total, max })}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
onPress={onAddPress}
|
||||
activeOpacity={0.85}
|
||||
style={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: colors.brandOrange,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="add" size={18} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Split progress bar — same height/pattern as DomainSection */}
|
||||
<View
|
||||
style={{
|
||||
height: 5,
|
||||
borderRadius: 3,
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
flexDirection: 'row',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Animated.View
|
||||
style={{
|
||||
height: '100%',
|
||||
backgroundColor: colors.brandOrange,
|
||||
width: webFillAnim.interpolate({ inputRange: [0, 1], outputRange: ['0%', '100%'] }),
|
||||
}}
|
||||
/>
|
||||
<Animated.View
|
||||
style={{
|
||||
height: '100%',
|
||||
backgroundColor: colors.success,
|
||||
width: mailFillAnim.interpolate({ inputRange: [0, 1], outputRange: ['0%', '100%'] }),
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── DomainSection ────────────────────────────────────────────────────────────
|
||||
|
||||
function DomainSection({
|
||||
title,
|
||||
count,
|
||||
max,
|
||||
collapsible = false,
|
||||
open = true,
|
||||
onToggle,
|
||||
atLimit,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
count: number;
|
||||
max: number;
|
||||
collapsible?: boolean;
|
||||
open?: boolean;
|
||||
onToggle?: () => void;
|
||||
atLimit: boolean;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const colors = useColors();
|
||||
|
||||
const fillAnim = useRef(new Animated.Value(0)).current;
|
||||
const ratio = max > 0 ? Math.min(count / max, 1) : 0;
|
||||
|
||||
useEffect(() => {
|
||||
Animated.timing(fillAnim, {
|
||||
toValue: ratio,
|
||||
duration: 380,
|
||||
useNativeDriver: false,
|
||||
}).start();
|
||||
}, [ratio]);
|
||||
|
||||
const pct = ratio * 100;
|
||||
const barColor = pct >= 90 ? '#dc2626' : pct >= 60 ? '#f59e0b' : '#16a34a';
|
||||
|
||||
const badgeBg = atLimit ? '#fee2e2' : colors.surfaceElevated;
|
||||
const badgeFg = atLimit ? '#dc2626' : colors.textMuted;
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Section Header */}
|
||||
<TouchableOpacity
|
||||
onPress={collapsible ? onToggle : undefined}
|
||||
activeOpacity={collapsible ? 0.7 : 1}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<Text style={{ flex: 1, fontSize: 14, fontFamily: 'Nunito_700Bold', color: colors.text }}>
|
||||
{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, max })}
|
||||
</Text>
|
||||
</View>
|
||||
{collapsible && (
|
||||
<Ionicons
|
||||
name={open ? 'chevron-up' : 'chevron-down'}
|
||||
size={16}
|
||||
color={colors.textMuted}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{(!collapsible || open) && (
|
||||
<View style={{ paddingHorizontal: 14, paddingBottom: 14, gap: 12 }}>
|
||||
{/* Progressbar */}
|
||||
<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>
|
||||
|
||||
{/* Grid */}
|
||||
{children}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,10 +7,12 @@ import { useColors, type ColorScheme } from '../../lib/theme';
|
||||
import { RemoveDomainSheet } from './RemoveDomainSheet';
|
||||
import type { CustomDomain } from '../../hooks/useCustomDomains';
|
||||
|
||||
type Props = {
|
||||
// ─── Meine Filter (unified web + mail_domain) ─────────────────────────────────
|
||||
|
||||
type MyFiltersProps = {
|
||||
domains: CustomDomain[];
|
||||
webCount: number;
|
||||
webLimit: number;
|
||||
totalCount: number;
|
||||
totalLimit: number;
|
||||
globalBlocklistCount: number;
|
||||
onAddPress: () => void;
|
||||
onRemoveDomain: (id: string) => Promise<void>;
|
||||
@ -18,32 +20,30 @@ type Props = {
|
||||
};
|
||||
|
||||
/**
|
||||
* VIP-Sektion: "Meine geblockten Seiten".
|
||||
* "Meine Filter" — unified Sektion für web + mail_domain Einträge.
|
||||
*
|
||||
* 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.
|
||||
* Ein Slot-Pool: totalLimit = Legend 20 / Pro 10 (web+mail zusammen).
|
||||
* Kacheln zeigen Typ-Badge (Web / Mail). Entfernen via RemoveDomainSheet.
|
||||
*/
|
||||
export function VipDomainList({
|
||||
export function MyFiltersList({
|
||||
domains,
|
||||
webCount,
|
||||
webLimit,
|
||||
totalCount,
|
||||
totalLimit,
|
||||
globalBlocklistCount,
|
||||
onAddPress,
|
||||
onRemoveDomain,
|
||||
colors,
|
||||
}: Props) {
|
||||
}: MyFiltersProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const webDomains = useMemo(
|
||||
() => domains.filter((d) => (d.type === 'web' || !d.type) && d.status !== 'approved'),
|
||||
const visibleDomains = useMemo(
|
||||
() => domains.filter((d) => d.status !== 'approved'),
|
||||
[domains],
|
||||
);
|
||||
|
||||
const atLimit = webCount >= webLimit;
|
||||
const atLimit = totalCount >= totalLimit;
|
||||
const fillAnim = useRef(new Animated.Value(0)).current;
|
||||
const ratio = webLimit > 0 ? Math.min(webCount / webLimit, 1) : 0;
|
||||
const ratio = totalLimit > 0 ? Math.min(totalCount / totalLimit, 1) : 0;
|
||||
|
||||
useEffect(() => {
|
||||
Animated.timing(fillAnim, { toValue: ratio, duration: 380, useNativeDriver: false }).start();
|
||||
@ -51,7 +51,6 @@ export function VipDomainList({
|
||||
|
||||
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;
|
||||
|
||||
@ -65,7 +64,6 @@ export function VipDomainList({
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
@ -77,7 +75,7 @@ export function VipDomainList({
|
||||
}}
|
||||
>
|
||||
<Text style={{ flex: 1, fontSize: 14, fontFamily: 'Nunito_700Bold', color: colors.text }}>
|
||||
{t('blocker.vip_section_title')}
|
||||
{t('blocker.my_filters_title')}
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
@ -88,7 +86,7 @@ export function VipDomainList({
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: badgeFg }}>
|
||||
{t('blocker.count_label', { count: webCount, max: webLimit })}
|
||||
{t('blocker.count_label', { count: totalCount, max: totalLimit })}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
@ -108,7 +106,6 @@ export function VipDomainList({
|
||||
</View>
|
||||
|
||||
<View style={{ paddingHorizontal: 14, paddingBottom: 14, gap: 12 }}>
|
||||
{/* Progress bar */}
|
||||
<View
|
||||
style={{
|
||||
height: 5,
|
||||
@ -127,22 +124,13 @@ export function VipDomainList({
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Domain list or empty state */}
|
||||
{webDomains.length === 0 ? (
|
||||
<VipEmptyState onAddPress={onAddPress} colors={colors} />
|
||||
{visibleDomains.length === 0 ? (
|
||||
<MyFiltersEmptyState onAddPress={onAddPress} colors={colors} />
|
||||
) : (
|
||||
<VipDomainTiles domains={webDomains} onRemoveDomain={onRemoveDomain} />
|
||||
<FilterTilesGrid domains={visibleDomains} onRemoveDomain={onRemoveDomain} />
|
||||
)}
|
||||
|
||||
{/* Global list hint — ruhig, nicht als Casino-Trigger */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
gap: 6,
|
||||
paddingTop: 2,
|
||||
}}
|
||||
>
|
||||
<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={{
|
||||
@ -161,9 +149,7 @@ export function VipDomainList({
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Empty State ──────────────────────────────────────────────────────────────
|
||||
|
||||
function VipEmptyState({ onAddPress, colors }: { onAddPress: () => void; colors: ColorScheme }) {
|
||||
function MyFiltersEmptyState({ onAddPress, colors }: { onAddPress: () => void; colors: ColorScheme }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<TouchableOpacity onPress={onAddPress} activeOpacity={0.7}>
|
||||
@ -189,16 +175,14 @@ function VipEmptyState({ onAddPress, colors }: { onAddPress: () => void; colors:
|
||||
lineHeight: 18,
|
||||
}}
|
||||
>
|
||||
{t('blocker.vip_empty')}
|
||||
{t('blocker.my_filters_empty')}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Domain Tiles ─────────────────────────────────────────────────────────────
|
||||
|
||||
function VipDomainTiles({
|
||||
function FilterTilesGrid({
|
||||
domains,
|
||||
onRemoveDomain,
|
||||
}: {
|
||||
@ -208,13 +192,13 @@ function VipDomainTiles({
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 10, columnGap: 8 }}>
|
||||
{domains.map((d) => (
|
||||
<VipDomainTile key={d.id} domain={d} onRemove={onRemoveDomain} />
|
||||
<FilterTile key={d.id} domain={d} onRemove={onRemoveDomain} />
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function VipDomainTile({
|
||||
function FilterTile({
|
||||
domain,
|
||||
onRemove,
|
||||
}: {
|
||||
@ -227,6 +211,7 @@ function VipDomainTile({
|
||||
const [removeSheetOpen, setRemoveSheetOpen] = useState(false);
|
||||
const [removing, setRemoving] = useState(false);
|
||||
|
||||
const isMail = domain.type === 'mail_domain';
|
||||
const stripped = domain.domain.replace(/^www\./, '');
|
||||
|
||||
const statusColor: string = (() => {
|
||||
@ -264,30 +249,55 @@ function VipDomainTile({
|
||||
borderRadius: 14,
|
||||
padding: 8,
|
||||
width: '31%',
|
||||
minHeight: 110,
|
||||
minHeight: 118,
|
||||
gap: 4,
|
||||
opacity: removing ? 0.4 : 1,
|
||||
}}
|
||||
>
|
||||
{/* Status badge row */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
|
||||
{/* Type + Status badge row */}
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 5,
|
||||
paddingHorizontal: 4,
|
||||
paddingVertical: 1,
|
||||
borderRadius: 999,
|
||||
backgroundColor: isMail ? '#dbeafe' : colors.surfaceElevated,
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 7, fontFamily: 'Nunito_600SemiBold', color: isMail ? '#2563eb' : colors.textMuted }}>
|
||||
{isMail ? t('blocker.type_mail') : t('blocker.type_web')}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 4,
|
||||
paddingVertical: 1,
|
||||
borderRadius: 999,
|
||||
backgroundColor: statusColor,
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 8, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
|
||||
<Text style={{ fontSize: 7, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
|
||||
{badgeLabel}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Favicon + domain name */}
|
||||
{/* Icon + label */}
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 4, paddingVertical: 6 }}>
|
||||
{!imgError ? (
|
||||
{isMail ? (
|
||||
<View
|
||||
style={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 5,
|
||||
backgroundColor: '#dbeafe',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="mail-outline" size={13} color="#2563eb" />
|
||||
</View>
|
||||
) : !imgError ? (
|
||||
<Image
|
||||
source={{ uri: `https://www.google.com/s2/favicons?domain=${stripped}&sz=128` }}
|
||||
style={{ width: 24, height: 24, borderRadius: 5 }}
|
||||
@ -354,3 +364,131 @@ function VipDomainTile({
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── VIP-Liste (collapsible, Zweitschutz) ────────────────────────────────────
|
||||
|
||||
type VipListProps = {
|
||||
domains: CustomDomain[];
|
||||
globalBlocklistCount: number;
|
||||
open: boolean;
|
||||
onToggle: () => void;
|
||||
colors: ColorScheme;
|
||||
};
|
||||
|
||||
/**
|
||||
* "VIP-Liste" — Zweitschutz-Sektion. Collapsible.
|
||||
*
|
||||
* Zeigt die zusammengesetzte VIP-Layer-2-Liste:
|
||||
* - Eigene Web-Domains des Users (für Family-Controls / webContent-Sync)
|
||||
* - Hinweis auf den globalen kuratierten Teil (nicht editierbar)
|
||||
*
|
||||
* Diese Liste greift als Zweitschutz, falls Layer 1 (VPN/URL-Filter)
|
||||
* ein technisches Problem hat.
|
||||
*/
|
||||
export function VipDomainList({ domains, globalBlocklistCount, open, onToggle, colors }: VipListProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const webDomains = useMemo(
|
||||
() => domains.filter((d) => (d.type === 'web' || !d.type) && d.status !== 'approved'),
|
||||
[domains],
|
||||
);
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={onToggle}
|
||||
activeOpacity={0.7}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="shield-half-outline" size={16} color={colors.textMuted} />
|
||||
<Text style={{ flex: 1, fontSize: 14, fontFamily: 'Nunito_700Bold', color: colors.text }}>
|
||||
{t('blocker.vip_layer2_title')}
|
||||
</Text>
|
||||
<Ionicons
|
||||
name={open ? 'chevron-up' : 'chevron-down'}
|
||||
size={16}
|
||||
color={colors.textMuted}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
{open && (
|
||||
<View style={{ paddingHorizontal: 14, paddingBottom: 14, gap: 10 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
fontFamily: 'Nunito_400Regular',
|
||||
color: colors.textMuted,
|
||||
lineHeight: 17,
|
||||
}}
|
||||
>
|
||||
{t('blocker.vip_layer2_desc')}
|
||||
</Text>
|
||||
|
||||
{webDomains.length > 0 && (
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 8, columnGap: 6 }}>
|
||||
{webDomains.map((d) => (
|
||||
<VipReadonlyChip key={d.id} domain={d} colors={colors} />
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<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_layer2_global_hint', { count: globalBlocklistCount })}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function VipReadonlyChip({ domain, colors }: { domain: CustomDomain; colors: ColorScheme }) {
|
||||
const stripped = domain.domain.replace(/^www\./, '');
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 999,
|
||||
backgroundColor: colors.surfaceElevated,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="globe-outline" size={11} color={colors.textMuted} />
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: colors.text, maxWidth: 120 }}
|
||||
>
|
||||
{stripped}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@ -382,6 +382,11 @@
|
||||
"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",
|
||||
"my_filters_title": "Meine Filter",
|
||||
"my_filters_empty": "Noch keine Filter. Tippe + um eine Website oder E-Mail zu blockieren.",
|
||||
"vip_layer2_title": "VIP-Liste",
|
||||
"vip_layer2_desc": "Zweitschutz: Diese Liste greift, falls der URL-Filter (Layer 1) ein technisches Problem hat. Sie enthält deine eigenen Domains plus einen kuratierten globalen Anteil.",
|
||||
"vip_layer2_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.",
|
||||
|
||||
@ -382,6 +382,11 @@
|
||||
"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",
|
||||
"my_filters_title": "My Filters",
|
||||
"my_filters_empty": "No filters yet. Tap + to block a website or email.",
|
||||
"vip_layer2_title": "VIP List",
|
||||
"vip_layer2_desc": "Second-layer protection: this list activates if the URL filter (Layer 1) has a technical issue. It includes your custom domains plus a curated global portion.",
|
||||
"vip_layer2_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.",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user