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>

apps/rebreak-native/app/settings.tsx

@@ -1,15 +1,20 @@
-import { ScrollView, View, Text, Pressable, Platform } from 'react-native';
+import { Alert, Platform, Pressable, ScrollView, Text, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+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={{ flex: 1, backgroundColor: colors.bg }}>
-      <View
+      <AppHeader showBack title={t('settings.title')} />
-        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>
 
       <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,
+                      width: 36,
-                      height: 32,
+                      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,
+                        fontSize: 15,
-                        color: '#737373',
+                        color: row.destructive ? colors.error : colors.text,
-                        fontFamily: 'Nunito_400Regular',
+                        fontFamily: 'Nunito_600SemiBold',
-                        marginTop: 2,
                       }}
                     >
-                      {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
+                  {row.soon ? (
-                    style={{
+                    <Text
-                      fontSize: 10,
+                      style={{
-                      color: '#a3a3a3',
+                        fontSize: 10,
-                      fontFamily: 'Nunito_600SemiBold',
+                        color: '#a3a3a3',
-                      textTransform: 'uppercase',
+                        fontFamily: 'Nunito_600SemiBold',
-                      letterSpacing: 0.5,
+                        textTransform: 'uppercase',
-                    }}
+                        letterSpacing: 0.5,
-                  >
+                        flexShrink: 0,
-                    {t('settings.soon_badge')}
+                      }}
-                  </Text>
+                    >
-                </View>
+                      {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>
   );
 }