From 560722e8afe5cf9c1aa99366d5269369a6d61f47 Mon Sep 17 00:00:00 2001
From: Sergei <sergei@Sergeis-MacBook-Pro.local>
Date: Sat, 24 Jan 2026 20:41:36 -0800
Subject: [PATCH] fix: Tap on floating bubble ends the call
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed tap behavior on the floating call bubble to end the call
instead of maximizing it. Removed the separate small end call button
since it's no longer needed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/FloatingCallBubble.tsx | 30 ++++--------------------------
 1 file changed, 4 insertions(+), 26 deletions(-)

diff --git a/components/FloatingCallBubble.tsx b/components/FloatingCallBubble.tsx
index b80a39b..8323532 100644
--- a/components/FloatingCallBubble.tsx
+++ b/components/FloatingCallBubble.tsx
@@ -3,7 +3,7 @@
  *
  * Shows a floating bubble during active voice calls.
  * Can be dragged around the screen.
- * Tapping it returns to the full voice call screen.
+ * Tapping it ends the call.
  */
 
 import React, { useEffect, useRef, useState } from 'react';
@@ -15,9 +15,7 @@ import {
   Animated,
   PanResponder,
   Dimensions,
-  Platform,
 } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { AppColors, FontSizes, Spacing } from '@/constants/theme';
 import { useVoiceCall } from '@/contexts/VoiceCallContext';
@@ -26,7 +24,7 @@ const BUBBLE_SIZE = 70;
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
 
 export function FloatingCallBubble() {
-  const { callState, maximizeCall, endCall } = useVoiceCall();
+  const { callState, endCall } = useVoiceCall();
   const insets = useSafeAreaInsets();
 
   // Animation values
@@ -168,10 +166,10 @@ export function FloatingCallBubble() {
         ]}
       />
 
-      {/* Main bubble */}
+      {/* Main bubble - tap to end call */}
       <TouchableOpacity
         style={styles.bubble}
-        onPress={maximizeCall}
+        onPress={endCall}
         activeOpacity={0.9}
       >
         <View style={styles.avatarContainer}>
@@ -182,10 +180,6 @@ export function FloatingCallBubble() {
         </View>
       </TouchableOpacity>
 
-      {/* End call button */}
-      <TouchableOpacity style={styles.endButton} onPress={endCall}>
-        <Ionicons name="call" size={14} color={AppColors.white} style={{ transform: [{ rotate: '135deg' }] }} />
-      </TouchableOpacity>
     </Animated.View>
   );
 }
@@ -244,20 +238,4 @@ const styles = StyleSheet.create({
     color: AppColors.white,
     fontVariant: ['tabular-nums'],
   },
-  endButton: {
-    position: 'absolute',
-    top: -4,
-    right: -4,
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: AppColors.error,
-    justifyContent: 'center',
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
 });