regression: SIDE-174

apps/meteor/client/components/FeaturePreviewSidePanelNavigation.tsx

@@ -0,0 +1,10 @@
+import { FeaturePreview } from '@rocket.chat/ui-client';
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { useSidePanelNavigationScreenSize } from '../hooks/useSidePanelNavigation';
+
+export const FeaturePreviewSidePanelNavigation = ({ children }: { children: ReactElement[] }) => {
+	const disabled = !useSidePanelNavigationScreenSize();
+	return <FeaturePreview feature='sidepanelNavigation' disabled={disabled} children={children} />;
+};

apps/meteor/client/hooks/useSidePanelNavigation.ts

@@ -0,0 +1,14 @@
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import { useFeaturePreview } from '@rocket.chat/ui-client';
+
+export const useSidePanelNavigation = () => {
+	const isSidepanelFeatureEnabled = useFeaturePreview('sidepanelNavigation');
+	// ["xs", "sm", "md", "lg", "xl", xxl"]
+	return useSidePanelNavigationScreenSize() && isSidepanelFeatureEnabled;
+};
+
+export const useSidePanelNavigationScreenSize = () => {
+	const breakpoints = useBreakpoints();
+	// ["xs", "sm", "md", "lg", "xl", xxl"]
+	return breakpoints.includes('lg');
+};

apps/meteor/client/views/room/RoomOpener.tsx

@@ -1,10 +1,11 @@
 import type { RoomType } from '@rocket.chat/core-typings';
 import { Box, States, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
-import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
+import { FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
 import type { ReactElement } from 'react';
 import React, { lazy, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { FeaturePreviewSidePanelNavigation } from '../../components/FeaturePreviewSidePanelNavigation';
 import { Header } from '../../components/Header';
 import { getErrorMessage } from '../../lib/errorHandling';
 import { NotAuthorizedError } from '../../lib/errors/NotAuthorizedError';
@@ -34,12 +35,12 @@ const RoomOpener = ({ type, reference }: RoomOpenerProps): ReactElement => {
 	return (
 		<Box display='flex' w='full' h='full'>
 			{!isDirectOrOmnichannelRoom(type) && (
-				<FeaturePreview feature='sidepanelNavigation'>
+				<FeaturePreviewSidePanelNavigation>
 					<FeaturePreviewOff>{null}</FeaturePreviewOff>
 					<FeaturePreviewOn>
 						<RoomSidepanel />
 					</FeaturePreviewOn>
-				</FeaturePreview>
+				</FeaturePreviewSidePanelNavigation>
 			)}
 
 			<Suspense fallback={<RoomSkeleton />}>

apps/meteor/client/views/room/providers/RoomProvider.tsx

@@ -1,5 +1,4 @@
 import type { IRoom } from '@rocket.chat/core-typings';
-import { useFeaturePreview } from '@rocket.chat/ui-client';
 import { useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactNode, ContextType, ReactElement } from 'react';
 import React, { useMemo, memo, useEffect, useCallback } from 'react';
@@ -10,6 +9,7 @@ import { UserAction } from '../../../../app/ui/client/lib/UserAction';
 import { useReactiveQuery } from '../../../hooks/useReactiveQuery';
 import { useReactiveValue } from '../../../hooks/useReactiveValue';
 import { useRoomInfoEndpoint } from '../../../hooks/useRoomInfoEndpoint';
+import { useSidePanelNavigation } from '../../../hooks/useSidePanelNavigation';
 import { RoomManager } from '../../../lib/RoomManager';
 import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
 import ImageGalleryProvider from '../../../providers/ImageGalleryProvider';
@@ -92,7 +92,7 @@ const RoomProvider = ({ rid, children }: RoomProviderProps): ReactElement => {
 		};
 	}, [hasMoreNextMessages, hasMorePreviousMessages, isLoadingMoreMessages, pseudoRoom, rid, subscriptionQuery.data]);
 
-	const isSidepanelFeatureEnabled = useFeaturePreview('sidepanelNavigation');
+	const isSidepanelFeatureEnabled = useSidePanelNavigation();
 
 	useEffect(() => {
 		if (isSidepanelFeatureEnabled) {