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>

apps/rebreak-native/app/(app)/blocker.tsx

@@ -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 */}
+            {/* Sektion 1: Meine Filter (unified web + mail_domain) */}
-            <VipDomainList
+            <MyFiltersList
               domains={domains}
-              webCount={countsByType.web}
+              totalCount={countsByType.web + countsByType.mail}
-              webLimit={limits.web}
+              totalLimit={limits.web + limits.mail}
               globalBlocklistCount={state.blocklistCount}
               onAddPress={() => setAddSheetOpen(true)}
               onRemoveDomain={handleRemoveWebDomain}
               colors={colors}
             />
 
-            {/* Custom-Filter-Slot-Übersicht */}
+            {/* Sektion 2: VIP-Liste (Zweitschutz, collapsible) */}
-            <CustomFilterOverview
+            <VipDomainList
-              webCount={countsByType.web}
+              domains={domains}
-              mailCount={countsByType.mail}
+              globalBlocklistCount={state.blocklistCount}
-              webLimit={limits.web}
+              open={vipOpen}
-              mailLimit={limits.mail}
+              onToggle={() => setVipOpen((v) => !v)}
-              onAddPress={() => setAddSheetOpen(true)}
               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>
-  );
-}

apps/rebreak-native/components/blocker/VipDomainList.tsx

@@ -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;
+  totalCount: number;
-  webLimit: 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).
+ * Ein Slot-Pool: totalLimit = Legend 20 / Pro 10 (web+mail zusammen).
- * Domain entfernen → 3-Click Friction via RemoveDomainSheet (selbes Pattern wie
+ * Kacheln zeigen Typ-Badge (Web / Mail). Entfernen via RemoveDomainSheet.
- * Schutz-Deaktivieren). Domain hinzufügen → frei via onAddPress.
- * Darunter: ruhiger Hinweis auf die automatische globale Blocklist.
  */
-export function VipDomainList({
+export function MyFiltersList({
   domains,
-  webCount,
+  totalCount,
-  webLimit,
+  totalLimit,
   globalBlocklistCount,
   onAddPress,
   onRemoveDomain,
   colors,
-}: Props) {
+}: MyFiltersProps) {
   const { t } = useTranslation();
 
-  const webDomains = useMemo(
+  const visibleDomains = useMemo(
-    () => domains.filter((d) => (d.type === 'web' || !d.type) && d.status !== 'approved'),
+    () => 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 */}
+        {visibleDomains.length === 0 ? (
-        {webDomains.length === 0 ? (
+          <MyFiltersEmptyState onAddPress={onAddPress} colors={colors} />
-          <VipEmptyState 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 MyFiltersEmptyState({ onAddPress, colors }: { onAddPress: () => void; colors: ColorScheme }) {
-
-function VipEmptyState({ 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 FilterTilesGrid({
-
-function VipDomainTiles({
   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 */}
+        {/* Type + Status badge row */}
-        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
+        <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>
+  );
+}

apps/rebreak-native/locales/de.json

@@ -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.",

apps/rebreak-native/locales/en.json

@@ -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.",