feat: contextualbar based on chat size (#33321)

.changeset/kind-llamas-grin.md

+---
+"@rocket.chat/meteor": patch
+---
+
+Changed the contextualbar behavior based on chat size instead the viewport

apps/meteor/client/components/Contextualbar/ContextualbarDialog.tsx

@@ -18,7 +18,7 @@ type ContextualbarDialogProps = AriaDialogProps & ComponentProps<typeof Contextu
 const ContextualbarDialog = (props: ContextualbarDialogProps) => {
 	const ref = useRef(null);
 	const { dialogProps } = useDialog({ 'aria-labelledby': 'contextualbarTitle', ...props }, ref);
-	const sizes = useLayoutSizes();
+	const { contextualBar } = useLayoutSizes();
 	const position = useLayoutContextualBarPosition();
 	const { closeTab } = useRoomToolbox();
 
@@ -42,12 +42,12 @@ const ContextualbarDialog = (props: ContextualbarDialogProps) => {
 		<FocusScope autoFocus restoreFocus>
 			<FeaturePreview feature='contextualbarResizable'>
 				<FeaturePreviewOn>
-					<ContextualbarResizable defaultWidth={sizes.contextualBar}>
+					<ContextualbarResizable defaultWidth={contextualBar}>
 						<Contextualbar ref={callbackRef} width='100%' position={position} {...dialogProps} {...props} />
 					</ContextualbarResizable>
 				</FeaturePreviewOn>
 				<FeaturePreviewOff>
-					<Contextualbar ref={callbackRef} width={sizes.contextualBar} position={position} {...dialogProps} {...props} />
+					<Contextualbar ref={callbackRef} width={contextualBar} position={position} {...dialogProps} {...props} />
 				</FeaturePreviewOff>
 			</FeaturePreview>
 		</FocusScope>

apps/meteor/client/views/room/layout/RoomLayout.tsx

+/* eslint-disable no-nested-ternary */
 import { Box } from '@rocket.chat/fuselage';
+import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import breakpointsDefinitions from '@rocket.chat/fuselage-tokens/breakpoints.json';
 import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '@rocket.chat/ui-client';
+import { LayoutContext, useLayout } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
-import React, { Suspense } from 'react';
+import React, { Suspense, useMemo } from 'react';
 
 import { ContextualbarDialog } from '../../../components/Contextualbar';
 import HeaderSkeleton from '../Header/HeaderSkeleton';
@@ -14,36 +18,78 @@ type RoomLayoutProps = {
 	aside?: ReactNode;
 } & ComponentProps<typeof Box>;
 
-const RoomLayout = ({ header, body, footer, aside, ...props }: RoomLayoutProps): ReactElement => (
-	<Box h='full' display='flex' flexDirection='column' bg='room' {...props}>
-		<Suspense
-			fallback={
-				<FeaturePreview feature='newNavigation'>
-					<FeaturePreviewOff>
-						<HeaderSkeleton />
-					</FeaturePreviewOff>
-					<FeaturePreviewOn>
-						<HeaderSkeletonV2 />
-					</FeaturePreviewOn>
-				</FeaturePreview>
-			}
+const useBreakpointsElement = () => {
+	const { ref, borderBoxSize } = useResizeObserver<HTMLElement>({
+		debounceDelay: 30,
+	});
+
+	const breakpoints = useMemo(
+		() =>
+			breakpointsDefinitions
+				.filter(({ minViewportWidth }) => minViewportWidth && borderBoxSize.inlineSize && borderBoxSize.inlineSize >= minViewportWidth)
+				.map(({ name }) => name),
+		[borderBoxSize],
+	);
+
+	return {
+		ref,
+		breakpoints,
+	};
+};
+
+const RoomLayout = ({ header, body, footer, aside, ...props }: RoomLayoutProps): ReactElement => {
+	const { ref, breakpoints } = useBreakpointsElement();
+
+	const contextualbarPosition = breakpoints.includes('md') ? 'relative' : 'absolute';
+	const contextualbarSize = breakpoints.includes('sm') ? (breakpoints.includes('xl') ? '38%' : '380px') : '100%';
+
+	const layout = useLayout();
+
+	return (
+		<LayoutContext.Provider
+			value={useMemo(
+				() => ({
+					...layout,
+					contextualBarPosition: contextualbarPosition,
+					size: {
+						...layout.size,
+						contextualBar: contextualbarSize,
+					},
+				}),
+				[layout, contextualbarPosition, contextualbarSize],
+			)}
 		>
-			{header}
-		</Suspense>
-		<Box display='flex' flexGrow={1} overflow='hidden' height='full' position='relative'>
-			<Box display='flex' flexDirection='column' flexGrow={1} minWidth={0}>
-				<Box is='div' display='flex' flexDirection='column' flexGrow={1}>
-					<Suspense fallback={null}>{body}</Suspense>
+			<Box h='full' display='flex' flexDirection='column' bg='room' {...props} ref={ref}>
+				<Suspense
+					fallback={
+						<FeaturePreview feature='newNavigation'>
+							<FeaturePreviewOff>
+								<HeaderSkeleton />
+							</FeaturePreviewOff>
+							<FeaturePreviewOn>
+								<HeaderSkeletonV2 />
+							</FeaturePreviewOn>
+						</FeaturePreview>
+					}
+				>
+					{header}
+				</Suspense>
+				<Box display='flex' flexGrow={1} overflow='hidden' height='full' position='relative'>
+					<Box display='flex' flexDirection='column' flexGrow={1} minWidth={0}>
+						<Box is='div' display='flex' flexDirection='column' flexGrow={1}>
+							<Suspense fallback={null}>{body}</Suspense>
+						</Box>
+						{footer && <Suspense fallback={null}>{footer}</Suspense>}
+					</Box>
+					{aside && (
+						<ContextualbarDialog>
+							<Suspense fallback={null}>{aside}</Suspense>
+						</ContextualbarDialog>
+					)}
 				</Box>
-				{footer && <Suspense fallback={null}>{footer}</Suspense>}
 			</Box>
-			{aside && (
-				<ContextualbarDialog>
-					<Suspense fallback={null}>{aside}</Suspense>
-				</ContextualbarDialog>
-			)}
-		</Box>
-	</Box>
-);
+		</LayoutContext.Provider>
+	);
+};
 
 export default RoomLayout;