From 9b4d39fdc54dafec5ed1b9580d2b338ab1e1f042 Mon Sep 17 00:00:00 2001
From: Sergei <serter2069@gmail.com>
Date: Tue, 27 Jan 2026 16:25:35 -0800
Subject: [PATCH] Integrate VoiceFAB into tabs layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add floating action button for voice calls to the tab bar layout:
- Import and render VoiceFAB component
- Add placeholder handler for voice call initiation
- Wrap Tabs in View to properly position FAB overlay
- FAB automatically hides when a call is active (via VoiceCallContext)

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/(tabs)/_layout.tsx | 174 +++++++++++++++++++++++------------------
 1 file changed, 97 insertions(+), 77 deletions(-)

diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index f4b6bf0..da6a42c 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,17 +1,32 @@
 import { Tabs } from 'expo-router';
-import React from 'react';
-import { Platform } from 'react-native';
+import React, { useCallback } from 'react';
+import { Platform, View, Alert } from 'react-native';
 import { Feather } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { HapticTab } from '@/components/haptic-tab';
+import { VoiceFAB } from '@/components/VoiceFAB';
 import { AppColors } from '@/constants/theme';
 import { useColorScheme } from '@/hooks/use-color-scheme';
+import { useVoiceCall } from '@/contexts/VoiceCallContext';
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
   const isDark = colorScheme === 'dark';
   const insets = useSafeAreaInsets();
+  // VoiceFAB uses VoiceCallContext internally to hide when call is active
+  useVoiceCall(); // Ensure context is available
+
+  // Handle voice FAB press - initiate voice call
+  const handleVoiceFABPress = useCallback(() => {
+    // TODO: Integrate with LiveKit voice call when ready
+    // For now, show placeholder alert
+    Alert.alert(
+      'Voice Call',
+      'Voice call with Julia AI will be available soon.',
+      [{ text: 'OK' }]
+    );
+  }, []);
 
   // Calculate tab bar height based on safe area
   // On iOS with home indicator, insets.bottom is ~34px
@@ -24,81 +39,86 @@ export default function TabLayout() {
   const tabBarHeight = 60 + bottomPadding; // 60px for content + safe area padding
 
   return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: AppColors.primary,
-        tabBarInactiveTintColor: isDark ? '#9BA1A6' : '#687076',
-        tabBarStyle: {
-          backgroundColor: isDark ? '#151718' : AppColors.background,
-          borderTopColor: isDark ? '#2D3135' : AppColors.border,
-          height: tabBarHeight,
-          paddingBottom: bottomPadding,
-          paddingTop: 10,
-        },
-        tabBarLabelStyle: {
-          fontSize: 11,
-          fontWeight: '500',
-        },
-        headerShown: false,
-        tabBarButton: HapticTab,
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Dashboard',
-          tabBarIcon: ({ color, size }) => (
-            <Feather name="grid" size={22} color={color} />
-          ),
+    <View style={{ flex: 1 }}>
+      <Tabs
+        screenOptions={{
+          tabBarActiveTintColor: AppColors.primary,
+          tabBarInactiveTintColor: isDark ? '#9BA1A6' : '#687076',
+          tabBarStyle: {
+            backgroundColor: isDark ? '#151718' : AppColors.background,
+            borderTopColor: isDark ? '#2D3135' : AppColors.border,
+            height: tabBarHeight,
+            paddingBottom: bottomPadding,
+            paddingTop: 10,
+          },
+          tabBarLabelStyle: {
+            fontSize: 11,
+            fontWeight: '500',
+          },
+          headerShown: false,
+          tabBarButton: HapticTab,
         }}
-      />
-      {/* Hide old dashboard - now index shows WebView dashboard */}
-      <Tabs.Screen
-        name="dashboard"
-        options={{
-          href: null,
-        }}
-      />
-      {/* Chat with Julia AI */}
-      <Tabs.Screen
-        name="chat"
-        options={{
-          title: 'Julia',
-          tabBarIcon: ({ color, size }) => (
-            <Feather name="message-circle" size={22} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="profile"
-        options={{
-          title: 'Profile',
-          tabBarIcon: ({ color, size }) => (
-            <Feather name="user" size={22} color={color} />
-          ),
-        }}
-      />
-      {/* Hide explore tab */}
-      <Tabs.Screen
-        name="explore"
-        options={{
-          href: null,
-        }}
-      />
-      {/* Audio Debug - hidden */}
-      <Tabs.Screen
-        name="audio-debug"
-        options={{
-          href: null,
-        }}
-      />
-      {/* Beneficiaries - hidden from tab bar but keeps tab bar visible */}
-      <Tabs.Screen
-        name="beneficiaries"
-        options={{
-          href: null,
-        }}
-      />
-    </Tabs>
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: 'Dashboard',
+            tabBarIcon: ({ color, size }) => (
+              <Feather name="grid" size={22} color={color} />
+            ),
+          }}
+        />
+        {/* Hide old dashboard - now index shows WebView dashboard */}
+        <Tabs.Screen
+          name="dashboard"
+          options={{
+            href: null,
+          }}
+        />
+        {/* Chat with Julia AI */}
+        <Tabs.Screen
+          name="chat"
+          options={{
+            title: 'Julia',
+            tabBarIcon: ({ color, size }) => (
+              <Feather name="message-circle" size={22} color={color} />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="profile"
+          options={{
+            title: 'Profile',
+            tabBarIcon: ({ color, size }) => (
+              <Feather name="user" size={22} color={color} />
+            ),
+          }}
+        />
+        {/* Hide explore tab */}
+        <Tabs.Screen
+          name="explore"
+          options={{
+            href: null,
+          }}
+        />
+        {/* Audio Debug - hidden */}
+        <Tabs.Screen
+          name="audio-debug"
+          options={{
+            href: null,
+          }}
+        />
+        {/* Beneficiaries - hidden from tab bar but keeps tab bar visible */}
+        <Tabs.Screen
+          name="beneficiaries"
+          options={{
+            href: null,
+          }}
+        />
+      </Tabs>
+
+      {/* Voice FAB - shown when no call is active */}
+      <VoiceFAB onPress={handleVoiceFABPress} />
+    </View>
   );
 }