fix(app): gate one-Tab message focus behind an experiment (#2762)

fluxer_app/src/features/app/components/layout/KeyboardModeListener.ts

@@ -2,6 +2,7 @@
 
 import {Routes} from '@app/app/Routes';
 import {CHANNEL_TEXTAREA_SELECTOR} from '@app/features/app/keybindings/utils/EditableElement';
+import MessageKeyboardFocusRollout from '@app/features/messaging/state/MessageKeyboardFocusRollout';
 import {useLocation} from '@app/features/platform/components/router/RouterReact';
 import {ComponentBus} from '@app/features/platform/utils/ComponentBus';
 import FocusRingManager from '@app/features/ui/focus_ring/FocusRingManager';
@@ -11,7 +12,7 @@ import {
 	recordPointerActivationFocusTarget,
 } from '@app/features/ui/utils/PointerActivationFocus';
 import {observer} from 'mobx-react-lite';
-import {useEffect, useMemo} from 'react';
+import {useEffect, useLayoutEffect, useMemo} from 'react';
 
 const FOCUS_TRAPPING_OVERLAY_SELECTOR = [
 	'[role="dialog"]',
@@ -86,9 +87,15 @@ export const KeyboardModeListener = observer(() => {
 			window.removeEventListener('pointerdown', handlePointer, true);
 		};
 	}, [isAuthRoute]);
-	useEffect(() => {
+	const keyboardNavigationEnabled = MessageKeyboardFocusRollout.enabled;
+	useLayoutEffect(() => {
+		if (!keyboardNavigationEnabled) return;
 		FocusRingManager.setRingsEnabled(keyboardModeEnabled);
-	}, [keyboardModeEnabled]);
+	}, [keyboardModeEnabled, keyboardNavigationEnabled]);
+	useEffect(() => {
+		if (keyboardNavigationEnabled) return;
+		FocusRingManager.setRingsEnabled(keyboardModeEnabled);
+	}, [keyboardModeEnabled, keyboardNavigationEnabled]);
 	useEffect(() => {
 		const pendingFrames = new Set<number>();
 		const handlePointerActivation = (event: MouseEvent) => {