chahine/rebreak-monorepo
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(native/blocker): thinner filter overview banner + count badge in header

Browse Source 
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.
This commit is contained in:
chahinebrini 2026-05-16 02:58:51 +02:00
parent 8a6ab6fe64
commit 26de3dade9
1 changed files with 59 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
apps/rebreak-native/app/(app)/blocker.tsx
View File

@ -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>
);
}