feat: Update call UI

app/AppContainer.tsx

@@ -19,7 +19,7 @@ import { ThemeContext } from './theme';
 import { setCurrentScreen } from './lib/methods/helpers/log';
 import { themes } from './lib/constants/colors';
 import { emitter } from './lib/methods/helpers';
-import CallHeader from './containers/CallHeader/CallHeader';
+import MediaCallHeader from './containers/MediaCallHeader/MediaCallHeader';
 
 const createStackNavigator = createNativeStackNavigator;
 
@@ -53,7 +53,7 @@ const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: bool
 
 	return (
 		<>
-			<CallHeader />
+			<MediaCallHeader />
 			<NavigationContainer
 				theme={navTheme}
 				ref={Navigation.navigationRef}

app/containers/MediaCallHeader/MediaCallHeader.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import MediaCallHeader from './MediaCallHeader';
+import { useCallStore } from '../../lib/services/voip/useCallStore';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1
+	}
+});
+
+const mockCallStartTime = 1713340800000;
+
+// Helper to set store state for stories
+const setStoreState = (overrides: Partial<ReturnType<typeof useCallStore.getState>> = {}) => {
+	const mockCall = {
+		state: 'active',
+		muted: false,
+		held: false,
+		contact: {
+			displayName: 'Bob Burnquist',
+			username: 'bob.burnquist',
+			sipExtension: '2244'
+		},
+		setMuted: () => {},
+		setHeld: () => {},
+		hangup: () => {},
+		reject: () => {},
+		emitter: {
+			on: () => {},
+			off: () => {}
+		}
+	} as any;
+
+	useCallStore.setState({
+		call: mockCall,
+		callUUID: 'test-uuid',
+		callState: 'active',
+		isMuted: false,
+		isOnHold: false,
+		isSpeakerOn: false,
+		callStartTime: mockCallStartTime,
+		contact: {
+			id: 'user-1',
+			displayName: 'Bob Burnquist',
+			username: 'bob.burnquist',
+			sipExtension: '2244'
+		},
+		focused: true,
+		remoteMute: false,
+		remoteHeld: false,
+		...overrides
+	});
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => <View style={styles.container}>{children}</View>;
+
+export default {
+	title: 'MediaCallHeader',
+	component: MediaCallHeader,
+	decorators: [
+		(Story: React.ComponentType) => (
+			<Wrapper>
+				<Story />
+			</Wrapper>
+		)
+	]
+};
+
+export const NoCall = () => {
+	useCallStore.setState({ call: null });
+	return <MediaCallHeader />;
+};
+
+export const ActiveCall = () => {
+	setStoreState({ callState: 'active', callStartTime: mockCallStartTime });
+	return <MediaCallHeader />;
+};
+
+export const ConnectingCall = () => {
+	setStoreState({ callState: 'accepted', callStartTime: null });
+	return <MediaCallHeader />;
+};
+
+export const Focused = () => {
+	setStoreState({ focused: true });
+	return <MediaCallHeader />;
+};
+
+export const Collapsed = () => {
+	setStoreState({ focused: false });
+	return <MediaCallHeader />;
+};
+
+export const WithRemoteHeld = () => {
+	setStoreState({ callState: 'active', remoteHeld: true });
+	return <MediaCallHeader />;
+};
+
+export const WithRemoteMuted = () => {
+	setStoreState({ callState: 'active', remoteMute: true });
+	return <MediaCallHeader />;
+};

app/containers/MediaCallHeader/MediaCallHeader.test.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+
+import MediaCallHeader from './MediaCallHeader';
+import { useCallStore } from '../../lib/services/voip/useCallStore';
+import { mockedStore } from '../../reducers/mockedStore';
+import * as stories from './MediaCallHeader.stories';
+import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+
+// Mock alert
+global.alert = jest.fn();
+
+// Helper to create a mock call
+const createMockCall = (overrides: Record<string, unknown> = {}) => ({
+	state: 'active',
+	muted: false,
+	held: false,
+	contact: {
+		displayName: 'Bob Burnquist',
+		username: 'bob.burnquist',
+		sipExtension: '2244'
+	},
+	setMuted: jest.fn(),
+	setHeld: jest.fn(),
+	hangup: jest.fn(),
+	reject: jest.fn(),
+	emitter: {
+		on: jest.fn(),
+		off: jest.fn()
+	},
+	...overrides
+});
+
+// Helper to set store state for tests
+const setStoreState = (overrides: Partial<ReturnType<typeof useCallStore.getState>> = {}) => {
+	const mockCall = createMockCall();
+	useCallStore.setState({
+		call: mockCall as any,
+		callUUID: 'test-uuid',
+		callState: 'active',
+		isMuted: false,
+		isOnHold: false,
+		isSpeakerOn: false,
+		callStartTime: Date.now(),
+		contact: {
+			id: 'user-1',
+			displayName: 'Bob Burnquist',
+			username: 'bob.burnquist',
+			sipExtension: '2244'
+		},
+		focused: true,
+		remoteMute: false,
+		remoteHeld: false,
+		...overrides
+	});
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+	<Provider store={mockedStore}>{children}</Provider>
+);
+
+describe('MediaCallHeader', () => {
+	beforeEach(() => {
+		useCallStore.getState().reset();
+		jest.clearAllMocks();
+	});
+
+	it('should render empty placeholder when there is no call', () => {
+		useCallStore.setState({ call: null });
+		const { getByTestId, queryByTestId } = render(
+			<Wrapper>
+				<MediaCallHeader />
+			</Wrapper>
+		);
+
+		expect(getByTestId('media-call-header-empty')).toBeTruthy();
+		expect(queryByTestId('media-call-header')).toBeNull();
+		expect(queryByTestId('media-call-header-collapse')).toBeNull();
+		expect(queryByTestId('media-call-header-content')).toBeNull();
+		expect(queryByTestId('media-call-header-end')).toBeNull();
+	});
+
+	it('should render full header when call exists', () => {
+		setStoreState();
+		const { getByTestId } = render(
+			<Wrapper>
+				<MediaCallHeader />
+			</Wrapper>
+		);
+
+		expect(getByTestId('media-call-header')).toBeTruthy();
+		expect(getByTestId('media-call-header-collapse')).toBeTruthy();
+		expect(getByTestId('media-call-header-content')).toBeTruthy();
+		expect(getByTestId('media-call-header-end')).toBeTruthy();
+	});
+
+	it('should show caller name in Title', () => {
+		setStoreState({
+			contact: {
+				id: 'user-1',
+				displayName: 'Alice Smith',
+				username: 'alice.smith',
+				sipExtension: '1234'
+			}
+		});
+		const { getByTestId, getByText } = render(
+			<Wrapper>
+				<MediaCallHeader />
+			</Wrapper>
+		);
+
+		expect(getByTestId('call-view-header-title')).toBeTruthy();
+		// Title renders name plus optional Timer in nested Text; match by regex
+		expect(getByText(/Alice Smith/)).toBeTruthy();
+	});
+
+	it('should show subtitle when connecting', () => {
+		setStoreState({ callState: 'ringing' });
+		const { getByTestId } = render(
+			<Wrapper>
+				<MediaCallHeader />
+			</Wrapper>
+		);
+
+		expect(getByTestId('call-view-header-subtitle')).toBeTruthy();
+	});
+
+	it('should call toggleFocus when collapse button is pressed', () => {
+		setStoreState();
+		const toggleFocus = jest.fn();
+		useCallStore.setState({ toggleFocus });
+
+		const { getByTestId } = render(
+			<Wrapper>
+				<MediaCallHeader />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('media-call-header-collapse'));
+		expect(toggleFocus).toHaveBeenCalledTimes(1);
+	});
+
+	it('should call endCall when end button is pressed', () => {
+		setStoreState();
+		const endCall = jest.fn();
+		useCallStore.setState({ endCall });
+
+		const { getByTestId } = render(
+			<Wrapper>
+				<MediaCallHeader />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('media-call-header-end'));
+		expect(endCall).toHaveBeenCalledTimes(1);
+	});
+
+	it('should show alert when content is pressed', () => {
+		setStoreState();
+		const { getByTestId } = render(
+			<Wrapper>
+				<MediaCallHeader />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('media-call-header-content'));
+		expect(global.alert).toHaveBeenCalledWith('nav to call room');
+	});
+});
+
+generateSnapshots(stories);

app/containers/CallHeader/CallHeader.tsx → app/containers/MediaCallHeader/MediaCallHeader.tsx

@@ -1,46 +1,47 @@
 import { StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useTheme } from '../../theme';
 import Collapse from './components/Collapse';
-import Title from './components/Title';
 import EndCall from './components/EndCall';
 import { useCallStore } from '../../lib/services/voip/useCallStore';
+import { Content } from './components/Content';
 
 const styles = StyleSheet.create({
 	header: {
 		flexDirection: 'row',
 		justifyContent: 'space-between',
 		alignItems: 'center',
 		paddingHorizontal: 12,
-		paddingBottom: 4,
 		borderBottomWidth: StyleSheet.hairlineWidth
 	}
 });
 
-const CallHeader = () => {
+const MediaCallHeader = () => {
 	'use memo';
 
 	const { colors } = useTheme();
 	const insets = useSafeAreaInsets();
+	const call = useCallStore(useShallow(state => state.call));
 
 	const defaultHeaderStyle = {
 		backgroundColor: colors.surfaceNeutral,
-		paddingTop: insets.top
+		paddingTop: insets.top + 12,
+		paddingBottom: 12
 	};
 
-	const call = useCallStore(state => state.call);
 	if (!call) {
-		return <View style={defaultHeaderStyle} />;
+		return <View style={defaultHeaderStyle} testID='media-call-header-empty' />;
 	}
 
 	return (
-		<View style={[styles.header, { ...defaultHeaderStyle, borderBottomColor: colors.strokeLight }]}>
+		<View style={[styles.header, { ...defaultHeaderStyle, borderBottomColor: colors.strokeLight }]} testID='media-call-header'>
 			<Collapse />
-			<Title />
+			<Content />
 			<EndCall />
 		</View>
 	);
 };
 
-export default CallHeader;
+export default MediaCallHeader;