From 26de3dade9aeb4292100b4c98822c0bde5d89264 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Sat, 16 May 2026 02:58:51 +0200
Subject: [PATCH] fix(native/blocker): thinner filter overview banner + count
 badge in header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Match the existing DomainSection visual pattern. One row at the top:
title "Eigene Filter", inline Web/Mail legend dots, the X/Y count pill
and a small + button — all on the same line. The bar drops below at
5px height (same as DomainSection). The 48×48 floating add button is
gone in favour of a 28×28 inline button next to the count pill so the
overview reads as a single horizontal strip rather than a tall card.
---
 apps/rebreak-native/app/(app)/blocker.tsx | 115 +++++++++++-----------
 1 file changed, 59 insertions(+), 56 deletions(-)

diff --git a/apps/rebreak-native/app/(app)/blocker.tsx b/apps/rebreak-native/app/(app)/blocker.tsx
index e2eb8fe..bf96943 100644
--- a/apps/rebreak-native/app/(app)/blocker.tsx
+++ b/apps/rebreak-native/app/(app)/blocker.tsx
@@ -480,79 +480,82 @@ function CustomFilterOverview({
         borderRadius: 16,
         borderWidth: 1,
         borderColor: colors.border,
-        padding: 14,
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 12,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        gap: 8,
       }}
     >
-      {/* Left: title + counter + bar */}
-      <View style={{ flex: 1, gap: 6 }}>
+      {/* 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>
-        <Text style={{ fontSize: 12, fontFamily: 'Nunito_400Regular', color: colors.textMuted }}>
-          {t('blocker.custom_filter_overview_count', { count: total, max })}
-        </Text>
-
-        {/* Split progress bar */}
+        <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={{
-            height: 7,
+            paddingHorizontal: 8,
+            paddingVertical: 3,
             borderRadius: 999,
             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>
-
-        {/* Legend dots */}
-        <View style={{ flexDirection: 'row', gap: 10 }}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-            <View style={{ width: 8, height: 8, borderRadius: 4, 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: 8, height: 8, borderRadius: 4, backgroundColor: colors.success }} />
-            <Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: colors.textMuted }}>
-              {mailCount} Mail
-            </Text>
-          </View>
+          <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>
 
-      {/* Right: add button */}
-      <TouchableOpacity
-        onPress={onAddPress}
-        activeOpacity={0.85}
+      {/* Split progress bar — same height/pattern as DomainSection */}
+      <View
         style={{
-          width: 48,
-          height: 48,
-          borderRadius: 24,
-          backgroundColor: colors.brandOrange,
-          alignItems: 'center',
-          justifyContent: 'center',
+          height: 5,
+          borderRadius: 3,
+          backgroundColor: colors.surfaceElevated,
+          flexDirection: 'row',
+          overflow: 'hidden',
         }}
       >
-        <Ionicons name="add" size={26} color="#fff" />
-      </TouchableOpacity>
+        <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>
   );
 }