fix(settings): tap-targets, logout-row, AppHeader-Pattern + HIG-konsistenz
Pre-fix war die Settings-Page de-facto kaputt: Rows waren <View> ohne
Press-Handler — 0pt Tap-Target, nichts klickbar. Plus Abmelden war nur
ueber Header-Dropdown erreichbar (nicht erwartete UX).
Fixes:
- AppHeader showBack statt manueller SafeAreaView+Chevron — konsistent mit
Profile-Page
- Pressable minHeight:56 auf jeder Row (mit pressed-state opacity+bg);
disabled={row.soon} fuer geplante Features
- Icons 16pt/32pt-Box → 18pt/36pt-Box (App-Norm)
- Row-Label fontSize 14→15 (konsistent mit Profile/Dropdown)
- Danger-Zone-Section hinzugefuegt: Abmelden live (Alert-Confirmation),
Konto-loeschen 'soon'
- Chevron-forward fuer tappable Rows (statt 'Soon'-Badge falls live)
- paddingBottom: insets.bottom + 40 (safe-area-aware fuer Home-Indicator)
Sektionen unveraendert (Profil, Theme/Sprache, Notifications, Geraete/Abo,
Lyra, Account, Debug) — nur Visual + Tap-Layer.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chahinebrini
parent
82c6c61a5e
commit
756947549f
@ -1,15 +1,20 @@
|
||||
import { ScrollView, View, Text, Pressable, Platform } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { Alert, Platform, Pressable, ScrollView, Text, View } from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { colors } from '../lib/theme';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { AppHeader } from '../components/AppHeader';
|
||||
|
||||
type SectionRow = {
|
||||
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||
iconColor: string;
|
||||
label: string;
|
||||
sublabel: string;
|
||||
soon?: boolean;
|
||||
destructive?: boolean;
|
||||
onPress?: () => void;
|
||||
};
|
||||
|
||||
type Section = {
|
||||
@ -20,7 +25,27 @@ type Section = {
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const router = useRouter();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { t } = useTranslation();
|
||||
const { signOut } = useAuthStore();
|
||||
|
||||
async function handleSignOut() {
|
||||
Alert.alert(
|
||||
t('auth.signOut'),
|
||||
'',
|
||||
[
|
||||
{ text: t('common.cancel'), style: 'cancel' },
|
||||
{
|
||||
text: t('auth.signOut'),
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
await signOut();
|
||||
router.replace('/');
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
const sections: Section[] = [
|
||||
{
|
||||
@ -32,12 +57,14 @@ export default function SettingsScreen() {
|
||||
iconColor: '#6366f1',
|
||||
label: t('settings.profile_edit'),
|
||||
sublabel: t('settings.profile_edit_desc'),
|
||||
soon: true,
|
||||
},
|
||||
{
|
||||
icon: 'image-outline',
|
||||
iconColor: '#6366f1',
|
||||
label: t('settings.profile_avatar'),
|
||||
sublabel: t('settings.profile_avatar_desc'),
|
||||
soon: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -50,12 +77,14 @@ export default function SettingsScreen() {
|
||||
iconColor: '#a78bfa',
|
||||
label: t('settings.theme'),
|
||||
sublabel: t('settings.theme_desc'),
|
||||
soon: true,
|
||||
},
|
||||
{
|
||||
icon: 'language-outline',
|
||||
iconColor: '#a78bfa',
|
||||
label: t('settings.language'),
|
||||
sublabel: t('settings.language_desc'),
|
||||
soon: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -68,12 +97,14 @@ export default function SettingsScreen() {
|
||||
iconColor: '#2563eb',
|
||||
label: t('settings.notifications_push'),
|
||||
sublabel: t('settings.notifications_push_desc'),
|
||||
soon: true,
|
||||
},
|
||||
{
|
||||
icon: 'flame-outline',
|
||||
iconColor: '#f97316',
|
||||
label: t('settings.notifications_streak'),
|
||||
sublabel: t('settings.notifications_streak_desc'),
|
||||
soon: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -86,12 +117,14 @@ export default function SettingsScreen() {
|
||||
iconColor: '#16a34a',
|
||||
label: t('settings.devices'),
|
||||
sublabel: t('settings.devices_desc'),
|
||||
soon: true,
|
||||
},
|
||||
{
|
||||
icon: 'star-outline',
|
||||
iconColor: colors.brandOrange,
|
||||
label: t('settings.subscription'),
|
||||
sublabel: t('settings.subscription_desc'),
|
||||
soon: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -104,6 +137,28 @@ export default function SettingsScreen() {
|
||||
iconColor: '#ec4899',
|
||||
label: t('settings.lyra_voice'),
|
||||
sublabel: t('settings.lyra_voice_desc'),
|
||||
soon: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'account',
|
||||
title: t('settings.danger_section'),
|
||||
rows: [
|
||||
{
|
||||
icon: 'log-out-outline',
|
||||
iconColor: colors.textMuted,
|
||||
label: t('settings.sign_out'),
|
||||
sublabel: '',
|
||||
onPress: handleSignOut,
|
||||
},
|
||||
{
|
||||
icon: 'trash-outline',
|
||||
iconColor: colors.error,
|
||||
label: t('settings.delete_account'),
|
||||
sublabel: t('settings.delete_desc'),
|
||||
destructive: true,
|
||||
soon: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -119,52 +174,30 @@ export default function SettingsScreen() {
|
||||
iconColor: '#737373',
|
||||
label: t('settings.debug_llm'),
|
||||
sublabel: t('settings.debug_llm_desc'),
|
||||
soon: true,
|
||||
},
|
||||
{
|
||||
icon: 'volume-high-outline',
|
||||
iconColor: '#737373',
|
||||
label: t('settings.debug_tts'),
|
||||
sublabel: t('settings.debug_tts_desc'),
|
||||
soon: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#ffffff' }} edges={['top']}>
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 12,
|
||||
paddingTop: 4,
|
||||
paddingBottom: 12,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: 'rgba(0,0,0,0.06)',
|
||||
}}
|
||||
>
|
||||
<Pressable
|
||||
onPress={() => router.back()}
|
||||
hitSlop={8}
|
||||
style={({ pressed }) => ({
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
opacity: pressed ? 0.6 : 1,
|
||||
})}
|
||||
>
|
||||
<Ionicons name="chevron-back" size={26} color={colors.text} />
|
||||
</Pressable>
|
||||
<Text style={{ fontSize: 20, color: '#0a0a0a', fontFamily: 'Nunito_700Bold' }}>
|
||||
{t('settings.title')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1, backgroundColor: colors.bg }}>
|
||||
<AppHeader showBack title={t('settings.title')} />
|
||||
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 16, paddingBottom: 60 }}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 16,
|
||||
paddingBottom: insets.bottom + 40,
|
||||
}}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View
|
||||
@ -180,7 +213,7 @@ export default function SettingsScreen() {
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="construct-outline" size={20} color="#b45309" style={{ marginTop: 1 }} />
|
||||
<Ionicons name="construct-outline" size={18} color="#b45309" style={{ marginTop: 1 }} />
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ fontSize: 14, fontFamily: 'Nunito_700Bold', color: '#78350f' }}>
|
||||
{t('settings.coming_soon_title')}
|
||||
@ -200,7 +233,7 @@ export default function SettingsScreen() {
|
||||
</View>
|
||||
|
||||
{sections.map((section) => (
|
||||
<View key={section.key} style={{ marginBottom: 22 }}>
|
||||
<View key={section.key} style={{ marginBottom: 24 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 11,
|
||||
@ -216,7 +249,7 @@ export default function SettingsScreen() {
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: '#fafafa',
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(0,0,0,0.05)',
|
||||
@ -224,58 +257,84 @@ export default function SettingsScreen() {
|
||||
}}
|
||||
>
|
||||
{section.rows.map((row, i) => (
|
||||
<View
|
||||
<Pressable
|
||||
key={row.label}
|
||||
style={{
|
||||
onPress={row.soon ? undefined : row.onPress}
|
||||
disabled={row.soon}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 14,
|
||||
minHeight: 56,
|
||||
borderBottomWidth: i < section.rows.length - 1 ? 1 : 0,
|
||||
borderBottomColor: 'rgba(0,0,0,0.04)',
|
||||
opacity: 0.5,
|
||||
}}
|
||||
opacity: row.soon ? 0.5 : pressed ? 0.7 : 1,
|
||||
backgroundColor: pressed && !row.soon ? '#f5f5f5' : 'transparent',
|
||||
})}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
backgroundColor: row.iconColor + '18',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Ionicons name={row.icon} size={16} color={row.iconColor} />
|
||||
<Ionicons
|
||||
name={row.icon}
|
||||
size={18}
|
||||
color={row.destructive ? colors.error : row.iconColor}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ fontSize: 14, color: '#0a0a0a', fontFamily: 'Nunito_600SemiBold' }}>
|
||||
{row.label}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: '#737373',
|
||||
fontFamily: 'Nunito_400Regular',
|
||||
marginTop: 2,
|
||||
fontSize: 15,
|
||||
color: row.destructive ? colors.error : colors.text,
|
||||
fontFamily: 'Nunito_600SemiBold',
|
||||
}}
|
||||
>
|
||||
{row.sublabel}
|
||||
{row.label}
|
||||
</Text>
|
||||
{row.sublabel ? (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: colors.textMuted,
|
||||
fontFamily: 'Nunito_400Regular',
|
||||
marginTop: 2,
|
||||
}}
|
||||
>
|
||||
{row.sublabel}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 10,
|
||||
color: '#a3a3a3',
|
||||
fontFamily: 'Nunito_600SemiBold',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
}}
|
||||
>
|
||||
{t('settings.soon_badge')}
|
||||
</Text>
|
||||
</View>
|
||||
{row.soon ? (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 10,
|
||||
color: '#a3a3a3',
|
||||
fontFamily: 'Nunito_600SemiBold',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{t('settings.soon_badge')}
|
||||
</Text>
|
||||
) : (
|
||||
<Ionicons
|
||||
name="chevron-forward"
|
||||
size={16}
|
||||
color="#d4d4d8"
|
||||
style={{ flexShrink: 0 }}
|
||||
/>
|
||||
)}
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
@ -306,6 +365,6 @@ export default function SettingsScreen() {
|
||||
{Platform.OS}
|
||||
</Text>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user