refactor: move expand tabs state to tabs state

apps/meteor/client/views/room/components/RoomTemplate/RoomTemplate.tsx

@@ -3,6 +3,7 @@ import React, { FC } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 
 import VerticalBar from '../../../../components/VerticalBar/VerticalBar';
+import { useTabBarExpanded } from '../../providers/ToolboxProvider';
 import { Aside } from './slots/Aside';
 import { Body } from './slots/Body';
 import { Footer } from './slots/Footer';
@@ -19,12 +20,13 @@ export const RoomTemplate: FC & {
 	const body = c.filter((child) => (child as any).type === RoomTemplate.Body);
 	const footer = c.filter((child) => (child as any).type === RoomTemplate.Footer);
 	const aside = c.filter((child) => (child as any).type === RoomTemplate.Aside);
+	const isTabExpanded = useTabBarExpanded();
 
 	return (
 		<Box is='main' h='full' display='flex' flexDirection='column' {...props}>
 			{header.length > 0 && header}
 			<Box display='flex' flexGrow={1} overflow='hidden' height='full' position='relative'>
-				<Box display='flex' flexDirection='column' flexGrow={1} zIndex={6}>
+				<Box display='flex' flexDirection='column' flexGrow={1} zIndex={!isTabExpanded ? 6 : undefined}>
 					<Box is='div' display='flex' flexDirection='column' flexGrow={1}>
 						{body}
 					</Box>

apps/meteor/client/views/room/lib/Toolbox/ToolboxContext.tsx

@@ -13,6 +13,8 @@ export type ToolboxContextValue = {
 	listen: ToolboxEventHandler;
 	tabBar?: any;
 	context?: any;
+	expanded: boolean;
+	setExpand: Function;
 	open: Function;
 	openUserInfo: (username: string) => void;
 	close: () => void;
@@ -22,6 +24,8 @@ export type ToolboxContextValue = {
 export const ToolboxContext = createContext<ToolboxContextValue>({
 	actions,
 	listen,
+	expanded: false,
+	setExpand: () => null,
 	open: () => null,
 	openUserInfo: () => null,
 	close: () => null,

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

@@ -1,5 +1,5 @@
 import type { IRoom } from '@rocket.chat/core-typings';
-import { useDebouncedState, useMutableCallback, useSafely } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedState, useLocalStorage, useMutableCallback, useSafely } from '@rocket.chat/fuselage-hooks';
 import { useSession, useCurrentRoute, useRoute, useUserId, useSetting } from '@rocket.chat/ui-contexts';
 import React, { ReactNode, useContext, useMemo, useState, useLayoutEffect, useEffect } from 'react';
 
@@ -27,6 +27,8 @@ const useToolboxActions = (room: IRoom): { listen: ToolboxEventHandler; actions:
 const ToolboxProvider = ({ children, room }: { children: ReactNode; room: IRoom }): JSX.Element => {
 	const allowAnonymousRead = useSetting('Accounts_AllowAnonymousRead');
 	const uid = useUserId();
+
+	const [expanded, setExpand] = useLocalStorage('expand-tab', false);
 	const [activeTabBar, setActiveTabBar] = useState<[ToolboxActionConfig | undefined, string?]>([undefined]);
 	const [list, setList] = useSafely(useDebouncedState<Store<ToolboxAction>>(new Map(), 5));
 	const handleChange = useMutableCallback((fn) => {
@@ -93,8 +95,10 @@ const ToolboxProvider = ({ children, room }: { children: ReactNode; room: IRoom
 			open,
 			close,
 			openUserInfo,
+			expanded,
+			setExpand,
 		}),
-		[listen, list, activeTabBar, open, close, openUserInfo],
+		[listen, list, activeTabBar, open, close, expanded, setExpand, openUserInfo],
 	);
 
 	// TODO: remove this when the messages are running on react diretly, not wrapped by blaze
@@ -121,6 +125,8 @@ const ToolboxProvider = ({ children, room }: { children: ReactNode; room: IRoom
 
 export const useTabContext = (): unknown | undefined => useContext(ToolboxContext).context;
 export const useTab = (): ToolboxActionConfig | undefined => useContext(ToolboxContext).activeTabBar;
+export const useTabBarSetExpand = (): Function => useContext(ToolboxContext).setExpand;
+export const useTabBarExpanded = (): boolean => useContext(ToolboxContext).expanded;
 export const useTabBarOpen = (): Function => useContext(ToolboxContext).open;
 export const useTabBarClose = (): (() => void) => useContext(ToolboxContext).close;
 export const useTabBarOpenUserInfo = (): Function => useContext(ToolboxContext).openUserInfo;

apps/meteor/client/views/room/threads/ThreadComponent.tsx

@@ -1,5 +1,4 @@
 import type { IMessage, IRoom } from '@rocket.chat/core-typings';
-import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useRoute, useUserId, useUserSubscription, useEndpoint, useMethod } from '@rocket.chat/ui-contexts';
 import { Blaze } from 'meteor/blaze';
 import { Template } from 'meteor/templating';
@@ -10,7 +9,7 @@ import { ChatMessage } from '../../../../app/models/client';
 import { normalizeThreadTitle } from '../../../../app/threads/client/lib/normalizeThreadTitle';
 import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
 import { mapMessageFromApi } from '../../../lib/utils/mapMessageFromApi';
-import { useTabBarOpenUserInfo } from '../providers/ToolboxProvider';
+import { useTabBarExpanded, useTabBarSetExpand, useTabBarOpenUserInfo } from '../providers/ToolboxProvider';
 import ThreadSkeleton from './ThreadSkeleton';
 import ThreadView from './ThreadView';
 
@@ -68,7 +67,8 @@ const ThreadComponent: FC<{
 	const uid = useUserId();
 
 	const headerTitle = useMemo(() => (threadMessage ? normalizeThreadTitle(threadMessage) : null), [threadMessage]);
-	const [expanded, setExpand] = useLocalStorage('expand-threads', false);
+	const expanded = useTabBarExpanded();
+	const setExpand = useTabBarSetExpand();
 	const following = !uid ? false : threadMessage?.replies?.includes(uid) ?? false;
 
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -87,7 +87,7 @@ const ThreadComponent: FC<{
 			} catch (error) {
 				dispatchToastMessage({
 					type: 'error',
-					message: error,
+					message: String(error),
 				});
 			}
 		},