feat(voip): tablet and landscape layout

.gitignore

@@ -83,4 +83,12 @@ e2e/e2e_account.ts
 **/e2e_account.js
 **/e2e_account.ts
 
-*.p8
+*.p8
+.worktrees/
+.omc/
+.claude/
+.agents/
+skills-lock.json
+CLAUDE.local.md
+AGENTS.md
+.superset/

app/containers/NewMediaCall/FilterHeader.tsx

@@ -35,7 +35,6 @@ export const FilterHeader = (): React.ReactElement => {
 				<FormTextInput
 					containerStyle={styles.searchInputContainer}
 					iconRight='search'
-					bottomSheet
 					showErrorMessage={false}
 					testID='new-media-call-search-input'
 					onChangeText={handleChangeText}

app/containers/NewMediaCall/__snapshots__/FilterHeader.test.tsx.snap

@@ -94,32 +94,41 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                   accessible={true}
                   autoCapitalize="none"
                   autoCorrect={false}
+                  keyboardAppearance="light"
                   onChangeText={[Function]}
                   placeholderTextColor="#9EA2A8"
                   style={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "borderRadius": 4,
-                        "borderWidth": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontWeight": "400",
-                        "paddingHorizontal": 16,
-                        "paddingVertical": 14,
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "paddingRight": 45,
+                        "color": "#1F2329",
                       },
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderRadius": 4,
+                          "borderWidth": 1,
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontWeight": "400",
+                          "paddingHorizontal": 16,
+                          "paddingVertical": 14,
+                          "textAlign": "left",
+                        },
+                        undefined,
+                        {
+                          "paddingRight": 45,
+                        },
+                        {
+                          "backgroundColor": "#FFFFFF",
+                          "borderColor": "#9EA2A8",
+                          "color": "#1F2329",
+                        },
+                        {},
+                        undefined,
+                      ],
                       {
-                        "backgroundColor": "#FFFFFF",
-                        "borderColor": "#9EA2A8",
-                        "color": "#1F2329",
+                        "textAlign": "auto",
                       },
-                      {},
-                      undefined,
                     ]
                   }
                   testID="new-media-call-search-input"
@@ -285,32 +294,41 @@ exports[`Story Snapshots: WithFilter should match snapshot 1`] = `
                   accessible={true}
                   autoCapitalize="none"
                   autoCorrect={false}
+                  keyboardAppearance="light"
                   onChangeText={[Function]}
                   placeholderTextColor="#9EA2A8"
                   style={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "borderRadius": 4,
-                        "borderWidth": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontWeight": "400",
-                        "paddingHorizontal": 16,
-                        "paddingVertical": 14,
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "paddingRight": 45,
+                        "color": "#1F2329",
                       },
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderRadius": 4,
+                          "borderWidth": 1,
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontWeight": "400",
+                          "paddingHorizontal": 16,
+                          "paddingVertical": 14,
+                          "textAlign": "left",
+                        },
+                        undefined,
+                        {
+                          "paddingRight": 45,
+                        },
+                        {
+                          "backgroundColor": "#FFFFFF",
+                          "borderColor": "#9EA2A8",
+                          "color": "#1F2329",
+                        },
+                        {},
+                        undefined,
+                      ],
                       {
-                        "backgroundColor": "#FFFFFF",
-                        "borderColor": "#9EA2A8",
-                        "color": "#1F2329",
+                        "textAlign": "auto",
                       },
-                      {},
-                      undefined,
                     ]
                   }
                   testID="new-media-call-search-input"

app/lib/services/voip/mockCall.ts

@@ -0,0 +1,88 @@
+import type { CallState, IClientMediaCall } from '@rocket.chat/media-signaling';
+
+import Navigation from '../../navigation/appNavigation';
+import { useCallStore } from './useCallStore';
+
+export interface MockCallOverrides {
+	callState?: CallState;
+	isMuted?: boolean;
+	isOnHold?: boolean;
+	isSpeakerOn?: boolean;
+	callStartTime?: number | null;
+	roomId?: string | null;
+	contact?: {
+		id?: string;
+		displayName?: string;
+		username?: string;
+		sipExtension?: string;
+	};
+}
+
+const DEFAULT_CONTACT = {
+	id: 'mock-contact-id',
+	displayName: 'Bob Burnquist',
+	username: 'bob.burnquist',
+	sipExtension: ''
+};
+
+/**
+ * Build a fake `IClientMediaCall` good enough to render `CallView` without a real SIP/WebRTC stack.
+ * No-op `setMuted/setHeld/hangup/sendDTMF` and a no-op event emitter so store subscriptions are safe.
+ */
+export function createMockCall(overrides: MockCallOverrides = {}): IClientMediaCall {
+	const contact = { ...DEFAULT_CONTACT, ...overrides.contact };
+	const callState: CallState = overrides.callState ?? 'active';
+
+	const mock = {
+		callId: 'mock-call-id',
+		state: callState,
+		muted: overrides.isMuted ?? false,
+		held: overrides.isOnHold ?? false,
+		remoteMute: false,
+		remoteHeld: false,
+		contact,
+		setMuted: () => {},
+		setHeld: () => {},
+		hangup: () => {},
+		reject: () => {},
+		sendDTMF: () => {},
+		emitter: {
+			on: () => {},
+			off: () => {}
+		}
+	};
+
+	return mock as unknown as IClientMediaCall;
+}
+
+/**
+ * Seed `useCallStore` with a mock call so `CallView` renders without going through `setCall`
+ * (which subscribes real listeners and starts `InCallManager`).
+ */
+export function seedMockCall(overrides: MockCallOverrides = {}): void {
+	const mockCall = createMockCall(overrides);
+	const callState: CallState = overrides.callState ?? 'active';
+
+	useCallStore.setState({
+		call: mockCall,
+		callId: mockCall.callId,
+		callState,
+		isMuted: overrides.isMuted ?? false,
+		isOnHold: overrides.isOnHold ?? false,
+		isSpeakerOn: overrides.isSpeakerOn ?? false,
+		callStartTime: overrides.callStartTime ?? (callState === 'active' ? Date.now() : null),
+		contact: { ...DEFAULT_CONTACT, ...overrides.contact },
+		roomId: overrides.roomId ?? 'mock-room-id',
+		focused: true,
+		controlsVisible: true
+	});
+}
+
+/**
+ * Dev helper: seed a mock call and navigate to `CallView`. Use from a debug button to exercise
+ * the call UI on the iOS simulator without a real call.
+ */
+export function launchMockCallView(overrides: MockCallOverrides = {}): void {
+	seedMockCall(overrides);
+	Navigation.navigate('CallView');
+}

app/stacks/MasterDetailStack/index.tsx

@@ -54,6 +54,7 @@ import E2EEncryptionSecurityView from '../../views/E2EEncryptionSecurityView';
 import AttachmentView from '../../views/AttachmentView';
 import ModalBlockView from '../../views/ModalBlockView';
 import JitsiMeetView from '../../views/JitsiMeetView';
+import CallView from '../../views/CallView';
 import StatusView from '../../views/StatusView';
 import CreateDiscussionView from '../../views/CreateDiscussionView';
 import E2ESaveYourPasswordView from '../../views/E2ESaveYourPasswordView';
@@ -234,6 +235,7 @@ const InsideStackNavigator = React.memo(() => {
 			/>
 			{/* @ts-ignore */}
 			<InsideStack.Screen name='ShareView' component={ShareView} />
+			<InsideStack.Screen name='CallView' component={CallView} options={{ headerShown: false }} />
 		</InsideStack.Navigator>
 	);
 });

app/stacks/MasterDetailStack/types.ts

@@ -222,4 +222,5 @@ export type MasterDetailInsideStackParamList = {
 		room: ISubscription;
 		thread: any; // TODO: Change
 	};
+	CallView: undefined;
 };

app/views/CallView/CallView.stories.tsx

@@ -3,6 +3,10 @@ import { View, StyleSheet } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 
 import CallView from '.';
+import CallerInfo from './components/CallerInfo';
+import { CallButtons } from './components/CallButtons';
+import { styles as callViewStyles } from './styles';
+import { useTheme } from '../../theme';
 import { useCallStore } from '../../lib/services/voip/useCallStore';
 import {
 	BASE_ROW_HEIGHT,
@@ -113,3 +117,48 @@ export const SpeakerOn = () => {
 	setStoreState({ callState: 'active', isSpeakerOn: true });
 	return <CallView />;
 };
+
+// Tablet / wide layout stories — force layoutMode='wide' via ResponsiveLayoutContext width
+const TabletCallView = () => {
+	const { colors } = useTheme();
+	const call = useCallStore(state => state.call);
+	if (!call) return null;
+	return (
+		<ResponsiveLayoutContext.Provider value={{ ...responsiveLayoutProviderLargeFontValue(1), width: 800 }}>
+			<View style={[callViewStyles.contentContainer, { backgroundColor: colors.surfaceLight }]}>
+				<CallerInfo />
+				<CallButtons />
+			</View>
+		</ResponsiveLayoutContext.Provider>
+	);
+};
+
+export const TabletConnectedCall = () => {
+	setStoreState({ callState: 'active', callStartTime: mockCallStartTime - 61000 });
+	return <TabletCallView />;
+};
+
+export const TabletConnectingCall = () => {
+	setStoreState({ callState: 'accepted', callStartTime: null });
+	return <TabletCallView />;
+};
+
+export const TabletMutedCall = () => {
+	setStoreState({ callState: 'active', isMuted: true });
+	return <TabletCallView />;
+};
+
+export const TabletOnHoldCall = () => {
+	setStoreState({ callState: 'active', isOnHold: true });
+	return <TabletCallView />;
+};
+
+export const TabletMutedAndOnHold = () => {
+	setStoreState({ callState: 'active', isMuted: true, isOnHold: true });
+	return <TabletCallView />;
+};
+
+export const TabletSpeakerOn = () => {
+	setStoreState({ callState: 'active', isSpeakerOn: true });
+	return <TabletCallView />;
+};