From e9a9bd88803275d02d4b874d442e904bbd8bf007 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Thu, 7 May 2026 20:36:10 +0200
Subject: [PATCH] feat(ui): SOS-Page LLM/TTS-Toggles raus +
 DemographicsAccordion FieldRow flex fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- urge.tsx: TtsProviderToggle + LlmProviderToggle entfernt (Testing durch);
  Core-Logic (useTtsProvider, currentLlmProvider, BenchSession) bleibt für
  spätere Debug-Page intakt
- DemographicsAccordion FieldRow: flex:1 auf Label-Text, kein flexShrink-
  Wrapper mehr nötig; Label+Input wrappen nicht mehr auf schmalen Devices

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/rebreak-native/app/urge.tsx                 | 16 +++-------------
 .../components/profile/DemographicsAccordion.tsx |  3 ++-
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/apps/rebreak-native/app/urge.tsx b/apps/rebreak-native/app/urge.tsx
index 1fc0c98..a4a85a3 100644
--- a/apps/rebreak-native/app/urge.tsx
+++ b/apps/rebreak-native/app/urge.tsx
@@ -30,9 +30,7 @@ import { CHIP_SETS, BREATH_PHASES, type ChipSet } from '../lib/sosConstants';
 import { parseLyraResponse, detectEmotion, type LyraEmotion, type ChipSpec } from '../lib/lyraResponse';
 import { streamSosLyra } from '../lib/sosStream';
 import { SosTtsQueue } from '../lib/sosTtsQueue';
-import { endpointForProvider, useTtsProvider, currentProvider, type TtsProvider } from '../lib/ttsProvider';
-import { TtsProviderToggle } from '../components/urge/TtsProviderToggle';
-import { LlmProviderToggle } from '../components/urge/LlmProviderToggle';
+import { endpointForProvider, useTtsProvider, currentProvider } from '../lib/ttsProvider';
 import { currentLlmProvider } from '../lib/llmProvider';
 import { BenchSession } from '../lib/sosTtsBenchmark';
 
@@ -101,14 +99,13 @@ export default function SOSScreen() {
 
   useEffect(() => { soundEnabledRef.current = soundEnabled; }, [soundEnabled]);
 
-  // Aktueller TTS-Provider — currentProvider() liest immer den frischen Wert,
-  // ttsProvider state ist nur für UI-Re-Renders + cache-invalidation hier.
+  // ttsProvider state: Änderungen invalidieren den Atemübungs-Audio-Cache unten.
   const [ttsProvider] = useTtsProvider();
 
   // Pre-cache der Atemübungs-Voice-Cues (Einatmen / Halten / Ausatmen).
   // Bei Phase-Wechsel im BreathingDrawer kommt das Audio sofort statt mit
   // ~600ms TTS-Roundtrip — so bleibt Voice synchron mit der Pulse-Animation.
-  // Cache wird invalidiert wenn User den TTS-Provider wechselt.
+  // Cache wird invalidiert wenn der TTS-Provider wechselt.
   const breathAudioCacheRef = useRef<Map<string, string>>(new Map());
   useEffect(() => {
     breathAudioCacheRef.current.clear();
@@ -240,7 +237,6 @@ export default function SOSScreen() {
     const session = (await supabase.auth.getSession()).data.session;
     if (controller.signal.aborted) return null;
     const apiBase = Constants.expoConfig?.extra?.apiUrl as string;
-    // Endpoint folgt User-Provider-Toggle (TtsProviderToggle im SOS-Header).
     const endpoint = endpointForProvider(currentProvider());
     const isGoogleCloud = endpoint.endsWith('/speak-google');
     const ttsRes = await fetch(`${apiBase}${endpoint}`, {
@@ -1125,11 +1121,6 @@ export default function SOSScreen() {
         </Pressable>
       </View>
 
-      <View style={[st.ttsToggleBar, { top: topBarHeight - 36 }]} pointerEvents="box-none">
-        <TtsProviderToggle />
-        <LlmProviderToggle />
-      </View>
-
       {playingGame ? (
         <View style={{ flex: 1 }}>
           <GameHeader game={playingGame} emotion={emotion} onBack={handleGameAbandon} />
@@ -1298,7 +1289,6 @@ const st = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#ffffff' },
   topBar: { position: 'absolute', left: 0, right: 0, zIndex: 10, flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between', paddingHorizontal: 12 },
   topBarBackdrop: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 9, backgroundColor: '#ffffff' },
-  ttsToggleBar: { position: "absolute", left: 0, right: 0, zIndex: 11, alignItems: "center" },
   actionBtn: { width: 40, height: 40, borderRadius: 20, backgroundColor: 'rgba(255,255,255,0.92)', alignItems: 'center', justifyContent: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.08, shadowRadius: 6, elevation: 4 },
   avatarCenter: { flex: 1, alignItems: 'center', gap: 4 },
   avatarMeta: { alignItems: 'center', gap: 2 },
diff --git a/apps/rebreak-native/components/profile/DemographicsAccordion.tsx b/apps/rebreak-native/components/profile/DemographicsAccordion.tsx
index 0ebe40e..95a3024 100644
--- a/apps/rebreak-native/components/profile/DemographicsAccordion.tsx
+++ b/apps/rebreak-native/components/profile/DemographicsAccordion.tsx
@@ -454,6 +454,7 @@ function FieldRow({
       >
         <Text
           style={{
+            flex: 1,
             fontSize: 13,
             color: colors.text,
             fontFamily: 'Nunito_600SemiBold',
@@ -461,7 +462,7 @@ function FieldRow({
         >
           {label}
         </Text>
-        <View style={{ flexShrink: 1 }}>{children}</View>
+        {children}
       </View>
       <Text
         style={{