snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/providers/LayoutProvider.tsx

@@ -0,0 +1,116 @@
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import { useFeaturePreview } from '@rocket.chat/ui-client';
+import { LayoutContext, useRouter, useSetting } from '@rocket.chat/ui-contexts';
+import type { ReactNode } from 'react';
+import { useMemo, useState, useEffect } from 'react';
+
+const hiddenActionsDefaultValue = {
+	roomToolbox: [],
+	messageToolbox: [],
+	composerToolbox: [],
+	userToolbox: [],
+};
+
+export type LayoutProviderProps = {
+	children?: ReactNode;
+};
+
+const LayoutProvider = ({ children }: LayoutProviderProps) => {
+	const showTopNavbarEmbeddedLayout = useSetting('UI_Show_top_navbar_embedded_layout', false);
+	const [isCollapsed, setIsCollapsed] = useState(false);
+	const [displaySidePanel, setDisplaySidePanel] = useState(true);
+	const [overlayed, setOverlayed] = useState(false);
+	const [navBarSearchExpanded, setNavBarSearchExpanded] = useState(false);
+	const breakpoints = useBreakpoints(); // ["xs", "sm", "md", "lg", "xl", xxl"]
+	const [hiddenActions, setHiddenActions] = useState(hiddenActionsDefaultValue);
+	const secondSidebarEnabled = useFeaturePreview('secondarySidebar');
+
+	const router = useRouter();
+	// Once the layout is embedded, it can't be changed
+	const [isEmbedded] = useState(() => router.getSearchParameters().layout === 'embedded');
+
+	const isMobile = !breakpoints.includes('md');
+	const isTablet = !breakpoints.includes('lg');
+
+	const shouldToggle = secondSidebarEnabled ? isTablet || isMobile : isMobile;
+	const shouldDisplaySidePanel = !isTablet || displaySidePanel;
+	const defaultSidebarWidth = secondSidebarEnabled ? '220px' : '240px';
+
+	useEffect(() => {
+		setIsCollapsed(shouldToggle);
+	}, [shouldToggle]);
+
+	useEffect(() => {
+		const eventHandler = (event: MessageEvent<any>) => {
+			if (event.data?.event !== 'overrideUi') {
+				return;
+			}
+
+			setHiddenActions({ ...hiddenActionsDefaultValue, ...event.data.hideActions });
+		};
+		window.addEventListener('message', eventHandler);
+		return () => window.removeEventListener('message', eventHandler);
+	}, []);
+
+	return (
+		<LayoutContext.Provider
+			value={useMemo(
+				() => ({
+					isMobile,
+					isTablet,
+					isEmbedded,
+					showTopNavbarEmbeddedLayout,
+					navbar: {
+						searchExpanded: navBarSearchExpanded,
+						expandSearch: isMobile ? () => setNavBarSearchExpanded(true) : undefined,
+						collapseSearch: isMobile ? () => setNavBarSearchExpanded(false) : undefined,
+					},
+					sidebar: {
+						overlayed,
+						setOverlayed,
+						isCollapsed,
+						shouldToggle,
+						toggle: shouldToggle ? () => setIsCollapsed((isCollapsed) => !isCollapsed) : () => undefined,
+						collapse: () => setIsCollapsed(true),
+						expand: () => setIsCollapsed(false),
+						close: () => (isEmbedded ? setIsCollapsed(true) : router.navigate('/home')),
+					},
+					sidePanel: {
+						displaySidePanel: shouldDisplaySidePanel,
+						closeSidePanel: () => setDisplaySidePanel(false),
+						openSidePanel: () => setDisplaySidePanel(true),
+					},
+					size: {
+						sidebar: shouldToggle ? '280px' : defaultSidebarWidth,
+						// eslint-disable-next-line no-nested-ternary
+						contextualBar: breakpoints.includes('sm') ? (breakpoints.includes('xl') ? '38%' : '380px') : '100%',
+					},
+					roomToolboxExpanded: breakpoints.includes('lg'),
+					contextualBarExpanded: breakpoints.includes('sm'),
+					// eslint-disable-next-line no-nested-ternary
+					contextualBarPosition: breakpoints.includes('sm') ? (breakpoints.includes('lg') ? 'relative' : 'absolute') : 'fixed',
+					hiddenActions,
+				}),
+				[
+					isMobile,
+					isTablet,
+					isEmbedded,
+					showTopNavbarEmbeddedLayout,
+					navBarSearchExpanded,
+					overlayed,
+					isCollapsed,
+					shouldToggle,
+					shouldDisplaySidePanel,
+					defaultSidebarWidth,
+					breakpoints,
+					hiddenActions,
+					router,
+				],
+			)}
+		>
+			{children}
+		</LayoutContext.Provider>
+	);
+};
+
+export default LayoutProvider;