feat(native): help section — FAQ, Contact, About, Crisis pages

New route group app/help/ with 4 sub-pages navigable from settings.

- help/faq.tsx: accordion with 8 Q&As (drafted by UI agent, see below)
- help/contact.tsx: mailto:hilfe@rebreak.org with prefilled subject,
  address block (Rebreak placeholder — TODO verify legal entity name)
- help/about.tsx: mission text + 3 fact rows (DiGA, Hetzner, DSGVO)
- help/crisis.tsx: BZgA 0800 1 372 700, check-dein-spiel.de,
  anonyme-spieler.org, Telefonseelsorge 0800 111 0 111, emergency
  112-box with error-color border treatment. Disclaimer at bottom.

All pages use AppHeader showBack for correct back-button.
All strings in help.* namespace in DE/EN/FR locales.

FAQ answers drafted by UI agent — pending lyra-persona tone review:
  faq_a1 (what is Rebreak), faq_a2 (blocker), faq_a3 (Mac DNS),
  faq_a4 (cancel sub), faq_a5 (data), faq_a6 (bug report),
  faq_a7 (whitelist), faq_a8 (DiGA).
FR locale: faq answers are DE-fallback text (TODO: translate properly).
Contact address block: placeholder — TODO confirm legal entity + address.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chahinebrini 2026-05-15 23:42:45 +02:00
parent 943afb827b
commit d840247c98
5 changed files with 632 additions and 0 deletions

View File

@ -0,0 +1,18 @@
import { Stack } from 'expo-router';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';
export default function HelpLayout() {
const { t } = useTranslation();
const colors = useColors();
return (
<Stack
screenOptions={{
headerShown: false,
animation: 'slide_from_right',
contentStyle: { backgroundColor: colors.groupedBg },
}}
/>
);
}

View File

@ -0,0 +1,137 @@
import { Linking, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';
import { AppHeader } from '../../components/AppHeader';
export default function AboutScreen() {
const { t } = useTranslation();
const colors = useColors();
const insets = useSafeAreaInsets();
return (
<View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
<AppHeader showBack title={t('help.about_title')} />
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{
paddingHorizontal: 16,
paddingTop: 20,
paddingBottom: insets.bottom + 40,
}}
showsVerticalScrollIndicator={false}
>
<View
style={{
backgroundColor: colors.card,
borderRadius: 14,
padding: 16,
marginBottom: 16,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.04,
shadowRadius: 3,
elevation: 1,
}}
>
<Text
style={{
fontSize: 22,
fontFamily: 'Nunito_800ExtraBold',
color: colors.text,
marginBottom: 12,
}}
>
{t('help.about_headline')}
</Text>
<Text
style={{
fontSize: 15,
fontFamily: 'Nunito_400Regular',
color: colors.text,
lineHeight: 24,
}}
>
{t('help.about_body')}
</Text>
</View>
<View
style={{
backgroundColor: colors.card,
borderRadius: 14,
overflow: 'hidden',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.04,
shadowRadius: 3,
elevation: 1,
}}
>
{(
[
{ icon: 'shield-checkmark-outline', label: t('help.about_fact_diga') },
{ icon: 'server-outline', label: t('help.about_fact_servers') },
{ icon: 'lock-closed-outline', label: t('help.about_fact_privacy') },
] as { icon: React.ComponentProps<typeof Ionicons>['name']; label: string }[]
).map((item, i, arr) => (
<View
key={item.icon}
style={{
flexDirection: 'row',
alignItems: 'center',
gap: 14,
paddingHorizontal: 16,
paddingVertical: 14,
borderBottomWidth: i < arr.length - 1 ? 1 : 0,
borderBottomColor: colors.border,
}}
>
<View
style={{
width: 34,
height: 34,
borderRadius: 10,
backgroundColor: colors.surfaceElevated,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Ionicons name={item.icon} size={17} color={colors.textMuted} />
</View>
<Text
style={{
flex: 1,
fontSize: 14,
fontFamily: 'Nunito_400Regular',
color: colors.text,
lineHeight: 20,
}}
>
{item.label}
</Text>
</View>
))}
</View>
<TouchableOpacity
onPress={() => Linking.openURL('https://rebreak.org')}
activeOpacity={0.7}
style={{ marginTop: 20, alignItems: 'center' }}
>
<Text
style={{
fontSize: 13,
fontFamily: 'Nunito_400Regular',
color: '#6366f1',
}}
>
rebreak.org
</Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}

View File

@ -0,0 +1,107 @@
import { Linking, ScrollView, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';
import { AppHeader } from '../../components/AppHeader';
import { Button } from '../../components/Button';
export default function ContactScreen() {
const { t } = useTranslation();
const colors = useColors();
const insets = useSafeAreaInsets();
return (
<View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
<AppHeader showBack title={t('help.contact_title')} />
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{
paddingHorizontal: 16,
paddingTop: 20,
paddingBottom: insets.bottom + 40,
}}
showsVerticalScrollIndicator={false}
>
<View
style={{
backgroundColor: colors.card,
borderRadius: 14,
padding: 16,
marginBottom: 16,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.04,
shadowRadius: 3,
elevation: 1,
}}
>
<Text
style={{
fontSize: 15,
fontFamily: 'Nunito_700Bold',
color: colors.text,
marginBottom: 8,
}}
>
{t('help.contact_email_label')}
</Text>
<Text
style={{
fontSize: 14,
fontFamily: 'Nunito_400Regular',
color: colors.textMuted,
lineHeight: 21,
marginBottom: 16,
}}
>
{t('help.contact_email_desc')}
</Text>
<Button
title={t('help.contact_email_cta')}
onPress={() =>
Linking.openURL(
'mailto:hilfe@rebreak.org?subject=Support%20Anfrage',
)
}
size="md"
/>
</View>
<View
style={{
backgroundColor: colors.card,
borderRadius: 14,
padding: 16,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.04,
shadowRadius: 3,
elevation: 1,
}}
>
<Text
style={{
fontSize: 15,
fontFamily: 'Nunito_700Bold',
color: colors.text,
marginBottom: 8,
}}
>
{t('help.contact_address_label')}
</Text>
<Text
style={{
fontSize: 14,
fontFamily: 'Nunito_400Regular',
color: colors.textMuted,
lineHeight: 22,
}}
>
{t('help.contact_address_block')}
</Text>
</View>
</ScrollView>
</View>
);
}

View File

@ -0,0 +1,250 @@
import { Linking, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';
import { AppHeader } from '../../components/AppHeader';
type HotlineRowProps = {
label: string;
sublabel: string;
phoneOrUrl: string;
isUrl?: boolean;
colors: ReturnType<typeof useColors>;
};
function HotlineRow({ label, sublabel, phoneOrUrl, isUrl, colors }: HotlineRowProps) {
return (
<TouchableOpacity
onPress={() => Linking.openURL(isUrl ? phoneOrUrl : `tel:${phoneOrUrl.replace(/\s/g, '')}`)}
activeOpacity={0.7}
>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
gap: 12,
paddingHorizontal: 16,
paddingVertical: 14,
}}
>
<View
style={{
width: 34,
height: 34,
borderRadius: 10,
backgroundColor: colors.surfaceElevated,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Ionicons
name={isUrl ? 'globe-outline' : 'call-outline'}
size={17}
color={colors.textMuted}
/>
</View>
<View style={{ flex: 1 }}>
<Text
style={{
fontSize: 15,
fontFamily: 'Nunito_600SemiBold',
color: colors.text,
}}
>
{label}
</Text>
<Text
style={{
fontSize: 12,
fontFamily: 'Nunito_400Regular',
color: colors.textMuted,
marginTop: 2,
}}
>
{sublabel}
</Text>
</View>
<Ionicons name="chevron-forward" size={16} color={colors.border} />
</View>
</TouchableOpacity>
);
}
export default function CrisisScreen() {
const { t } = useTranslation();
const colors = useColors();
const insets = useSafeAreaInsets();
return (
<View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
<AppHeader showBack title={t('help.crisis_title')} />
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{
paddingHorizontal: 16,
paddingTop: 20,
paddingBottom: insets.bottom + 40,
}}
showsVerticalScrollIndicator={false}
>
<Text
style={{
fontSize: 13,
fontFamily: 'Nunito_600SemiBold',
color: colors.textMuted,
textTransform: 'uppercase',
letterSpacing: 1,
marginBottom: 8,
marginLeft: 4,
}}
>
{t('help.crisis_section_gambling')}
</Text>
<View
style={{
backgroundColor: colors.card,
borderRadius: 14,
overflow: 'hidden',
marginBottom: 20,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.04,
shadowRadius: 3,
elevation: 1,
}}
>
<View style={{ borderBottomWidth: 1, borderBottomColor: colors.border }}>
<HotlineRow
label={t('help.crisis_bzga_label')}
sublabel={t('help.crisis_bzga_sublabel')}
phoneOrUrl="0800 1 372 700"
colors={colors}
/>
</View>
<View style={{ borderBottomWidth: 1, borderBottomColor: colors.border }}>
<HotlineRow
label={t('help.crisis_checkdein_label')}
sublabel={t('help.crisis_checkdein_sublabel')}
phoneOrUrl="https://www.check-dein-spiel.de"
isUrl
colors={colors}
/>
</View>
<HotlineRow
label={t('help.crisis_anonyme_label')}
sublabel={t('help.crisis_anonyme_sublabel')}
phoneOrUrl="https://www.anonyme-spieler.org"
isUrl
colors={colors}
/>
</View>
<Text
style={{
fontSize: 13,
fontFamily: 'Nunito_600SemiBold',
color: colors.textMuted,
textTransform: 'uppercase',
letterSpacing: 1,
marginBottom: 8,
marginLeft: 4,
}}
>
{t('help.crisis_section_general')}
</Text>
<View
style={{
backgroundColor: colors.card,
borderRadius: 14,
overflow: 'hidden',
marginBottom: 20,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.04,
shadowRadius: 3,
elevation: 1,
}}
>
<HotlineRow
label={t('help.crisis_seelsorge_label')}
sublabel={t('help.crisis_seelsorge_sublabel')}
phoneOrUrl="0800 111 0 111"
colors={colors}
/>
</View>
<View
style={{
backgroundColor: '#fef2f2',
borderRadius: 14,
borderWidth: 1.5,
borderColor: colors.error,
padding: 16,
marginBottom: 20,
}}
>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 8 }}>
<Ionicons name="warning-outline" size={20} color={colors.error} />
<Text
style={{
fontSize: 15,
fontFamily: 'Nunito_700Bold',
color: colors.error,
}}
>
{t('help.crisis_emergency_label')}
</Text>
</View>
<Text
style={{
fontSize: 14,
fontFamily: 'Nunito_400Regular',
color: colors.text,
lineHeight: 21,
marginBottom: 12,
}}
>
{t('help.crisis_emergency_desc')}
</Text>
<TouchableOpacity
onPress={() => Linking.openURL('tel:112')}
activeOpacity={0.7}
style={{
backgroundColor: colors.error,
borderRadius: 10,
paddingVertical: 12,
alignItems: 'center',
}}
>
<Text
style={{
fontSize: 16,
fontFamily: 'Nunito_700Bold',
color: '#ffffff',
}}
>
{t('help.crisis_emergency_cta')}
</Text>
</TouchableOpacity>
</View>
<Text
style={{
fontSize: 12,
fontFamily: 'Nunito_400Regular',
color: colors.textMuted,
lineHeight: 18,
textAlign: 'center',
marginHorizontal: 8,
}}
>
{t('help.crisis_disclaimer')}
</Text>
</ScrollView>
</View>
);
}

View File

@ -0,0 +1,120 @@
import { useState } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';
import { AppHeader } from '../../components/AppHeader';
type FaqItem = { q: string; a: string };
function FaqRow({ q, a, colors }: FaqItem & { colors: ReturnType<typeof useColors> }) {
const [open, setOpen] = useState(false);
return (
<View
style={{
borderBottomWidth: 1,
borderBottomColor: colors.border,
}}
>
<TouchableOpacity
onPress={() => setOpen((v) => !v)}
activeOpacity={0.7}
style={{
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 14,
gap: 12,
}}
>
<Text
style={{
flex: 1,
fontSize: 15,
fontFamily: 'Nunito_600SemiBold',
color: colors.text,
lineHeight: 21,
}}
>
{q}
</Text>
<Ionicons
name={open ? 'chevron-up' : 'chevron-down'}
size={18}
color={colors.textMuted}
/>
</TouchableOpacity>
{open ? (
<Text
style={{
paddingHorizontal: 16,
paddingBottom: 16,
fontSize: 14,
fontFamily: 'Nunito_400Regular',
color: colors.textMuted,
lineHeight: 21,
}}
>
{a}
</Text>
) : null}
</View>
);
}
export default function FaqScreen() {
const { t } = useTranslation();
const colors = useColors();
const insets = useSafeAreaInsets();
const items: FaqItem[] = [
{ q: t('help.faq_q1'), a: t('help.faq_a1') },
{ q: t('help.faq_q2'), a: t('help.faq_a2') },
{ q: t('help.faq_q3'), a: t('help.faq_a3') },
{ q: t('help.faq_q4'), a: t('help.faq_a4') },
{ q: t('help.faq_q5'), a: t('help.faq_a5') },
{ q: t('help.faq_q6'), a: t('help.faq_a6') },
{ q: t('help.faq_q7'), a: t('help.faq_a7') },
{ q: t('help.faq_q8'), a: t('help.faq_a8') },
];
return (
<View style={{ flex: 1, backgroundColor: colors.groupedBg }}>
<AppHeader showBack title={t('help.faq_title')} />
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{
paddingHorizontal: 16,
paddingTop: 20,
paddingBottom: insets.bottom + 40,
}}
showsVerticalScrollIndicator={false}
>
<View
style={{
backgroundColor: colors.card,
borderRadius: 14,
overflow: 'hidden',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.04,
shadowRadius: 3,
elevation: 1,
}}
>
{items.map((item, i) => (
<FaqRow
key={i}
q={item.q}
a={item.a}
colors={colors}
/>
))}
</View>
</ScrollView>
</View>
);
}