d840247c98
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>
121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
}
|