refactor(voip): route force-show controls through showControls

- Call showControls() from stateChange, trackStateChange, and toggleFocus
  instead of inlining controlsVisible in set() patches
- Mock media emitter forwards variadic args in useCallStore tests
- Add test and JSDoc for controls visibility / animation consumers

Made-with: Cursor

Author: diegolmello

app/lib/services/voip/useCallStore.test.ts

@@ -30,8 +30,8 @@ function createMockCall(callId: string) {
 			listeners[ev]?.delete(fn);
 		}
 	};
-	const emit = (ev: string) => {
-		listeners[ev]?.forEach(fn => fn());
+	const emit = (ev: string, ...args: unknown[]) => {
+		listeners[ev]?.forEach(fn => fn(...args));
 	};
 	const call = {
 		callId,
@@ -54,6 +54,19 @@ function createMockCall(callId: string) {
 	return { call, emit };
 }
 
+describe('createMockCall emitter', () => {
+	it('forwards variadic arguments to listeners', () => {
+		const { call, emit } = createMockCall('e1');
+		const listener = jest.fn();
+		call.emitter.on('stateChange', listener);
+
+		emit('stateChange', { kind: 'test' }, 2);
+
+		expect(listener).toHaveBeenCalledTimes(1);
+		expect(listener).toHaveBeenCalledWith({ kind: 'test' }, 2);
+	});
+});
+
 describe('useCallStore controlsVisible', () => {
 	beforeEach(() => {
 		useCallStore.getState().resetNativeCallId();

app/lib/services/voip/useCallStore.ts

@@ -68,6 +68,7 @@ interface CallStoreState {
 	isSpeakerOn: boolean;
 	callStartTime: number | null;
 	focused: boolean;
+	/** Zustand-driven for Call UI animations (subscribers re-render → `useAnimatedStyle`); see `decisions/call-view-controls-coderabbit.md`. */
 	controlsVisible: boolean;
 	dialpadValue: string;
 
@@ -163,7 +164,8 @@ export const useCallStore = create<CallStore>((set, get) => ({
 			if (!currentCall) return;
 
 			const newState = currentCall.state;
-			set({ callState: newState, controlsVisible: true });
+			set({ callState: newState });
+			get().showControls();
 
 			// Set start time when call becomes active
 			if (newState === 'active' && !get().callStartTime) {
@@ -179,9 +181,9 @@ export const useCallStore = create<CallStore>((set, get) => ({
 				isMuted: currentCall.muted,
 				isOnHold: currentCall.held,
 				remoteMute: currentCall.remoteMute,
-				remoteHeld: currentCall.remoteHeld,
-				controlsVisible: true
+				remoteHeld: currentCall.remoteHeld
 			});
+			get().showControls();
 		};
 
 		const handleEnded = () => {
@@ -241,7 +243,8 @@ export const useCallStore = create<CallStore>((set, get) => ({
 
 	toggleFocus: () => {
 		const isFocused = get().focused;
-		set({ focused: !isFocused, controlsVisible: true });
+		set({ focused: !isFocused });
+		get().showControls();
 		if (isFocused) {
 			Navigation.back();
 		} else {