From a3f892ddaceff613e8577be85e2c48e7b5d8eacf Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Tue, 12 May 2026 23:39:22 +0200
Subject: [PATCH] fix(native/mail): duplicate add-button in empty state + intro
 hints in ConnectMailSheet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- mail.tsx: hide section-header "+" button when accounts.length === 0 — MailEmptyState's CTA is the sole add trigger; also replaces Pressable with TouchableOpacity
- MailEmptyState: Pressable → TouchableOpacity (no-Pressable rule)
- SheetFieldStack: add optional `intro?: ReactNode` prop rendered in a flexShrink:1 ScrollView above chips/active-input so it compresses gracefully when the keyboard is up
- ConnectMailSheet: move app-password guide + green AES block into `intro` prop so they're visible from the start, before the user types anything

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/rebreak-native/app/(app)/mail.tsx        | 108 ++++---
 .../components/SheetFieldStack.tsx            | 270 ++++++++++--------
 .../components/mail/ConnectMailSheet.tsx      | 151 +++++-----
 .../components/mail/MailEmptyState.tsx        |  12 +-
 4 files changed, 280 insertions(+), 261 deletions(-)

diff --git a/apps/rebreak-native/app/(app)/mail.tsx b/apps/rebreak-native/app/(app)/mail.tsx
index 1c8eab4..9a29a52 100644
--- a/apps/rebreak-native/app/(app)/mail.tsx
+++ b/apps/rebreak-native/app/(app)/mail.tsx
@@ -5,6 +5,7 @@ import {
   Pressable,
   ScrollView,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import { useBottomTabBarHeight } from 'react-native-bottom-tabs';
@@ -173,62 +174,59 @@ export default function MailScreen() {
           </View>
         )}
 
-        {/* Section header with prominent + button */}
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginBottom: 10,
-            paddingHorizontal: 2,
-          }}
-        >
-          <View style={{ flex: 1, marginRight: 10 }}>
-            <Text
-              style={{
-                fontSize: 11,
-                fontFamily: 'Nunito_700Bold',
-                color: colors.textMuted,
-                textTransform: 'uppercase',
-                letterSpacing: 0.8,
-              }}
-            >
-              {t('mail.section_accounts')}
-            </Text>
-            <Text
-              style={{
-                fontSize: 11,
-                fontFamily: 'Nunito_400Regular',
-                color: colors.textMuted,
-                marginTop: 2,
-              }}
-            >
-              {maxAccounts === Infinity
-                ? t('mail.section_accounts_count_unlimited', { used: accounts.length })
-                : t('mail.section_accounts_count', {
-                    used: accounts.length,
-                    max: maxAccounts,
-                  })}
-            </Text>
-          </View>
-
-          <Pressable
-            onPress={handleAddPress}
-            disabled={limitReached}
-            android_ripple={{ color: '#0066cc' }}
+        {/* Section header with prominent + button — hidden in empty state (CTA lives there) */}
+        {accounts.length > 0 && (
+          <View
             style={{
-              backgroundColor: limitReached ? colors.surfaceElevated : '#007AFF',
-              borderRadius: 12,
-              opacity: limitReached ? 0.7 : 1,
-              shadowColor: '#007AFF',
-              shadowOffset: { width: 0, height: 4 },
-              shadowOpacity: limitReached ? 0 : 0.25,
-              shadowRadius: 8,
-              elevation: limitReached ? 0 : 4,
+              flexDirection: 'row',
+              alignItems: 'center',
+              marginBottom: 10,
+              paddingHorizontal: 2,
             }}
-            accessibilityLabel={t('mail.add_account_a11y')}
           >
-            <View
+            <View style={{ flex: 1, marginRight: 10 }}>
+              <Text
+                style={{
+                  fontSize: 11,
+                  fontFamily: 'Nunito_700Bold',
+                  color: colors.textMuted,
+                  textTransform: 'uppercase',
+                  letterSpacing: 0.8,
+                }}
+              >
+                {t('mail.section_accounts')}
+              </Text>
+              <Text
+                style={{
+                  fontSize: 11,
+                  fontFamily: 'Nunito_400Regular',
+                  color: colors.textMuted,
+                  marginTop: 2,
+                }}
+              >
+                {maxAccounts === Infinity
+                  ? t('mail.section_accounts_count_unlimited', { used: accounts.length })
+                  : t('mail.section_accounts_count', {
+                      used: accounts.length,
+                      max: maxAccounts,
+                    })}
+              </Text>
+            </View>
+
+            <TouchableOpacity
+              onPress={handleAddPress}
+              disabled={limitReached}
+              activeOpacity={limitReached ? 1 : 0.8}
+              accessibilityLabel={t('mail.add_account_a11y')}
               style={{
+                backgroundColor: limitReached ? colors.surfaceElevated : '#007AFF',
+                borderRadius: 12,
+                opacity: limitReached ? 0.7 : 1,
+                shadowColor: '#007AFF',
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: limitReached ? 0 : 0.25,
+                shadowRadius: 8,
+                elevation: limitReached ? 0 : 4,
                 flexDirection: 'row',
                 alignItems: 'center',
                 paddingHorizontal: 14,
@@ -250,9 +248,9 @@ export default function MailScreen() {
               >
                 {t('mail.add_account')}
               </Text>
-            </View>
-          </Pressable>
-        </View>
+            </TouchableOpacity>
+          </View>
+        )}
 
         {/* Account cards or empty */}
         {accounts.length === 0 ? (
diff --git a/apps/rebreak-native/components/SheetFieldStack.tsx b/apps/rebreak-native/components/SheetFieldStack.tsx
index 35febfb..5185efa 100644
--- a/apps/rebreak-native/components/SheetFieldStack.tsx
+++ b/apps/rebreak-native/components/SheetFieldStack.tsx
@@ -27,6 +27,13 @@ export type SheetField = {
 
 type Props = {
   fields: SheetField[];
+  /**
+   * Immer sichtbarer Bereich über Chips + aktivem Input — für Hinweise, die der User
+   * sehen soll BEVOR er tippt. Wird in einer eigenen ScrollView mit `flexShrink:1`
+   * gerendert, sodass er bei kleinem verfügbaren Platz (Tastatur offen) schrumpft,
+   * der Eingabebereich aber nie weggedrückt wird.
+   */
+  intro?: ReactNode;
   /** Rendert sich nach dem letzten Feld — sichtbar sobald alle Felder ausgefüllt sind. */
   children?: ReactNode;
   onComplete?: () => void;
@@ -41,7 +48,7 @@ type Props = {
  *
  * Wird als `children` von `<FormSheet>` benutzt.
  */
-export function SheetFieldStack({ fields, children, onComplete }: Props) {
+export function SheetFieldStack({ fields, intro, children, onComplete }: Props) {
   const colors = useColors();
   const [activeIndex, setActiveIndex] = useState(0);
   const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
@@ -84,142 +91,157 @@ export function SheetFieldStack({ fields, children, onComplete }: Props) {
   const isLast = activeIndex === fields.length - 1;
 
   return (
-    <ScrollView
-      style={{ flex: 1 }}
-      contentContainerStyle={{ padding: 16, gap: 10 }}
-      keyboardShouldPersistTaps="handled"
-      showsVerticalScrollIndicator={false}
-    >
-      {/* Abgeschlossene Felder als Chips */}
-      {fields.slice(0, activeIndex).map((field, index) => (
-        <TouchableOpacity
-          key={field.key}
-          activeOpacity={0.7}
-          onPress={() => goToField(index)}
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: colors.surface,
-            borderWidth: 1,
-            borderColor: colors.border,
-            borderRadius: 12,
-            paddingHorizontal: 14,
-            paddingVertical: 10,
-            gap: 10,
-          }}
+    <View style={{ flex: 1 }}>
+      {/* Intro: immer sichtbar, schrumpft bei wenig Platz (Tastatur offen) */}
+      {intro != null && (
+        <ScrollView
+          style={{ flexShrink: 1 }}
+          contentContainerStyle={{ padding: 16, paddingBottom: 0 }}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
         >
-          <View style={{ flex: 1 }}>
-            <Text
-              style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: colors.textMuted }}
-            >
-              {field.label}
-            </Text>
-            <Text
-              style={{ fontSize: 14, fontFamily: 'Nunito_400Regular', color: colors.text, marginTop: 1 }}
-              numberOfLines={1}
-            >
-              {field.secureTextEntry ? '••••••••' : field.value}
-            </Text>
-          </View>
-          <Ionicons name="pencil-outline" size={14} color={colors.textMuted} />
-        </TouchableOpacity>
-      ))}
+          {intro}
+        </ScrollView>
+      )}
 
-      {/* Aktives Feld */}
-      {!allDone && (
-        <View>
-          <Text
+      {/* Chips + aktives Feld + Post-Completion-Inhalt */}
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ padding: 16, paddingTop: intro != null ? 10 : 16, gap: 10 }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Abgeschlossene Felder als Chips */}
+        {fields.slice(0, activeIndex).map((field, index) => (
+          <TouchableOpacity
+            key={field.key}
+            activeOpacity={0.7}
+            onPress={() => goToField(index)}
             style={{
-              fontSize: 12,
-              fontFamily: 'Nunito_600SemiBold',
-              color: colors.textMuted,
-              marginBottom: 6,
+              flexDirection: 'row',
+              alignItems: 'center',
+              backgroundColor: colors.surface,
+              borderWidth: 1,
+              borderColor: colors.border,
+              borderRadius: 12,
+              paddingHorizontal: 14,
+              paddingVertical: 10,
+              gap: 10,
             }}
           >
-            {fields[activeIndex].label}
-          </Text>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <View
-              style={{
-                flex: 1,
-                flexDirection: 'row',
-                alignItems: 'center',
-                backgroundColor: colors.surfaceElevated,
-                borderRadius: 12,
-                paddingHorizontal: 14,
-                borderWidth: fieldErrors[fields[activeIndex].key] ? 1 : 0,
-                borderColor: '#dc2626',
-              }}
-            >
-              <TextInput
-                autoFocus
-                value={fields[activeIndex].value}
-                onChangeText={(v) => {
-                  fields[activeIndex].onChangeText(v);
-                  if (fieldErrors[fields[activeIndex].key]) {
-                    setFieldErrors((prev) => {
-                      const next = { ...prev };
-                      delete next[fields[activeIndex].key];
-                      return next;
-                    });
-                  }
-                }}
-                placeholder={fields[activeIndex].placeholder}
-                placeholderTextColor={colors.textMuted}
-                keyboardType={fields[activeIndex].keyboardType ?? 'default'}
-                secureTextEntry={fields[activeIndex].secureTextEntry}
-                autoCapitalize={fields[activeIndex].autoCapitalize ?? 'sentences'}
-                autoCorrect={fields[activeIndex].autoCorrect ?? true}
-                returnKeyType={isLast ? 'done' : 'next'}
-                onSubmitEditing={advanceOrFinish}
-                blurOnSubmit={false}
-                style={{
-                  flex: 1,
-                  paddingVertical: 12,
-                  fontSize: 15,
-                  fontFamily: 'Nunito_400Regular',
-                  color: colors.text,
-                }}
-              />
-              {fields[activeIndex].suffix}
+            <View style={{ flex: 1 }}>
+              <Text
+                style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: colors.textMuted }}
+              >
+                {field.label}
+              </Text>
+              <Text
+                style={{ fontSize: 14, fontFamily: 'Nunito_400Regular', color: colors.text, marginTop: 1 }}
+                numberOfLines={1}
+              >
+                {field.secureTextEntry ? '••••••••' : field.value}
+              </Text>
             </View>
+            <Ionicons name="pencil-outline" size={14} color={colors.textMuted} />
+          </TouchableOpacity>
+        ))}
 
-            <TouchableOpacity
-              activeOpacity={0.8}
-              onPress={advanceOrFinish}
-              style={{
-                width: 44,
-                height: 44,
-                borderRadius: 22,
-                backgroundColor: colors.brandOrange,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <Ionicons
-                name={isLast ? 'checkmark' : 'arrow-forward'}
-                size={20}
-                color="#fff"
-              />
-            </TouchableOpacity>
-          </View>
-          {fieldErrors[fields[activeIndex].key] && (
+        {/* Aktives Feld */}
+        {!allDone && (
+          <View>
             <Text
               style={{
                 fontSize: 12,
-                fontFamily: 'Nunito_400Regular',
-                color: '#dc2626',
-                marginTop: 4,
+                fontFamily: 'Nunito_600SemiBold',
+                color: colors.textMuted,
+                marginBottom: 6,
               }}
             >
-              {fieldErrors[fields[activeIndex].key]}
+              {fields[activeIndex].label}
             </Text>
-          )}
-        </View>
-      )}
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <View
+                style={{
+                  flex: 1,
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  backgroundColor: colors.surfaceElevated,
+                  borderRadius: 12,
+                  paddingHorizontal: 14,
+                  borderWidth: fieldErrors[fields[activeIndex].key] ? 1 : 0,
+                  borderColor: '#dc2626',
+                }}
+              >
+                <TextInput
+                  autoFocus
+                  value={fields[activeIndex].value}
+                  onChangeText={(v) => {
+                    fields[activeIndex].onChangeText(v);
+                    if (fieldErrors[fields[activeIndex].key]) {
+                      setFieldErrors((prev) => {
+                        const next = { ...prev };
+                        delete next[fields[activeIndex].key];
+                        return next;
+                      });
+                    }
+                  }}
+                  placeholder={fields[activeIndex].placeholder}
+                  placeholderTextColor={colors.textMuted}
+                  keyboardType={fields[activeIndex].keyboardType ?? 'default'}
+                  secureTextEntry={fields[activeIndex].secureTextEntry}
+                  autoCapitalize={fields[activeIndex].autoCapitalize ?? 'sentences'}
+                  autoCorrect={fields[activeIndex].autoCorrect ?? true}
+                  returnKeyType={isLast ? 'done' : 'next'}
+                  onSubmitEditing={advanceOrFinish}
+                  blurOnSubmit={false}
+                  style={{
+                    flex: 1,
+                    paddingVertical: 12,
+                    fontSize: 15,
+                    fontFamily: 'Nunito_400Regular',
+                    color: colors.text,
+                  }}
+                />
+                {fields[activeIndex].suffix}
+              </View>
 
-      {/* Rest des Formulars — sichtbar wenn alle Felder durch */}
-      {allDone && children}
-    </ScrollView>
+              <TouchableOpacity
+                activeOpacity={0.8}
+                onPress={advanceOrFinish}
+                style={{
+                  width: 44,
+                  height: 44,
+                  borderRadius: 22,
+                  backgroundColor: colors.brandOrange,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Ionicons
+                  name={isLast ? 'checkmark' : 'arrow-forward'}
+                  size={20}
+                  color="#fff"
+                />
+              </TouchableOpacity>
+            </View>
+            {fieldErrors[fields[activeIndex].key] && (
+              <Text
+                style={{
+                  fontSize: 12,
+                  fontFamily: 'Nunito_400Regular',
+                  color: '#dc2626',
+                  marginTop: 4,
+                }}
+              >
+                {fieldErrors[fields[activeIndex].key]}
+              </Text>
+            )}
+          </View>
+        )}
+
+        {/* Rest des Formulars — sichtbar wenn alle Felder durch */}
+        {allDone && children}
+      </ScrollView>
+    </View>
   );
 }
diff --git a/apps/rebreak-native/components/mail/ConnectMailSheet.tsx b/apps/rebreak-native/components/mail/ConnectMailSheet.tsx
index e746531..40e17b5 100644
--- a/apps/rebreak-native/components/mail/ConnectMailSheet.tsx
+++ b/apps/rebreak-native/components/mail/ConnectMailSheet.tsx
@@ -189,92 +189,93 @@ export function ConnectMailSheet({ visible, onClose, onSuccess }: Props) {
               ),
             },
           ]}
-          onComplete={() => setFieldsComplete(true)}
-        >
-          {/* App-Password-Guide — über den Datenschutz-Hinweis */}
-          {selectedProvider && selectedProvider.id !== 'other' && (
-            <View
-              style={{
-                flexDirection: 'row',
-                gap: 10,
-                padding: 12,
-                backgroundColor: '#f0f7ff',
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: '#bfdbfe',
-                marginBottom: 10,
-              }}
-            >
-              <Ionicons
-                name="information-circle"
-                size={18}
-                color="#1d4ed8"
-                style={{ marginTop: 1 }}
-              />
-              <View style={{ flex: 1, gap: 4 }}>
-                <Text
-                  style={{ fontSize: 12, fontFamily: 'Nunito_600SemiBold', color: '#1e3a8a' }}
-                >
-                  {t('mail.app_password_required_title')}
-                </Text>
-                <Text
+          intro={
+            <View style={{ gap: 10 }}>
+              {/* App-Password-Guide — provider-spezifisch, nicht für 'other' */}
+              {selectedProvider && selectedProvider.id !== 'other' && (
+                <View
                   style={{
-                    fontSize: 12,
-                    fontFamily: 'Nunito_400Regular',
-                    color: '#1d4ed8',
-                    lineHeight: 17,
+                    flexDirection: 'row',
+                    gap: 10,
+                    padding: 12,
+                    backgroundColor: '#f0f7ff',
+                    borderRadius: 12,
+                    borderWidth: 1,
+                    borderColor: '#bfdbfe',
                   }}
                 >
-                  {t(selectedProvider.guideKey)}
-                </Text>
-                {selectedProvider.guideUrl.length > 0 && (
-                  <TouchableOpacity
-                    activeOpacity={0.7}
-                    onPress={() => Linking.openURL(selectedProvider.guideUrl)}
-                  >
+                  <Ionicons
+                    name="information-circle"
+                    size={18}
+                    color="#1d4ed8"
+                    style={{ marginTop: 1 }}
+                  />
+                  <View style={{ flex: 1, gap: 4 }}>
+                    <Text
+                      style={{ fontSize: 12, fontFamily: 'Nunito_600SemiBold', color: '#1e3a8a' }}
+                    >
+                      {t('mail.app_password_required_title')}
+                    </Text>
                     <Text
                       style={{
                         fontSize: 12,
-                        fontFamily: 'Nunito_600SemiBold',
-                        color: '#007AFF',
-                        marginTop: 2,
+                        fontFamily: 'Nunito_400Regular',
+                        color: '#1d4ed8',
+                        lineHeight: 17,
                       }}
                     >
-                      {t('mail.app_password_open_link')} →
+                      {t(selectedProvider.guideKey)}
                     </Text>
-                  </TouchableOpacity>
-                )}
+                    {selectedProvider.guideUrl.length > 0 && (
+                      <TouchableOpacity
+                        activeOpacity={0.7}
+                        onPress={() => Linking.openURL(selectedProvider.guideUrl)}
+                      >
+                        <Text
+                          style={{
+                            fontSize: 12,
+                            fontFamily: 'Nunito_600SemiBold',
+                            color: '#007AFF',
+                            marginTop: 2,
+                          }}
+                        >
+                          {t('mail.app_password_open_link')} →
+                        </Text>
+                      </TouchableOpacity>
+                    )}
+                  </View>
+                </View>
+              )}
+
+              {/* Datenschutz-Zusicherung — immer sichtbar */}
+              <View
+                style={{
+                  flexDirection: 'row',
+                  gap: 8,
+                  padding: 12,
+                  backgroundColor: '#f0fdf4',
+                  borderRadius: 12,
+                  borderWidth: 1,
+                  borderColor: '#bbf7d0',
+                }}
+              >
+                <Ionicons name="shield-checkmark" size={16} color="#16a34a" style={{ marginTop: 1 }} />
+                <Text
+                  style={{
+                    flex: 1,
+                    fontSize: 12,
+                    fontFamily: 'Nunito_400Regular',
+                    color: '#166534',
+                    lineHeight: 17,
+                  }}
+                >
+                  {t('mail.form_privacy_note')}
+                </Text>
               </View>
             </View>
-          )}
-
-          {/* Datenschutz-Hinweis */}
-          <View
-            style={{
-              flexDirection: 'row',
-              gap: 8,
-              padding: 12,
-              backgroundColor: '#f0fdf4',
-              borderRadius: 12,
-              borderWidth: 1,
-              borderColor: '#bbf7d0',
-              marginBottom: 10,
-            }}
-          >
-            <Ionicons name="shield-checkmark" size={16} color="#16a34a" style={{ marginTop: 1 }} />
-            <Text
-              style={{
-                flex: 1,
-                fontSize: 12,
-                fontFamily: 'Nunito_400Regular',
-                color: '#166534',
-                lineHeight: 17,
-              }}
-            >
-              {t('mail.form_privacy_note')}
-            </Text>
-          </View>
-
+          }
+          onComplete={() => setFieldsComplete(true)}
+        >
           {/* Fehler */}
           {(formError ?? (connectError ? t(humanizeMailError(connectError)) : null)) && (
             <Text
diff --git a/apps/rebreak-native/components/mail/MailEmptyState.tsx b/apps/rebreak-native/components/mail/MailEmptyState.tsx
index c6765e0..dfbf83d 100644
--- a/apps/rebreak-native/components/mail/MailEmptyState.tsx
+++ b/apps/rebreak-native/components/mail/MailEmptyState.tsx
@@ -1,4 +1,4 @@
-import { Pressable, Text, View } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useTranslation } from 'react-i18next';
 import { useColors } from '../../lib/theme';
@@ -81,12 +81,10 @@ export function MailEmptyState({ onConnectPress }: Props) {
       </View>
 
       {/* CTA */}
-      <Pressable
+      <TouchableOpacity
         onPress={onConnectPress}
-        style={({ pressed }) => ({
-          opacity: pressed ? 0.85 : 1,
-          alignSelf: 'stretch',
-        })}
+        activeOpacity={0.85}
+        style={{ alignSelf: 'stretch' }}
       >
         <View style={{
           backgroundColor: '#007AFF',
@@ -99,7 +97,7 @@ export function MailEmptyState({ onConnectPress }: Props) {
             {t('mail.empty_state_cta')}
           </Text>
         </View>
-      </Pressable>
+      </TouchableOpacity>
     </View>
   );
 }