chahinebrini 3c52d8869e feat(native): WIP checkpoint — Profile/Settings/Demographics + WheelPicker + Maestro
Rollback-Punkt vor Expo SDK 54 / RN 0.81 Upgrade.

UI/UX:
- Profile: ProfileHeader redesign (sign-in chip + member-since), StatsBar 3 pill cards,
  Demographics accordion completed (Geburtsjahr, Geschlecht, Familienstand, Beruf-split,
  Wohnort), Pro-Trial-Banner, Approved-Domains list, DigaMissionBanner
- Settings: section-based layout, neutral icons (matched Header dropdown style)
- Header dropdown: extended with logout + games-page link
- Notifications page: skeleton dummy data
- Locales: i18n keys for new screens

New components:
- WheelPickerModal: native iOS UIPickerView wheel for long lists (Geburtsjahr 91 items,
  Bundesland 16, Stadt 30+/Bundesland)
- OptionsBottomSheet: iOS-style options sheet (used briefly for Geschlecht, currently
  unused — kept for potential future use)
- germanCities.ts: Top-cities per Bundesland (DSGVO-clean static data)

New libs (NewArch-codegen verified):
- @react-native-menu/menu 2.0.0 (UIMenu wrapper, Apple HIG-konform)
- @lodev09/react-native-true-sheet 3.10.1 (UISheetPresentationController wrapper —
  ABER incompatible mit RN 0.79.6, Build-Error → Trigger für SDK-54-Upgrade)

Maestro E2E:
- Initial setup mit auth/community/profile/urge flows

Scripts:
- build-ios-clean.sh: Xcode DerivedData + ios/build cleanup vor expo run:ios

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-08 19:32:27 +02:00

99 lines
2.3 KiB
TypeScript

import { View, Text, Pressable } from 'react-native';
import { colors } from '../../lib/theme';
type Props = {
postsCount: number;
followersCount: number;
approvedDomainsCount: number;
onPostsPress?: () => void;
onFollowersPress?: () => void;
onApprovedDomainsPress?: () => void;
};
type CardProps = {
value: string;
label: string;
onPress?: () => void;
};
function StatPill({ value, label, onPress }: CardProps) {
return (
<Pressable
onPress={onPress}
style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}
>
<View
style={{
backgroundColor: '#ffffff',
borderWidth: 1,
borderColor: '#e5e5e5',
borderRadius: 999,
paddingVertical: 10,
paddingHorizontal: 18,
alignItems: 'center',
minWidth: 88,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 1,
}}
>
<Text
style={{
fontSize: 18,
color: colors.text,
fontFamily: 'Nunito_700Bold',
letterSpacing: -0.2,
}}
>
{value}
</Text>
<Text
style={{
marginTop: 1,
fontSize: 10,
color: colors.textMuted,
fontFamily: 'Nunito_600SemiBold',
textAlign: 'center',
}}
numberOfLines={1}
>
{label}
</Text>
</View>
</Pressable>
);
}
export function StatsBar({
postsCount,
followersCount,
approvedDomainsCount,
onPostsPress,
onFollowersPress,
onApprovedDomainsPress,
}: Props) {
return (
<View style={{ paddingHorizontal: 16 }}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 10,
flexWrap: 'wrap',
}}
>
<StatPill value={String(postsCount)} label="Posts" onPress={onPostsPress} />
<StatPill value={String(followersCount)} label="Follower" onPress={onFollowersPress} />
<StatPill
value={String(approvedDomainsCount)}
label="Domains"
onPress={onApprovedDomainsPress}
/>
</View>
</View>
);
}