From 47803181048f944aa941ad8905f2375574c30461 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Wed, 5 Jul 2023 19:00:24 -0300
Subject: [PATCH 01/43] add sections to sidebar header menuV2 items

---
 .../app/autotranslate/client/lib/tabBar.ts    |  1 +
 apps/meteor/app/otr/client/tabBar.ts          |  1 +
 .../app/push-notifications/client/tabBar.ts   |  1 +
 .../app/ui-clean-history/client/lib/tabBar.ts |  1 +
 .../ui-message/client/actionButtons/tabbar.ts |  1 +
 .../contextualBar/exportMessagesTab.ts        |  1 +
 .../startup/contextualBar/mentionsTab.ts      |  1 +
 .../contextualBar/pinnedMessagesTab.ts        |  1 +
 .../contextualBar/starredMessagesTab.ts       |  1 +
 .../views/room/Header/ToolBox/ToolBox.tsx     | 68 ++++++++-----------
 .../views/room/lib/Toolbox/defaultActions.ts  |  2 +
 .../client/views/room/lib/Toolbox/index.tsx   |  1 +
 12 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/apps/meteor/app/autotranslate/client/lib/tabBar.ts b/apps/meteor/app/autotranslate/client/lib/tabBar.ts
index fe564c7bd6b0..761bed3345be 100644
--- a/apps/meteor/app/autotranslate/client/lib/tabBar.ts
+++ b/apps/meteor/app/autotranslate/client/lib/tabBar.ts
@@ -17,6 +17,7 @@ addAction('autotranslate', () => {
 						template: lazy(() => import('../../../../client/views/room/contextualBar/AutoTranslate')),
 						order: 20,
 						full: true,
+						type: 'organization',
 				  }
 				: null,
 		[autoTranslateEnabled, hasPermission],
diff --git a/apps/meteor/app/otr/client/tabBar.ts b/apps/meteor/app/otr/client/tabBar.ts
index dd56bd368a8b..041f9bdfb275 100644
--- a/apps/meteor/app/otr/client/tabBar.ts
+++ b/apps/meteor/app/otr/client/tabBar.ts
@@ -30,6 +30,7 @@ addAction('otr', (options) => {
 						template,
 						order: 13,
 						full: true,
+						type: 'communication',
 						...(federated && {
 							'data-tooltip': 'OTR_unavailable_for_federation',
 							'disabled': true,
diff --git a/apps/meteor/app/push-notifications/client/tabBar.ts b/apps/meteor/app/push-notifications/client/tabBar.ts
index 1312018a1cde..3133f0b7dfde 100644
--- a/apps/meteor/app/push-notifications/client/tabBar.ts
+++ b/apps/meteor/app/push-notifications/client/tabBar.ts
@@ -16,6 +16,7 @@ addAction('push-notifications', ({ room }) => {
 						icon: 'bell',
 						template: lazy(() => import('../../../client/views/room/contextualBar/NotificationPreferences')),
 						order: 8,
+						type: 'customization',
 				  }
 				: null,
 		[subscription],
diff --git a/apps/meteor/app/ui-clean-history/client/lib/tabBar.ts b/apps/meteor/app/ui-clean-history/client/lib/tabBar.ts
index 72fcbf22f598..d38c065b61bd 100644
--- a/apps/meteor/app/ui-clean-history/client/lib/tabBar.ts
+++ b/apps/meteor/app/ui-clean-history/client/lib/tabBar.ts
@@ -25,6 +25,7 @@ addAction('clean-history', ({ room }) => {
 						}),
 						template,
 						order: 250,
+						type: 'customization',
 				  }
 				: null,
 		[hasPermission, federated],
diff --git a/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts b/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts
index 26352cd9b59a..28fee6eb35d1 100644
--- a/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts
+++ b/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts
@@ -26,6 +26,7 @@ export const onAdded = (button: IUIActionButton): void =>
 							appId: button.appId,
 							payload: { context: button.context },
 						}),
+					type: 'apps',
 			  }
 			: null,
 	);
diff --git a/apps/meteor/client/startup/contextualBar/exportMessagesTab.ts b/apps/meteor/client/startup/contextualBar/exportMessagesTab.ts
index 2d189d5493b0..3157138b9c4f 100644
--- a/apps/meteor/client/startup/contextualBar/exportMessagesTab.ts
+++ b/apps/meteor/client/startup/contextualBar/exportMessagesTab.ts
@@ -18,6 +18,7 @@ addAction('export-messages', ({ room }) => {
 						template: lazy(() => import('../../views/room/contextualBar/ExportMessages')) as LazyExoticComponent<FC>,
 						full: true,
 						order: 12,
+						type: 'communication',
 				  }
 				: null,
 		[hasPermission],
diff --git a/apps/meteor/client/startup/contextualBar/mentionsTab.ts b/apps/meteor/client/startup/contextualBar/mentionsTab.ts
index 510a22ecbf99..af2cbf68408c 100644
--- a/apps/meteor/client/startup/contextualBar/mentionsTab.ts
+++ b/apps/meteor/client/startup/contextualBar/mentionsTab.ts
@@ -9,4 +9,5 @@ addAction('mentions', {
 	icon: 'at',
 	template: lazy(() => import('../../views/room/contextualBar/MentionsTab')),
 	order: 9,
+	type: 'organization',
 });
diff --git a/apps/meteor/client/startup/contextualBar/pinnedMessagesTab.ts b/apps/meteor/client/startup/contextualBar/pinnedMessagesTab.ts
index 1488e7d3a9e6..c4edc062dbbf 100644
--- a/apps/meteor/client/startup/contextualBar/pinnedMessagesTab.ts
+++ b/apps/meteor/client/startup/contextualBar/pinnedMessagesTab.ts
@@ -21,6 +21,7 @@ addAction('pinned-messages', ({ room }) => {
 							'disabled': true,
 						}),
 						order: 11,
+						type: 'organization',
 				  }
 				: null,
 		[pinningAllowed, federated],
diff --git a/apps/meteor/client/startup/contextualBar/starredMessagesTab.ts b/apps/meteor/client/startup/contextualBar/starredMessagesTab.ts
index 4b3677db7600..8175faa6f2fe 100644
--- a/apps/meteor/client/startup/contextualBar/starredMessagesTab.ts
+++ b/apps/meteor/client/startup/contextualBar/starredMessagesTab.ts
@@ -9,4 +9,5 @@ addAction('starred-messages', {
 	icon: 'star',
 	template: lazy(() => import('../../views/room/contextualBar/StarredMessagesTab')),
 	order: 10,
+	type: 'organization',
 });
diff --git a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
index 3805ea3dc54b..a040e8a1c50a 100644
--- a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
+++ b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
@@ -1,20 +1,16 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import type { Box } from '@rocket.chat/fuselage';
-import { Menu, Option } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { HeaderToolboxAction, HeaderToolboxDivider } from '@rocket.chat/ui-client';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useLayout, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactNode, ComponentProps, ReactElement } from 'react';
-import React, { memo, useRef } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
+import React, { memo } from 'react';
 
 // used to open the menu option by keyboard
+import GenericMenu from '../../../../components/GenericMenu/GenericMenu';
 import { useToolboxContext, useTab, useTabBarOpen } from '../../contexts/ToolboxContext';
-import type { ToolboxActionConfig, OptionRenderer } from '../../lib/Toolbox';
-
-const renderMenuOption: OptionRenderer = ({ label: { title, icon }, ...props }: any): ReactNode => (
-	<Option label={title} icon={icon} data-qa-id={`ToolBoxAction-${icon}`} gap={!icon} {...props} />
-);
+import type { ToolboxActionConfig } from '../../lib/Toolbox';
 
 type ToolBoxProps = {
 	className?: ComponentProps<typeof Box>['className'];
@@ -26,7 +22,6 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 	const tab = useTab();
 	const openTabBar = useTabBarOpen();
 	const { isMobile } = useLayout();
-	const hiddenActionRenderers = useRef<{ [key: string]: OptionRenderer }>({});
 
 	const { actions: mapActions } = useToolboxContext();
 
@@ -35,26 +30,29 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 	const filteredActions = actions.filter((action) => !action.featured);
 	const visibleActions = isMobile ? [] : filteredActions.slice(0, 6);
 
-	const hiddenActions: Record<string, ToolboxActionConfig> = Object.fromEntries(
-		(isMobile ? actions : filteredActions.slice(6))
-			.filter((item) => !item.disabled)
-			.map((item) => {
-				hiddenActionRenderers.current = {
-					...hiddenActionRenderers.current,
-					[item.id]: item.renderOption || renderMenuOption,
-				};
-				return [
-					item.id,
-					{
-						label: { title: t(item.title), icon: item.icon },
-						action: (): void => {
-							openTabBar(item.id);
-						},
-						...item,
-					},
-				];
-			}),
-	);
+	const hiddenActions = (isMobile ? actions : filteredActions.slice(6))
+		.filter((item) => !item.disabled && item.id !== 'start-call')
+		.map(({ ...item }) => ({
+			content: t(item.title),
+			icon: item.icon,
+			onClick: (): void => {
+				openTabBar(item.id);
+			},
+			...item,
+		}))
+		.reduce((acc, item) => {
+			const group = item.type ? item.type : '';
+			const section = acc.find((section: { id: string }) => section.id === group);
+			if (section) {
+				section.items.push(item);
+				return acc;
+			}
+
+			const newSection = { id: group, title: group === 'apps' ? t('Apps') : '', items: [item] };
+			acc.push(newSection);
+
+			return acc;
+		}, [] as any);
 
 	const actionDefault = useMutableCallback((actionId) => {
 		openTabBar(actionId);
@@ -115,17 +113,7 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 				return <HeaderToolboxAction {...props} key={id} />;
 			})}
 			{(filteredActions.length > 6 || isMobile) && (
-				<Menu
-					data-qa-id='ToolBox-Menu'
-					tiny={!isMobile}
-					title={t('Options')}
-					maxHeight='initial'
-					className={className}
-					aria-keyshortcuts='alt'
-					tabIndex={-1}
-					options={hiddenActions}
-					renderItem={({ value, ...props }): ReactElement | null => value && (hiddenActionRenderers.current[value](props) as ReactElement)}
-				/>
+				<GenericMenu title={t('Options')} data-qa-id='ToolBox-Menu' sections={hiddenActions} placement='bottom-end' />
 			)}
 		</>
 	);
diff --git a/apps/meteor/client/views/room/lib/Toolbox/defaultActions.ts b/apps/meteor/client/views/room/lib/Toolbox/defaultActions.ts
index 52d0eef9a2b3..073e51f32722 100644
--- a/apps/meteor/client/views/room/lib/Toolbox/defaultActions.ts
+++ b/apps/meteor/client/views/room/lib/Toolbox/defaultActions.ts
@@ -64,6 +64,7 @@ addAction('uploaded-files-list', {
 	icon: 'clip',
 	template: lazy(() => import('../../contextualBar/RoomFiles')),
 	order: 7,
+	type: 'organization',
 });
 
 addAction('keyboard-shortcut-list', {
@@ -73,4 +74,5 @@ addAction('keyboard-shortcut-list', {
 	icon: 'keyboard',
 	template: lazy(() => import('../../contextualBar/KeyboardShortcuts')),
 	order: 99,
+	type: 'customization',
 });
diff --git a/apps/meteor/client/views/room/lib/Toolbox/index.tsx b/apps/meteor/client/views/room/lib/Toolbox/index.tsx
index 6dde302f7e93..cf066cffb01b 100644
--- a/apps/meteor/client/views/room/lib/Toolbox/index.tsx
+++ b/apps/meteor/client/views/room/lib/Toolbox/index.tsx
@@ -42,6 +42,7 @@ export type ToolboxActionConfig = {
 		teamId: IRoom['teamId'];
 	}>;
 	'featured'?: boolean;
+	'type'?: 'organization' | 'communication' | 'customization' | 'apps';
 };
 
 export type ToolboxAction = ToolboxHook | ToolboxActionConfig;

From 9a6fbde8535a4418d777a3bba41383f3b2093a13 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 6 Jul 2023 15:42:16 -0300
Subject: [PATCH 02/43] start the changes on user card menu

---
 .../client/views/hooks/useActionSpread.ts     |  5 +-
 .../views/room/UserCard/UserCardWithData.tsx  | 47 +++++++++++++++----
 .../actions/useCallAction.tsx                 |  1 +
 .../actions/useChangeLeaderAction.ts          |  1 +
 .../actions/useChangeModeratorAction.tsx      |  1 +
 .../actions/useChangeOwnerAction.tsx          |  1 +
 .../actions/useDirectMessageAction.ts         |  1 +
 .../actions/useIgnoreUserAction.ts            |  1 +
 .../actions/useMuteUserAction.tsx             |  1 +
 .../actions/useRedirectModerationConsole.ts   |  1 +
 .../actions/useRemoveUserAction.tsx           |  3 ++
 11 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/apps/meteor/client/views/hooks/useActionSpread.ts b/apps/meteor/client/views/hooks/useActionSpread.ts
index 513956800ec9..56230c8e88df 100644
--- a/apps/meteor/client/views/hooks/useActionSpread.ts
+++ b/apps/meteor/client/views/hooks/useActionSpread.ts
@@ -6,18 +6,21 @@ export type Action = {
 	label: ReactNode;
 	icon?: ComponentProps<typeof Icon>['name'];
 	action: () => void;
+	type?: string;
 };
 
 type MenuOption = {
 	label: { label: ReactNode; icon?: string };
 	action: () => void;
+	type?: string;
 };
 
-const mapOptions = ([key, { action, label, icon }]: [string, Action]): [string, MenuOption] => [
+const mapOptions = ([key, { action, label, icon, type }]: [string, Action]): [string, MenuOption] => [
 	key,
 	{
 		label: { label, icon }, // TODO fuselage
 		action,
+		type,
 	},
 ];
 
diff --git a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
index cf43ff90d163..d5a143b0efc4 100644
--- a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
+++ b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
@@ -1,12 +1,13 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { PositionAnimated, AnimatedVisibility, Menu, Option } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useSetting, useRolesDescription } from '@rocket.chat/ui-contexts';
+import { useSetting, useRolesDescription, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, UIEvent } from 'react';
 import React, { useMemo, useRef } from 'react';
 
 import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
 import { Backdrop } from '../../../components/Backdrop';
+import GenericMenu from '../../../components/GenericMenu/GenericMenu';
 import LocalTime from '../../../components/LocalTime';
 import UserCard from '../../../components/UserCard';
 import { ReactiveUserStatus } from '../../../components/UserStatus';
@@ -23,6 +24,7 @@ type UserCardWithDataProps = {
 };
 
 const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWithDataProps): ReactElement => {
+	const t = useTranslation();
 	const ref = useRef(target);
 	const getRoles = useRolesDescription();
 	const showRealNames = Boolean(useSetting('UI_Use_Real_Name'));
@@ -67,22 +69,47 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 	const userActions = useUserInfoActions({ _id: user._id ?? '', username: user.username }, rid);
 	const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(userActions);
 
+	const menuActions =
+		menuOptions !== undefined &&
+		Object.values(menuOptions)
+			.map(({ ...item }) => ({
+				content: item.label.label,
+				icon: item.label.icon,
+				onClick: item.action,
+				...item,
+			}))
+			.reduce((acc, item) => {
+				const group = item.type ? item.type : '';
+				const section = acc.find((section: { id: string }) => section.id === group);
+				if (section) {
+					section.items.push(item);
+					return acc;
+				}
+
+				const newSection = { id: group, title: '', items: [item] };
+				acc.push(newSection);
+
+				return acc;
+			}, [] as any);
+
 	const menu = useMemo(() => {
 		if (!menuOptions) {
 			return null;
 		}
 
 		return (
-			<Menu
-				flexShrink={0}
-				maxHeight='initial'
-				mi='x2'
-				key='menu'
-				renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
-				options={menuOptions}
-			/>
+			<GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuActions} placement='bottom-end' />
+
+			// <Menu
+			// 	flexShrink={0}
+			// 	maxHeight='initial'
+			// 	mi='x2'
+			// 	key='menu'
+			// 	renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
+			// 	options={menuOptions}
+			// />
 		);
-	}, [menuOptions]);
+	}, [menuActions, menuOptions, t]);
 
 	const actions = useMemo(() => {
 		const mapAction = ([key, { label, icon, action }]: any): ReactElement => (
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
index d8bf3fd36ab6..afd228de737c 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
@@ -40,6 +40,7 @@ export const useCallAction = (user: Pick<IUser, '_id' | 'username'>): Action | u
 					label: t('Start_call'),
 					icon: 'phone' as const,
 					action,
+					type: 'communication',
 			  }
 			: undefined;
 	}, [t, room, dispatchPopup, dispatchWarning, isCalling, isRinging, ownUserId, user._id]);
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
index 1554292f25cc..1529c0d19480 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
@@ -37,6 +37,7 @@ export const useChangeLeaderAction = (user: Pick<IUser, '_id' | 'username'>, rid
 						label: t(isLeader ? 'Remove_as_leader' : 'Set_as_leader'),
 						icon: 'shield-alt' as const,
 						action: changeLeaderAction,
+						type: 'privileges',
 				  }
 				: undefined,
 		[isLeader, roomCanSetLeader, t, userCanSetLeader, changeLeaderAction],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
index 08fe061f39e4..e6343178483a 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
@@ -125,6 +125,7 @@ export const useChangeModeratorAction = (user: Pick<IUser, '_id' | 'username'>,
 						label: t(isModerator ? 'Remove_as_moderator' : 'Set_as_moderator'),
 						icon: 'shield-blank' as const,
 						action: changeModeratorAction,
+						type: 'privileges',
 				  }
 				: undefined,
 		[changeModeratorAction, isModerator, roomCanSetModerator, t, userCanSetModerator, room],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
index dfe2ae1aabd6..6268a9adb215 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
@@ -109,6 +109,7 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 						label: t(isOwner ? 'Remove_as_owner' : 'Set_as_owner'),
 						icon: 'shield-check' as const,
 						action: changeOwnerAction,
+						type: 'privileges',
 				  }
 				: undefined,
 		[changeOwnerAction, roomCanSetOwner, userCanSetOwner, isOwner, t, room],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
index 018868fefce9..2262ce453394 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
@@ -45,6 +45,7 @@ export const useDirectMessageAction = (user: Pick<IUser, '_id' | 'username'>, ri
 						label: t('Direct_Message'),
 						icon: 'balloon' as const,
 						action: openDirectMessage,
+						type: 'communication',
 				  }
 				: undefined,
 		[openDirectMessage, shouldOpenDirectMessage, t],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
index 2698dc5503a4..b35704efbb4e 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
@@ -50,6 +50,7 @@ export const useIgnoreUserAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 						label: t(isIgnored ? 'Unignore' : 'Ignore'),
 						icon: 'ban' as const,
 						action: ignoreUserAction,
+						type: 'management',
 				  }
 				: undefined,
 		[ignoreUserAction, isIgnored, ownUserId, roomCanIgnore, t, uid],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
index 33fdf12cc4f6..4140c360f204 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
@@ -104,6 +104,7 @@ export const useMuteUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IR
 					label: t(isMuted ? 'Unmute_user' : 'Mute_user'),
 					icon: isMuted ? ('mic' as const) : ('mic-off' as const),
 					action,
+					type: 'management',
 			  }
 			: undefined;
 	}, [
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
index 00df2f1225ac..7d195b819f1b 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
@@ -21,5 +21,6 @@ export const useRedirectModerationConsole = (uid: IUser['_id']): Action | undefi
 		label: t('Moderation_Action_View_reports'),
 		icon: 'warning' as const,
 		action: redirectModerationConsoleAction,
+		type: 'privileges',
 	};
 };
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
index ff2552eafb74..843d9b35b29d 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -94,7 +94,10 @@ export const useRemoveUserAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 								{room?.teamMain ? t('Remove_from_team') : t('Remove_from_room')}
 							</Box>
 						),
+						// label: room?.teamMain ? t('Remove_from_team') : t('Remove_from_room'),
+						// icon: 'cross' as const,
 						action: removeUserOptionAction,
+						type: 'management',
 				  }
 				: undefined,
 		[room, roomCanRemove, userCanRemove, removeUserOptionAction, t],

From 750a7a4627586ae4442e522058ec9a0fd28af87f Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 6 Jul 2023 18:14:13 -0300
Subject: [PATCH 03/43] add key for user card menu

---
 .../client/views/room/Header/ToolBox/ToolBox.tsx      |  3 ++-
 .../client/views/room/UserCard/UserCardWithData.tsx   | 11 ++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
index a040e8a1c50a..e5bbdde69fb5 100644
--- a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
+++ b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
@@ -33,6 +33,7 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 	const hiddenActions = (isMobile ? actions : filteredActions.slice(6))
 		.filter((item) => !item.disabled && item.id !== 'start-call')
 		.map(({ ...item }) => ({
+			key: item.id,
 			content: t(item.title),
 			icon: item.icon,
 			onClick: (): void => {
@@ -48,7 +49,7 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 				return acc;
 			}
 
-			const newSection = { id: group, title: group === 'apps' ? t('Apps') : '', items: [item] };
+			const newSection = { id: group, key: item.key, title: group === 'apps' ? t('Apps') : '', items: [item] };
 			acc.push(newSection);
 
 			return acc;
diff --git a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
index d5a143b0efc4..45fd9021f08d 100644
--- a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
+++ b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
@@ -1,5 +1,5 @@
 import type { IRoom } from '@rocket.chat/core-typings';
-import { PositionAnimated, AnimatedVisibility, Menu, Option } from '@rocket.chat/fuselage';
+import { PositionAnimated, AnimatedVisibility } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetting, useRolesDescription, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, UIEvent } from 'react';
@@ -73,6 +73,7 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 		menuOptions !== undefined &&
 		Object.values(menuOptions)
 			.map(({ ...item }) => ({
+				key: item.label.label,
 				content: item.label.label,
 				icon: item.label.icon,
 				onClick: item.action,
@@ -86,19 +87,19 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 					return acc;
 				}
 
-				const newSection = { id: group, title: '', items: [item] };
+				const newSection = { key: item.key, id: group, title: '', items: [item] };
 				acc.push(newSection);
 
 				return acc;
 			}, [] as any);
 
 	const menu = useMemo(() => {
-		if (!menuOptions) {
+		if (!menuActions) {
 			return null;
 		}
 
 		return (
-			<GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuActions} placement='bottom-end' />
+			<GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuActions} placement='bottom-start' />
 
 			// <Menu
 			// 	flexShrink={0}
@@ -109,7 +110,7 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 			// 	options={menuOptions}
 			// />
 		);
-	}, [menuActions, menuOptions, t]);
+	}, [menuActions, t]);
 
 	const actions = useMemo(() => {
 		const mapAction = ([key, { label, icon, action }]: any): ReactElement => (

From 4323b4f1f99d4fef00959bcc2677685643b0de68 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Fri, 7 Jul 2023 11:58:48 -0300
Subject: [PATCH 04/43] fix header menu types

---
 apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
index e5bbdde69fb5..58184beceac7 100644
--- a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
+++ b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
@@ -9,6 +9,7 @@ import React, { memo } from 'react';
 
 // used to open the menu option by keyboard
 import GenericMenu from '../../../../components/GenericMenu/GenericMenu';
+import type { GenericMenuItemProps } from '../../../../components/GenericMenu/GenericMenuItem';
 import { useToolboxContext, useTab, useTabBarOpen } from '../../contexts/ToolboxContext';
 import type { ToolboxActionConfig } from '../../lib/Toolbox';
 
@@ -17,6 +18,11 @@ type ToolBoxProps = {
 	room?: IRoom;
 };
 
+type MenuActionsProps = {
+	id: string;
+	items: GenericMenuItemProps[];
+}[];
+
 const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 	const t = useTranslation();
 	const tab = useTab();
@@ -53,7 +59,7 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 			acc.push(newSection);
 
 			return acc;
-		}, [] as any);
+		}, [] as MenuActionsProps);
 
 	const actionDefault = useMutableCallback((actionId) => {
 		openTabBar(actionId);

From 30f9031386a4a6ebef51e1e7df4ae99eb2c3d2d1 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Fri, 7 Jul 2023 14:37:03 -0300
Subject: [PATCH 05/43] complete user card menu changes

---
 .../views/room/UserCard/UserCardWithData.tsx  | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
index 45fd9021f08d..02340be4e2a0 100644
--- a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
+++ b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
@@ -8,6 +8,7 @@ import React, { useMemo, useRef } from 'react';
 import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
 import { Backdrop } from '../../../components/Backdrop';
 import GenericMenu from '../../../components/GenericMenu/GenericMenu';
+import type { GenericMenuItemProps } from '../../../components/GenericMenu/GenericMenuItem';
 import LocalTime from '../../../components/LocalTime';
 import UserCard from '../../../components/UserCard';
 import { ReactiveUserStatus } from '../../../components/UserStatus';
@@ -23,6 +24,20 @@ type UserCardWithDataProps = {
 	onClose: () => void;
 };
 
+type MenuActionProps = {
+	key: React.ReactNode;
+	id: string;
+	title: string;
+	items: {
+		id: string;
+		key: React.ReactNode;
+		content: React.ReactNode;
+		icon: string | undefined;
+		onClick: () => void;
+		type: string | undefined;
+	}[];
+}[];
+
 const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWithDataProps): ReactElement => {
 	const t = useTranslation();
 	const ref = useRef(target);
@@ -72,12 +87,13 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 	const menuActions =
 		menuOptions !== undefined &&
 		Object.values(menuOptions)
-			.map(({ ...item }) => ({
+			.map((item) => ({
+				id: item.label.label as string,
 				key: item.label.label,
 				content: item.label.label,
 				icon: item.label.icon,
 				onClick: item.action,
-				...item,
+				type: item.type,
 			}))
 			.reduce((acc, item) => {
 				const group = item.type ? item.type : '';
@@ -91,25 +107,14 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 				acc.push(newSection);
 
 				return acc;
-			}, [] as any);
+			}, [] as MenuActionProps);
 
 	const menu = useMemo(() => {
 		if (!menuActions) {
 			return null;
 		}
 
-		return (
-			<GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuActions} placement='bottom-start' />
-
-			// <Menu
-			// 	flexShrink={0}
-			// 	maxHeight='initial'
-			// 	mi='x2'
-			// 	key='menu'
-			// 	renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
-			// 	options={menuOptions}
-			// />
-		);
+		return <GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuActions} placement='bottom-start' />;
 	}, [menuActions, t]);
 
 	const actions = useMemo(() => {

From 90e9b226eaa11ad93805a4c4bb1048286739f30d Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 10 Jul 2023 20:06:53 -0300
Subject: [PATCH 06/43] start changes on useActionSpread hook

---
 .../client/views/hooks/useActionSpread.ts     | 16 ++++----
 .../views/room/UserCard/UserCardWithData.tsx  | 39 +++++++++----------
 .../actions/useBlockUserAction.ts             |  7 ++--
 .../actions/useCallAction.tsx                 |  4 +-
 .../actions/useChangeLeaderAction.ts          |  4 +-
 .../actions/useChangeModeratorAction.tsx      |  4 +-
 .../actions/useChangeOwnerAction.tsx          |  4 +-
 .../actions/useDirectMessageAction.ts         |  4 +-
 .../actions/useIgnoreUserAction.ts            |  4 +-
 .../actions/useMuteUserAction.tsx             |  4 +-
 .../actions/useRedirectModerationConsole.ts   |  4 +-
 .../actions/useRemoveUserAction.tsx           | 18 ++++-----
 12 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/apps/meteor/client/views/hooks/useActionSpread.ts b/apps/meteor/client/views/hooks/useActionSpread.ts
index 56230c8e88df..132193257f69 100644
--- a/apps/meteor/client/views/hooks/useActionSpread.ts
+++ b/apps/meteor/client/views/hooks/useActionSpread.ts
@@ -3,23 +3,25 @@ import type { ComponentProps, ReactNode } from 'react';
 import { useMemo } from 'react';
 
 export type Action = {
-	label: ReactNode;
+	content: ReactNode;
 	icon?: ComponentProps<typeof Icon>['name'];
-	action: () => void;
+	onClick: () => void;
 	type?: string;
 };
 
 type MenuOption = {
-	label: { label: ReactNode; icon?: string };
-	action: () => void;
+	content: ReactNode;
+	icon?: string;
+	onClick: () => void;
 	type?: string;
 };
 
-const mapOptions = ([key, { action, label, icon, type }]: [string, Action]): [string, MenuOption] => [
+const mapOptions = ([key, { onClick, content, icon, type }]: [string, Action]): [string, MenuOption] => [
 	key,
 	{
-		label: { label, icon }, // TODO fuselage
-		action,
+		content,
+		icon,
+		onClick,
 		type,
 	},
 ];
diff --git a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
index 02340be4e2a0..ead34ec7b1c4 100644
--- a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
+++ b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
@@ -24,19 +24,19 @@ type UserCardWithDataProps = {
 	onClose: () => void;
 };
 
-type MenuActionProps = {
-	key: React.ReactNode;
-	id: string;
-	title: string;
-	items: {
-		id: string;
-		key: React.ReactNode;
-		content: React.ReactNode;
-		icon: string | undefined;
-		onClick: () => void;
-		type: string | undefined;
-	}[];
-}[];
+// type MenuActionProps = {
+// 	key: React.ReactNode;
+// 	id: string;
+// 	title: string;
+// 	items: {
+// 		id: string;
+// 		key: React.ReactNode;
+// 		content: React.ReactNode;
+// 		icon: string | undefined;
+// 		onClick: () => void;
+// 		type: string | undefined;
+// 	}[];
+// }[];
 
 const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWithDataProps): ReactElement => {
 	const t = useTranslation();
@@ -88,11 +88,10 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 		menuOptions !== undefined &&
 		Object.values(menuOptions)
 			.map((item) => ({
-				id: item.label.label as string,
-				key: item.label.label,
-				content: item.label.label,
-				icon: item.label.icon,
-				onClick: item.action,
+				id: item.content as string,
+				content: item.content,
+				icon: item.icon,
+				onClick: item.onClick,
 				type: item.type,
 			}))
 			.reduce((acc, item) => {
@@ -103,11 +102,11 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 					return acc;
 				}
 
-				const newSection = { key: item.key, id: group, title: '', items: [item] };
+				const newSection = { id: group, title: '', items: [item] };
 				acc.push(newSection);
 
 				return acc;
-			}, [] as MenuActionProps);
+			}, [] as any);
 
 	const menu = useMemo(() => {
 		if (!menuActions) {
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
index ecd5c02f321d..a449768e7ee6 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
@@ -39,12 +39,13 @@ export const useBlockUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: I
 		() =>
 			roomCanBlock && uid !== ownUserId
 				? {
-						label: t(isUserBlocked ? 'Unblock' : 'Block'),
+						// id: t(isUserBlocked ? 'Unblock' : 'Block'),
+						content: t(isUserBlocked ? 'Unblock' : 'Block'),
 						icon: 'ban' as const,
-						action: toggleBlockUserAction,
+						onClick: toggleBlockUserAction,
 				  }
 				: undefined,
-		[isUserBlocked, ownUserId, roomCanBlock, t, toggleBlockUserAction, uid],
+		[isUserBlocked, ownUserId, rid, roomCanBlock, t, toggleBlockUserAction, uid],
 	);
 
 	return toggleBlockUserOption;
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
index afd228de737c..b625779c1560 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
@@ -37,9 +37,9 @@ export const useCallAction = (user: Pick<IUser, '_id' | 'username'>): Action | u
 
 		return room && !isRoomFederated(room) && user._id !== ownUserId
 			? {
-					label: t('Start_call'),
+					content: t('Start_call'),
 					icon: 'phone' as const,
-					action,
+					onClick: action,
 					type: 'communication',
 			  }
 			: undefined;
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
index 1529c0d19480..747556777d11 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
@@ -34,9 +34,9 @@ export const useChangeLeaderAction = (user: Pick<IUser, '_id' | 'username'>, rid
 		() =>
 			roomCanSetLeader && userCanSetLeader
 				? {
-						label: t(isLeader ? 'Remove_as_leader' : 'Set_as_leader'),
+						content: t(isLeader ? 'Remove_as_leader' : 'Set_as_leader'),
 						icon: 'shield-alt' as const,
-						action: changeLeaderAction,
+						onClick: changeLeaderAction,
 						type: 'privileges',
 				  }
 				: undefined,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
index e6343178483a..89db2cdab972 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
@@ -122,9 +122,9 @@ export const useChangeModeratorAction = (user: Pick<IUser, '_id' | 'username'>,
 		() =>
 			(isRoomFederated(room) && roomCanSetModerator) || (!isRoomFederated(room) && roomCanSetModerator && userCanSetModerator)
 				? {
-						label: t(isModerator ? 'Remove_as_moderator' : 'Set_as_moderator'),
+						content: t(isModerator ? 'Remove_as_moderator' : 'Set_as_moderator'),
 						icon: 'shield-blank' as const,
-						action: changeModeratorAction,
+						onClick: changeModeratorAction,
 						type: 'privileges',
 				  }
 				: undefined,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
index 6268a9adb215..fb1970e3c676 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
@@ -106,9 +106,9 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 		() =>
 			(isRoomFederated(room) && roomCanSetOwner) || (!isRoomFederated(room) && roomCanSetOwner && userCanSetOwner)
 				? {
-						label: t(isOwner ? 'Remove_as_owner' : 'Set_as_owner'),
+						content: t(isOwner ? 'Remove_as_owner' : 'Set_as_owner'),
 						icon: 'shield-check' as const,
-						action: changeOwnerAction,
+						onClick: changeOwnerAction,
 						type: 'privileges',
 				  }
 				: undefined,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
index 2262ce453394..80f0be660d1c 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
@@ -42,9 +42,9 @@ export const useDirectMessageAction = (user: Pick<IUser, '_id' | 'username'>, ri
 		() =>
 			shouldOpenDirectMessage
 				? {
-						label: t('Direct_Message'),
+						content: t('Direct_Message'),
 						icon: 'balloon' as const,
-						action: openDirectMessage,
+						onClick: openDirectMessage,
 						type: 'communication',
 				  }
 				: undefined,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
index b35704efbb4e..1d5b04d18517 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
@@ -47,9 +47,9 @@ export const useIgnoreUserAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 		() =>
 			roomCanIgnore && uid !== ownUserId
 				? {
-						label: t(isIgnored ? 'Unignore' : 'Ignore'),
+						content: t(isIgnored ? 'Unignore' : 'Ignore'),
 						icon: 'ban' as const,
-						action: ignoreUserAction,
+						onClick: ignoreUserAction,
 						type: 'management',
 				  }
 				: undefined,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
index 4140c360f204..bfb1caa06236 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
@@ -101,9 +101,9 @@ export const useMuteUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IR
 
 		return roomCanMute && userCanMute
 			? {
-					label: t(isMuted ? 'Unmute_user' : 'Mute_user'),
+					content: t(isMuted ? 'Unmute_user' : 'Mute_user'),
 					icon: isMuted ? ('mic' as const) : ('mic-off' as const),
-					action,
+					onClick: action,
 					type: 'management',
 			  }
 			: undefined;
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
index 7d195b819f1b..01d0ed385a86 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
@@ -18,9 +18,9 @@ export const useRedirectModerationConsole = (uid: IUser['_id']): Action | undefi
 	};
 
 	return {
-		label: t('Moderation_Action_View_reports'),
+		content: t('Moderation_Action_View_reports'),
 		icon: 'warning' as const,
-		action: redirectModerationConsoleAction,
+		onClick: redirectModerationConsoleAction,
 		type: 'privileges',
 	};
 };
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
index 843d9b35b29d..eb645631550f 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -88,15 +88,15 @@ export const useRemoveUserAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 		() =>
 			roomCanRemove && userCanRemove
 				? {
-						label: (
-							<Box color='status-font-on-danger'>
-								<Icon mie='x4' name='cross' size='x20' />
-								{room?.teamMain ? t('Remove_from_team') : t('Remove_from_room')}
-							</Box>
-						),
-						// label: room?.teamMain ? t('Remove_from_team') : t('Remove_from_room'),
-						// icon: 'cross' as const,
-						action: removeUserOptionAction,
+						// content: (
+						// 	<Box color='status-font-on-danger'>
+						// 		<Icon mie='x4' name='cross' size='x20' />
+						// 		{room?.teamMain ? t('Remove_from_team') : t('Remove_from_room')}
+						// 	</Box>
+						// ),
+						content: room?.teamMain ? t('Remove_from_team') : t('Remove_from_room'),
+						icon: 'cross' as const,
+						onClick: removeUserOptionAction,
 						type: 'management',
 				  }
 				: undefined,

From 3cb84424d8c4c967d8c5b10d6cfd5302884007e7 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Tue, 11 Jul 2023 14:54:37 -0300
Subject: [PATCH 07/43] refactoring useUserInfoActions

---
 .../client/views/hooks/useActionSpread.ts     | 16 ++---
 .../views/room/UserCard/UserCardWithData.tsx  | 38 ++--------
 .../actions/useBlockUserAction.ts             |  5 +-
 .../actions/useCallAction.tsx                 |  4 +-
 .../actions/useChangeLeaderAction.ts          |  5 +-
 .../actions/useChangeModeratorAction.tsx      |  3 +-
 .../actions/useChangeOwnerAction.tsx          |  3 +-
 .../actions/useDirectMessageAction.ts         |  3 +-
 .../actions/useIgnoreUserAction.ts            |  3 +-
 .../actions/useMuteUserAction.tsx             |  3 +-
 .../actions/useRedirectModerationConsole.ts   |  3 +-
 .../actions/useRemoveUserAction.tsx           |  7 +-
 .../useUserInfoActions/useUserInfoActions.ts  | 70 +++++++++++++++++--
 13 files changed, 106 insertions(+), 57 deletions(-)

diff --git a/apps/meteor/client/views/hooks/useActionSpread.ts b/apps/meteor/client/views/hooks/useActionSpread.ts
index 132193257f69..56230c8e88df 100644
--- a/apps/meteor/client/views/hooks/useActionSpread.ts
+++ b/apps/meteor/client/views/hooks/useActionSpread.ts
@@ -3,25 +3,23 @@ import type { ComponentProps, ReactNode } from 'react';
 import { useMemo } from 'react';
 
 export type Action = {
-	content: ReactNode;
+	label: ReactNode;
 	icon?: ComponentProps<typeof Icon>['name'];
-	onClick: () => void;
+	action: () => void;
 	type?: string;
 };
 
 type MenuOption = {
-	content: ReactNode;
-	icon?: string;
-	onClick: () => void;
+	label: { label: ReactNode; icon?: string };
+	action: () => void;
 	type?: string;
 };
 
-const mapOptions = ([key, { onClick, content, icon, type }]: [string, Action]): [string, MenuOption] => [
+const mapOptions = ([key, { action, label, icon, type }]: [string, Action]): [string, MenuOption] => [
 	key,
 	{
-		content,
-		icon,
-		onClick,
+		label: { label, icon }, // TODO fuselage
+		action,
 		type,
 	},
 ];
diff --git a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
index ead34ec7b1c4..fe0eb0dcb130 100644
--- a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
+++ b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
@@ -13,7 +13,6 @@ import LocalTime from '../../../components/LocalTime';
 import UserCard from '../../../components/UserCard';
 import { ReactiveUserStatus } from '../../../components/UserStatus';
 import { useUserInfoQuery } from '../../../hooks/useUserInfoQuery';
-import { useActionSpread } from '../../hooks/useActionSpread';
 import { useUserInfoActions } from '../hooks/useUserInfoActions';
 
 type UserCardWithDataProps = {
@@ -82,47 +81,24 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 	});
 
 	const userActions = useUserInfoActions({ _id: user._id ?? '', username: user.username }, rid);
-	const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(userActions);
-
-	const menuActions =
-		menuOptions !== undefined &&
-		Object.values(menuOptions)
-			.map((item) => ({
-				id: item.content as string,
-				content: item.content,
-				icon: item.icon,
-				onClick: item.onClick,
-				type: item.type,
-			}))
-			.reduce((acc, item) => {
-				const group = item.type ? item.type : '';
-				const section = acc.find((section: { id: string }) => section.id === group);
-				if (section) {
-					section.items.push(item);
-					return acc;
-				}
-
-				const newSection = { id: group, title: '', items: [item] };
-				acc.push(newSection);
-
-				return acc;
-			}, [] as any);
+
+	console.log({ userActions });
 
 	const menu = useMemo(() => {
-		if (!menuActions) {
+		if (!userActions) {
 			return null;
 		}
 
-		return <GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuActions} placement='bottom-start' />;
-	}, [menuActions, t]);
+		return <GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={userActions.menuActions} placement='bottom-start' />;
+	}, [userActions, t]);
 
 	const actions = useMemo(() => {
 		const mapAction = ([key, { label, icon, action }]: any): ReactElement => (
 			<UserCard.Action key={key} label={label} aria-label={label} onClick={action} icon={icon} />
 		);
 
-		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);
-	}, [actionsDefinition, menu]);
+		return [...userActions.actions.map(mapAction), menu].filter(Boolean);
+	}, [userActions.actions, menu]);
 
 	return (
 		<>
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
index a449768e7ee6..751a6275cc39 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
@@ -5,8 +5,9 @@ import { useMemo } from 'react';
 
 import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
+import type { UserInfoAction } from '../useUserInfoActions';
 
-export const useBlockUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): Action | undefined => {
+export const useBlockUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const currentSubscription = useUserSubscription(rid);
@@ -45,7 +46,7 @@ export const useBlockUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: I
 						onClick: toggleBlockUserAction,
 				  }
 				: undefined,
-		[isUserBlocked, ownUserId, rid, roomCanBlock, t, toggleBlockUserAction, uid],
+		[isUserBlocked, ownUserId, roomCanBlock, t, toggleBlockUserAction, uid],
 	);
 
 	return toggleBlockUserOption;
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
index b625779c1560..8cfcf4823da8 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
@@ -8,8 +8,9 @@ import { useVideoConfDispatchOutgoing, useVideoConfIsCalling, useVideoConfIsRing
 import { VideoConfManager } from '../../../../../lib/VideoConfManager';
 import type { Action } from '../../../../hooks/useActionSpread';
 import { useVideoConfWarning } from '../../../contextualBar/VideoConference/hooks/useVideoConfWarning';
+import type { UserInfoAction } from '../useUserInfoActions';
 
-export const useCallAction = (user: Pick<IUser, '_id' | 'username'>): Action | undefined => {
+export const useCallAction = (user: Pick<IUser, '_id' | 'username'>): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const usernameSubscription = useUserSubscriptionByName(user.username ?? '');
 	const room = useUserRoom(usernameSubscription?.rid || '');
@@ -37,6 +38,7 @@ export const useCallAction = (user: Pick<IUser, '_id' | 'username'>): Action | u
 
 		return room && !isRoomFederated(room) && user._id !== ownUserId
 			? {
+					id: user._id,
 					content: t('Start_call'),
 					icon: 'phone' as const,
 					onClick: action,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
index 747556777d11..94f2e5f9bb03 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
@@ -4,12 +4,13 @@ import { useTranslation, usePermission, useUserRoom, useUserSubscription } from
 import { useMemo } from 'react';
 
 import { useEndpointAction } from '../../../../../hooks/useEndpointAction';
-import type { Action } from '../../../../hooks/useActionSpread';
+// import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import { useUserHasRoomRole } from '../../useUserHasRoomRole';
+import type { UserInfoAction } from '../useUserInfoActions';
 
 // TODO: Remove endpoint concatenation
-export const useChangeLeaderAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): Action | undefined => {
+export const useChangeLeaderAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const room = useUserRoom(rid);
 	const { _id: uid } = user;
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
index 89db2cdab972..2eb0e34117ae 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
@@ -12,6 +12,7 @@ import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import { useUserHasRoomRole } from '../../useUserHasRoomRole';
+import type { UserInfoAction } from '../useUserInfoActions';
 
 const getWarningModalForFederatedRooms = (
 	closeModalFn: () => void,
@@ -33,7 +34,7 @@ const getWarningModalForFederatedRooms = (
 );
 
 // TODO: Remove endpoint concatenation
-export const useChangeModeratorAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): Action | undefined => {
+export const useChangeModeratorAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const room = useUserRoom(rid);
 	const { _id: uid } = user;
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
index fb1970e3c676..54a441e02611 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
@@ -12,6 +12,7 @@ import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import { useUserHasRoomRole } from '../../useUserHasRoomRole';
+import type { UserInfoAction } from '../useUserInfoActions';
 
 const getWarningModalForFederatedRooms = (
 	closeModalFn: () => void,
@@ -33,7 +34,7 @@ const getWarningModalForFederatedRooms = (
 );
 
 // TODO: Remove endpoint concatenation
-export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): Action | undefined => {
+export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const room = useUserRoom(rid);
 	const { _id: uid } = user;
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
index 80f0be660d1c..03cd4e03c1c8 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
@@ -4,6 +4,7 @@ import { useTranslation, usePermission, useRoute, useUserSubscription, useUserSu
 import { useMemo } from 'react';
 
 import type { Action } from '../../../../hooks/useActionSpread';
+import type { UserInfoAction } from '../useUserInfoActions';
 
 const getShouldOpenDirectMessage = (
 	currentSubscription?: ISubscription,
@@ -16,7 +17,7 @@ const getShouldOpenDirectMessage = (
 	return (canOpenDm && directMessageIsNotAlreadyOpen) ?? false;
 };
 
-export const useDirectMessageAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): Action | undefined => {
+export const useDirectMessageAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const usernameSubscription = useUserSubscriptionByName(user.username ?? '');
 	const currentSubscription = useUserSubscription(rid);
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
index 1d5b04d18517..dd6d53ab80ec 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
@@ -12,8 +12,9 @@ import { useMemo } from 'react';
 
 import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
+import type { UserInfoAction } from '../useUserInfoActions';
 
-export const useIgnoreUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): Action | undefined => {
+export const useIgnoreUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const room = useUserRoom(rid);
 	const { _id: uid } = user;
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
index bfb1caa06236..e7777122218b 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
@@ -17,6 +17,7 @@ import GenericModal from '../../../../../components/GenericModal';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
+import type { UserInfoAction } from '../useUserInfoActions';
 
 const getUserIsMuted = (
 	user: Pick<IUser, '_id' | 'username'>,
@@ -38,7 +39,7 @@ const getUserIsMuted = (
 	return room && Array.isArray(room.muted) && room.muted.indexOf(user.username ?? '') > -1;
 };
 
-export const useMuteUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): Action | undefined => {
+export const useMuteUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const room = useUserRoom(rid);
 	const userCanMute = usePermission('mute-user', rid);
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
index 01d0ed385a86..a6a6dce28811 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
@@ -2,8 +2,9 @@ import type { IUser } from '@rocket.chat/core-typings';
 import { usePermission, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 
 import type { Action } from '../../../../hooks/useActionSpread';
+import type { UserInfoAction } from '../useUserInfoActions';
 
-export const useRedirectModerationConsole = (uid: IUser['_id']): Action | undefined => {
+export const useRedirectModerationConsole = (uid: IUser['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const hasPermissionToView = usePermission('view-moderation-console');
 	const router = useRoute('moderation-console');
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
index eb645631550f..f1e03f724772 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -13,9 +13,14 @@ import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import type { Action } from '../../../../hooks/useActionSpread';
 import RemoveUsersModal from '../../../../teams/contextualBar/members/RemoveUsersModal';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
+import type { UserInfoAction } from '../useUserInfoActions';
 
 // TODO: Remove endpoint concatenation
-export const useRemoveUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id'], reload?: () => void): Action | undefined => {
+export const useRemoveUserAction = (
+	user: Pick<IUser, '_id' | 'username'>,
+	rid: IRoom['_id'],
+	reload?: () => void,
+): UserInfoAction | undefined => {
 	const t = useTranslation();
 	const room = useUserRoom(rid);
 	const currentUser = useUser();
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
index 2eba0241ae40..2718cf9013c0 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
@@ -1,8 +1,9 @@
 import type { IRoom, IUser } from '@rocket.chat/core-typings';
+import type { Icon } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactNode } from 'react';
 import { useMemo } from 'react';
 
 import { useEmbeddedLayout } from '../../../../hooks/useEmbeddedLayout';
-import type { Action } from '../../../hooks/useActionSpread';
 import { useBlockUserAction } from './actions/useBlockUserAction';
 import { useCallAction } from './actions/useCallAction';
 import { useChangeLeaderAction } from './actions/useChangeLeaderAction';
@@ -14,13 +15,36 @@ import { useMuteUserAction } from './actions/useMuteUserAction';
 import { useRedirectModerationConsole } from './actions/useRedirectModerationConsole';
 import { useRemoveUserAction } from './actions/useRemoveUserAction';
 
+export type UserInfoAction = {
+	id: string;
+	content: ReactNode;
+	icon?: ComponentProps<typeof Icon>['name'];
+	onClick: () => void;
+	type?: string;
+};
+
+type UserMenuOption = {
+	content: ReactNode;
+	icon?: string;
+	onClick: () => void;
+	type?: string;
+};
+
+const mapUserOptions = ([key, { onClick, content, icon, type }]: [string, UserInfoAction]): [string, UserMenuOption] => [
+	key,
+	{
+		content,
+		icon,
+		onClick,
+		type,
+	},
+];
+
 export const useUserInfoActions = (
 	user: Pick<IUser, '_id' | 'username'>,
 	rid: IRoom['_id'],
 	reload?: () => void,
-): {
-	[key: string]: Action;
-} => {
+): { actions: [string, UserInfoAction][]; menuActions: any | undefined } => {
 	const blockUserOption = useBlockUserAction(user, rid);
 	const changeLeaderOption = useChangeLeaderAction(user, rid);
 	const changeModeratorOption = useChangeModeratorAction(user, rid);
@@ -33,7 +57,7 @@ export const useUserInfoActions = (
 	const callOption = useCallAction(user);
 	const isLayoutEmbedded = useEmbeddedLayout();
 
-	return useMemo(
+	const userinfoActions = useMemo(
 		() => ({
 			...(openDirectMessageOption && !isLayoutEmbedded && { openDirectMessage: openDirectMessageOption }),
 			...(callOption && { call: callOption }),
@@ -60,4 +84,40 @@ export const useUserInfoActions = (
 			openModerationConsoleOption,
 		],
 	);
+
+	const actionSpread = useMemo(() => {
+		const entries = Object.entries(userinfoActions);
+
+		const options = entries.slice(0, 2);
+		const menuOptions = entries.slice(2, entries.length).map(mapUserOptions);
+		const menu = menuOptions.length ? Object.fromEntries(menuOptions) : undefined;
+
+		const menuActions =
+			menu !== undefined &&
+			Object.values(menu)
+				.map((item) => ({
+					id: item.content as string,
+					content: item.content,
+					icon: item.icon,
+					onClick: item.onClick,
+					type: item.type,
+				}))
+				.reduce((acc, item) => {
+					const group = item.type ? item.type : '';
+					const section = acc.find((section: { id: string }) => section.id === group);
+					if (section) {
+						section.items.push(item);
+						return acc;
+					}
+
+					const newSection = { id: group, title: '', items: [item] };
+					acc.push(newSection);
+
+					return acc;
+				}, [] as any);
+
+		return { actions: options, menuActions };
+	}, [userinfoActions]);
+
+	return actionSpread;
 };

From e3f06e3c1128617c33611906cc47616ff37b097c Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Tue, 11 Jul 2023 17:00:45 -0300
Subject: [PATCH 08/43] more changes on useuserInfoAction hook

---
 .../actions/useBlockUserAction.ts             |  2 +-
 .../actions/useChangeLeaderAction.ts          |  1 +
 .../actions/useChangeModeratorAction.tsx      |  1 +
 .../actions/useChangeOwnerAction.tsx          |  1 +
 .../actions/useDirectMessageAction.ts         |  1 +
 .../actions/useIgnoreUserAction.ts            |  1 +
 .../actions/useMuteUserAction.tsx             |  1 +
 .../actions/useRedirectModerationConsole.ts   |  1 +
 .../actions/useRemoveUserAction.tsx           |  1 +
 .../useUserInfoActions/useUserInfoActions.ts  | 21 ++-----------------
 10 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
index 751a6275cc39..e6b09c11b535 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
@@ -40,7 +40,7 @@ export const useBlockUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: I
 		() =>
 			roomCanBlock && uid !== ownUserId
 				? {
-						// id: t(isUserBlocked ? 'Unblock' : 'Block'),
+					id: user._id,
 						content: t(isUserBlocked ? 'Unblock' : 'Block'),
 						icon: 'ban' as const,
 						onClick: toggleBlockUserAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
index 94f2e5f9bb03..11d5566ce71f 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
@@ -35,6 +35,7 @@ export const useChangeLeaderAction = (user: Pick<IUser, '_id' | 'username'>, rid
 		() =>
 			roomCanSetLeader && userCanSetLeader
 				? {
+					id: user._id,
 						content: t(isLeader ? 'Remove_as_leader' : 'Set_as_leader'),
 						icon: 'shield-alt' as const,
 						onClick: changeLeaderAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
index 2eb0e34117ae..8f745128566e 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
@@ -123,6 +123,7 @@ export const useChangeModeratorAction = (user: Pick<IUser, '_id' | 'username'>,
 		() =>
 			(isRoomFederated(room) && roomCanSetModerator) || (!isRoomFederated(room) && roomCanSetModerator && userCanSetModerator)
 				? {
+						id: user._id,
 						content: t(isModerator ? 'Remove_as_moderator' : 'Set_as_moderator'),
 						icon: 'shield-blank' as const,
 						onClick: changeModeratorAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
index 54a441e02611..cef98d920248 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
@@ -107,6 +107,7 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 		() =>
 			(isRoomFederated(room) && roomCanSetOwner) || (!isRoomFederated(room) && roomCanSetOwner && userCanSetOwner)
 				? {
+						id: user._id,
 						content: t(isOwner ? 'Remove_as_owner' : 'Set_as_owner'),
 						icon: 'shield-check' as const,
 						onClick: changeOwnerAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
index 03cd4e03c1c8..b2ca395c6554 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
@@ -43,6 +43,7 @@ export const useDirectMessageAction = (user: Pick<IUser, '_id' | 'username'>, ri
 		() =>
 			shouldOpenDirectMessage
 				? {
+						id: user._id,
 						content: t('Direct_Message'),
 						icon: 'balloon' as const,
 						onClick: openDirectMessage,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
index dd6d53ab80ec..db6b348b932e 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
@@ -48,6 +48,7 @@ export const useIgnoreUserAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 		() =>
 			roomCanIgnore && uid !== ownUserId
 				? {
+						id: user._id,
 						content: t(isIgnored ? 'Unignore' : 'Ignore'),
 						icon: 'ban' as const,
 						onClick: ignoreUserAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
index e7777122218b..d4ba68916942 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
@@ -102,6 +102,7 @@ export const useMuteUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IR
 
 		return roomCanMute && userCanMute
 			? {
+					id: user._id,
 					content: t(isMuted ? 'Unmute_user' : 'Mute_user'),
 					icon: isMuted ? ('mic' as const) : ('mic-off' as const),
 					onClick: action,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
index a6a6dce28811..770cba06cdc3 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
@@ -19,6 +19,7 @@ export const useRedirectModerationConsole = (uid: IUser['_id']): UserInfoAction
 	};
 
 	return {
+		id: '',
 		content: t('Moderation_Action_View_reports'),
 		icon: 'warning' as const,
 		onClick: redirectModerationConsoleAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
index f1e03f724772..a3f05da0220d 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -99,6 +99,7 @@ export const useRemoveUserAction = (
 						// 		{room?.teamMain ? t('Remove_from_team') : t('Remove_from_room')}
 						// 	</Box>
 						// ),
+						id: '',
 						content: room?.teamMain ? t('Remove_from_team') : t('Remove_from_room'),
 						icon: 'cross' as const,
 						onClick: removeUserOptionAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
index 2718cf9013c0..51ad949b2ee9 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
@@ -23,23 +23,6 @@ export type UserInfoAction = {
 	type?: string;
 };
 
-type UserMenuOption = {
-	content: ReactNode;
-	icon?: string;
-	onClick: () => void;
-	type?: string;
-};
-
-const mapUserOptions = ([key, { onClick, content, icon, type }]: [string, UserInfoAction]): [string, UserMenuOption] => [
-	key,
-	{
-		content,
-		icon,
-		onClick,
-		type,
-	},
-];
-
 export const useUserInfoActions = (
 	user: Pick<IUser, '_id' | 'username'>,
 	rid: IRoom['_id'],
@@ -89,8 +72,8 @@ export const useUserInfoActions = (
 		const entries = Object.entries(userinfoActions);
 
 		const options = entries.slice(0, 2);
-		const menuOptions = entries.slice(2, entries.length).map(mapUserOptions);
-		const menu = menuOptions.length ? Object.fromEntries(menuOptions) : undefined;
+		const slicedOptions = entries.slice(2, entries.length);
+		const menu = slicedOptions.length ? Object.fromEntries(slicedOptions) : undefined;
 
 		const menuActions =
 			menu !== undefined &&

From 732356ec8c2facf47c33b4b9b49c6856075afde3 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Wed, 12 Jul 2023 12:14:56 -0300
Subject: [PATCH 09/43] fix onClick for actions on usercard

---
 .../client/views/room/UserCard/UserCardWithData.tsx       | 8 +++-----
 .../useUserInfoActions/actions/useBlockUserAction.ts      | 2 --
 .../hooks/useUserInfoActions/actions/useCallAction.tsx    | 2 --
 .../useUserInfoActions/actions/useChangeLeaderAction.ts   | 2 --
 .../actions/useChangeModeratorAction.tsx                  | 2 --
 .../useUserInfoActions/actions/useChangeOwnerAction.tsx   | 2 --
 .../useUserInfoActions/actions/useDirectMessageAction.ts  | 2 --
 .../useUserInfoActions/actions/useIgnoreUserAction.ts     | 2 --
 .../useUserInfoActions/actions/useMuteUserAction.tsx      | 2 --
 .../actions/useRedirectModerationConsole.ts               | 2 --
 .../useUserInfoActions/actions/useRemoveUserAction.tsx    | 2 --
 .../room/hooks/useUserInfoActions/useUserInfoActions.ts   | 1 -
 12 files changed, 3 insertions(+), 26 deletions(-)

diff --git a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
index fe0eb0dcb130..40aa6125685c 100644
--- a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
+++ b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
@@ -82,8 +82,6 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 
 	const userActions = useUserInfoActions({ _id: user._id ?? '', username: user.username }, rid);
 
-	console.log({ userActions });
-
 	const menu = useMemo(() => {
 		if (!userActions) {
 			return null;
@@ -93,9 +91,9 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 	}, [userActions, t]);
 
 	const actions = useMemo(() => {
-		const mapAction = ([key, { label, icon, action }]: any): ReactElement => (
-			<UserCard.Action key={key} label={label} aria-label={label} onClick={action} icon={icon} />
-		);
+		const mapAction = ([key, { content, icon, onClick }]: any): ReactElement => {
+			return <UserCard.Action title={content} key={key} content={content} aria-label={content} onClick={onClick} icon={icon} />;
+		};
 
 		return [...userActions.actions.map(mapAction), menu].filter(Boolean);
 	}, [userActions.actions, menu]);
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
index e6b09c11b535..216ff4e10216 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useBlockUserAction.ts
@@ -3,7 +3,6 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useTranslation, useMethod, useToastMessageDispatch, useUserId, useUserSubscription, useUserRoom } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import type { UserInfoAction } from '../useUserInfoActions';
 
@@ -40,7 +39,6 @@ export const useBlockUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: I
 		() =>
 			roomCanBlock && uid !== ownUserId
 				? {
-					id: user._id,
 						content: t(isUserBlocked ? 'Unblock' : 'Block'),
 						icon: 'ban' as const,
 						onClick: toggleBlockUserAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
index 8cfcf4823da8..5e20d0360bbb 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
@@ -6,7 +6,6 @@ import { useMemo } from 'react';
 import { closeUserCard } from '../../../../../../app/ui/client/lib/userCard';
 import { useVideoConfDispatchOutgoing, useVideoConfIsCalling, useVideoConfIsRinging } from '../../../../../contexts/VideoConfContext';
 import { VideoConfManager } from '../../../../../lib/VideoConfManager';
-import type { Action } from '../../../../hooks/useActionSpread';
 import { useVideoConfWarning } from '../../../contextualBar/VideoConference/hooks/useVideoConfWarning';
 import type { UserInfoAction } from '../useUserInfoActions';
 
@@ -38,7 +37,6 @@ export const useCallAction = (user: Pick<IUser, '_id' | 'username'>): UserInfoAc
 
 		return room && !isRoomFederated(room) && user._id !== ownUserId
 			? {
-					id: user._id,
 					content: t('Start_call'),
 					icon: 'phone' as const,
 					onClick: action,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
index 11d5566ce71f..c94243046830 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
@@ -4,7 +4,6 @@ import { useTranslation, usePermission, useUserRoom, useUserSubscription } from
 import { useMemo } from 'react';
 
 import { useEndpointAction } from '../../../../../hooks/useEndpointAction';
-// import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import { useUserHasRoomRole } from '../../useUserHasRoomRole';
 import type { UserInfoAction } from '../useUserInfoActions';
@@ -35,7 +34,6 @@ export const useChangeLeaderAction = (user: Pick<IUser, '_id' | 'username'>, rid
 		() =>
 			roomCanSetLeader && userCanSetLeader
 				? {
-					id: user._id,
 						content: t(isLeader ? 'Remove_as_leader' : 'Set_as_leader'),
 						icon: 'shield-alt' as const,
 						onClick: changeLeaderAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
index 8f745128566e..2b8d9bc4f16c 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
@@ -9,7 +9,6 @@ import React, { useCallback, useMemo } from 'react';
 import GenericModal from '../../../../../components/GenericModal';
 import { useEndpointAction } from '../../../../../hooks/useEndpointAction';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
-import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import { useUserHasRoomRole } from '../../useUserHasRoomRole';
 import type { UserInfoAction } from '../useUserInfoActions';
@@ -123,7 +122,6 @@ export const useChangeModeratorAction = (user: Pick<IUser, '_id' | 'username'>,
 		() =>
 			(isRoomFederated(room) && roomCanSetModerator) || (!isRoomFederated(room) && roomCanSetModerator && userCanSetModerator)
 				? {
-						id: user._id,
 						content: t(isModerator ? 'Remove_as_moderator' : 'Set_as_moderator'),
 						icon: 'shield-blank' as const,
 						onClick: changeModeratorAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
index cef98d920248..0125356b2635 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
@@ -9,7 +9,6 @@ import React, { useCallback, useMemo } from 'react';
 import GenericModal from '../../../../../components/GenericModal';
 import { useEndpointAction } from '../../../../../hooks/useEndpointAction';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
-import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import { useUserHasRoomRole } from '../../useUserHasRoomRole';
 import type { UserInfoAction } from '../useUserInfoActions';
@@ -107,7 +106,6 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 		() =>
 			(isRoomFederated(room) && roomCanSetOwner) || (!isRoomFederated(room) && roomCanSetOwner && userCanSetOwner)
 				? {
-						id: user._id,
 						content: t(isOwner ? 'Remove_as_owner' : 'Set_as_owner'),
 						icon: 'shield-check' as const,
 						onClick: changeOwnerAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
index b2ca395c6554..cb1234f58db4 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
@@ -3,7 +3,6 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useTranslation, usePermission, useRoute, useUserSubscription, useUserSubscriptionByName } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-import type { Action } from '../../../../hooks/useActionSpread';
 import type { UserInfoAction } from '../useUserInfoActions';
 
 const getShouldOpenDirectMessage = (
@@ -43,7 +42,6 @@ export const useDirectMessageAction = (user: Pick<IUser, '_id' | 'username'>, ri
 		() =>
 			shouldOpenDirectMessage
 				? {
-						id: user._id,
 						content: t('Direct_Message'),
 						icon: 'balloon' as const,
 						onClick: openDirectMessage,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
index db6b348b932e..58b4a1529254 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
@@ -10,7 +10,6 @@ import {
 } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import type { UserInfoAction } from '../useUserInfoActions';
 
@@ -48,7 +47,6 @@ export const useIgnoreUserAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 		() =>
 			roomCanIgnore && uid !== ownUserId
 				? {
-						id: user._id,
 						content: t(isIgnored ? 'Unignore' : 'Ignore'),
 						icon: 'ban' as const,
 						onClick: ignoreUserAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
index d4ba68916942..eb54ea1030d6 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
@@ -15,7 +15,6 @@ import React, { useMemo } from 'react';
 
 import GenericModal from '../../../../../components/GenericModal';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
-import type { Action } from '../../../../hooks/useActionSpread';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import type { UserInfoAction } from '../useUserInfoActions';
 
@@ -102,7 +101,6 @@ export const useMuteUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IR
 
 		return roomCanMute && userCanMute
 			? {
-					id: user._id,
 					content: t(isMuted ? 'Unmute_user' : 'Mute_user'),
 					icon: isMuted ? ('mic' as const) : ('mic-off' as const),
 					onClick: action,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
index 770cba06cdc3..0c10391dfafe 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
@@ -1,7 +1,6 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { usePermission, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 
-import type { Action } from '../../../../hooks/useActionSpread';
 import type { UserInfoAction } from '../useUserInfoActions';
 
 export const useRedirectModerationConsole = (uid: IUser['_id']): UserInfoAction | undefined => {
@@ -19,7 +18,6 @@ export const useRedirectModerationConsole = (uid: IUser['_id']): UserInfoAction
 	};
 
 	return {
-		id: '',
 		content: t('Moderation_Action_View_reports'),
 		icon: 'warning' as const,
 		onClick: redirectModerationConsoleAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
index a3f05da0220d..64df911e41fa 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -10,7 +10,6 @@ import GenericModal from '../../../../../components/GenericModal';
 import { useEndpointAction } from '../../../../../hooks/useEndpointAction';
 import * as Federation from '../../../../../lib/federation/Federation';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
-import type { Action } from '../../../../hooks/useActionSpread';
 import RemoveUsersModal from '../../../../teams/contextualBar/members/RemoveUsersModal';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import type { UserInfoAction } from '../useUserInfoActions';
@@ -99,7 +98,6 @@ export const useRemoveUserAction = (
 						// 		{room?.teamMain ? t('Remove_from_team') : t('Remove_from_room')}
 						// 	</Box>
 						// ),
-						id: '',
 						content: room?.teamMain ? t('Remove_from_team') : t('Remove_from_room'),
 						icon: 'cross' as const,
 						onClick: removeUserOptionAction,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
index 51ad949b2ee9..f647b3d36d29 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
@@ -16,7 +16,6 @@ import { useRedirectModerationConsole } from './actions/useRedirectModerationCon
 import { useRemoveUserAction } from './actions/useRemoveUserAction';
 
 export type UserInfoAction = {
-	id: string;
 	content: ReactNode;
 	icon?: ComponentProps<typeof Icon>['name'];
 	onClick: () => void;

From 80894557be62899b8303e83bf53e567f21fa6a9a Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Wed, 12 Jul 2023 12:15:24 -0300
Subject: [PATCH 10/43] revert useActionSpread

---
 apps/meteor/client/views/hooks/useActionSpread.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/meteor/client/views/hooks/useActionSpread.ts b/apps/meteor/client/views/hooks/useActionSpread.ts
index 56230c8e88df..513956800ec9 100644
--- a/apps/meteor/client/views/hooks/useActionSpread.ts
+++ b/apps/meteor/client/views/hooks/useActionSpread.ts
@@ -6,21 +6,18 @@ export type Action = {
 	label: ReactNode;
 	icon?: ComponentProps<typeof Icon>['name'];
 	action: () => void;
-	type?: string;
 };
 
 type MenuOption = {
 	label: { label: ReactNode; icon?: string };
 	action: () => void;
-	type?: string;
 };
 
-const mapOptions = ([key, { action, label, icon, type }]: [string, Action]): [string, MenuOption] => [
+const mapOptions = ([key, { action, label, icon }]: [string, Action]): [string, MenuOption] => [
 	key,
 	{
 		label: { label, icon }, // TODO fuselage
 		action,
-		type,
 	},
 ];
 

From efc1f0987a38b0b129aa106e638971af7d346883 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Wed, 12 Jul 2023 14:57:43 -0300
Subject: [PATCH 11/43] refactor actions on useUserInfoActions

---
 .../useUserInfoActions/useUserInfoActions.ts  | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
index f647b3d36d29..90d85db45456 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
@@ -27,43 +27,43 @@ export const useUserInfoActions = (
 	rid: IRoom['_id'],
 	reload?: () => void,
 ): { actions: [string, UserInfoAction][]; menuActions: any | undefined } => {
-	const blockUserOption = useBlockUserAction(user, rid);
-	const changeLeaderOption = useChangeLeaderAction(user, rid);
-	const changeModeratorOption = useChangeModeratorAction(user, rid);
-	const openModerationConsoleOption = useRedirectModerationConsole(user._id);
-	const changeOwnerOption = useChangeOwnerAction(user, rid);
-	const openDirectMessageOption = useDirectMessageAction(user, rid);
-	const ignoreUserOption = useIgnoreUserAction(user, rid);
-	const muteUserOption = useMuteUserAction(user, rid);
-	const removeUserOption = useRemoveUserAction(user, rid, reload);
-	const callOption = useCallAction(user);
+	const blockUser = useBlockUserAction(user, rid);
+	const changeLeader = useChangeLeaderAction(user, rid);
+	const changeModerator = useChangeModeratorAction(user, rid);
+	const openModerationConsole = useRedirectModerationConsole(user._id);
+	const changeOwner = useChangeOwnerAction(user, rid);
+	const openDirectMessage = useDirectMessageAction(user, rid);
+	const ignoreUser = useIgnoreUserAction(user, rid);
+	const muteUser = useMuteUserAction(user, rid);
+	const removeUser = useRemoveUserAction(user, rid, reload);
+	const call = useCallAction(user);
 	const isLayoutEmbedded = useEmbeddedLayout();
 
 	const userinfoActions = useMemo(
 		() => ({
-			...(openDirectMessageOption && !isLayoutEmbedded && { openDirectMessage: openDirectMessageOption }),
-			...(callOption && { call: callOption }),
-			...(changeOwnerOption && { changeOwner: changeOwnerOption }),
-			...(changeLeaderOption && { changeLeader: changeLeaderOption }),
-			...(changeModeratorOption && { changeModerator: changeModeratorOption }),
-			...(openModerationConsoleOption && { openModerationConsole: openModerationConsoleOption }),
-			...(ignoreUserOption && { ignoreUser: ignoreUserOption }),
-			...(muteUserOption && { muteUser: muteUserOption }),
-			...(blockUserOption && { toggleBlock: blockUserOption }),
-			...(removeUserOption && { removeUser: removeUserOption }),
+			...(openDirectMessage && !isLayoutEmbedded && { openDirectMessage }),
+			...(call && { call }),
+			...(changeOwner && { changeOwner }),
+			...(changeLeader && { changeLeader }),
+			...(changeModerator && { changeModerator }),
+			...(openModerationConsole && { openModerationConsole }),
+			...(ignoreUser && { ignoreUser }),
+			...(muteUser && { muteUser }),
+			...(blockUser && { toggleBlock: blockUser }),
+			...(removeUser && { removeUser }),
 		}),
 		[
-			openDirectMessageOption,
+			openDirectMessage,
 			isLayoutEmbedded,
-			callOption,
-			changeOwnerOption,
-			changeLeaderOption,
-			changeModeratorOption,
-			ignoreUserOption,
-			muteUserOption,
-			blockUserOption,
-			removeUserOption,
-			openModerationConsoleOption,
+			call,
+			changeOwner,
+			changeLeader,
+			changeModerator,
+			ignoreUser,
+			muteUser,
+			blockUser,
+			removeUser,
+			openModerationConsole,
 		],
 	);
 

From 09e6f8cee8b06117b112194ec6f6e1e66ae82326 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 13 Jul 2023 15:27:55 -0300
Subject: [PATCH 12/43] add danger variant to remove room item

---
 .../actions/useRemoveUserAction.tsx           |  8 +----
 .../useUserInfoActions/useUserInfoActions.ts  |  2 ++
 yarn.lock                                     | 35 +++++++++++--------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
index 64df911e41fa..51e9ea978731 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -1,6 +1,5 @@
 import type { IRoom, IUser } from '@rocket.chat/core-typings';
 import { isRoomFederated } from '@rocket.chat/core-typings';
-import { Box, Icon } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { escapeHTML } from '@rocket.chat/string-helpers';
 import { usePermission, useSetModal, useTranslation, useUser, useUserRoom, useUserSubscription } from '@rocket.chat/ui-contexts';
@@ -92,16 +91,11 @@ export const useRemoveUserAction = (
 		() =>
 			roomCanRemove && userCanRemove
 				? {
-						// content: (
-						// 	<Box color='status-font-on-danger'>
-						// 		<Icon mie='x4' name='cross' size='x20' />
-						// 		{room?.teamMain ? t('Remove_from_team') : t('Remove_from_room')}
-						// 	</Box>
-						// ),
 						content: room?.teamMain ? t('Remove_from_team') : t('Remove_from_room'),
 						icon: 'cross' as const,
 						onClick: removeUserOptionAction,
 						type: 'management',
+						color: 'alert',
 				  }
 				: undefined,
 		[room, roomCanRemove, userCanRemove, removeUserOptionAction, t],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
index 90d85db45456..4e07e4b86019 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
@@ -20,6 +20,7 @@ export type UserInfoAction = {
 	icon?: ComponentProps<typeof Icon>['name'];
 	onClick: () => void;
 	type?: string;
+	color?: string;
 };
 
 export const useUserInfoActions = (
@@ -78,6 +79,7 @@ export const useUserInfoActions = (
 			menu !== undefined &&
 			Object.values(menu)
 				.map((item) => ({
+					variant: item.color === 'alert' && ('danger' as const),
 					id: item.content as string,
 					content: item.content,
 					icon: item.icon,
diff --git a/yarn.lock b/yarn.lock
index 364eca70ff70..739b12b6c517 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9632,7 +9632,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/css-in-js@npm:^0.31.23, @rocket.chat/css-in-js@npm:~0.31.23-dev.160":
+"@rocket.chat/css-in-js@npm:^0.31.23, @rocket.chat/css-in-js@npm:~0.31.23-dev.160, @rocket.chat/css-in-js@npm:~0.31.23-dev.161":
   version: 0.31.23
   resolution: "@rocket.chat/css-in-js@npm:0.31.23"
   dependencies:
@@ -9658,7 +9658,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/css-supports@npm:^0.31.23, @rocket.chat/css-supports@npm:~0.31.23-dev.160":
+"@rocket.chat/css-supports@npm:^0.31.23, @rocket.chat/css-supports@npm:~0.31.23-dev.160, @rocket.chat/css-supports@npm:~0.31.23-dev.161":
   version: 0.31.23
   resolution: "@rocket.chat/css-supports@npm:0.31.23"
   dependencies:
@@ -9867,13 +9867,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-tokens@npm:next, @rocket.chat/fuselage-tokens@npm:~0.32.0-dev.336":
+"@rocket.chat/fuselage-tokens@npm:next":
   version: 0.32.0-dev.336
   resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.336"
   checksum: 2cf52211b3a3ee9a6111db46bc05918244190be7a6fef482011dccc0cc9a0777362dd91010e9df45c67b2c3bcaf00e35a7fbdddfdb5e7f683a19baa1fa8211d0
   languageName: node
   linkType: hard
 
+"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.337":
+  version: 0.32.0-dev.337
+  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.337"
+  checksum: d3250b264b6adabd15754268d5f7c7f1419a434b40de9b899a38ed778b5d19f136eafb43ad5aa0eee782b955c8b590791397ce338a2822f3406fc975c45e0e67
+  languageName: node
+  linkType: hard
+
 "@rocket.chat/fuselage-ui-kit@workspace:^, @rocket.chat/fuselage-ui-kit@workspace:packages/fuselage-ui-kit, @rocket.chat/fuselage-ui-kit@workspace:~":
   version: 0.0.0-use.local
   resolution: "@rocket.chat/fuselage-ui-kit@workspace:packages/fuselage-ui-kit"
@@ -9930,14 +9937,14 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/fuselage@npm:next":
-  version: 0.32.0-dev.386
-  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.386"
-  dependencies:
-    "@rocket.chat/css-in-js": ~0.31.23-dev.160
-    "@rocket.chat/css-supports": ~0.31.23-dev.160
-    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.336
-    "@rocket.chat/memo": ~0.31.23-dev.160
-    "@rocket.chat/styled": ~0.31.23-dev.160
+  version: 0.32.0-dev.387
+  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.387"
+  dependencies:
+    "@rocket.chat/css-in-js": ~0.31.23-dev.161
+    "@rocket.chat/css-supports": ~0.31.23-dev.161
+    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.337
+    "@rocket.chat/memo": ~0.31.23-dev.161
+    "@rocket.chat/styled": ~0.31.23-dev.161
     invariant: ^2.2.4
     react-aria: ~3.23.1
     react-keyed-flatten-children: ^1.3.0
@@ -9949,7 +9956,7 @@ __metadata:
     react: ^17.0.2
     react-dom: ^17.0.2
     react-virtuoso: 1.2.4
-  checksum: 3753fe5939b7fdead82076b824959bc7ed537349f810c104432d2ab1f7aa166a374642664e82e2cdc9efa3d1b4e1807c5ed12777cf7e875de24fca4f0ed58149
+  checksum: 8892aa89785c4c59335c3197e96ff4dc36cd2ef6e852a6eba5c63246c5fd3bef222d879082b21f357103ca39f08e36de8fb0f62b1c2cb5fd303c8aa98eb8317f
   languageName: node
   linkType: hard
 
@@ -10177,7 +10184,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/memo@npm:^0.31.23, @rocket.chat/memo@npm:~0.31.23-dev.160":
+"@rocket.chat/memo@npm:^0.31.23, @rocket.chat/memo@npm:~0.31.23-dev.160, @rocket.chat/memo@npm:~0.31.23-dev.161":
   version: 0.31.23
   resolution: "@rocket.chat/memo@npm:0.31.23"
   checksum: 070debb940749a2e4463cf767dd65c6967cea664a5bd67c22a812d611f6c3c46d6fe4bb0bf329e43dcd927493413add37c45ae3b05ec08f0b24e9d7385caebdd
@@ -11001,7 +11008,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/styled@npm:~0.31.23-dev.160":
+"@rocket.chat/styled@npm:~0.31.23-dev.160, @rocket.chat/styled@npm:~0.31.23-dev.161":
   version: 0.31.23
   resolution: "@rocket.chat/styled@npm:0.31.23"
   dependencies:

From d20ebe46c6bd77b3fd30c5593db2d3930994af06 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 13 Jul 2023 16:43:02 -0300
Subject: [PATCH 13/43] change to menuv2 on roomMembers user menu

---
 .../RoomMembers/RoomMembersActions.tsx        | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx
index 7153496c6d44..80ee23fd1273 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx
@@ -1,9 +1,9 @@
 import type { IUser, IRoom } from '@rocket.chat/core-typings';
-import { Option, Menu } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import { useActionSpread } from '../../../hooks/useActionSpread';
+import GenericMenu from '../../../../components/GenericMenu/GenericMenu';
 import { useUserInfoActions } from '../../hooks/useUserInfoActions';
 
 type RoomMembersActionsProps = {
@@ -14,21 +14,12 @@ type RoomMembersActionsProps = {
 };
 
 const RoomMembersActions = ({ username, _id, rid, reload }: RoomMembersActionsProps): ReactElement | null => {
-	const { menu: menuOptions } = useActionSpread(useUserInfoActions({ _id, username }, rid, reload), 0);
+	const t = useTranslation();
+	const { menuActions: menuOptions } = useUserInfoActions({ _id, username }, rid, reload);
 	if (!menuOptions) {
 		return null;
 	}
-
-	return (
-		<Menu
-			flexShrink={0}
-			maxHeight='initial'
-			key='menu'
-			tiny
-			renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
-			options={menuOptions}
-		/>
-	);
+	return <GenericMenu title={t('More')} key='menu' data-qa-id='UserUserInfo-menu' sections={menuOptions} placement='bottom-end' />;
 };
 
 export default RoomMembersActions;

From 8c15b304049dc182223f25757d39193627b5ea35 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 13 Jul 2023 17:09:39 -0300
Subject: [PATCH 14/43] update userCard menu type and small changes

---
 .../views/room/UserCard/UserCardWithData.tsx  | 32 ++++++-------------
 .../useUserInfoActions/useUserInfoActions.ts  |  9 +++++-
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
index 40aa6125685c..265180968019 100644
--- a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
+++ b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
@@ -8,7 +8,6 @@ import React, { useMemo, useRef } from 'react';
 import { getUserDisplayName } from '../../../../lib/getUserDisplayName';
 import { Backdrop } from '../../../components/Backdrop';
 import GenericMenu from '../../../components/GenericMenu/GenericMenu';
-import type { GenericMenuItemProps } from '../../../components/GenericMenu/GenericMenuItem';
 import LocalTime from '../../../components/LocalTime';
 import UserCard from '../../../components/UserCard';
 import { ReactiveUserStatus } from '../../../components/UserStatus';
@@ -23,20 +22,6 @@ type UserCardWithDataProps = {
 	onClose: () => void;
 };
 
-// type MenuActionProps = {
-// 	key: React.ReactNode;
-// 	id: string;
-// 	title: string;
-// 	items: {
-// 		id: string;
-// 		key: React.ReactNode;
-// 		content: React.ReactNode;
-// 		icon: string | undefined;
-// 		onClick: () => void;
-// 		type: string | undefined;
-// 	}[];
-// }[];
-
 const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWithDataProps): ReactElement => {
 	const t = useTranslation();
 	const ref = useRef(target);
@@ -80,23 +65,26 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 		onClose?.();
 	});
 
-	const userActions = useUserInfoActions({ _id: user._id ?? '', username: user.username }, rid);
+	const { actions: actionsDefinition, menuActions: menuOptions } = useUserInfoActions(
+		{ _id: user._id ?? '', username: user.username },
+		rid,
+	);
 
 	const menu = useMemo(() => {
-		if (!userActions) {
+		if (!menuOptions) {
 			return null;
 		}
 
-		return <GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={userActions.menuActions} placement='bottom-start' />;
-	}, [userActions, t]);
+		return <GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuOptions} placement='bottom-start' />;
+	}, [menuOptions, t]);
 
 	const actions = useMemo(() => {
 		const mapAction = ([key, { content, icon, onClick }]: any): ReactElement => {
-			return <UserCard.Action title={content} key={key} content={content} aria-label={content} onClick={onClick} icon={icon} />;
+			return <UserCard.Action title={content} key={key} label={content} aria-label={content} onClick={onClick} icon={icon} />;
 		};
 
-		return [...userActions.actions.map(mapAction), menu].filter(Boolean);
-	}, [userActions.actions, menu]);
+		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);
+	}, [actionsDefinition, menu]);
 
 	return (
 		<>
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
index 4e07e4b86019..6d8b3259f112 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
@@ -3,6 +3,7 @@ import type { Icon } from '@rocket.chat/fuselage';
 import type { ComponentProps, ReactNode } from 'react';
 import { useMemo } from 'react';
 
+import type { GenericMenuItemProps } from '../../../../components/GenericMenu/GenericMenuItem';
 import { useEmbeddedLayout } from '../../../../hooks/useEmbeddedLayout';
 import { useBlockUserAction } from './actions/useBlockUserAction';
 import { useCallAction } from './actions/useCallAction';
@@ -23,6 +24,12 @@ export type UserInfoAction = {
 	color?: string;
 };
 
+type UserMenuAction = {
+	id: string;
+	title: string;
+	items: GenericMenuItemProps[];
+}[];
+
 export const useUserInfoActions = (
 	user: Pick<IUser, '_id' | 'username'>,
 	rid: IRoom['_id'],
@@ -98,7 +105,7 @@ export const useUserInfoActions = (
 					acc.push(newSection);
 
 					return acc;
-				}, [] as any);
+				}, [] as UserMenuAction);
 
 		return { actions: options, menuActions };
 	}, [userinfoActions]);

From 80d8aca579a9ac3b48b532330401c069b3f8ab14 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 13 Jul 2023 17:45:57 -0300
Subject: [PATCH 15/43] add type apps to header menu

---
 apps/meteor/client/hooks/useAppActionButtons.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts
index 1f539c49b002..6a8bbc05cd22 100644
--- a/apps/meteor/client/hooks/useAppActionButtons.ts
+++ b/apps/meteor/client/hooks/useAppActionButtons.ts
@@ -145,6 +145,7 @@ export const useRoomActionAppsActionButtons = (context?: MessageActionContext) =
 									appId: action.appId,
 									payload: { context: action.context },
 								}),
+							type: 'apps',
 						},
 					];
 					return item;

From cb21fb2aad4d0a0c1007f30972af856ba6355a1b Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Fri, 14 Jul 2023 12:21:02 -0300
Subject: [PATCH 16/43] change userInfoActions to menuV2

---
 .../UserInfo/UserInfoActions.tsx              | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
index ce0ca3e2ff08..7106f52a6f8c 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
@@ -1,10 +1,12 @@
+/* eslint-disable react/display-name, react/no-multi-comp */
 import type { IRoom, IUser } from '@rocket.chat/core-typings';
-import { ButtonGroup, Menu, Option } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
-import React, { useMemo } from 'react';
+import { ButtonGroup, IconButton } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactElement, Ref } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
+import GenericMenu from '../../../../components/GenericMenu/GenericMenu';
 import UserInfo from '../../../../components/UserInfo';
-import { useActionSpread } from '../../../hooks/useActionSpread';
 import { useUserInfoActions } from '../../hooks/useUserInfoActions';
 
 type UserInfoActionsProps = {
@@ -13,9 +15,16 @@ type UserInfoActionsProps = {
 	backToList: () => void;
 };
 
+const CustomMenuButton = forwardRef((props, ref: Ref<HTMLElement>) => (
+	<IconButton ref={ref} {...props} icon='kebab' secondary small={false} />
+));
+
 const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): ReactElement => {
-	const { actions: actionsDefinition, menu: menuOptions } = useActionSpread(
-		useUserInfoActions({ _id: user._id, username: user.username }, rid, backToList),
+	const t = useTranslation();
+	const { actions: actionsDefinition, menuActions: menuOptions } = useUserInfoActions(
+		{ _id: user._id, username: user.username },
+		rid,
+		backToList,
 	);
 
 	const menu = useMemo(() => {
@@ -24,24 +33,21 @@ const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): React
 		}
 
 		return (
-			<Menu
-				key='menu'
-				mi='x4'
-				secondary
-				small={false}
-				maxHeight='initial'
-				renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option {...props} label={label} icon={icon} />}
-				flexShrink={0}
-				options={menuOptions}
-				data-qa='UserUserInfo-menu'
+			<GenericMenu
+				is={CustomMenuButton}
+				title={t('More')}
+				key='UserUserInfo-menu'
+				data-qa-id='UserUserInfo-menu'
+				sections={menuOptions}
+				placement='bottom-end'
 			/>
 		);
-	}, [menuOptions]);
+	}, [menuOptions, t]);
 
 	// TODO: sanitize Action type to avoid any
 	const actions = useMemo(() => {
-		const mapAction = ([key, { label, icon, action }]: any): ReactElement => (
-			<UserInfo.Action key={key} title={label} label={label} onClick={action} icon={icon} />
+		const mapAction = ([key, { content, icon, onClick }]: any): ReactElement => (
+			<UserInfo.Action key={key} title={content} label={content} onClick={onClick} icon={icon} />
 		);
 
 		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);

From 97d32c67b01716762ad00358986aad17f6b903cf Mon Sep 17 00:00:00 2001
From: Guilherme Jun Grillo <48109548+guijun13@users.noreply.github.com>
Date: Fri, 14 Jul 2023 14:31:25 -0300
Subject: [PATCH 17/43] add changeset

---
 .changeset/chilled-flies-fold.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/chilled-flies-fold.md

diff --git a/.changeset/chilled-flies-fold.md b/.changeset/chilled-flies-fold.md
new file mode 100644
index 000000000000..17a0f9eb6dc5
--- /dev/null
+++ b/.changeset/chilled-flies-fold.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+feat: add sections to room header and user infos menus with menuV2

From a72d9b59d4ceb7df67bd891a11ad5d758cc9ae0c Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Fri, 14 Jul 2023 23:42:25 -0300
Subject: [PATCH 18/43] remove unused

---
 apps/meteor/app/ui-message/client/actionButtons/tabbar.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts b/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts
index 28fee6eb35d1..26352cd9b59a 100644
--- a/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts
+++ b/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts
@@ -26,7 +26,6 @@ export const onAdded = (button: IUIActionButton): void =>
 							appId: button.appId,
 							payload: { context: button.context },
 						}),
-					type: 'apps',
 			  }
 			: null,
 	);

From c87015cda6aaa5e867ec799dadf86fc07311d7f8 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 17 Jul 2023 09:41:18 -0300
Subject: [PATCH 19/43] fix missing size for useUserInfoActions hook

---
 .../room/contextualBar/RoomMembers/RoomMembersActions.tsx    | 2 +-
 .../room/hooks/useUserInfoActions/useUserInfoActions.ts      | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx
index 80ee23fd1273..22c892c1b142 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersActions.tsx
@@ -15,7 +15,7 @@ type RoomMembersActionsProps = {
 
 const RoomMembersActions = ({ username, _id, rid, reload }: RoomMembersActionsProps): ReactElement | null => {
 	const t = useTranslation();
-	const { menuActions: menuOptions } = useUserInfoActions({ _id, username }, rid, reload);
+	const { menuActions: menuOptions } = useUserInfoActions({ _id, username }, rid, reload, 0);
 	if (!menuOptions) {
 		return null;
 	}
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
index 6d8b3259f112..1eaac9cab384 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
@@ -34,6 +34,7 @@ export const useUserInfoActions = (
 	user: Pick<IUser, '_id' | 'username'>,
 	rid: IRoom['_id'],
 	reload?: () => void,
+	size = 2,
 ): { actions: [string, UserInfoAction][]; menuActions: any | undefined } => {
 	const blockUser = useBlockUserAction(user, rid);
 	const changeLeader = useChangeLeaderAction(user, rid);
@@ -78,8 +79,8 @@ export const useUserInfoActions = (
 	const actionSpread = useMemo(() => {
 		const entries = Object.entries(userinfoActions);
 
-		const options = entries.slice(0, 2);
-		const slicedOptions = entries.slice(2, entries.length);
+		const options = entries.slice(0, size);
+		const slicedOptions = entries.slice(size, entries.length);
 		const menu = slicedOptions.length ? Object.fromEntries(slicedOptions) : undefined;
 
 		const menuActions =

From 5985264eeedd6623da9f63e692ecbf1eec679dfa Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 17 Jul 2023 10:56:53 -0300
Subject: [PATCH 20/43] revert file

---
 .../ui-message/client/actionButtons/tabbar.ts | 33 -------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 apps/meteor/app/ui-message/client/actionButtons/tabbar.ts

diff --git a/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts b/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts
deleted file mode 100644
index 26352cd9b59a..000000000000
--- a/apps/meteor/app/ui-message/client/actionButtons/tabbar.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { IUIActionButton } from '@rocket.chat/apps-engine/definition/ui';
-
-import { addAction, deleteAction } from '../../../../client/views/room/lib/Toolbox';
-import { Utilities } from '../../../../ee/lib/misc/Utilities';
-import { triggerActionButtonAction } from '../ActionManager';
-import { applyButtonFilters } from './lib/applyButtonFilters';
-
-const getIdForActionButton = ({ appId, actionId }: IUIActionButton): string => `${appId}/${actionId}`;
-
-export const onAdded = (button: IUIActionButton): void =>
-	// eslint-disable-next-line no-void
-	void addAction(getIdForActionButton(button), ({ room }) =>
-		applyButtonFilters(button, room)
-			? {
-					id: button.actionId,
-					icon: undefined, // Apps won't provide icons for now
-					order: 300, // Make sure the button only shows up inside the room toolbox
-					title: Utilities.getI18nKeyForApp(button.labelI18n, button.appId),
-					// Filters were applied in the applyButtonFilters function
-					// if the code made it this far, the button should be shown
-					groups: ['group', 'channel', 'live', 'team', 'direct', 'direct_multiple'],
-					action: (): any =>
-						triggerActionButtonAction({
-							rid: room._id,
-							actionId: button.actionId,
-							appId: button.appId,
-							payload: { context: button.context },
-						}),
-			  }
-			: null,
-	);
-
-export const onRemoved = (button: IUIActionButton): boolean => deleteAction(getIdForActionButton(button));

From 36dd07c7a85e16553c68c3c580632548098d0b78 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 17 Jul 2023 12:15:04 -0300
Subject: [PATCH 21/43] fix e2e tests

---
 apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx        | 2 +-
 .../views/room/contextualBar/UserInfo/UserInfoActions.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
index 58184beceac7..b7feb9cb81ce 100644
--- a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
+++ b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
@@ -120,7 +120,7 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 				return <HeaderToolboxAction {...props} key={id} />;
 			})}
 			{(filteredActions.length > 6 || isMobile) && (
-				<GenericMenu title={t('Options')} data-qa-id='ToolBox-Menu' sections={hiddenActions} placement='bottom-end' />
+				<GenericMenu title={t('Options')} data-qa='ToolBox-Menu' sections={hiddenActions} placement='bottom-end' />
 			)}
 		</>
 	);
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
index 7106f52a6f8c..29e61b577cbd 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
@@ -37,7 +37,7 @@ const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): React
 				is={CustomMenuButton}
 				title={t('More')}
 				key='UserUserInfo-menu'
-				data-qa-id='UserUserInfo-menu'
+				data-qa='UserUserInfo-menu'
 				sections={menuOptions}
 				placement='bottom-end'
 			/>

From 030fac468e538de66868cdfc7ecffed72721afdc Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Tue, 18 Jul 2023 17:59:45 -0300
Subject: [PATCH 22/43] add button prop to userInfoActions

---
 .../UserInfo/UserInfoActions.tsx              | 10 ++----
 yarn.lock                                     | 34 +++++++++----------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
index 29e61b577cbd..2eab97d4ab5d 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
@@ -2,8 +2,8 @@
 import type { IRoom, IUser } from '@rocket.chat/core-typings';
 import { ButtonGroup, IconButton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import type { ReactElement, Ref } from 'react';
-import React, { forwardRef, useMemo } from 'react';
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
 
 import GenericMenu from '../../../../components/GenericMenu/GenericMenu';
 import UserInfo from '../../../../components/UserInfo';
@@ -15,10 +15,6 @@ type UserInfoActionsProps = {
 	backToList: () => void;
 };
 
-const CustomMenuButton = forwardRef((props, ref: Ref<HTMLElement>) => (
-	<IconButton ref={ref} {...props} icon='kebab' secondary small={false} />
-));
-
 const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): ReactElement => {
 	const t = useTranslation();
 	const { actions: actionsDefinition, menuActions: menuOptions } = useUserInfoActions(
@@ -34,7 +30,7 @@ const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): React
 
 		return (
 			<GenericMenu
-				is={CustomMenuButton}
+				button={<IconButton icon='kebab' secondary />}
 				title={t('More')}
 				key='UserUserInfo-menu'
 				data-qa='UserUserInfo-menu'
diff --git a/yarn.lock b/yarn.lock
index dd61b6756c04..aa56bb57a064 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9457,7 +9457,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/css-in-js@npm:^0.31.23, @rocket.chat/css-in-js@npm:~0.31.23-dev.160, @rocket.chat/css-in-js@npm:~0.31.23-dev.161":
+"@rocket.chat/css-in-js@npm:^0.31.23, @rocket.chat/css-in-js@npm:~0.31.23-dev.160, @rocket.chat/css-in-js@npm:~0.31.23-dev.165":
   version: 0.31.23
   resolution: "@rocket.chat/css-in-js@npm:0.31.23"
   dependencies:
@@ -9483,7 +9483,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/css-supports@npm:^0.31.23, @rocket.chat/css-supports@npm:~0.31.23-dev.160, @rocket.chat/css-supports@npm:~0.31.23-dev.161":
+"@rocket.chat/css-supports@npm:^0.31.23, @rocket.chat/css-supports@npm:~0.31.23-dev.160, @rocket.chat/css-supports@npm:~0.31.23-dev.165":
   version: 0.31.23
   resolution: "@rocket.chat/css-supports@npm:0.31.23"
   dependencies:
@@ -9699,10 +9699,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.337":
-  version: 0.32.0-dev.337
-  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.337"
-  checksum: d3250b264b6adabd15754268d5f7c7f1419a434b40de9b899a38ed778b5d19f136eafb43ad5aa0eee782b955c8b590791397ce338a2822f3406fc975c45e0e67
+"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.341":
+  version: 0.32.0-dev.341
+  resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.341"
+  checksum: f8944cbae4ea3a90c4127627e4f90ab1becc916c72ec54e1f16fd8de3e2bb8c0c6ca1dc1aa87ae7d2dc7d105f325dbbe65c262eca5719f6d237e7b2aa35a321e
   languageName: node
   linkType: hard
 
@@ -9762,14 +9762,14 @@ __metadata:
   linkType: soft
 
 "@rocket.chat/fuselage@npm:next":
-  version: 0.32.0-dev.387
-  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.387"
-  dependencies:
-    "@rocket.chat/css-in-js": ~0.31.23-dev.161
-    "@rocket.chat/css-supports": ~0.31.23-dev.161
-    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.337
-    "@rocket.chat/memo": ~0.31.23-dev.161
-    "@rocket.chat/styled": ~0.31.23-dev.161
+  version: 0.32.0-dev.391
+  resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.391"
+  dependencies:
+    "@rocket.chat/css-in-js": ~0.31.23-dev.165
+    "@rocket.chat/css-supports": ~0.31.23-dev.165
+    "@rocket.chat/fuselage-tokens": ~0.32.0-dev.341
+    "@rocket.chat/memo": ~0.31.23-dev.165
+    "@rocket.chat/styled": ~0.31.23-dev.165
     invariant: ^2.2.4
     react-aria: ~3.23.1
     react-keyed-flatten-children: ^1.3.0
@@ -9781,7 +9781,7 @@ __metadata:
     react: ^17.0.2
     react-dom: ^17.0.2
     react-virtuoso: 1.2.4
-  checksum: 8892aa89785c4c59335c3197e96ff4dc36cd2ef6e852a6eba5c63246c5fd3bef222d879082b21f357103ca39f08e36de8fb0f62b1c2cb5fd303c8aa98eb8317f
+  checksum: 2d32285d0354bbadb876a01ad04437b28a44ef22ed76468972a99923c976e32859a9ce66f83cbf650db15e8737bbe3f4938ac6975fed8d8462f9329be37d3c0e
   languageName: node
   linkType: hard
 
@@ -10005,7 +10005,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/memo@npm:^0.31.23, @rocket.chat/memo@npm:~0.31.23-dev.160, @rocket.chat/memo@npm:~0.31.23-dev.161":
+"@rocket.chat/memo@npm:^0.31.23, @rocket.chat/memo@npm:~0.31.23-dev.160, @rocket.chat/memo@npm:~0.31.23-dev.165":
   version: 0.31.23
   resolution: "@rocket.chat/memo@npm:0.31.23"
   checksum: 070debb940749a2e4463cf767dd65c6967cea664a5bd67c22a812d611f6c3c46d6fe4bb0bf329e43dcd927493413add37c45ae3b05ec08f0b24e9d7385caebdd
@@ -10831,7 +10831,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/styled@npm:~0.31.23-dev.160, @rocket.chat/styled@npm:~0.31.23-dev.161":
+"@rocket.chat/styled@npm:~0.31.23-dev.160, @rocket.chat/styled@npm:~0.31.23-dev.165":
   version: 0.31.23
   resolution: "@rocket.chat/styled@npm:0.31.23"
   dependencies:

From 7ad1d13793a43195eb28dd5b438ec164a183476a Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Wed, 19 Jul 2023 10:32:47 -0300
Subject: [PATCH 23/43] update

---
 apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx      | 2 +-
 .../views/room/contextualBar/UserInfo/UserInfoActions.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
index b7feb9cb81ce..58184beceac7 100644
--- a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
+++ b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
@@ -120,7 +120,7 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 				return <HeaderToolboxAction {...props} key={id} />;
 			})}
 			{(filteredActions.length > 6 || isMobile) && (
-				<GenericMenu title={t('Options')} data-qa='ToolBox-Menu' sections={hiddenActions} placement='bottom-end' />
+				<GenericMenu title={t('Options')} data-qa-id='ToolBox-Menu' sections={hiddenActions} placement='bottom-end' />
 			)}
 		</>
 	);
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
index 2eab97d4ab5d..18142f5526ed 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
@@ -32,8 +32,8 @@ const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): React
 			<GenericMenu
 				button={<IconButton icon='kebab' secondary />}
 				title={t('More')}
-				key='UserUserInfo-menu'
-				data-qa='UserUserInfo-menu'
+				key='menu'
+				data-qa-id='UserUserInfo-menu'
 				sections={menuOptions}
 				placement='bottom-end'
 			/>

From 035ed525ed3e97f2cf9463523e0cfc4b5c7194fc Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 20 Jul 2023 10:54:32 -0300
Subject: [PATCH 24/43] fix tests

---
 .../tests/e2e/page-objects/fragments/home-flextab-members.ts  | 4 ++--
 apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
index bbcd911a451f..12d1bf42f951 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
@@ -20,7 +20,7 @@ export class HomeFlextabMembers {
 
 	async muteUser(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
-		await this.page.locator('[data-qa="UserUserInfo-menu"]').click();
+		await this.page.locator('role=button[name="More"]').click();
 		await this.page.locator('[value="muteUser"]').click();
 		await this.page.locator('.rcx-modal .rcx-button--danger').click();
 		await this.page.locator('(//main//aside/h3//button)[1]').click();
@@ -28,7 +28,7 @@ export class HomeFlextabMembers {
 
 	async setUserAsModerator(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
-		await this.page.locator('[data-qa="UserUserInfo-menu"]').click();
+		await this.page.locator('role=button[name="More"]').click();
 		await this.page.locator('[value="changeModerator"]').click();
 	}
 
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
index d469cdbce794..0dfee1922366 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
@@ -37,7 +37,7 @@ export class HomeFlextab {
 	}
 
 	get kebab(): Locator {
-		return this.page.locator('[data-qa-id=ToolBox-Menu]');
+		return this.page.locator('[role=button[name="More"]]');
 	}
 
 	get btnNotificationPreferences(): Locator {

From 87730f7601d0ee1b4ad8f53804afc614303c19cd Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 20 Jul 2023 11:45:40 -0300
Subject: [PATCH 25/43] fix tests again

---
 .../tests/e2e/page-objects/fragments/home-flextab-members.ts  | 4 ++--
 apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
index 12d1bf42f951..8acdd277ceeb 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
@@ -21,7 +21,7 @@ export class HomeFlextabMembers {
 	async muteUser(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
 		await this.page.locator('role=button[name="More"]').click();
-		await this.page.locator('[value="muteUser"]').click();
+		await this.page.locator('role=menuitem[value="muteUser"]').click();
 		await this.page.locator('.rcx-modal .rcx-button--danger').click();
 		await this.page.locator('(//main//aside/h3//button)[1]').click();
 	}
@@ -29,7 +29,7 @@ export class HomeFlextabMembers {
 	async setUserAsModerator(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
 		await this.page.locator('role=button[name="More"]').click();
-		await this.page.locator('[value="changeModerator"]').click();
+		await this.page.locator('role=menuitem[value="changeModerator"]').click();
 	}
 
 	async setUserAsOwner(username: string) {
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
index 0dfee1922366..36a634cb7507 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
@@ -37,7 +37,7 @@ export class HomeFlextab {
 	}
 
 	get kebab(): Locator {
-		return this.page.locator('[role=button[name="More"]]');
+		return this.page.locator('role=button[name="More"]');
 	}
 
 	get btnNotificationPreferences(): Locator {

From 7a16c9532dc1bc3761fdc3a71d07ae1eb8548a4e Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 20 Jul 2023 12:39:04 -0300
Subject: [PATCH 26/43] fix tests

---
 .../tests/e2e/page-objects/fragments/home-flextab-members.ts  | 4 ++--
 apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
index 8acdd277ceeb..fefc65a8799c 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
@@ -21,7 +21,7 @@ export class HomeFlextabMembers {
 	async muteUser(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
 		await this.page.locator('role=button[name="More"]').click();
-		await this.page.locator('role=menuitem[value="muteUser"]').click();
+		await this.page.locator('role=menuitem[name="muteUser"]').click();
 		await this.page.locator('.rcx-modal .rcx-button--danger').click();
 		await this.page.locator('(//main//aside/h3//button)[1]').click();
 	}
@@ -29,7 +29,7 @@ export class HomeFlextabMembers {
 	async setUserAsModerator(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
 		await this.page.locator('role=button[name="More"]').click();
-		await this.page.locator('role=menuitem[value="changeModerator"]').click();
+		await this.page.locator('role=menuitem[name="changeModerator"]').click();
 	}
 
 	async setUserAsOwner(username: string) {
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
index 36a634cb7507..24cc41a20af2 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
@@ -37,7 +37,7 @@ export class HomeFlextab {
 	}
 
 	get kebab(): Locator {
-		return this.page.locator('role=button[name="More"]');
+		return this.page.locator('role=button[name="Options"]');
 	}
 
 	get btnNotificationPreferences(): Locator {

From 6b1dceed94a12082d441cd3d53eb63b0d049bacd Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Fri, 21 Jul 2023 13:33:44 -0300
Subject: [PATCH 27/43] fix tests

---
 .../tests/e2e/page-objects/fragments/home-flextab-members.ts  | 4 ++--
 apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
index fefc65a8799c..dad9b1710bf7 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
@@ -21,7 +21,7 @@ export class HomeFlextabMembers {
 	async muteUser(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
 		await this.page.locator('role=button[name="More"]').click();
-		await this.page.locator('role=menuitem[name="muteUser"]').click();
+		await this.page.locator('role=menuitem[title="muteUser"]').click();
 		await this.page.locator('.rcx-modal .rcx-button--danger').click();
 		await this.page.locator('(//main//aside/h3//button)[1]').click();
 	}
@@ -29,7 +29,7 @@ export class HomeFlextabMembers {
 	async setUserAsModerator(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
 		await this.page.locator('role=button[name="More"]').click();
-		await this.page.locator('role=menuitem[name="changeModerator"]').click();
+		await this.page.locator('role=menuitem[title="changeModerator"]').click();
 	}
 
 	async setUserAsOwner(username: string) {
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
index 24cc41a20af2..ab30c2a00073 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
@@ -37,7 +37,7 @@ export class HomeFlextab {
 	}
 
 	get kebab(): Locator {
-		return this.page.locator('role=button[name="Options"]');
+		return this.page.locator('role=button[title="Options"]');
 	}
 
 	get btnNotificationPreferences(): Locator {

From b287ea67e3227475762609e3fefd675c236d4d4e Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 24 Jul 2023 09:56:10 -0300
Subject: [PATCH 28/43] fix tests

---
 .../tests/e2e/page-objects/fragments/home-flextab-members.ts  | 4 ++--
 apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
index dad9b1710bf7..4b104d689247 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
@@ -21,7 +21,7 @@ export class HomeFlextabMembers {
 	async muteUser(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
 		await this.page.locator('role=button[name="More"]').click();
-		await this.page.locator('role=menuitem[title="muteUser"]').click();
+		await this.page.locator('role=menuitem[name="Mute user"]').click();
 		await this.page.locator('.rcx-modal .rcx-button--danger').click();
 		await this.page.locator('(//main//aside/h3//button)[1]').click();
 	}
@@ -29,7 +29,7 @@ export class HomeFlextabMembers {
 	async setUserAsModerator(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
 		await this.page.locator('role=button[name="More"]').click();
-		await this.page.locator('role=menuitem[title="changeModerator"]').click();
+		await this.page.locator('role=menuitem[name="Change Moderator"]').click();
 	}
 
 	async setUserAsOwner(username: string) {
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
index ab30c2a00073..24cc41a20af2 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
@@ -37,7 +37,7 @@ export class HomeFlextab {
 	}
 
 	get kebab(): Locator {
-		return this.page.locator('role=button[title="Options"]');
+		return this.page.locator('role=button[name="Options"]');
 	}
 
 	get btnNotificationPreferences(): Locator {

From 2c05e718b80f818a16e41b99688c82a9a2f98027 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 24 Jul 2023 10:43:50 -0300
Subject: [PATCH 29/43] fix test

---
 .../tests/e2e/page-objects/fragments/home-flextab-members.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
index 4b104d689247..14f3ee6a19da 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab-members.ts
@@ -29,7 +29,7 @@ export class HomeFlextabMembers {
 	async setUserAsModerator(username: string) {
 		await this.page.locator(`[data-qa="MemberItem-${username}"]`).click();
 		await this.page.locator('role=button[name="More"]').click();
-		await this.page.locator('role=menuitem[name="Change Moderator"]').click();
+		await this.page.locator('role=menuitem[name="Set as moderator"]').click();
 	}
 
 	async setUserAsOwner(username: string) {

From 41a30dff8e3d15e489088b1207527446cff6210a Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 24 Jul 2023 12:14:08 -0300
Subject: [PATCH 30/43] fix missing type on e2e

---
 apps/meteor/app/e2e/client/tabbar.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/meteor/app/e2e/client/tabbar.ts b/apps/meteor/app/e2e/client/tabbar.ts
index dac750540d40..63b14a5f8a07 100644
--- a/apps/meteor/app/e2e/client/tabbar.ts
+++ b/apps/meteor/app/e2e/client/tabbar.ts
@@ -32,6 +32,7 @@ addAction('e2e', ({ room }) => {
 						title: enabledOnRoom ? 'E2E_disable' : 'E2E_enable',
 						icon: 'key',
 						order: 13,
+						type: 'organization',
 						action,
 						...(federated && {
 							'data-tooltip': 'E2E_unavailable_for_federation',

From 5e8c566934c1caeab97403385e181f6c45fc4cf3 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 27 Jul 2023 23:33:10 -0300
Subject: [PATCH 31/43] fix room header toolbox menu filter

---
 .../client/views/room/Header/ToolBox/ToolBox.tsx       |  5 ++---
 yarn.lock                                              | 10 +++-------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
index 58184beceac7..91267c6d6ed5 100644
--- a/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
+++ b/apps/meteor/client/views/room/Header/ToolBox/ToolBox.tsx
@@ -37,11 +37,10 @@ const ToolBox = ({ className }: ToolBoxProps): ReactElement => {
 	const visibleActions = isMobile ? [] : filteredActions.slice(0, 6);
 
 	const hiddenActions = (isMobile ? actions : filteredActions.slice(6))
-		.filter((item) => !item.disabled && item.id !== 'start-call')
-		.map(({ ...item }) => ({
+		.filter((item) => !item.disabled && !item.featured)
+		.map((item) => ({
 			key: item.id,
 			content: t(item.title),
-			icon: item.icon,
 			onClick: (): void => {
 				openTabBar(item.id);
 			},
diff --git a/yarn.lock b/yarn.lock
index 122aee74cb39..2508036d52bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1,3 +1,6 @@
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
 __metadata:
   version: 6
   cacheKey: 8
@@ -27932,13 +27935,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-forge@npm:^0.10.0":
-  version: 0.10.0
-  resolution: "node-forge@npm:0.10.0"
-  checksum: 5aa6dc9922e424a20ef101d2f517418e2bc9cfc0255dd22e0701c0fad1568445f510ee67f6f3fcdf085812c4ca1b847b8ba45683b34776828e41f5c1794e42e1
-  languageName: node
-  linkType: hard
-
 "node-forge@npm:^0.7.1":
   version: 0.7.6
   resolution: "node-forge@npm:0.7.6"

From 18fe32dc55b47eee6e5658577045a5add39a19b9 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 27 Jul 2023 23:39:14 -0300
Subject: [PATCH 32/43] fix userCard menu content prop

---
 apps/meteor/client/views/room/UserCard/UserCardWithData.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
index 265180968019..4646201694a7 100644
--- a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
+++ b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
@@ -79,9 +79,9 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 	}, [menuOptions, t]);
 
 	const actions = useMemo(() => {
-		const mapAction = ([key, { content, icon, onClick }]: any): ReactElement => {
-			return <UserCard.Action title={content} key={key} label={content} aria-label={content} onClick={onClick} icon={icon} />;
-		};
+		const mapAction = ([key, { content, icon, onClick }]: any): ReactElement => (
+			<UserCard.Action key={key} label={content} aria-label={content} onClick={onClick} icon={icon} />
+		);
 
 		return [...actionsDefinition.map(mapAction), menu].filter(Boolean);
 	}, [actionsDefinition, menu]);

From 9af330458b148d9f679d892b5735e17f888481d9 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 27 Jul 2023 23:55:55 -0300
Subject: [PATCH 33/43] specify the types for item type prop

---
 .../views/room/hooks/useUserInfoActions/useUserInfoActions.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
index 1eaac9cab384..29166c25d352 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
@@ -20,7 +20,7 @@ export type UserInfoAction = {
 	content: ReactNode;
 	icon?: ComponentProps<typeof Icon>['name'];
 	onClick: () => void;
-	type?: string;
+	type?: 'communication' | 'privileges' | 'management';
 	color?: string;
 };
 

From 31c1d8b56407fee74ef5c3b68baa83fa7bd0441f Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 31 Jul 2023 10:54:07 -0300
Subject: [PATCH 34/43] fix types

---
 apps/meteor/client/hooks/useAppActionButtons.ts             | 2 ++
 .../room/hooks/useUserInfoActions/actions/useCallAction.tsx | 4 ++--
 .../useUserInfoActions/actions/useChangeLeaderAction.ts     | 4 ++--
 .../useUserInfoActions/actions/useChangeModeratorAction.tsx | 4 ++--
 .../useUserInfoActions/actions/useChangeOwnerAction.tsx     | 4 ++--
 .../useUserInfoActions/actions/useDirectMessageAction.ts    | 4 ++--
 .../hooks/useUserInfoActions/actions/useIgnoreUserAction.ts | 4 ++--
 .../hooks/useUserInfoActions/actions/useMuteUserAction.tsx  | 4 ++--
 .../actions/useRedirectModerationConsole.ts                 | 4 ++--
 .../useUserInfoActions/actions/useRemoveUserAction.tsx      | 4 ++--
 .../room/hooks/useUserInfoActions/useUserInfoActions.ts     | 6 ++++--
 11 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts
index a3a55bf22869..c39f2166863d 100644
--- a/apps/meteor/client/hooks/useAppActionButtons.ts
+++ b/apps/meteor/client/hooks/useAppActionButtons.ts
@@ -8,6 +8,8 @@ import type { MessageActionConfig, MessageActionContext } from '../../app/ui-uti
 import type { MessageBoxAction } from '../../app/ui-utils/client/lib/messageBox';
 import { Utilities } from '../../ee/lib/misc/Utilities';
 import type { GenericMenuItemProps } from '../components/GenericMenu/GenericMenuItem';
+import { useRoom } from '../views/room/contexts/RoomContext';
+import type { ToolboxAction } from '../views/room/lib/Toolbox';
 import { useApplyButtonFilters, useApplyButtonAuthFilter } from './useApplyButtonFilters';
 import { useUiKitActionManager } from './useUiKitActionManager';
 
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
index 5e20d0360bbb..4889a50dbb7d 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useCallAction.tsx
@@ -7,7 +7,7 @@ import { closeUserCard } from '../../../../../../app/ui/client/lib/userCard';
 import { useVideoConfDispatchOutgoing, useVideoConfIsCalling, useVideoConfIsRinging } from '../../../../../contexts/VideoConfContext';
 import { VideoConfManager } from '../../../../../lib/VideoConfManager';
 import { useVideoConfWarning } from '../../../contextualBar/VideoConference/hooks/useVideoConfWarning';
-import type { UserInfoAction } from '../useUserInfoActions';
+import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
 
 export const useCallAction = (user: Pick<IUser, '_id' | 'username'>): UserInfoAction | undefined => {
 	const t = useTranslation();
@@ -40,7 +40,7 @@ export const useCallAction = (user: Pick<IUser, '_id' | 'username'>): UserInfoAc
 					content: t('Start_call'),
 					icon: 'phone' as const,
 					onClick: action,
-					type: 'communication',
+					type: 'communication' as UserInfoActionType,
 			  }
 			: undefined;
 	}, [t, room, dispatchPopup, dispatchWarning, isCalling, isRinging, ownUserId, user._id]);
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
index c94243046830..fe5b984afa95 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeLeaderAction.ts
@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 import { useEndpointAction } from '../../../../../hooks/useEndpointAction';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import { useUserHasRoomRole } from '../../useUserHasRoomRole';
-import type { UserInfoAction } from '../useUserInfoActions';
+import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
 
 // TODO: Remove endpoint concatenation
 export const useChangeLeaderAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
@@ -37,7 +37,7 @@ export const useChangeLeaderAction = (user: Pick<IUser, '_id' | 'username'>, rid
 						content: t(isLeader ? 'Remove_as_leader' : 'Set_as_leader'),
 						icon: 'shield-alt' as const,
 						onClick: changeLeaderAction,
-						type: 'privileges',
+						type: 'privileges' as UserInfoActionType,
 				  }
 				: undefined,
 		[isLeader, roomCanSetLeader, t, userCanSetLeader, changeLeaderAction],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
index 2b8d9bc4f16c..80351857d2d8 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeModeratorAction.tsx
@@ -11,7 +11,7 @@ import { useEndpointAction } from '../../../../../hooks/useEndpointAction';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import { useUserHasRoomRole } from '../../useUserHasRoomRole';
-import type { UserInfoAction } from '../useUserInfoActions';
+import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
 
 const getWarningModalForFederatedRooms = (
 	closeModalFn: () => void,
@@ -125,7 +125,7 @@ export const useChangeModeratorAction = (user: Pick<IUser, '_id' | 'username'>,
 						content: t(isModerator ? 'Remove_as_moderator' : 'Set_as_moderator'),
 						icon: 'shield-blank' as const,
 						onClick: changeModeratorAction,
-						type: 'privileges',
+						type: 'privileges' as UserInfoActionType,
 				  }
 				: undefined,
 		[changeModeratorAction, isModerator, roomCanSetModerator, t, userCanSetModerator, room],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
index 0125356b2635..c350136d3ba2 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useChangeOwnerAction.tsx
@@ -11,7 +11,7 @@ import { useEndpointAction } from '../../../../../hooks/useEndpointAction';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
 import { useUserHasRoomRole } from '../../useUserHasRoomRole';
-import type { UserInfoAction } from '../useUserInfoActions';
+import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
 
 const getWarningModalForFederatedRooms = (
 	closeModalFn: () => void,
@@ -109,7 +109,7 @@ export const useChangeOwnerAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 						content: t(isOwner ? 'Remove_as_owner' : 'Set_as_owner'),
 						icon: 'shield-check' as const,
 						onClick: changeOwnerAction,
-						type: 'privileges',
+						type: 'privileges' as UserInfoActionType,
 				  }
 				: undefined,
 		[changeOwnerAction, roomCanSetOwner, userCanSetOwner, isOwner, t, room],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
index cb1234f58db4..5ca51e2abe43 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useDirectMessageAction.ts
@@ -3,7 +3,7 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useTranslation, usePermission, useRoute, useUserSubscription, useUserSubscriptionByName } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-import type { UserInfoAction } from '../useUserInfoActions';
+import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
 
 const getShouldOpenDirectMessage = (
 	currentSubscription?: ISubscription,
@@ -45,7 +45,7 @@ export const useDirectMessageAction = (user: Pick<IUser, '_id' | 'username'>, ri
 						content: t('Direct_Message'),
 						icon: 'balloon' as const,
 						onClick: openDirectMessage,
-						type: 'communication',
+						type: 'communication' as UserInfoActionType,
 				  }
 				: undefined,
 		[openDirectMessage, shouldOpenDirectMessage, t],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
index 58b4a1529254..5b0a55648cbd 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useIgnoreUserAction.ts
@@ -11,7 +11,7 @@ import {
 import { useMemo } from 'react';
 
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
-import type { UserInfoAction } from '../useUserInfoActions';
+import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
 
 export const useIgnoreUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IRoom['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
@@ -50,7 +50,7 @@ export const useIgnoreUserAction = (user: Pick<IUser, '_id' | 'username'>, rid:
 						content: t(isIgnored ? 'Unignore' : 'Ignore'),
 						icon: 'ban' as const,
 						onClick: ignoreUserAction,
-						type: 'management',
+						type: 'management' as UserInfoActionType,
 				  }
 				: undefined,
 		[ignoreUserAction, isIgnored, ownUserId, roomCanIgnore, t, uid],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
index eb54ea1030d6..3cec0ad0037f 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useMuteUserAction.tsx
@@ -16,7 +16,7 @@ import React, { useMemo } from 'react';
 import GenericModal from '../../../../../components/GenericModal';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
-import type { UserInfoAction } from '../useUserInfoActions';
+import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
 
 const getUserIsMuted = (
 	user: Pick<IUser, '_id' | 'username'>,
@@ -104,7 +104,7 @@ export const useMuteUserAction = (user: Pick<IUser, '_id' | 'username'>, rid: IR
 					content: t(isMuted ? 'Unmute_user' : 'Mute_user'),
 					icon: isMuted ? ('mic' as const) : ('mic-off' as const),
 					onClick: action,
-					type: 'management',
+					type: 'management' as UserInfoActionType,
 			  }
 			: undefined;
 	}, [
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
index 0c10391dfafe..3ba316412bfa 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRedirectModerationConsole.ts
@@ -1,7 +1,7 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { usePermission, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 
-import type { UserInfoAction } from '../useUserInfoActions';
+import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
 
 export const useRedirectModerationConsole = (uid: IUser['_id']): UserInfoAction | undefined => {
 	const t = useTranslation();
@@ -21,6 +21,6 @@ export const useRedirectModerationConsole = (uid: IUser['_id']): UserInfoAction
 		content: t('Moderation_Action_View_reports'),
 		icon: 'warning' as const,
 		onClick: redirectModerationConsoleAction,
-		type: 'privileges',
+		type: 'privileges' as UserInfoActionType,
 	};
 };
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
index 51e9ea978731..68b628f89bd6 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -11,7 +11,7 @@ import * as Federation from '../../../../../lib/federation/Federation';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import RemoveUsersModal from '../../../../teams/contextualBar/members/RemoveUsersModal';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
-import type { UserInfoAction } from '../useUserInfoActions';
+import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
 
 // TODO: Remove endpoint concatenation
 export const useRemoveUserAction = (
@@ -94,7 +94,7 @@ export const useRemoveUserAction = (
 						content: room?.teamMain ? t('Remove_from_team') : t('Remove_from_room'),
 						icon: 'cross' as const,
 						onClick: removeUserOptionAction,
-						type: 'management',
+						type: 'management' as UserInfoActionType,
 						color: 'alert',
 				  }
 				: undefined,
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
index 29166c25d352..32c55d4f4661 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
@@ -16,11 +16,13 @@ import { useMuteUserAction } from './actions/useMuteUserAction';
 import { useRedirectModerationConsole } from './actions/useRedirectModerationConsole';
 import { useRemoveUserAction } from './actions/useRemoveUserAction';
 
+export type UserInfoActionType = 'communication' | 'privileges' | 'management';
+
 export type UserInfoAction = {
 	content: ReactNode;
 	icon?: ComponentProps<typeof Icon>['name'];
 	onClick: () => void;
-	type?: 'communication' | 'privileges' | 'management';
+	type?: UserInfoActionType;
 	color?: string;
 };
 
@@ -109,7 +111,7 @@ export const useUserInfoActions = (
 				}, [] as UserMenuAction);
 
 		return { actions: options, menuActions };
-	}, [userinfoActions]);
+	}, [size, userinfoActions]);
 
 	return actionSpread;
 };

From ea86dcbba0f47727aff96ae922e917beb6506b5e Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 31 Jul 2023 11:34:40 -0300
Subject: [PATCH 35/43] fix types

---
 apps/meteor/client/hooks/useAppActionButtons.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts
index c39f2166863d..b90f7f6df6b0 100644
--- a/apps/meteor/client/hooks/useAppActionButtons.ts
+++ b/apps/meteor/client/hooks/useAppActionButtons.ts
@@ -9,7 +9,7 @@ import type { MessageBoxAction } from '../../app/ui-utils/client/lib/messageBox'
 import { Utilities } from '../../ee/lib/misc/Utilities';
 import type { GenericMenuItemProps } from '../components/GenericMenu/GenericMenuItem';
 import { useRoom } from '../views/room/contexts/RoomContext';
-import type { ToolboxAction } from '../views/room/lib/Toolbox';
+import type { ToolboxActionConfig } from '../views/room/lib/Toolbox';
 import { useApplyButtonFilters, useApplyButtonAuthFilter } from './useApplyButtonFilters';
 import { useUiKitActionManager } from './useUiKitActionManager';
 
@@ -132,7 +132,7 @@ export const useRoomActionAppsActionButtons = (context?: MessageActionContext) =
 					return applyButtonFilters(action);
 				})
 				.map((action) => {
-					const item: [string, ToolboxAction] = [
+					const item: [string, ToolboxActionConfig] = [
 						action.actionId,
 						{
 							id: action.actionId,
@@ -159,7 +159,7 @@ export const useRoomActionAppsActionButtons = (context?: MessageActionContext) =
 	return {
 		...result,
 		data,
-	} as UseQueryResult<[string, ToolboxAction][]>;
+	} as UseQueryResult<[string, ToolboxActionConfig][]>;
 };
 
 export const useMessageActionAppsActionButtons = (context?: MessageActionContext) => {

From e7fa9a56d5fdaf9ba4bbd7e86aeab87ed62573c7 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Thu, 3 Aug 2023 12:46:42 -0300
Subject: [PATCH 36/43] fix apps items

---
 apps/meteor/client/hooks/useAppActionButtons.ts                  | 1 -
 .../client/views/room/providers/hooks/useAppsRoomActions.ts      | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts
index b90f7f6df6b0..71b589c92963 100644
--- a/apps/meteor/client/hooks/useAppActionButtons.ts
+++ b/apps/meteor/client/hooks/useAppActionButtons.ts
@@ -149,7 +149,6 @@ export const useRoomActionAppsActionButtons = (context?: MessageActionContext) =
 									appId: action.appId,
 									payload: { context: action.context },
 								}),
-							type: 'apps',
 						},
 					];
 					return item;
diff --git a/apps/meteor/client/views/room/providers/hooks/useAppsRoomActions.ts b/apps/meteor/client/views/room/providers/hooks/useAppsRoomActions.ts
index e819c634ecc2..e20f1465e2dc 100644
--- a/apps/meteor/client/views/room/providers/hooks/useAppsRoomActions.ts
+++ b/apps/meteor/client/views/room/providers/hooks/useAppsRoomActions.ts
@@ -31,6 +31,7 @@ export const useAppsRoomActions = () => {
 							appId: action.appId,
 							payload: { context: action.context },
 						}),
+					type: 'apps',
 				}),
 			) ?? [],
 		[actionManager, applyButtonFilters, result.data, room._id],

From 28a2b922db6f9c1451787d20e6a8a2e094a0c620 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Fri, 4 Aug 2023 15:51:38 -0300
Subject: [PATCH 37/43] re-ordering room header items

---
 .../client/hooks/roomActions/useAutotranslateRoomAction.ts      | 2 +-
 .../meteor/client/hooks/roomActions/useMembersListRoomAction.ts | 2 +-
 apps/meteor/client/hooks/roomActions/useMentionsRoomAction.ts   | 2 +-
 .../client/hooks/roomActions/usePinnedMessagesRoomAction.ts     | 2 +-
 .../client/hooks/roomActions/usePushNotificationsRoomAction.ts  | 2 +-
 .../client/hooks/roomActions/useRocketSearchRoomAction.ts       | 2 +-
 .../client/hooks/roomActions/useUploadedFilesListRoomAction.ts  | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/meteor/client/hooks/roomActions/useAutotranslateRoomAction.ts b/apps/meteor/client/hooks/roomActions/useAutotranslateRoomAction.ts
index 2500ae06c046..ba285d4116eb 100644
--- a/apps/meteor/client/hooks/roomActions/useAutotranslateRoomAction.ts
+++ b/apps/meteor/client/hooks/roomActions/useAutotranslateRoomAction.ts
@@ -22,7 +22,7 @@ export const useAutotranslateRoomAction = () => {
 			tabComponent: AutoTranslate,
 			order: 20,
 			full: true,
-			type: 'organization',
+			type: 'customization',
 		};
 	}, [enabled, permitted]);
 };
diff --git a/apps/meteor/client/hooks/roomActions/useMembersListRoomAction.ts b/apps/meteor/client/hooks/roomActions/useMembersListRoomAction.ts
index 17ad5daf092d..2d55d20aa99d 100644
--- a/apps/meteor/client/hooks/roomActions/useMembersListRoomAction.ts
+++ b/apps/meteor/client/hooks/roomActions/useMembersListRoomAction.ts
@@ -22,7 +22,7 @@ export const useMembersListRoomAction = () => {
 			title: team ? 'Teams_members' : 'Members',
 			icon: 'members',
 			tabComponent: MemberListRouter,
-			order: 5,
+			order: 7,
 		};
 	}, [broadcast, permittedToViewBroadcastMemberList, team]);
 };
diff --git a/apps/meteor/client/hooks/roomActions/useMentionsRoomAction.ts b/apps/meteor/client/hooks/roomActions/useMentionsRoomAction.ts
index 7a7675a8fbcb..0dc4a6f5508c 100644
--- a/apps/meteor/client/hooks/roomActions/useMentionsRoomAction.ts
+++ b/apps/meteor/client/hooks/roomActions/useMentionsRoomAction.ts
@@ -12,7 +12,7 @@ export const useMentionsRoomAction = () => {
 			title: 'Mentions',
 			icon: 'at',
 			tabComponent: MentionsTab,
-			order: 9,
+			order: 6,
 			type: 'organization',
 		}),
 		[],
diff --git a/apps/meteor/client/hooks/roomActions/usePinnedMessagesRoomAction.ts b/apps/meteor/client/hooks/roomActions/usePinnedMessagesRoomAction.ts
index 71bb533beb08..8a2fc47fcc95 100644
--- a/apps/meteor/client/hooks/roomActions/usePinnedMessagesRoomAction.ts
+++ b/apps/meteor/client/hooks/roomActions/usePinnedMessagesRoomAction.ts
@@ -29,7 +29,7 @@ export const usePinnedMessagesRoomAction = () => {
 				tooltip: t('core.Pinned_messages_unavailable_for_federation'),
 				disabled: true,
 			}),
-			order: 11,
+			order: 9,
 			type: 'organization',
 		};
 	}, [enabled, federated, t]);
diff --git a/apps/meteor/client/hooks/roomActions/usePushNotificationsRoomAction.ts b/apps/meteor/client/hooks/roomActions/usePushNotificationsRoomAction.ts
index f04bbaa9c28b..cb8e3a41843f 100644
--- a/apps/meteor/client/hooks/roomActions/usePushNotificationsRoomAction.ts
+++ b/apps/meteor/client/hooks/roomActions/usePushNotificationsRoomAction.ts
@@ -20,7 +20,7 @@ export const usePushNotificationsRoomAction = () => {
 			title: 'Notifications_Preferences',
 			icon: 'bell',
 			tabComponent: NotificationPreferences,
-			order: 8,
+			order: 11,
 			type: 'customization',
 		};
 	}, [capable]);
diff --git a/apps/meteor/client/hooks/roomActions/useRocketSearchRoomAction.ts b/apps/meteor/client/hooks/roomActions/useRocketSearchRoomAction.ts
index f1ec6b4d9596..22645154cb39 100644
--- a/apps/meteor/client/hooks/roomActions/useRocketSearchRoomAction.ts
+++ b/apps/meteor/client/hooks/roomActions/useRocketSearchRoomAction.ts
@@ -12,7 +12,7 @@ export const useRocketSearchRoomAction = () => {
 			title: 'Search_Messages',
 			icon: 'magnifier',
 			tabComponent: MessageSearchTab,
-			order: 6,
+			order: 5,
 		}),
 		[],
 	);
diff --git a/apps/meteor/client/hooks/roomActions/useUploadedFilesListRoomAction.ts b/apps/meteor/client/hooks/roomActions/useUploadedFilesListRoomAction.ts
index d98a08c55ea9..65d762ce06c4 100644
--- a/apps/meteor/client/hooks/roomActions/useUploadedFilesListRoomAction.ts
+++ b/apps/meteor/client/hooks/roomActions/useUploadedFilesListRoomAction.ts
@@ -12,7 +12,7 @@ export const useUploadedFilesListRoomAction = () => {
 			title: 'Files',
 			icon: 'clip',
 			tabComponent: RoomFiles,
-			order: 7,
+			order: 8,
 			type: 'organization',
 		};
 	}, []);

From 654f4e98f8f17beb3c5194b72aa13f65c553fb7e Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 7 Aug 2023 07:51:09 -0300
Subject: [PATCH 38/43] fix type

---
 apps/meteor/client/hooks/useAppActionButtons.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts
index 71b589c92963..042f802b770d 100644
--- a/apps/meteor/client/hooks/useAppActionButtons.ts
+++ b/apps/meteor/client/hooks/useAppActionButtons.ts
@@ -9,7 +9,7 @@ import type { MessageBoxAction } from '../../app/ui-utils/client/lib/messageBox'
 import { Utilities } from '../../ee/lib/misc/Utilities';
 import type { GenericMenuItemProps } from '../components/GenericMenu/GenericMenuItem';
 import { useRoom } from '../views/room/contexts/RoomContext';
-import type { ToolboxActionConfig } from '../views/room/lib/Toolbox';
+import type { RoomToolboxActionConfig } from '../views/room/contexts/RoomToolboxContext';
 import { useApplyButtonFilters, useApplyButtonAuthFilter } from './useApplyButtonFilters';
 import { useUiKitActionManager } from './useUiKitActionManager';
 
@@ -132,7 +132,7 @@ export const useRoomActionAppsActionButtons = (context?: MessageActionContext) =
 					return applyButtonFilters(action);
 				})
 				.map((action) => {
-					const item: [string, ToolboxActionConfig] = [
+					const item: [string, RoomToolboxActionConfig] = [
 						action.actionId,
 						{
 							id: action.actionId,

From 64353784998e9cafc7a6c55ab18bc13ef7452351 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Mon, 7 Aug 2023 09:29:45 -0300
Subject: [PATCH 39/43] fix type again

---
 apps/meteor/client/hooks/useAppActionButtons.ts |  2 +-
 yarn.lock                                       | 16 +---------------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts
index 042f802b770d..c5b729c3bd50 100644
--- a/apps/meteor/client/hooks/useAppActionButtons.ts
+++ b/apps/meteor/client/hooks/useAppActionButtons.ts
@@ -158,7 +158,7 @@ export const useRoomActionAppsActionButtons = (context?: MessageActionContext) =
 	return {
 		...result,
 		data,
-	} as UseQueryResult<[string, ToolboxActionConfig][]>;
+	} as UseQueryResult<[string, RoomToolboxActionConfig][]>;
 };
 
 export const useMessageActionAppsActionButtons = (context?: MessageActionContext) => {
diff --git a/yarn.lock b/yarn.lock
index 9411b87d17f9..2ab5f1b5134e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12271,21 +12271,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/webpack@npm:^4, @types/webpack@npm:~4.41.33":
-  version: 4.41.33
-  resolution: "@types/webpack@npm:4.41.33"
-  dependencies:
-    "@types/node": "*"
-    "@types/tapable": ^1
-    "@types/uglify-js": "*"
-    "@types/webpack-sources": "*"
-    anymatch: ^3.0.0
-    source-map: ^0.6.0
-  checksum: 5f64818128c94026be0e43e77d687e2d90f0da526a3a7c308c6a0bb12e93a35c9243be427bbf6865f64fd71dc5b32715af9b9da0cd6ae8335081b6db995bad2b
-  languageName: node
-  linkType: hard
-
-"@types/webpack@npm:^4.41.26, @types/webpack@npm:^4.41.8":
+"@types/webpack@npm:^4, @types/webpack@npm:^4.41.26, @types/webpack@npm:^4.41.8, @types/webpack@npm:~4.41.33":
   version: 4.41.33
   resolution: "@types/webpack@npm:4.41.33"
   dependencies:

From 823670327c088e83d542e46952266beccf6ec6d6 Mon Sep 17 00:00:00 2001
From: guijun13 <guilhermejun13.grillo@gmail.com>
Date: Tue, 8 Aug 2023 13:31:11 -0300
Subject: [PATCH 40/43] fix conflicts

---
 .../meteor/client/views/room/UserCard/UserCardWithData.tsx | 2 +-
 .../views/room/contextualBar/UserInfo/UserInfoActions.tsx  | 4 ----
 .../useUserInfoActions/actions/useRemoveUserAction.tsx     | 7 -------
 3 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
index 20422b0bf9ba..4646201694a7 100644
--- a/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
+++ b/apps/meteor/client/views/room/UserCard/UserCardWithData.tsx
@@ -75,7 +75,7 @@ const UserCardWithData = ({ username, target, rid, open, onClose }: UserCardWith
 			return null;
 		}
 
-		return <GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuOptions} placement='bottom-start' mi={2} />;
+		return <GenericMenu title={t('More')} key='menu' data-qa-id='menu' sections={menuOptions} placement='bottom-start' />;
 	}, [menuOptions, t]);
 
 	const actions = useMemo(() => {
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
index 3d84d40d15df..f0ecdc52cca6 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
@@ -36,11 +36,7 @@ const UserInfoActions = ({ user, rid, backToList }: UserInfoActionsProps): React
 				data-qa-id='UserUserInfo-menu'
 				sections={menuOptions}
 				placement='bottom-end'
-				mi={4}
-				secondary
 				small={false}
-				maxHeight='initial'
-				flexShrink={0}
 				data-qa='UserUserInfo-menu'
 			/>
 		);
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
index f1b1b7e93fa2..68b628f89bd6 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -96,13 +96,6 @@ export const useRemoveUserAction = (
 						onClick: removeUserOptionAction,
 						type: 'management' as UserInfoActionType,
 						color: 'alert',
-						// label: (
-						// 	<Box color='status-font-on-danger'>
-						// 		<Icon mie={4} name='cross' size='x20' />
-						// 		{room?.teamMain ? t('Remove_from_team') : t('Remove_from_room')}
-						// 	</Box>
-						// ),
-						action: removeUserOptionAction,
 				  }
 				: undefined,
 		[room, roomCanRemove, userCanRemove, removeUserOptionAction, t],

From e160db53eff6670e2dd1f76758bd91258b7b54a6 Mon Sep 17 00:00:00 2001
From: gabriellsh <gabriel.henriques@rocket.chat>
Date: Thu, 10 Aug 2023 15:05:54 -0300
Subject: [PATCH 41/43] Fix e2e tests

---
 .../room/Header/RoomToolbox/RoomToolbox.tsx      | 13 ++++++++-----
 apps/meteor/tests/e2e/e2e-encryption.spec.ts     | 16 ++++++++--------
 .../e2e/page-objects/fragments/home-flextab.ts   | 10 +++++++---
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx b/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx
index 7577c8cab56d..98a039fb9b0f 100644
--- a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx
+++ b/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx
@@ -33,11 +33,14 @@ const RoomToolbox = ({ className }: RoomToolboxProps) => {
 	const hiddenActions = (isMobile ? actions : normalActions.slice(6))
 		.filter((item) => !item.disabled && !item.featured)
 		.map((item) => ({
-			key: item.id,
-			content: t(item.title),
-			onClick: (): void => {
-				openTab(item.id);
-			},
+			'key': item.id,
+			'content': t(item.title),
+			'onClick':
+				item.action ??
+				((): void => {
+					openTab(item.id);
+				}),
+			'data-qa-id': `ToolBoxAction-${item.icon}`,
 			...item,
 		}))
 		.reduce((acc, item) => {
diff --git a/apps/meteor/tests/e2e/e2e-encryption.spec.ts b/apps/meteor/tests/e2e/e2e-encryption.spec.ts
index f53e1d81e032..34830ed55c65 100644
--- a/apps/meteor/tests/e2e/e2e-encryption.spec.ts
+++ b/apps/meteor/tests/e2e/e2e-encryption.spec.ts
@@ -154,9 +154,8 @@ test.describe.serial('e2e-encryption', () => {
 
 		await expect(page).toHaveURL(`/group/${channelName}`);
 
-		await expect(poHomeChannel.toastSuccess).toBeVisible();
-
 		await poHomeChannel.toastSuccess.locator('button >> i.rcx-icon--name-cross.rcx-icon').click();
+		await page.mouse.move(0, 0);
 
 		await expect(poHomeChannel.content.encryptedRoomHeaderIcon).toBeVisible();
 
@@ -166,8 +165,9 @@ test.describe.serial('e2e-encryption', () => {
 		await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).toBeVisible();
 
 		await poHomeChannel.tabs.kebab.click({ force: true });
-		await expect(poHomeChannel.tabs.btnE2E).toBeVisible();
-		await poHomeChannel.tabs.btnE2E.click({ force: true });
+
+		await expect(poHomeChannel.tabs.btnDisableE2E).toBeVisible();
+		await poHomeChannel.tabs.btnDisableE2E.click({ force: true });
 		await page.waitForTimeout(1000);
 
 		await poHomeChannel.content.sendMessage('hello world not encrypted');
@@ -176,8 +176,8 @@ test.describe.serial('e2e-encryption', () => {
 		await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).not.toBeVisible();
 
 		await poHomeChannel.tabs.kebab.click({ force: true });
-		await expect(poHomeChannel.tabs.btnE2E).toBeVisible();
-		await poHomeChannel.tabs.btnE2E.click({ force: true });
+		await expect(poHomeChannel.tabs.btnEnableE2E).toBeVisible();
+		await poHomeChannel.tabs.btnEnableE2E.click({ force: true });
 		await page.waitForTimeout(1000);
 
 		await poHomeChannel.content.sendMessage('hello world encrypted again');
@@ -200,8 +200,8 @@ test.describe.serial('e2e-encryption', () => {
 		await poHomeChannel.toastSuccess.locator('button >> i.rcx-icon--name-cross.rcx-icon').click();
 
 		await poHomeChannel.tabs.kebab.click({ force: true });
-		await expect(poHomeChannel.tabs.btnE2E).toBeVisible();
-		await poHomeChannel.tabs.btnE2E.click({ force: true });
+		await expect(poHomeChannel.tabs.btnEnableE2E).toBeVisible();
+		await poHomeChannel.tabs.btnEnableE2E.click({ force: true });
 		await page.waitForTimeout(1000);
 
 		await expect(poHomeChannel.content.encryptedRoomHeaderIcon).toBeVisible();
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
index 24cc41a20af2..8e4a6961a790 100644
--- a/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
+++ b/apps/meteor/tests/e2e/page-objects/fragments/home-flextab.ts
@@ -41,11 +41,15 @@ export class HomeFlextab {
 	}
 
 	get btnNotificationPreferences(): Locator {
-		return this.page.locator('[data-qa-id=ToolBoxAction-bell]');
+		return this.page.locator('role=menuitem[name="Notifications Preferences"]');
 	}
 
-	get btnE2E(): Locator {
-		return this.page.locator('[data-qa-id=ToolBoxAction-key]');
+	get btnDisableE2E(): Locator {
+		return this.page.locator('role=menuitem[name="Disable E2E"]');
+	}
+
+	get btnEnableE2E(): Locator {
+		return this.page.locator('role=menuitem[name="Enable E2E"]');
 	}
 
 	get flexTabViewThreadMessage(): Locator {

From 6bd72f4e07631eaf2e27b1211191b1d3fbe88d9e Mon Sep 17 00:00:00 2001
From: gabriellsh <gabriel.henriques@rocket.chat>
Date: Mon, 14 Aug 2023 11:30:37 -0300
Subject: [PATCH 42/43] refactor

---
 .../actions/useRemoveUserAction.tsx           |  6 +--
 .../useUserInfoActions/useUserInfoActions.ts  | 42 +++++++------------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
index 68b628f89bd6..583260a2d166 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useRemoveUserAction.tsx
@@ -11,7 +11,7 @@ import * as Federation from '../../../../../lib/federation/Federation';
 import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
 import RemoveUsersModal from '../../../../teams/contextualBar/members/RemoveUsersModal';
 import { getRoomDirectives } from '../../../lib/getRoomDirectives';
-import type { UserInfoAction, UserInfoActionType } from '../useUserInfoActions';
+import type { UserInfoAction } from '../useUserInfoActions';
 
 // TODO: Remove endpoint concatenation
 export const useRemoveUserAction = (
@@ -94,8 +94,8 @@ export const useRemoveUserAction = (
 						content: room?.teamMain ? t('Remove_from_team') : t('Remove_from_room'),
 						icon: 'cross' as const,
 						onClick: removeUserOptionAction,
-						type: 'management' as UserInfoActionType,
-						color: 'alert',
+						type: 'management' as const,
+						variant: 'danger' as const,
 				  }
 				: undefined,
 		[room, roomCanRemove, userCanRemove, removeUserOptionAction, t],
diff --git a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
index 32c55d4f4661..b7fd5c95d587 100644
--- a/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
+++ b/apps/meteor/client/views/room/hooks/useUserInfoActions/useUserInfoActions.ts
@@ -1,6 +1,6 @@
 import type { IRoom, IUser } from '@rocket.chat/core-typings';
 import type { Icon } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps } from 'react';
 import { useMemo } from 'react';
 
 import type { GenericMenuItemProps } from '../../../../components/GenericMenu/GenericMenuItem';
@@ -19,11 +19,11 @@ import { useRemoveUserAction } from './actions/useRemoveUserAction';
 export type UserInfoActionType = 'communication' | 'privileges' | 'management';
 
 export type UserInfoAction = {
-	content: ReactNode;
+	content: string;
 	icon?: ComponentProps<typeof Icon>['name'];
 	onClick: () => void;
 	type?: UserInfoActionType;
-	color?: string;
+	variant?: 'danger';
 };
 
 type UserMenuAction = {
@@ -83,32 +83,22 @@ export const useUserInfoActions = (
 
 		const options = entries.slice(0, size);
 		const slicedOptions = entries.slice(size, entries.length);
-		const menu = slicedOptions.length ? Object.fromEntries(slicedOptions) : undefined;
 
-		const menuActions =
-			menu !== undefined &&
-			Object.values(menu)
-				.map((item) => ({
-					variant: item.color === 'alert' && ('danger' as const),
-					id: item.content as string,
-					content: item.content,
-					icon: item.icon,
-					onClick: item.onClick,
-					type: item.type,
-				}))
-				.reduce((acc, item) => {
-					const group = item.type ? item.type : '';
-					const section = acc.find((section: { id: string }) => section.id === group);
-					if (section) {
-						section.items.push(item);
-						return acc;
-					}
+		const menuActions = slicedOptions.reduce((acc, [_key, item]) => {
+			const group = item.type ? item.type : '';
+			const section = acc.find((section: { id: string }) => section.id === group);
 
-					const newSection = { id: group, title: '', items: [item] };
-					acc.push(newSection);
+			const newItem = { ...item, id: item.content };
+			if (section) {
+				section.items.push(newItem);
+				return acc;
+			}
 
-					return acc;
-				}, [] as UserMenuAction);
+			const newSection = { id: group, title: '', items: [newItem] };
+			acc.push(newSection);
+
+			return acc;
+		}, [] as UserMenuAction);
 
 		return { actions: options, menuActions };
 	}, [size, userinfoActions]);

From 50dfbce246b4214a138ea66ffe83a0411b7dca13 Mon Sep 17 00:00:00 2001
From: gabriellsh <gabriel.henriques@rocket.chat>
Date: Mon, 14 Aug 2023 11:38:40 -0300
Subject: [PATCH 43/43] reset useAppActionButtons file

---
 .../client/hooks/useAppActionButtons.ts       | 46 -------------------
 1 file changed, 46 deletions(-)

diff --git a/apps/meteor/client/hooks/useAppActionButtons.ts b/apps/meteor/client/hooks/useAppActionButtons.ts
index c5b729c3bd50..b4020013d147 100644
--- a/apps/meteor/client/hooks/useAppActionButtons.ts
+++ b/apps/meteor/client/hooks/useAppActionButtons.ts
@@ -8,8 +8,6 @@ import type { MessageActionConfig, MessageActionContext } from '../../app/ui-uti
 import type { MessageBoxAction } from '../../app/ui-utils/client/lib/messageBox';
 import { Utilities } from '../../ee/lib/misc/Utilities';
 import type { GenericMenuItemProps } from '../components/GenericMenu/GenericMenuItem';
-import { useRoom } from '../views/room/contexts/RoomContext';
-import type { RoomToolboxActionConfig } from '../views/room/contexts/RoomToolboxContext';
 import { useApplyButtonFilters, useApplyButtonAuthFilter } from './useApplyButtonFilters';
 import { useUiKitActionManager } from './useUiKitActionManager';
 
@@ -117,50 +115,6 @@ export const useUserDropdownAppsActionButtons = () => {
 	} as UseQueryResult<GenericMenuItemProps[]>;
 };
 
-export const useRoomActionAppsActionButtons = (context?: MessageActionContext) => {
-	const result = useAppActionButtons('roomAction');
-	const actionManager = useUiKitActionManager();
-	const applyButtonFilters = useApplyButtonFilters();
-	const room = useRoom();
-	const data = useMemo(
-		() =>
-			result.data
-				?.filter((action) => {
-					if (context && ['group', 'channel', 'live', 'team', 'direct', 'direct_multiple'].includes(context)) {
-						return false;
-					}
-					return applyButtonFilters(action);
-				})
-				.map((action) => {
-					const item: [string, RoomToolboxActionConfig] = [
-						action.actionId,
-						{
-							id: action.actionId,
-							icon: undefined as any, // Apps won't provide icons for now
-							order: 300, // Make sure the button only shows up inside the room toolbox
-							title: Utilities.getI18nKeyForApp(action.labelI18n, action.appId),
-							groups: ['group', 'channel', 'live', 'team', 'direct', 'direct_multiple'],
-							// Filters were applied in the applyButtonFilters function
-							// if the code made it this far, the button should be shown
-							action: () =>
-								void actionManager.triggerActionButtonAction({
-									rid: room._id,
-									actionId: action.actionId,
-									appId: action.appId,
-									payload: { context: action.context },
-								}),
-						},
-					];
-					return item;
-				}),
-		[actionManager, applyButtonFilters, context, result.data, room._id],
-	);
-	return {
-		...result,
-		data,
-	} as UseQueryResult<[string, RoomToolboxActionConfig][]>;
-};
-
 export const useMessageActionAppsActionButtons = (context?: MessageActionContext) => {
 	const result = useAppActionButtons('messageAction');
 	const actionManager = useUiKitActionManager();